A method and device for generating rendering instructions for SVG dynamic graphic elements in a SCADA system

Abstract

The present invention discloses a method and device for generating rendering instructions for SVG dynamic graphic primitives in a SCADA system. The method comprises obtaining an SVG graphic file, parsing the SVG graphic file to obtain graphic rendering rule data; receiving full section data and change section data sent by the SCADA, and broadcasting the full section data and change section data to each computing task; associating the change section data with graphic rendering rule data, grouping them by graphic primitive templates, and allocating the graphic primitive templates to each computing task for processing; preprocessing expressions in the allocated graphic primitive templates to obtain an instruction set, thereby filling in parameter values in each graphic primitive reference, performing calculations, and obtaining rendering instructions for the SVG dynamic graphic primitives; and pushing the dynamic graphic primitive rendering instructions to a web browser. The present invention optimizes the dynamic graphic primitive calculation process, reduces the amount of calculation, and effectively utilizes Flink's parallel processing mechanism to improve computing efficiency.

Description

Technical Field

[0001] The present invention relates to a method and device for generating rendering instructions of SVG dynamic graphic elements in a SCADA system, belonging to the technical field of dynamic graphic element rendering. Background Art

[0002] With the development of automation technology, enterprises have widely adopted Supervisory Control and Data Acquisition (SCADA) systems to monitor and control on-site operating equipment. Web publishing systems can publish and display real-time operating data, alarm data, and monitoring images from SCADA systems on a Web system, allowing managers to quickly and easily monitor production operations remotely through a browser, laying the foundation for integrated management and control. Real-time image publishing is an important component of a Web publishing system. It typically requires obtaining graphic files, equipment model data, and real-time operating data from SCADA, storing the data in a relational database / real-time database, and then publishing the graphic files (usually in SVG format) via the Web.

[0003] Existing products typically implement dynamic web rendering and access using the following technology: users access published SVG graphics files in their browsers, requesting the latest data from the server via Ajax (or receiving push notifications from the server via WebSockets). Graphics are then dynamically refreshed and rendered based on these data changes. Dynamic graphics rendering requires real-time calculations based on the measurement points and calculation rules defined within the dynamic graphics elements, fetching the latest data from relational databases or real-time databases. This generates real-time rendering instructions (such as changing the text content, visibility, color, position, and shape of the element).

[0004] Since the monitoring screen requires a certain data refresh frequency, the existing calculation method has certain shortcomings in calculation efficiency when there are a large number of SVG graphics accesses and a large amount of dynamic graphic element calculation. Among the existing patented technologies, there are two main methods for real-time graphic element calculation: (1) The Web publishing system provides a JS file, and when the browser loads the graphic file, it parses the screen graphic elements, sends requests to the Web server at regular intervals, obtains real-time values, and performs graphic calculation and rendering by JS; (2) The graphic file is parsed on the server, and the latest data is cyclically obtained from the real-time database / relational database, and real-time calculation is performed, and the calculation results are returned to the browser for graphic rendering.

[0005] In method (1), JS is a scripting language, and its dynamic element calculation speed is slow. When there are many dynamic elements in the screen, it will cause the browser to freeze. Method (2) requires the server to calculate all user-requested graphics at regular intervals. When a large number of graphics need to be processed, it puts a lot of pressure on the server, and the interval length of the loop calculation is unstable. In addition, during a graphic refresh action, both methods need to read data from the database and perform a real-time calculation process of dynamic elements in units of SVG graphics to complete the graphics rendering, which has a certain impact on efficiency. Summary of the Invention

[0006] The purpose of the present invention is to overcome the deficiencies in the prior art and provide a method for generating rendering instructions for SVG dynamic graphics in a SCADA system. The method optimizes the dynamic graphics calculation process, reduces the amount of calculation, and effectively utilizes Flink's parallel processing mechanism to improve computing efficiency.

[0007] To achieve the above object, the present invention is implemented by adopting the following technical solutions:

[0008] In a first aspect, the present invention provides a method for generating rendering instructions for SVG dynamic graphic elements in a SCADA system, comprising:

