A real-time data binding and dynamic rendering method for graphic elements based on the Web

Abstract

The present invention discloses a method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal, including providing basic graphic elements through a set editor, users extending by inheriting basic graphics, providing converters to generate graphic elements for complex graphic elements, instantiating graphic elements to the editing area by dragging and dropping to form nodes and connect them, saving data that drives the editor in JSON format, initializing the data, and then adapting the rendered graph to the container size by calculating position information, the runner parsing the JSON, extracting the attribute mapping rules of the node configuration, establishing a mapping from the data source to the node rule information, and finding the node through rule matching after the data source is updated and updating the node variables bound in the rule, making the graph dynamic. The present invention simplifies the system configuration and monitoring process through a graphical interface, allowing non-professional programmers to participate in the design and maintenance of the automation system. It shortens the development cycle of product customization and improves the scalability of the product.

Description

Technical Field

[0001] The present invention relates to the technical field of computer Web development and data visualization, and in particular to a Web-based graphic element real-time data binding and dynamic rendering method. Background Art

[0002] With the advancement and development of intelligent and digital technologies, devices are collecting more and more terminal data. Users urgently need to display more data in an intuitive and clear manner for monitoring and analysis. Web applications can more intuitively display the data that users are interested in.

[0003] Existing web applications require professional programmers to develop and configure the content to be displayed. Current configuration technology solutions have limitations and shortcomings in application, particularly in terms of graphic element generation, system scalability, data coupling, cross-platform compatibility, and consistency between editing and display. The following are some of the problems with existing configuration technology:

[0004] 1. Inconvenient graphic element generation: Existing configuration software is usually cumbersome in terms of graphic element generation. Users need to manually create or modify graphic elements, and there is a lack of efficient tools for batch generation of graphic elements.

[0005] 2. Scalability limitations: Adding special effects and secondary development of graphics elements are usually complicated and lack a flexible expansion mechanism.

[0006] 3. High coupling: The system is highly coupled with the data source, resulting in poor adaptability with different data sources and limiting the versatility of the system.

[0007] 4. Insufficient cross-platform capabilities: Most stateful software relies on specific platforms and is difficult to implement cross-platform applications, such as insufficient compatibility between mobile and desktop terminals.

[0008] 5. Inconsistency between editing and display: There are often differences between the editing state and the display state, which makes it impossible for users to accurately preview the final effect when editing. Summary of the Invention

[0009] In view of the deficiencies of the prior art, the present invention discloses a Web-based real-time data binding and dynamic rendering method for graphic elements to solve the problems raised in the above background technology.

[0010] To achieve the above-mentioned object, the present invention provides the following technical solution: a method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal, comprising the following steps:

[0011] S1. Steps for generating primitives:

[0012] The editor provides basic primitives, which users can extend by inheriting them. A converter is also provided for complex primitives to generate primitives. The generation steps include:

[0013] 1) Import SVG material into the graphic element converter;

[0014] 2) The converter pre-processes the material, calls the headless browser to render and read the actual width and height of the material, and resets the SVG viewBox with the actual width and height to remove the edge gaps;

[0015] 3) Write the template engine variable string into the SVG container to achieve external control;

[0016] 4) Read the processed SVG content and write it into the template file;

[0017] 5) Read the editor primitive registration template, pass the primitive name and SVG template address into the template to generate a primitive file that meets the editor's requirements. The primitive file includes multiple built-in general parameters. The generated primitive file is placed in the editor's primitive directory. The editor reads the files in the directory and parses the information to automatically register the primitives. At the same time, the editor's drag panel renders all registered primitives for dragging. Each primitive is a class with attribute variables defined internally and configured with form configurations corresponding to the attribute variables. The rendering function changes the final rendering style according to the attribute variables.

[0018] S2. Node configuration steps:

[0019] After completing the primitive initialization, the primitive is instantiated to the editing area by dragging and dropping to form a node and connect it. Each node can be configured separately. By reading the attribute variable form of the node corresponding to the primitive class, the final rendering form of the node is controlled externally. In addition to direct configuration, the attribute variables also support dynamic settings by defining mapping rules. By adding rules, the values ​​of the external system are mapped to the configuration of the node. The external interface is connected to store the information inside the node for the runner to read and use as a business function. After the configuration is completed, the data driving the editor is saved in JSON format. The data includes the type and location information of the primitive corresponding to the node, the configured primitive variables and mapping rules, and the stored external information.

[0020] S3. Operation steps:

[0021] The runner registers the graph element into the system, initializes it using the JSON data saved by the editor, and adapts the rendered graph to the container size by calculating the position information. The runner parses the JSON, extracts the attribute mapping rules of the node configuration, and establishes a mapping from the data source to the node rule information. After the data source is updated, the node is found through rule matching and the node variables bound in the rule are updated, making the graph dynamic.

