A method for developing and using composite primitives for configuration tools
By establishing a correspondence between measurement points and mapping names, drawing and rendering combined graphic elements solves the efficiency problem of binding multiple measurement points of the same type of equipment in configuration tools, and realizes the rapid drawing and dynamic data updating of combined graphic elements.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING NARI DIGITAL TECH CO LTD
- Filing Date
- 2022-10-12
- Publication Date
- 2026-06-30
AI Technical Summary
Existing configuration tools cannot quickly bind multiple measurement points of the same type of equipment, resulting in inefficient drawing methods.
By establishing a correspondence between the measurement points of the device and their mapping names, combined graphic elements are drawn, and rendering and data processing are performed in the configuration screen. AJAX interaction and JS scripts are used to parse SVG filenames to achieve dynamic data refresh of combined graphic elements.
It improves the efficiency of binding measurement points for similar devices, reduces the error rate, and enables real-time data rendering and dynamic updating of combined graphic elements on the web.
Smart Images

Figure CN115599365B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to a method for developing and using combined primitives for configuration tools, belonging to the field of energy technology. Background Technology
[0002] The configuration tool is a software platform and development environment for the monitoring layer of automated control systems, geared towards data acquisition and monitoring. It provides users with a user-friendly development interface through flexible configuration methods and simple operation. The platform includes a rich library of modular elements and advanced controls, enabling simple and quick implementation of various monitoring layer functions. By working in conjunction with other technology platform components, the configuration tool can rapidly build data analysis and situation monitoring systems, achieving seamless integration with visualization and providing a one-stop solution for process monitoring and intelligent operation.
[0003] Existing configuration tool drawing methods cannot meet the needs of configuration tools for quickly binding multiple measurement points to similar types of devices. Summary of the Invention
[0004] To address the shortcomings of existing technologies, the present invention aims to provide a method for developing and using combined graphical elements in configuration tools, thereby solving the problem that existing configuration tool drawing methods cannot meet the requirement of quickly binding multiple measurement points to similar types of devices in configuration tools.
[0005] To achieve the above objectives, the present invention adopts the following technical solution:
[0006] A method for developing and using composite primitives for configuration tools includes the following steps:
[0007] Establish a correspondence between the measurement points of the device and the mapping names of the measurement points of the device;
[0008] Based on the equipment, equipment features, and equipment measurement points, draw combined graphic elements;
[0009] Drawing configuration screens based on combined graphic elements;
[0010] Render the configuration screen;
[0011] Analyze the rendered configuration screen to obtain the data of the combined graphic elements in the configuration screen;
[0012] Process the data of the combined graphic elements.
[0013] Furthermore, the aforementioned step of establishing the correspondence between the measurement points of the device and the mapping names of the measurement points of the device includes:
[0014] Create device models, which are collections of devices of the same type or combinations of devices of the same type;
[0015] Under the equipment model, establish equipment model information. The equipment model information includes basic attributes, fundamental attributes, and measurement point mapping names. The basic attributes include equipment model ID and equipment model code. The fundamental attributes include equipment ID, equipment code, and equipment name of each device under the equipment model.
[0016] Establish equipment information for each device under the equipment model. The information for a single device includes the measurement point and the basic attributes and measurement point mapping name assigned to that device based on the equipment model information.
[0017] Each device's device information is matched one-to-one with the measurement point mapping name, and then bound together.
[0018] Furthermore, the aforementioned steps for drawing composite primitives include:
[0019] Based on the equipment, the equipment measurement point mapping name, and the measurement point, draw a combined graphic element SVG graphic style, which includes drawing graphics, text, and lines;
[0020] Define the same mapping name for the measurement points of the same type on different devices of the same type, and bind the mapping name to the corresponding tag in SVG through the tag attribute;
[0021] Based on the characteristics of the device's measurement points, the methods and triggering conditions for animation changes, color changes, graphic changes, and text changes are bound to the tags of the SVG graphics through tag attributes.
[0022] Furthermore, the aforementioned steps for drawing the configuration screen include:
[0023] During the process of drawing the combined graphic elements to the configuration screen, the device binding operation is performed. The device binding operation is based on the measurement point mapping name bound in the combined graphic element and the corresponding device code is bound.
[0024] After the configuration screen is drawn, save the configuration screen SVG file to the database.
[0025] Furthermore, the aforementioned steps for rendering the configuration screen include:
[0026] Parse all referenced composite primitives in the SVG tags of the image to obtain the SVG file name;
[0027] Based on the SVG filename, use AJAX interaction to retrieve the SVG content, insert the SVG content into the page for rendering and display.
[0028] Furthermore, the aforementioned steps for obtaining the SVG filename include:
[0029] Download the SVG file of the combined graphic element according to the reference address of the combined graphic element, and render it into the corresponding tag of the SVG in the configuration screen;
[0030] Run the web frontend and use JavaScript to parse the URL parameters in the address to obtain the SVG filename.
[0031] Furthermore, the aforementioned steps for parsing the configuration screen and obtaining combined image data include:
[0032] Based on the combined graphic element label information obtained from the configuration graphic SVG, it is organized into an array and saved to the web terminal. The combined graphic element label information includes the bound device code, the bound device measurement point mapping name, the combined graphic element label, the label change condition and the label change type.
[0033] Based on the device code and measurement point mapping name in the array, the web client sends a request;
[0034] Based on the request sent by the web client, the backend service finds the corresponding measurement point, retrieves the corresponding real-time data from the real-time database based on the measurement point, translates the retrieved data into real-time data of the measurement point mapping name, and finally combines the real-time data of the measurement point mapping name with the device code and the measurement point mapping name to form JSON data, which is then returned to the web client.
[0035] Furthermore, the aforementioned steps for processing the combined primitive data include:
[0036] Iterate through the array stored on the web client and find the corresponding returned measurement point data based on the device code and measurement point mapping name in the returned JSON data;
[0037] Based on the returned measurement point data and the device measurement point mapping name, combined graphic element label, label change condition, and label change type stored in each array element, the combined graphic element label content is updated. If the data is the same as the previously obtained data, no processing is performed; if the data is not equal, an operation is performed, including showing / hiding, animation change, color change, and text change.
[0038] The beneficial effects achieved by this invention are as follows:
[0039] By combining different measurement points of the same type of equipment to form graphic elements that are directly bound to the equipment, the combined graphic elements can dynamically refresh and render the measurement point data on the web based on the bound equipment code, measurement point mapping name, and processing method. Attached Figure Description
[0040] Figure 1 This is a flowchart of the method for developing, using, rendering, and parsing combined primitives according to the present invention;
[0041] Figure 2This is a schematic diagram of the device model attributes of the present invention;
[0042] Figure 3 This is a schematic diagram of the device attributes of the present invention;
[0043] Figure 4 This is a schematic diagram of the combined primitive attributes of the present invention. Detailed Implementation
[0044] The technical solution of the present invention will be described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the embodiments and specific features in the embodiments are detailed descriptions of the technical solution of the present application, rather than limitations thereof. In the absence of conflict, the embodiments and technical features in the embodiments can be combined with each other.
[0045] This embodiment discloses a method for developing and using combined graphical elements for configuration tools, such as... Figure 1 As shown, it includes the following steps:
[0046] Step 1: Establish the mapping relationship between combined graphic elements and devices, and resolve the mapping problem between measurement points and measurement point names.
[0047] 1.1 Creating a device model: such as Figure 2 As shown, based on the equipment type, similar equipment or combinations of similar equipment are virtualized into equipment models. The equipment model information is entered into the system and saved to the database. The equipment model information includes basic attributes, fundamental attributes, and measurement point mapping names. The basic attributes include the equipment model ID (unique) and equipment model code. The fundamental attributes include the equipment ID, equipment code, equipment name, and other basic information of each device under the equipment model.
[0048] 1.2 After the equipment model is established, create equipment information for each piece of equipment under the equipment model, and assign the basic attributes and measurement point mapping names of the equipment to that equipment in the equipment model. Enter this information into the corresponding equipment information and save it to the database. For example... Figure 3 As shown, the device information also includes measurement points, which refer to various data points of the device. The measurement points are mapped one-to-one with the measurement point names and bound together.
[0049] This step maps measurement points to their mapping names, enabling a unique measurement point to be found within a single device by combining the device code with the measurement point mapping name. Utilizing this feature, after binding device codes to combined graphic elements, each measurement point mapping name within a single device will correspond to a unique measurement point.
[0050] Step 2, develop the combined primitives, including the following steps:
[0051] 2.1 Based on the equipment, the equipment measurement point mapping name, and the measurement point, draw a combined graphic element SVG style, including drawing graphics, text, lines, etc.;
[0052] 2.2 Define the measurement point mapping name by using the same type of equipment and its attributes and measurement point information, so that the same type of measurement points of different equipment of the same type (for example, if the power measurement point of equipment A is a and the power measurement point of equipment B is b, then a and b have the same mapping name c) have the same mapping name, and bind the mapping name to the corresponding tag in SVG through the tag attribute.
[0053] 2.3 Based on the characteristics of the equipment measurement points, the processing methods and triggering conditions for animation changes, color changes, graphic changes, and text changes are bound to the tags of the SVG graphics through tag attributes.
[0054] Create SVG graphics based on devices or combinations of devices. For example... Figure 4 As shown in the figure, the labels in the graph are bound to the relevant device measurement point mapping names, label change conditions, and label change types. Label change conditions include equal to, greater than, less than, etc., and label change types include show / hide, animation change, color change, text change, etc.
[0055] This step allows for the centralized recording of measurement points from different devices of the same type. This improves the efficiency of measurement point binding and reduces the likelihood of incorrect measurement point binding.
[0056] Step 3: Use combined graphic elements to draw a configuration screen to realize the function of displaying real-time data of combined graphic elements in the configuration screen, including the following steps:
[0057] 3.1 Use configuration tools to draw the combined graphic elements onto the configuration screen;
[0058] 3.2 Bind the corresponding device code according to the measurement point mapping name bound in the combined graphic element until the entire configuration screen is drawn;
[0059] 3.3 After the configuration screen is drawn, save the SVG file of the screen generated by the configuration tool to the database.
[0060] This step applies the combined graphic elements to the configuration screen, providing support for displaying data from the combined graphic elements on the configuration screen.
[0061] Step 4, render the combined primitive SVG content, including the following steps:
[0062] 4.1 Parse all referenced combined graphic elements in the SVG tags on the screen, download the SVG file of the combined graphic element according to the reference address, and render it into the corresponding SVG tag on the configuration screen. After the web frontend runs, it uses JavaScript to parse the URL parameter in the browser's address bar to obtain the SVG file name. For example, the URL format in the browser's address bar is as follows: http: / / localhost:9030 / ems.html?fileName=Power Distribution Main Wiring Diagram, and the SVG file name is obtained from the fileName parameter in the URL.
[0063] 4.2 Based on the filename, the web client uses an asynchronous AJAX request to send the filename to the backend to obtain the SVG content. That is, the web client and the backend interact using AJAX. The backend passes the SVG content string to the frontend HTML. After obtaining the SVG content, the frontend HTML inserts the SVG content into the page for rendering and display.
[0064] Replacing the tags referencing composite elements with the composite element SVG content is a prerequisite for parsing composite elements and can also reduce the size of the SVG file.
[0065] Step 5, perform combined primitive analysis, including the following steps:
[0066] 5.1 Obtain all combination element labels in the configuration graphic SVG, and organize them into an array based on the device code bound to the combination element label, the device measurement point mapping name bound to the combination element, the combination element label, the label change condition, and the label change type, and save it to the web terminal.
[0067] 5.2 Based on the device code and measurement point mapping name in the aforementioned array, the web client sends a request.
[0068] 5.3 To obtain device measurement point data, based on the request sent by the web client, the backend service searches for the corresponding measurement point using the device code and measurement point mapping name. Based on the measurement point information, it retrieves the corresponding real-time measurement point data from the real-time database, translates the real-time measurement point data into real-time measurement point mapping name data, and then combines the real-time measurement point mapping name data with the device code and measurement point mapping name to form JSON data: [{Device Code: A, A: [{Measurement Point Mapping Name 1: Real-time Data of Measurement Point Mapping Name 1},...]},..], which is then returned to the web client.
[0069] This step parses all the information of the combined graphic elements in the image and obtains all the data in the combined graphic elements.
[0070] Step 6, perform combined graph data processing, including the following steps:
[0071] 6.1 Iterate through the array saved on the web client and find the corresponding returned measurement point data based on the device code and measurement point mapping name in the returned JSON data;
[0072] 6.2 Then, based on the returned measurement point data and the device measurement point mapping name, combined graphic element label, label change condition and label change type stored in each array element, the content of the combined graphic element label is updated. If the data is the same as the one obtained last time, no processing is performed. If the data is not equal, the display / hide, animation change, color change, text change, etc. are implemented.
[0073] This step enables the combined graphic elements to dynamically refresh and render measurement point data on the web interface based on the bound device code, measurement point mapping name, and processing method.
[0074] The above description is only a preferred embodiment of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the technical principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.
Claims
1. A method for combined graphical element development and use in a configuration tool, comprising: Includes the following steps: Establish a correspondence between the measurement points of the device and the mapping names of the measurement points of the device; Based on the equipment, equipment features, and equipment measurement points, draw combined graphic elements; Drawing configuration screens based on combined graphic elements; Render the configuration screen; Analyze the rendered configuration screen to obtain the data of the combined graphic elements in the configuration screen; Process the data of the combined graphic elements; The step of establishing the correspondence between the measurement points of the device and the mapping names of the measurement points of the device includes: Create a device model, which is a collection of devices of the same type or combinations of devices of the same type; Under the equipment model, establish equipment model information. The equipment model information includes basic attributes, fundamental attributes, and measurement point mapping names. The basic attributes include equipment model ID and equipment model code. The fundamental attributes include equipment ID, equipment code, and equipment name of each device under the equipment model. Establish equipment information for each device under the equipment model. The information for a single device includes the measurement point and the basic attributes and measurement point mapping name assigned to that device based on the equipment model information. Each device's device information is matched one-to-one with the measurement point mapping name, and then bound together.
2. A combined meta object development and use method for a configuration tool according to claim 1, wherein, The steps for drawing combined graphic elements include: Based on the equipment, the equipment measurement point mapping name, and the measurement point, a combined graphic element SVG graphic style is drawn, which includes drawn graphics, text, and lines; Define the same mapping name for the measurement points of the same type on different devices of the same type, and bind the mapping name to the corresponding tag in SVG through the tag attribute; Based on the characteristics of the device's measurement points, the methods and triggering conditions for animation changes, color changes, graphic changes, and text changes are bound to the tags of the SVG graphics through tag attributes.
3. A combined meta object development and use method for a configuration tool according to claim 2, wherein, The steps for drawing the configuration screen include: During the process of drawing the combined graphic elements to the configuration screen, a device binding operation is performed. The device binding operation is based on the measurement point mapping name bound in the combined graphic element and the corresponding device code is bound. After the configuration screen is drawn, save the configuration screen SVG file to the database.
4. The method for developing and using combined primitives for configuration tools according to claim 3, characterized in that, The steps for rendering the configuration screen include: Parse all referenced composite primitives in the SVG tags of the image to obtain the SVG file name; Based on the SVG filename, use AJAX interaction to retrieve the SVG content, insert the SVG content into the page for rendering and display.
5. A method for developing and using combined primitives for configuration tools according to claim 4, characterized in that, The steps for obtaining the SVG filename include: Download the SVG file of the combined graphic element according to the reference address of the combined graphic element, and render it into the corresponding tag of the SVG in the configuration screen; Run the web frontend and use JavaScript to parse the URL parameters in the address to obtain the SVG filename.
6. A method for developing and using combined primitives for configuration tools according to claim 4, characterized in that, The process of parsing and rendering the configuration screen, and obtaining data of the combined graphic elements in the configuration screen, includes: Based on the combined graphic element label information obtained from the configuration graphic SVG, it is organized into an array and saved to the web terminal. The combined graphic element label information includes the bound device code, the bound device measurement point mapping name, the combined graphic element label, the label change condition and the label change type. Based on the device code and measurement point mapping name in the array, the web client sends a request; Based on the request sent by the web client, the backend service finds the corresponding measurement point, retrieves the corresponding real-time data from the real-time database based on the measurement point, translates the retrieved data into real-time data of the measurement point mapping name, and finally combines the real-time data of the measurement point mapping name with the device code and the measurement point mapping name to form JSON data, which is then returned to the web client.
7. A method for developing and using combined primitives for configuration tools according to claim 6, characterized in that, The steps for processing the combined graphic element data include: Iterate through the array stored on the web client and find the corresponding returned measurement point data based on the device code and measurement point mapping name in the returned JSON data; Based on the returned measurement point data and the device measurement point mapping name, combined graphic element label, label change condition, and label change type stored in each array element, the combined graphic element label content is updated. If the data is the same as the previously obtained data, no processing is performed; if the data is not equal, an operation is performed, including showing / hiding, changing animation, changing color, and changing text.