[0009] Obtaining an SVG graphic file, parsing the SVG graphic file to obtain graphic rendering rule data, and caching a copy of the graphic rendering rule data in each computing task in a broadcasting manner;

[0010] Receive the full section data and the changed section data sent by SCADA, broadcast the full section data and the changed section data to each computing task, and cache the latest data in a Map manner;

[0011] Associate the change section data with the graphics rendering rule data, group them by primitive templates, and assign the primitive templates to each computing task for processing;

[0012] The expressions in the allocated primitive template are preprocessed to obtain an instruction set, and then the parameter values in each primitive reference are filled in and calculated to obtain the rendering instructions of the SVG dynamic primitive.

[0013] Furthermore, the obtaining of the SVG graphic file, parsing the SVG graphic file to form graphic rendering rules, and caching a copy of the rules in each computing task in a broadcasting manner includes:

[0014] In Flink, a custom SVG graphics file data source handler is created. During program initialization, all SVG graphics files are loaded and parsed one by one. During program execution, the SVG graphics file storage location is monitored in real time. If a file is updated, the updated SVG graphics file is parsed one by one.

[0015] Parse the element template element in each SVG graphic file <symbol>, each reference element <use>, obtain the parameter definition and calculation expression of the specific dynamic primitive calculation;

[0016] Based on the parsed results, define the basic graphics rendering rule set {base_rule} in Flink;

[0017] The basic graphics rendering rule set is passed through the groupBy operator to perform a grouping operation based on symbolId+paramIds, and then passed through the agg.collect_set operator to output the grouped dataset {group_rule}; the processed grouped dataset is cached in each computing task in a broadcast form.

[0018] Furthermore, the basic graphics rendering rule set is processed through the flat_map operator and the distinct operator into a measurement point-element reference element relationship dataset {relation_rule} in the form of {measurement point id, useId}; the processed dataset is cached in each computing task in a broadcast form.

[0019] Furthermore, the parameter definition includes a parameter name and a corresponding real-time measurement point ID.

[0020] Furthermore, the changing section data is associated with the graphics rendering rule data, grouped by primitive template, and assigned to parallel computing tasks for processing, including:

[0021] The change section data is associated with the grouping data set {group_rule} in the form of a data set to obtain a reference set of the to-be-calculated graphics element {use_cal}; wherein the attributes of the reference set of the to-be-calculated graphics element {use_cal} include: the measurement point pointId, the real-time value of the measurement point, and the reference useId of the graphics element involved in the calculation of the measurement point;

[0022] The set of primitive references to be calculated flows through the groupBy operator and is grouped by symbolId, and primitive references of the same primitive template are assigned to one calculation task.

[0023] Furthermore, the expression in the allocated primitive template is preprocessed to obtain an instruction set, and then the parameter value in each primitive reference is filled in and calculated to obtain the rendering instruction of the SVG dynamic primitive, including:

[0024] Obtain the basic rendering rule set {base_rule}, find the calculation expression and parameter definition under it according to the useId in the primitive reference set {use_cal} to be calculated, use QLExpress to preprocess the calculation expression in the primitive to be calculated, and generate an instruction set containing parameter names and syntax tree structure;

[0025] According to the parameter definition, the changed data value is filled into the corresponding parameter value, and other parameter values are obtained from the latest data. After all parameter values are filled, the QLExpress.excute method is called to load the corresponding instruction set according to the expression, perform real-time calculations, and obtain the rendering instructions of the SVG dynamic graphics element.

[0026] Furthermore, the dynamic element rendering instructions and the corresponding useId are pushed to the web browser via websocket in json format.

[0027] In a second aspect, the present invention provides a device for generating rendering instructions for SVG dynamic graphic elements in a SCADA system, comprising:

[0028] A graphics processing module is configured to obtain an SVG graphics file, parse the SVG graphics file to obtain graphics rendering rule data, and cache a copy of the graphics rendering rule data in each computing task in a broadcast format;

