Web end-based real-time data binding and dynamic rendering method for primitives

Abstract

The invention discloses a Web end-based primitive real-time data binding and dynamic rendering method, which comprises the following steps of: providing a basic primitive through a set editor, expanding by a user by inheriting a basic graph, generating a primitive by providing a converter aiming at a complex primitive, instantiating the primitive to an editing area through dragging to form a node, and connecting, the method comprises the following steps of: storing data of a driving editor in a JSON (JavaScript Object Notation) form, initializing the data, adapting a rendered graph to the size of a container by calculating position information, analyzing the JSON by a runner, extracting an attribute mapping rule of node configuration, and establishing mapping from a data source to node rule information; after the data source is updated, the nodes are found through rule matching, and the node variables bound in the rules are updated, so that the graph becomes dynamic. According to the invention, the configuration and monitoring process of the system is simplified through the graphical interface, so that non-professional programmers can also participate in the design and maintenance of the automatic system. The development cycle of product customization is shortened, and the expansibility of products is improved.

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 intelligence and digitalization, devices collect more and more terminal data. Users urgently need to display more data in an intuitive and clear combination for monitoring and analysis. Through web applications, the data that users are concerned about can be displayed more intuitively.

[0003] Existing web applications require professional programmers to develop and configure the content that needs to be displayed. The current configuration technology solutions have some limitations and deficiencies in the application process, especially in terms of graphic element generation, system scalability, data coupling, cross-platform compatibility, and consistency between editing and display. The problems of existing configuration technology are as follows:

[0004] 1. Inconvenient generation of graphic elements: 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 degree: The system is highly coupled with the data source, resulting in poor adaptability with different data sources, 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 in the prior art, the present invention discloses a method for real-time data binding and dynamic rendering of graphic elements based on a Web terminal to solve the problems raised in the above background technology.

[0010] To achieve the above 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, and users extend them by inheriting basic graphics. A converter is 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 viewBox of the SVG 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 requirements. The primitive file includes multiple built-in general parameters. The generated primitive file is placed in the editor 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 drag panel renders all registered primitives for dragging. Each primitive is a class with attribute variables defined inside 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 initialization of the primitives, instantiate the primitives to the editing area by dragging and dropping to form nodes and connect them. Each node can be configured separately. By reading the attribute variable form of the primitive class corresponding to the node, 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 completing the configuration, the data driving the editor is saved in JSON format. The data includes the type of the primitive corresponding to the node, location information, configured primitive variables and mapping rules, and stored external information;

[0020] S3. Operation steps:

[0021] The runner registers the graphics element into the system, uses the JSON data saved by the editor to initialize it, and adapts the rendered graphics 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 to make the graph dynamic.

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

[0023] When a group of SVG is passed into the metafile converter in the form of a folder, the converter converts the materials into templates according to the steps, imports them all into the generated metafile, and establishes a mapping between the material name and the template. The built-in attribute variable "frame" determines the template that is ultimately used for rendering, and exposes the 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 primitive. When it is a primitive containing a "frame" variable, the property configuration panel renders a drop-down selection box according to the configuration. The options are all available frames of the primitive. After an option is selected, the property configuration panel puts the new form value into the corresponding variable and passes it to the primitive. After receiving the new variable, the primitive 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 total active power attribute value of the device 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. When running, 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 elements in batches through a graphics element converter, which can quickly respond to the content that needs to be displayed, avoid repeated import of single graphics element construction, achieve rapid construction, and is easy to use, greatly improving configuration efficiency and saving users' time and energy.

[0035] 2. In the design framework of the present invention, the graphics elements are constructed separately. By exposing variables to the outside, special effects can be easily added, such as animation effects, graphics element color change and other more intuitive display forms. Various operations provide corresponding events for monitoring, which is convenient for secondary development on this basis, and enhances the adaptability and extensibility of the system.

[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, which improves the versatility and flexibility of the system.

[0037] 4. The present invention is implemented based on Web applications, and can be transplanted to mobile terminals and desktop terminals 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, which improves 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 the scalability of the product. 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 picture:

[0043] Figure 1 It is a structural schematic 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 in conjunction with 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] Embodiment: The present invention edits the content of the primitives, drags the primitives on the canvas to combine into a visual graphic, and configures parameters, binds data information and other associated device data, and cooperates with the runner rendering to realize the demand for visual display of real-time data. Figure 1 As shown, the system modules used in the present invention include three modules: a primitive converter, an editor and a runner; the editor includes a primitive drag panel, a property configuration panel and an editing area.