[0022] Preferably, in the primitive generation step S1, the primitive converter pre-processes the SVG material further comprising:

[0023] When a group of SVG files is passed to the metafile converter in the form of a folder, the converter converts the materials into templates according to the steps, imports them into the generated metafile, and establishes a mapping between the material name and the template. The built-in attribute variable "frame" determines the template ultimately used for rendering, and exposes a configuration form to the property configuration panel. The form includes the configured tags, variables, form types, form item parameters, and default values.

[0024] Preferably, in the step of generating graphic elements, the operation of the attribute configuration panel includes:

[0025] The corresponding form component is rendered according to the configuration form of the element. When it is an element containing the "frame" variable, the property configuration panel renders a drop-down selection box based on the configuration. The options are all available frames of the element. After an option is selected, the property configuration panel puts the new form value into the corresponding variable and passes it to the element. After receiving the new variable, the element re-renders itself using the corresponding template.

[0026] Preferably, the basic graphic elements include rectangle, circle, ellipse, polygon, rhombus, text and HTML.

[0027] Preferably, in the node configuration step S2, the dynamic configuration of the node includes:

[0028] Configure the mapping rules between device attribute values ​​and attribute variables on the node. If the device's total active power attribute value is greater than 0, set the "frame" variable to "on pattern"; if it is equal to 0, set it to "off pattern". In the runner, connect to external real-time data, pass the value to the rule matching engine, and obtain the variable value finally passed to the node, so that the node can reflect the real-time status of the device.

[0029] Preferably, in the node configuration step S2, the operation of connecting the external interface storage information to the node includes:

[0030] Connect to the device list interface and store the selected device information inside the node. At runtime, the runner will obtain the device represented by the node, so as to operate the corresponding device on the graph.

[0031] Preferably, in the running step S3, the processing of the JSON data by the runner further includes:

[0032] When the runner parses JSON data, it accurately extracts the attribute mapping rules of the node configuration and establishes a complete mapping relationship from the data source to the node rule information. This ensures that when the data source is updated, it can accurately find the corresponding node through rule matching and update the node variables bound in the rule, thereby ensuring the accuracy and timeliness of the dynamic update of the graph.

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

[0034] 1. The present invention generates graphics in batches through a graphics converter, which can quickly respond to the content that needs to be displayed, avoid repeated import of single graphics construction, achieve rapid construction, and is easy to use, greatly improving configuration efficiency and saving users' time and energy.

[0035] 2. The design framework of this invention constructs primitives independently. By exposing variables, special effects can be easily added to primitives, such as animation effects, primitive color changes, and other more intuitive presentation methods. Each operation provides corresponding events for monitoring, facilitating further development and enhancing the system's adaptability and scalability.

[0036] 3. The data in the present invention can be bound to any graphic element and can be matched by rules without relying on a customized single data form. It is compatible with multiple data formats and can match multiple data sources. It has a low degree of coupling and improves the versatility and flexibility of the system.

[0037] 4. The present invention is based on the application implementation of the Web, and can be transplanted to the mobile terminal and desktop terminal through H5, Electron, etc. It can be used across platforms and is easy to integrate into various projects.

[0038] 5. The editing state and the display state of the present invention are homologous. The visual page formed by the user operating the editor is essentially the same as the final presentation form, ensuring that what you see is what you get during editing. Compared with the editing state, the display state only removes some interactive operations. Both are driven by JSON data, with high consistency, improving user experience and operation accuracy.

[0039] 6. The implementation of the present invention based on native JavaScript does not rely on a specific development framework and can be easily integrated into a project, reducing compatibility issues caused by component upgrades.

[0040] 7. The present invention simplifies the system configuration and monitoring process through a graphical interface, allowing non-professional programmers to participate in the design and maintenance of the automation system, shortening the development cycle of product customization and improving product scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] The accompanying drawings are used to provide further understanding of the present invention and constitute a part of the specification. They are used to explain the present invention together with the embodiments of the present invention and do not constitute a limitation of the present invention.

[0042] In the attached figure:

[0043] Figure 1 It is a structural diagram of the system module of the present invention;

[0044] Figure 2 It is a schematic diagram of the process of generating graphic elements of the present invention;

[0045] Figure 3 is a schematic diagram of a node configuration form of the present invention;

[0046] Figure 4 It is a schematic diagram of the process of node configuration of the present invention;

[0047] Figure 5 It is a schematic diagram of the process of running the service of the present invention;

[0048] Figure 6 It is a schematic diagram of an implementation example of the present invention. DETAILED DESCRIPTION