[0029] The broadcast module is used to receive the full section data and the changed section data sent by SCADA, broadcast the full section data and the changed section data to each computing task, and cache the latest data in a Map manner;

[0030] The allocation module is used to associate the change section data with the graphics rendering rule data, group them by primitive templates, and allocate the primitive templates to each computing task for processing;

[0031] The preprocessing and calculation unit preprocesses the expressions in the allocated primitive template to obtain an instruction set, and then fills in the parameter values in each primitive reference, performs calculations, and obtains rendering instructions for the SVG dynamic primitive.

[0032] In a third aspect, the present invention provides a device for generating rendering instructions for SVG dynamic graphic elements in a SCADA system, comprising a processor and a storage medium;

[0033] The storage medium is used to store instructions;

[0034] The processor is configured to operate according to the instructions to execute the steps of any of the aforementioned methods.

[0035] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which implements the steps of any of the aforementioned methods when executed by a processor.

[0036] Compared with the prior art, the present invention has the following beneficial effects:

[0037] In the dynamic primitive calculation process, the present invention only calculates the primitive references and primitive templates corresponding to the real-time changing data, which reduces the amount of calculation compared to calculating all the primitives in the SVG graphic. Furthermore, the primitive templates and the measurement points involved in the calculation are grouped and deduplicated, which reduces the amount of repeated calculation when multiple graphics reference the same primitives and the same measurement points.

[0038] In terms of computing architecture, this paper uses the Flink computing engine, groups graph elements by template, and distributes them to parallel computing tasks, effectively utilizing computing resources. Within a computing task, the computational expression is first parsed to generate an instruction set. Calculations referenced by different graph elements within the same graph element template can be directly executed using the instruction set simply by replacing parameters, effectively reducing the expression parsing time for each dynamic graph element calculation.

[0039] Through the above method, the overall calculation and rendering time of SVG graphics is effectively shortened, and it supports second-level refresh when a large number of SVG graphics are accessed concurrently. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 This is a flow chart of a method for generating rendering instructions for SVG dynamic graphic elements in a SCADA system provided by an embodiment of the present invention;

[0041] Figure 2 This is a schematic diagram of the steps for processing a computing task provided by an embodiment of the present invention; DETAILED DESCRIPTION

[0042] The present invention will be further described below in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solutions of the present invention and are not intended to limit the scope of protection of the present invention.

[0043] Example 1

[0044] This embodiment introduces a method for generating rendering instructions for SVG dynamic graphic elements in a SCADA system, including:

[0045] Obtaining an SVG graphic file, parsing the SVG graphic file to obtain graphic rendering rule data, and caching a copy of the graphic rendering rule data in each computing task in a broadcasting manner;

[0046] Receive the full section data and the changed section data sent by SCADA, broadcast the full section data and the changed section data to each computing task, and cache the latest data in a Map manner;

[0047] Associate the change section data with the graphics rendering rule data, group them by primitive templates, and assign the primitive templates to each computing task for processing;

[0048] The expressions in the assigned element template are preprocessed to obtain an instruction set, which is then used to fill in the parameter values in each element reference and perform calculations to obtain the rendering instructions for the SVG dynamic element. The instructions are then pushed to the web browser, where the web browser parses all dynamic element rendering instructions, dynamically renders the corresponding elements based on the parsing results, and displays them on the front end.

[0049] like Figure 1 As shown, the method for generating rendering instructions for SVG dynamic graphics elements in the SCADA system provided in this embodiment specifically involves the following steps:

[0050] Step SS1:

[0051] Parse the SVG file to form graphics rendering rules, and cache a copy of the rules in each computing task in the form of broadcast.

[0052] Step SS2:

[0053] Receive real-time cross-section data synchronized with SCADA, broadcast the full cross-section data and the changed cross-section data to each computing task, and cache the latest data in a map format. Associate the changed cross-section data with the graphics rendering rule data, group them by graphic element template, and assign them to parallel computing tasks.

[0054] Step SS3:

[0055] Preprocess the expressions in the allocated primitive template to obtain an instruction set, and then fill in the parameter values in each primitive reference for calculation.