[0051] The present invention provides an efficient, flexible and easy-to-integrate Web-based graphic element real-time data binding and dynamic rendering method. By importing graphic elements on the web side and performing real-time data binding in the form of configuration, efficient and highly scalable visual display of device information is achieved. By displaying saved Json information, dynamically rendering visual charts, and dynamically rendering edited information, convenient, efficient and intuitive visual chart information display is provided, which specifically includes the following steps:

[0052] S1. Steps for generating primitives:

[0053] like Figure 2As shown, the editor provides basic primitives, including rectangles, circles, ellipses, polygons, diamonds, text, HTML, etc. Users can extend them by inheriting basic graphics. At the same time, converters are provided for complex primitives to quickly generate them. 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 primitive registration template, pass the primitive name, SVG template address, etc. into the template to generate a primitive file that meets the editor's requirements. The template has multiple common parameters built in. The primitive file has been generated in the previous step. Put the generated files in the editor primitive directory, and the editor will read the files in this directory. The generated primitive file contains the required information. The editor parses the information and automatically registers the primitive. At the same time, the editor drag panel will render all registered primitives and provide dragging.

[0059] Each primitive is essentially a class, which defines some attribute variables. The rendering function will change the final rendering style according to these variables. The form configuration corresponding to the attribute variables is also configured. The attribute configuration panel of the editor can read the configuration to generate a form for external configuration. After configuration, these attribute variables are passed to the primitive. The primitive determines the final rendering style according to the passed-in configuration.

[0060] For example: a group of SVG is 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 template used for rendering. At the same time, the configuration form will be exposed to the attribute configuration panel. The form includes the configured tags, variables, form types, form item parameters, and default values; Figure 3 shown.

[0061] The property configuration panel renders a drop-down selection box according to the configuration, and the options are all available frames of the primitive. After an option is selected, the property configuration panel will put the new form value into the corresponding variable and pass it to the primitive. After receiving the new variable, the primitive will re-render itself with the corresponding template.

[0062] S2. Node configuration steps:

[0063] like Figure 4 As shown in the figure, after completing the initialization of all the primitives, you can build the graph. Drag and drop the primitives to the editing area and connect them as needed. We call the instantiated primitives nodes, and each node can be configured separately.

[0064] By reading the attribute variable form of the node's corresponding primitive 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 values ​​of the external system can be mapped to the configuration of the node. For example, the mapping rules between the device attribute value and the variable attribute of "frame" are configured on the node. If the total active power attribute value of the device is greater than 0, the variable "frame" is set to "open pattern"; if it is equal to 0, it is set to "close 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, the data driving the editor is saved 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 primitives into the system, then uses the JSON data saved by the editor for initialization, 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 in this way.

[0070] Among them, the present invention has a high degree of scalability, 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 only a preferred example 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 can still modify the technical solutions described in the aforementioned embodiments or replace some of the technical features therein by equivalents. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope 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 provided by the settings provides basic primitives, and users extend them 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 viewBox of the SVG 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 requirements. The primitive file includes multiple built-in general parameters. The generated primitive file is placed in the editor 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 drag panel renders all registered primitives for dragging. Each primitive is a class with attribute variables defined inside 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 initialization of the primitives, instantiate the primitives to the editing area by dragging and dropping to form nodes and connect them. Each node can be configured separately. By reading the attribute variable form of the primitive class corresponding to the node, 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 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 of the primitive corresponding to the node, location information, configured primitive variables and mapping rules, and stored external information. S3. Operation steps: The runner registers the graphics element into the system, uses the JSON data saved by the editor to initialize it, and adapts the rendered graphics 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 to make 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 preprocesses the SVG material further including: When a group of SVG is passed into the metafile converter in the form of a folder, the converter converts the materials into templates according to the steps, imports them all into the generated metafile, and establishes a mapping between the material name and the template. The built-in attribute variable "frame" determines the template that is ultimately used for rendering, and exposes the 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 step of generating graphic elements, the operation of the attribute configuration panel includes: The corresponding form component is rendered according to the configuration form of the primitive. When it is a primitive containing a "frame" variable, the property configuration panel renders a drop-down selection box according to the configuration. The options are all available frames of the primitive. After an option is selected, the property configuration panel puts the new form value into the corresponding variable and passes it to the primitive. After receiving the new variable, the primitive 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 total active power attribute value of the device 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.

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. When running, 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