[0049] The preferred embodiments of the present invention are described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0050] Example: The present invention edits the primitive content, drags the primitives on the canvas to combine them into visual graphics, and configures parameters, binds data information and other related device data, and cooperates with the runner rendering to achieve the need for visual display of real-time data. Figure 1 As shown, the system modules used in the present invention include three modules: a graphic element converter, an editor, and a runner; the editor includes a graphic element drag panel, a property configuration panel, and an editing area.

[0051] This invention provides an efficient, flexible, and easily integrated web-based method for real-time data binding and dynamic rendering of graphic elements. By importing graphic elements from the web and performing real-time data binding via configuration, efficient and highly scalable visual display of device information is achieved. Furthermore, by displaying saved JSON information, dynamically rendering visual charts, and dynamically rendering edited information, a convenient, efficient, and intuitive visual display of graphic information is provided. Specifically, the method includes the following steps:

[0052] S1. Steps for generating primitives:

[0053] like Figure 2As shown, the editor provides basic graphics elements, including rectangles, circles, ellipses, polygons, diamonds, text, HTML, etc. Users can extend them by inheriting basic graphics. At the same time, a converter is provided for fast generation of complex graphics elements. The following are the generation steps:

[0054] 1) Import SVG material into the graphic element converter

[0055] 2) The converter pre-processes the material, calls the headless browser to render and read the actual width and height of the material, and resets the SVG viewBox with the actual width and height to remove the edge gaps

[0056] 3) Write the template engine variable string into the SVG container to achieve external control

[0057] 4) Read the processed SVG content and write it into the template file

[0058] 5) Read the editor's element registration template and pass the element name, SVG template address, and other information into the template to generate an element file that meets the editor's requirements. The template has several common parameters built into it. The element file has already been generated in the previous step. Place the generated file in the editor's element directory, which the editor will read. The generated element file contains the required information. The editor parses this information and automatically registers the element. The editor's drag panel will render all registered elements and provide dragging capabilities.

[0059] Each primitive is essentially a class with a number of internally defined attribute variables. The rendering function changes the final rendering style based on these variables. The corresponding form configuration is also configured. The editor's attribute configuration panel reads this configuration to generate a form for external configuration. After configuration, these attribute variables are passed to the primitive, and the primitive determines the final rendering style based on the passed-in configuration.

[0060] For example: a group of SVG files are passed to the metafile converter in the form of a folder. The converter will convert these materials into templates according to the above steps, import them into the generated metafile, and establish a mapping between the material name and the template. At the same time, a built-in attribute variable "frame" will determine the final template used for rendering. At the same time, the configuration form will be exposed to the property configuration panel. The form includes the configuration tags, variables, form types, form item parameters, and default values. Figure 3 shown.

[0061] The property configuration panel renders a drop-down selection box based on the configuration, with options showing all available frames for the element. When an option is selected, the property configuration panel places the new form value into the corresponding variable and passes it to the element. The element then re-renders itself using the corresponding template after receiving the new variable.

[0062] S2. Node configuration steps:

[0063] like Figure 4 As shown in the figure, after completing the initialization of all the elements, you can start building the graph. You can instantiate the elements by dragging them into the editing area and connect them as needed. We call the instantiated elements nodes, and each node can be configured separately.

[0064] By reading the attribute variable form of the node's corresponding graphic class (refer to the description in the previous section), the final rendering form of the node (size, color, pattern, etc.) will be controlled externally. In addition to direct configuration, these variables also support dynamic settings by defining mapping rules. By adding rules, the value of the external system can be mapped to the node configuration. For example, a mapping rule between the device attribute value and the variable attribute of "frame" is configured on the node. If the total active power attribute value of the device is greater than 0, the variable "frame" is set to "on pattern"; if it is equal to 0, it is set to "off pattern". In the runner, you can connect to external real-time data, pass the value to the rule matching engine, and obtain the variable value finally passed to the node. In this way, the node can reflect the real-time status of the device.

[0065] By connecting to external interfaces, some information can be stored inside the node for the operator to read and use as business functions. For example, by connecting to the device list interface, the device binding function can be implemented, and the selected device information can be stored inside the node. During runtime, the device represented by the node can be obtained, thereby implementing operations on the corresponding device on the graph.

[0066] After completing the configuration, save the data driving the editor in the form of JSON, which only needs to include the type and location information of the node corresponding to the element, the configured element variables and mapping rules, and the stored external information.

[0067] S3. Operation steps:

[0068] like Figure 5 As shown, the runner is similar to the editor. It registers the graphics element into the system, then initializes it using the JSON data saved by the editor, and adapts the rendered image to the container size by calculating the position information.

[0069] The runner parses JSON, extracts the attribute mapping rules of the node configuration, and establishes a mapping from the data source to the node rule information. After the data source is updated, it finds the node through rule matching and updates the node variables bound in the rule, making the graph dynamic.