[0056] The specific contents of step SS1 are as follows:

[0057] In Flink, a custom SVG graphic file data source handler is created. During program initialization, all SVG files are loaded and parsed one by one. During program execution, the SVG file storage location is monitored in real time. If a file is updated, the updated SVG file is parsed one by one.

[0058] The parsing process is as follows:

[0059] Parse the graphic template elements in each SVG file <symbol>, each reference element <use>, obtain the parameter definition (including parameter name and corresponding real-time measurement point ID) and calculation expression involved in dynamic graphic element calculation.

[0060] Based on the parsed results, define the basic graphics rendering rule set {base_rule} in Flink. The basic rendering rule contains the following properties:

[0061] express: the text of the evaluation expression;

[0062] paramIds: several parameter definitions involved in the calculation, including the parameter name param and the corresponding measurement point pointId, and each parameter definition is separated by a comma;

[0063] useId: reference to the graphic element <use>id;

[0064] symbolId: The referenced element in the graphic template <symbol>id;

[0065] svgId: The SVG graphic file name to which the element belongs.

[0066] Because different SVG graphics often reference the same primitives and parameter definitions, the basic rendering rule set for these graphics is grouped by symbolId + paramIds using the groupBy operator. This is then passed through the agg.collect_set operator to output the grouped dataset {group_rule}. This aggregates the useId and svgId of elements with the same primitive template and parameter definitions, reducing subsequent recalculation. The processed grouped rule set is broadcast and cached within each computation task.

[0067] The basic rendering rule set for the graphics is processed through the flat_map operator and the distinct operator into a dataset of measurement point-element reference element relationships {relation_rule} in the form of {measurement point id, useId}. The processed dataset is broadcast and cached in each computing task.

[0068] The specific contents of step SS2 are as follows:

[0069] After the system receives the full real-time cross-sectional data sent periodically by SCADA and the changed real-time cross-sectional data sent instantly, it will be broadcast to each computing task immediately. Each computing task will globally cache the received data in the form of a Map, with the Key value being the measurement point ID and the Value value being the value of the measurement point, thereby ensuring that each computing task has a copy of the latest full data.

[0070] At the same time, the real-time change data will be associated with the grouped data set {group_rule} in step SS1 in the form of a data set to obtain the reference set of the to-be-calculated graphics element {use_cal}. The attributes of {use_cal} include: measurement point pointId, measurement point real-time value, and the graphics element reference useId of the measurement point involved in the calculation.

[0071] The set of primitive references to be calculated flows through the groupBy operator and is grouped by symbolId, and primitive references of the same primitive template are assigned to one calculation task.

[0072] The specific contents of step SS3 are as follows:

[0073] The computing task is implemented using a custom reduce function. The degree of parallelism can be set in Flink based on the specific computing workload and computing resources. The calculation process is as follows:

[0074] Obtain the base rendering rule set {base_rule} broadcast in step SS1. Find the calculation expression and parameter definitions based on the useId in the primitive reference set {use_cal} to be calculated. Use QLExpress to preprocess the calculation expression in the primitive to be calculated, generating an instruction set containing parameter names and a syntax tree structure. Since the calculation expression for the same primitive template is the same, all corresponding primitive references only need to be processed once.

[0075] According to the parameter definitions, the changed data values are filled in the corresponding parameter values. Other parameter values are obtained from the latest data broadcast in step SS2. After all parameter values are filled in, the QLExpress.execute method is called to load the corresponding instruction set based on the expression, perform real-time calculations, and obtain the rendering instructions for the SVG dynamic element.

[0076] The dynamic element rendering instructions and the corresponding useId are pushed to the web browser in JSON format via websocket. The web browser parses all rendering instructions, dynamically renders the corresponding elements according to the instructions, and displays them on the front end.

[0077] Take the rendering instructions of a certain primitive as an example:

[0078] ["119_141863944193":[{},{"textdyattr":"0","colordyattr":"rgb(255,0,0)"}

[0079] ,{"colordyattr":"rgb(255,0,0)"},{"colordyattr":"rgb(255,0,0)","fillratiodyattr":"0"}]]

[0080] 119_141863944193 is the useId. The following keys, such as textdyattr, colordyattr, and fillratiodyattr, represent the rendering instruction names. The value corresponding to each key is the attribute value to be filled. The instruction names and their corresponding functions are shown in Table 1.

[0081] Table 1 Rendering instruction list

[0082]

[0083] The beneficial effects achieved by the present invention are:

[0084] In the dynamic primitive calculation process, the present invention only calculates the primitive references and primitive templates corresponding to the real-time changing data, which reduces the amount of calculation compared to calculating all the primitives in the SVG graphic. Furthermore, the primitive templates and the measurement points involved in the calculation are grouped and deduplicated, which reduces the amount of repeated calculation when multiple graphics reference the same primitives and the same measurement points.

[0085] In terms of computing architecture, this paper uses the Flink computing engine, groups graph elements by template, and distributes them to parallel computing tasks, effectively utilizing computing resources. Within a computing task, the computational expression is first parsed to generate an instruction set. Calculations referenced by different graph elements within the same graph element template can be directly executed using the instruction set simply by replacing parameters, effectively reducing the expression parsing time for each dynamic graph element calculation.

[0086] Through the above method, the overall calculation and rendering time of SVG graphics is effectively shortened, and it supports second-level refresh when a large number of SVG graphics are accessed concurrently.

[0087] Example 2

[0088] This embodiment provides a device for generating rendering instructions for SVG dynamic graphic elements in a SCADA system, comprising:

[0089] A graphics processing module is configured to obtain an SVG graphics file, parse the SVG graphics file to obtain graphics rendering rule data, and cache a copy of the graphics rendering rule data in each computing task in a broadcast format;

[0090] The broadcast module is used to receive the full section data and the changed section data sent by SCADA, broadcast the full section data and the changed section data to each computing task, and cache the latest data in a Map manner;

[0091] The allocation module is used to associate the change section data with the graphics rendering rule data, group them by primitive templates, and allocate the primitive templates to each computing task for processing;

[0092] The preprocessing and calculation unit preprocesses the expressions in the allocated primitive template to obtain the instruction set, and then fills in the parameter values in each primitive reference, performs calculations, and obtains the rendering instructions of the SVG dynamic primitive.

[0093] Example 3

[0094] This embodiment provides a device for generating rendering instructions for SVG dynamic graphic elements in a SCADA system, including a processor and a storage medium;

[0095] The storage medium is used to store instructions;

[0096] The processor is configured to operate according to the instructions to execute the steps of the method according to any one of the first embodiments.

[0097] Example 4

[0098] This embodiment provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the steps of the method described in Example 1 are implemented.

[0099] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the technical principles of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.< / symbol> < / use> < / use> < / symbol> < / use> < / symbol>

Claims

1. A method for generating rendering instructions for SVG dynamic graphics primitives in a SCADA system, characterized in that: include: Obtaining an SVG graphic file, parsing the SVG graphic file to obtain graphic rendering rule data, and caching a copy of the graphic rendering rule data in each computing task in a broadcasting manner; Receive the full section data and the changed section data sent by SCADA, broadcast the full section data and the changed section data to each computing task, and cache the latest data in a Map manner; Associate the change section data with the graphics rendering rule data, group them by primitive templates, and assign the primitive templates to each computing task for processing; The expressions in the allocated primitive template are preprocessed to obtain an instruction set, and then the parameter values in each primitive reference are filled in and calculated to obtain the rendering instructions of the SVG dynamic primitive.