[0070] The present invention is highly extensible. As long as the registered primitives inherit from the basic primitives of the present invention, they can be used. Users can choose to develop or use third-party tools to generate primitives instead of using the SVG converter in the present invention. This will not affect other functions of the editor and runner. Users can still use the drag panel and property configuration panel to manage and configure primitives.

[0071] Finally, it should be noted that the above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art will be able to modify the technical solutions described in the aforementioned embodiments or substitute equivalents for some of the technical features. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention shall be included within the scope of protection of the present invention.

Claims

1. A method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal, characterized in that: The following steps are involved: S1. Steps for generating primitives: The editor provides basic primitives, which users can extend by inheriting the basic graphics. A converter is provided for complex primitives to generate primitives. The generation steps include: 1) Import the SVG material into the provided graphic element converter; 2) The converter pre-processes the material, calls the headless browser to render and read the actual width and height of the material, and resets the SVG viewBox with the actual width and height to remove the edge gaps; 3) Write the template engine variable string into the SVG container to achieve external control; 4) Read the processed SVG content and write it into the template file; 5) Read the editor primitive registration template, pass the primitive name and SVG template address into the template to generate a primitive file that meets the editor's requirements. The primitive file includes multiple built-in general parameters. The generated primitive file is placed in the editor's primitive directory. The editor reads the files in the directory and parses the information to automatically register the primitives. At the same time, the editor's drag panel renders all registered primitives for dragging. Each primitive is a class with attribute variables defined internally and configured with form configurations corresponding to the attribute variables. The rendering function changes the final rendering style according to the attribute variables. S2. Node configuration steps: After completing the primitive initialization, the primitive is instantiated to the editing area by dragging and dropping to form a node and connect it. Each node is configured separately. By reading the attribute variable form of the node's corresponding primitive class, the final rendering form of the node is controlled externally. In addition to direct configuration, the attribute variables also support dynamic settings by defining mapping rules. By adding rules, the values ​​of the external system are mapped to the node configuration. The external interface is connected to store the information inside the node for the provided runner to read and use as a business function. After completing the configuration, the data driving the editor is saved in JSON format. The data includes the type and location information of the primitive corresponding to the node, the configured primitive variables and mapping rules, and the stored external information. S3. Operation steps: The runner registers the graph element into the system, initializes it using the JSON data saved by the editor, and adapts the rendered graph to the container size by calculating the position information. The runner parses the JSON, extracts the attribute mapping rules of the node configuration, and establishes a mapping from the data source to the node rule information. After the data source is updated, the node is found through rule matching and the node variables bound in the rule are updated, making the graph dynamic.

2. The method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal according to claim 1, characterized in that: In the primitive generation step S1, the primitive converter pre-processes the SVG material further including: When a set of SVG files is passed to the metafile converter in folder form, the converter converts the materials into templates according to the steps, imports them into the generated metafile, and establishes a mapping between the material name and the template. The built-in attribute variable "frame" determines the template ultimately used for rendering, and exposes a configuration form to the property configuration panel. The form includes the configured tags, variables, form types, form item parameters, and default values.

3. The method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal according to claim 2, characterized in that: In the primitive generation step, the operations of the attribute configuration panel include: The corresponding form component is rendered according to the configuration form of the element. When it is an element containing a "frame" variable, the property configuration panel renders a drop-down selection box based on the configuration. The options are all available frames of the element. After an option is selected, the property configuration panel puts the new form value into the corresponding variable and passes it to the element. After receiving the new variable, the element re-renders itself using the corresponding template.

4. The method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal according to claim 1, characterized in that: Basic graphics include rectangle, circle, ellipse, polygon, diamond, text, and HTML.

5. The method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal according to claim 1, characterized in that: In the node configuration step S2, the dynamic configuration of the node includes: Configure the mapping rules between device attribute values ​​and attribute variables on the node. If the device's total active power attribute value is greater than 0, set the "frame" variable to "on pattern"; if it is equal to 0, set it to "off pattern". In the runner, connect to external real-time data, pass the value to the rule matching engine, and obtain the variable value that is ultimately passed to the node, so that the node can reflect the real-time status of the device.

6. The method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal according to claim 1, characterized in that: In the node configuration step S2, the operation of connecting the external interface storage information to the node includes: Connect to the device list interface and store the selected device information inside the node. At runtime, the runner will obtain the device represented by the node, so as to operate the corresponding device on the graph.

7. The method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal according to claim 1, characterized in that: In the running step S3, the processing of the JSON data by the runner further includes: When the runner parses JSON data, it accurately extracts the attribute mapping rules of the node configuration and establishes a complete mapping relationship from the data source to the node rule information. This ensures that when the data source is updated, it can accurately find the corresponding node through rule matching and update the node variables bound in the rule, thereby ensuring the accuracy and timeliness of the dynamic update of the graph.

Images