2. The method for generating rendering instructions for SVG dynamic graphic primitives in the SCADA system according to claim 1, wherein: The obtaining of the SVG graphic file, parsing the SVG graphic file to form graphic rendering rules, and caching a copy of the rules in each computing task in a broadcasting manner includes: In Flink, a custom SVG graphics file data source handler is created. During program initialization, all SVG graphics files are loaded and parsed one by one. During program execution, the SVG graphics file storage location is monitored in real time. If a file is updated, the updated SVG graphics file is parsed one by one. Parse the element template element in each SVG graphic file <symbol>, each reference element <use> , obtain the parameter definition and calculation expression of the specific dynamic primitive calculation;< / use> < / symbol> Based on the parsed results, define the basic graphics rendering rule set {base_rule} in Flink; The basic graphics rendering rule set is passed through the groupBy operator to perform a grouping operation based on symbolId+paramIds, and then passed through the agg.collect_set operator to output the grouped dataset {group_rule}; the processed grouped dataset is cached in each computing task in a broadcast form.

3. The method for generating rendering instructions for SVG dynamic graphic primitives in the SCADA system according to claim 2, wherein: The basic graphics rendering rule set is processed through the flat_map operator and the distinct operator into a measurement point-element reference element relationship dataset {relation_rule} in the form of {measurement point id, useId}; the processed dataset is cached in each computing task in a broadcast form.

4. The method for generating rendering instructions for SVG dynamic graphic primitives in the SCADA system according to claim 3, wherein: The parameter definition includes the parameter name and the corresponding real-time measurement point ID.

5. The method for generating rendering instructions for SVG dynamic graphic primitives in the SCADA system according to claim 4, wherein: The step of associating the change section data with the graphics rendering rule data, grouping them by primitive templates, and assigning them to parallel computing tasks for processing includes: The change section data is associated with the grouping data set {group_rule} in the form of a data set to obtain a reference set of the to-be-calculated graphics element {use_cal}; wherein the attributes of the reference set of the to-be-calculated graphics element {use_cal} include: the measurement point pointId, the real-time value of the measurement point, and the reference useId of the graphics element involved in the calculation of the measurement point; The set of primitive references to be calculated flows through the groupBy operator and is grouped by symbolId, and primitive references of the same primitive template are assigned to one calculation task.

6. The method for generating rendering instructions for SVG dynamic graphic primitives in the SCADA system according to claim 5, wherein: The expression in the allocated primitive template is preprocessed to obtain an instruction set, and then the parameter value in each primitive reference is filled in and calculated to obtain the rendering instruction of the SVG dynamic primitive, including: Obtain the basic rendering rule set {base_rule}, find the calculation expression and parameter definition under it according to the useId in the primitive reference set {use_cal} to be calculated, use QLExpress to preprocess the calculation expression in the primitive to be calculated, and generate an instruction set containing parameter names and syntax tree structure; According to the parameter definition, the changed data value is filled into the corresponding parameter value, and other parameter values are obtained from the latest data. After all parameter values are filled, the QLExpress.excute method is called to load the corresponding instruction set according to the expression, perform real-time calculations, and obtain the rendering instructions of the SVG dynamic graphics element.

7. The method for generating rendering instructions for SVG dynamic graphic primitives in the SCADA system according to claim 6, wherein: Push the dynamic element rendering instructions and the corresponding useId in json format to the web browser through websocket.

8. A rendering instruction generating device for SVG dynamic graphic elements in a SCADA system, characterized in that: include: A graphics processing module is configured to obtain an SVG graphics file, parse the SVG graphics file to obtain graphics rendering rule data, and cache a copy of the graphics rendering rule data in each computing task in a broadcast format; The broadcast module is used to receive the full section data and the changed section data sent by SCADA, broadcast the full section data and the changed section data to each computing task, and cache the latest data in a Map manner; The allocation module is used to associate the change section data with the graphics rendering rule data, group them by primitive templates, and allocate the primitive templates to each computing task for processing; The preprocessing and calculation unit preprocesses the expressions in the allocated primitive template to obtain an instruction set, and then fills in the parameter values in each primitive reference, performs calculations, and obtains rendering instructions for the SVG dynamic primitive.

9. A rendering instruction generating device for SVG dynamic graphic elements in a SCADA system, characterized by: including processors and storage media; The storage medium is used to store instructions; The processor is configured to operate according to the instructions to execute the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images