Web-based configuration graph editing method and system

Abstract

The invention relates to the field of industrial automation control, and provides a Web-based configuration graph editing method and system. The method comprises the following steps: in response to a binding operation on a target graphic element and a target equipment data point, establishing a mapping relationship between the target graphic element and the target equipment data point; in response to an animation configuration request for the target graphic element, generating an animation triggering rule configuration file and a media resource configuration file corresponding to the target graphic element, and storing the files in a graphic element library; and when real-time updating data corresponding to a target equipment data point sent by the back-end equipment is obtained, updating the display content of the target graphic element based on the animation triggering rule configuration file and the media resource configuration file, and synchronously refreshing the configuration graphic editing interface. The method is completely based on the Web technology, client software does not need to be installed, cross-platform access can be achieved, the development threshold is low, the data updating delay is lower than 50 milliseconds, and the industrial real-time monitoring requirement is completely met.

Description

Technical Field

[0001] This application relates to the field of industrial automation control, and in particular to a Web-based configuration graphics editing method and system. Background Technology

[0002] Industrial configuration software serves as a crucial bridge connecting lower-level control devices with upper-level management systems, and it has wide applications in the field of industrial automation.

[0003] The inventors of this application discovered, during the research and development of industrial configuration software, that traditional industrial configuration software has the following shortcomings:

[0004] (1) Strong dependence on platform: Most traditional industrial configuration software is a desktop application developed based on client / server (C / S) architecture. It requires the installation of specific software on the client to use, which cannot achieve true cross-platform access and limits the flexibility of remote monitoring.

[0005] (2) High development threshold: Traditional industrial configuration software requires professional technicians to write a lot of low-level code to complete the data binding and animation settings of graphic elements and equipment data points. Ordinary operators find it difficult to use, which increases the labor costs of enterprises.

[0006] (3) Poor device adaptability: Traditional industrial configuration software methods automatically adapt to display devices with different resolutions and pixel densities, resulting in poor display effects on mobile devices.

[0007] (4) Poor real-time performance: Traditional industrial configuration software has poor real-time data update performance, which cannot meet the needs of industrial real-time monitoring.

[0008] (5) Poor graphic reusability: The same graphic elements need to be created repeatedly in different scenarios, which cannot be effectively reused, resulting in low development efficiency. Summary of the Invention

[0009] In view of this, embodiments of this application provide a Web-based configuration graphics editing method and system to at least solve one of the technical problems mentioned in the background art.

[0010] A first aspect of this application provides a web-based configuration graphics editing method, comprising:

[0011] Front-end device:

[0012] The configuration graphic editing interface is displayed. The configuration graphic editing interface includes a data point display area and a graphic element library. The graphic element library includes various types of graphic element sets. A graphic element set includes at least one graphic element.

[0013] The data point display area displays a set of device data points provided by the backend devices. The set of device data points includes multiple devices, and each device includes at least one device data point.

[0014] Based on the graphic element library and the device data point set, the target graphic elements and target device data points are determined.

[0015] In response to the binding operation between the target graphic element and the target device data point, a mapping relationship between the target graphic element and the target device data point is established;

[0016] In response to an animation configuration request for a target graphic element, generate an animation trigger rule configuration file and a media resource configuration file corresponding to the target graphic element, and save them to the graphic element library;

[0017] When the real-time updated data corresponding to the target device data point sent by the backend device is obtained, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, and the configuration graphic editing interface is refreshed synchronously.

[0018] A second aspect of this application provides a web-based configuration graphics editing system, including: a front-end device and a back-end device communicatively connected to the front-end device;

[0019] The front-end device is configured to display a configuration graphic editing interface, which includes a data point display area and a graphic element library. The graphic element library includes various types of graphic element sets, and a graphic element set includes at least one graphic element.

[0020] The data point display area displays a set of device data points provided by the backend devices. The set of device data points includes multiple devices, and each device includes at least one device data point.

[0021] Based on the graphic element library and the device data point set, the target graphic elements and target device data points are determined.

[0022] In response to the binding operation between the target graphic element and the target device data point, a mapping relationship between the target graphic element and the target device data point is established;

[0023] In response to an animation configuration request for a target graphic element, generate an animation trigger rule configuration file and a media resource configuration file corresponding to the target graphic element, and save them to the graphic element library;

[0024] When the real-time updated data corresponding to the target device data point sent by the backend device is obtained, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, and the configuration graphic editing interface is refreshed synchronously.

[0025] A third aspect of this application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described method.

[0026] A fourth aspect of this application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the above-described method.

[0027] Compared with existing technologies, the beneficial effects of this application's embodiments include at least the following: It adopts a web-based plug-in configuration editing architecture, eliminating the need for client software installation and allowing access via a browser, thus significantly reducing deployment and maintenance costs. It utilizes a visual data binding method to complete complex configuration and animation configurations, allowing non-technical personnel to become proficient after simple training, improving efficiency by over 80% compared to traditional programming methods; and it achieves data latency of less than 50 milliseconds, fully meeting the needs of industrial real-time monitoring. Attached Figure Description

[0028] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0029] Figure 1 This is a schematic diagram of the system structure of a Web-based configuration graphic editing system provided in an embodiment of this application;

[0030] Figure 2 This is a flowchart illustrating a Web-based configuration graphics editing method provided in an embodiment of this application;

[0031] Figure 3 This is a schematic diagram of the interactive flow of a visual data binding method provided in an embodiment of this application;

[0032] Figure 4 This is a flowchart illustrating a real-time data update method provided in an embodiment of this application;

[0033] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0034] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0035] Traditional industrial configuration software (such as WinCC, InTouch, and KingSCADA) is a desktop application developed on the Windows platform using a client / server architecture. It requires the installation of specific software on the client side, failing to achieve true cross-platform access and limiting the flexibility of remote monitoring. Some industrial configuration software, such as mxGraph and draw.io, have simple functions, lack industrial-grade application capabilities, use rudimentary data binding methods, and do not support complex animation configurations, making it difficult to handle large-scale graphics. Furthermore, some industrial configuration software, such as WebSCADA, lacks complete online editing capabilities, resulting in poor real-time data updates.

[0036] In view of this, embodiments of this application provide a web-based configuration graphics editing method and system. It adopts a web-based plug-in configuration editing architecture, eliminating the need for client software installation and allowing access via a browser, thus significantly reducing deployment and maintenance costs. Complex configuration and animation configurations are completed using a visual data binding method, allowing non-technical personnel to become proficient after simple training. Compared to traditional programming methods, efficiency is improved by more than 80%; data latency is less than 50 milliseconds, fully meeting the needs of industrial real-time monitoring.

[0037] The following will describe in detail, with reference to the accompanying drawings, a Web-based configuration graphics editing method and system according to embodiments of this application.

[0038] Figure 1 This is a schematic diagram of the system structure of a Web-based configuration graphic editing system provided in an embodiment of this application.

[0039] As an example, please refer to Figure 1The configuration graphics editing system includes a front-end layer 101, a middle layer 102, a back-end layer 103, a data layer 104, and a device layer 105. The front-end layer 101 deploys front-end devices (not shown in the figure), and the configuration software provided in this embodiment can run on these front-end devices. This configuration software includes a configuration graphics editing component (GraphicsComponent), a workspace management component (WorkspacePlugin), a real-time communication component (WebSocket), a data binding component (DataBinding), and a symbol library. The middle layer 102 provides an API (Application Programming Interface) gateway, authentication services, and data conversion services. The back-end layer 103 deploys back-end devices (not shown in the figure), and the server provides graphics storage services, real-time data services, and device access services. The data layer 104 includes a graphics database, a real-time database, and a configuration database. The device layer 105 includes PLC (Programmable Logic Controller) devices, sensors, and actuators.

[0040] Front-end devices can be electronic devices such as desktop computers, laptops, handheld computers, and cloud servers.

[0041] The backend device can be a server that provides various services, such as a backend server. This backend server can be a single server, a server cluster consisting of several servers, or a cloud computing service center; this application embodiment does not limit this.

[0042] The Graphics Component, or graphics editor, is the core component of the configuration software provided in this application embodiment. It is responsible for coordinating and managing the interaction of all related sub-functions. As the entry point for user operations, it is responsible for the creation, editing, and rendering of graphical elements, and works in conjunction with the Workspace Plugin, WebSocket, Data Binding, and Symbol Library to achieve complete configuration functionality.

[0043] The core functionalities of this configurable graphics component include: canvas initialization, graphics drawing, graphics editing, data binding, animation configuration, and data saving / export. The graphics editing functions include: drag-and-drop movement, scaling and rotation, color settings, layer control, and alignment / distribution. The data binding functions include: data point selection, animation rule configuration, and condition settings.

[0044] The aforementioned Graphics Component is a React-based component that enables efficient graphics creation, editing, and real-time interaction through the Fabric.js library, while also integrating an adaptive workspace management mechanism. Defined using React's functional programming paradigm, the Graphics Component initializes by using a reference mechanism (similar to DOM element references) to obtain the handle of the HTML Canvas element, serving as the basic carrier for graphics rendering. Simultaneously, a state management mechanism is introduced to track data binding information associated with graphic elements, ensuring synchronized updates between device data and the displayed content of the graphic elements. After mounting, the system automatically creates a Fabric.js canvas instance and binds it to the aforementioned Canvas element. In the canvas configuration, the object stacking preservation option is enabled to ensure the stability of the hierarchical relationship of graphic elements during editing, laying the foundation for complex graphics operations.

[0045] When the configuration graphical editing component is unloaded, removing the event listener ensures that resources are properly released, preventing memory leaks. This lifecycle management mechanism guarantees application stability and performance, which is especially crucial in long-term industrial scenarios.

[0046] The WorkspacePlugin provides dynamic adaptation support for the GraphicsComponent, which can collaborate with Fabric.js canvas instances. By detecting the device's resolution and viewport size, it adjusts the canvas parameters in real time to ensure that the GraphicsComponent displays consistently on different devices, thereby achieving responsive layout optimization and improving cross-platform compatibility.

[0047] The Graphics Component relies on the WorkspacePlugin's adaptation features to optimize the user interface layout and user experience.

[0048] The DataBinding component is responsible for associating device data points with graphical elements. The Graphics Component provides drag-and-drop functionality, allowing users to invoke the DataBinding component and configure data-driven dynamic display and animation effects.

[0049] The configuration graphics component relies on the data binding component to complete the real-time mapping of device data points to graphic elements.

[0050] The real-time communication component (WebSocket) establishes a long connection with the backend device in the backend layer 103 via the WebSocket protocol and receives a set of device data points from the backend device.

[0051] The Graphics Component relies on the WebSocket real-time communication component to dynamically update the display content of graphical elements by incrementally updating data, ensuring the timeliness and accuracy of the monitoring data of the monitored devices.

[0052] The Symbol Library provides predefined graphic templates and symbols. The Graphics Component allows for the reuse and rapid configuration of graphic elements by calling the functions of the Symbol Library.

[0053] The Graphics Component enhances editing efficiency and supports cross-project template management by leveraging the resource library of the primitive library.

[0054] To support user interaction, the canvas registers mouse-down event listeners and object-modification event listeners. Mouse-down events capture user actions such as selecting or creating graphical elements, while object-modification events detect real-time changes to graphical element properties (such as position and size). These events trigger corresponding processing logic, updating the graphical state and reflecting user intent.

[0055] The configuration software provided in this application has the advantages of zero installation and deployment, ease of use and high performance, which is significantly better than traditional industrial configuration software.

[0056] The configuration graphic editing system provided in this application adopts a front-end and back-end separation architecture, which can realize complete configuration graphic creation, editing, data binding and real-time monitoring functions.

[0057] Figure 2 This is a flowchart illustrating a Web-based configuration graphic editing method provided in an embodiment of this application. Figure 2 Web-based configuration graphics editing methods can be developed by Figure 1 The front-end device deployed in the front-end layer 101 executes the commands. For example... Figure 2 As shown, the configuration graphic editing method includes:

[0058] Step S201: Display the configuration graphic editing interface. The configuration graphic editing interface includes a data point display area and a graphic element library. The graphic element library includes various types of graphic element sets, and a graphic element set includes at least one graphic element.

[0059] As an example, the front-end device runs the configuration graphics editing component of the configuration software provided in this application embodiment and displays the configuration graphics editing interface.

[0060] The data point display area can be a front-end data panel or pop-up window set on the configuration graphic editing interface.

[0061] The graphic element set includes a basic geometric graphic element set (which may include graphic elements such as lines, polylines, curves, rectangles, circles, ellipses, triangles, and polygons), a text element set (which may include static text such as equipment names and parameter descriptions, and dynamic text such as dynamic text associated with data sources and displaying variable values ​​in real time), an image element set, a point / marker set (which may include graphic elements such as circles, squares, and symbol points), an industrial equipment and component graphic set (which may include graphic elements such as mechanical and power equipment, pipes and connectors, containers and tanks, instruments and sensors), status and logic graphic elements (which may include graphic elements such as status indicators, trends and curves, and flowchart symbols), decorative and auxiliary graphics (which may include backgrounds and borders, legends and annotations, and icon and symbol libraries), and dynamic and interactive graphic elements (which may include graphic elements such as animated graphics and interactive controls).

[0062] Step S202: Display the set of device data points provided by the backend device in the data point display area. The set of device data points includes multiple devices, and each device includes at least one device data point.

[0063] The equipment can be PLC devices, sensors, actuators, etc., deployed in equipment layer 105.

[0064] As an example, devices in deployment layer 105 can access backend layer 103 through the device access service of backend layer 103. Backend layer 103 obtains device data points of each device in device layer 105 and transmits these device data points to the front-end device of frontend layer 101 through the real-time communication component (WebSocket) of frontend layer 101, and displays them in the data point display area of ​​the configuration graphical editing interface.

[0065] Equipment data points refer to the monitoring data detection points (monitoring data acquisition points) of the equipment in equipment layer 105.

[0066] Step S203: Based on the graphic element library and the device data point set, determine the target graphic element and the target device data point.

[0067] As an example, when a user selects a graphic element in the graphic element library, the selected graphic element is identified as the target graphic element. Similarly, when a user selects a device data point in the device data point set (such as dragging a device data point to the target graphic element), the selected device data point is identified as the target device data point.

[0068] Step S204: In response to the binding operation between the target graphic element and the target device data point, a mapping relationship between the target graphic element and the target device data point is established.

[0069] Binding operations can be operations in which a user uses the mouse to drag a target device data point from the data point display area to a target graphic element.

[0070] As an example, when a user's binding operation between a target graphic element and a target device data point is detected, a precise mapping is established between the different states of the target device data point (such as on / off state, alarm state, different value ranges) and the different visual representations of the target graphic element (such as static images, GIF animations, color changes, etc.).

[0071] Step S205: In response to the animation configuration request for the target graphic element, generate the animation trigger rule configuration file and media resource configuration file corresponding to the target graphic element, and save them to the graphic element library.

[0072] Animation triggering rules refer to the rules / conditions used to trigger the animation display content of the target graphic elements corresponding to the data points of the target device. These rules / conditions can be discrete state information or continuous numerical range information.

[0073] As an example, if the target device data point corresponding to the target graphic element is a switch quantity or a multi-state quantity (such as objectType being a state family), then the user can be guided through the configuration graphic editing interface to define different discrete state information as animation triggering rules. For example, the user can add three states and name them: State 0: "Stop" State 1: "Run" State 2: "Fault".

[0074] As another example, if the target device data point corresponding to the target graphic element is an analog quantity (e.g., objectType is numerical), then the user can be guided through the configuration graphic editing interface to define different continuous numerical ranges as animation trigger rules. For example: Numerical range 1: current detected value ≤ 0; Numerical range 2: 0 < current detected value ≤ 0; Numerical range 3: current detected value > 50.

[0075] Media resources refer to the visual representation corresponding to each discrete state or numerical range in the animation triggering rules. For example, for the "stop" state, the corresponding visual representation could be a gray static image of a fan (fan_off.png). For the "run" state, the corresponding visual representation could be a green rotating fan GIF animation (fan_on.gif). For the "fault" state, the corresponding visual representation could be a red, flashing rotating fan GIF animation (fan_error.gif).

[0076] As an example, when the front-end device detects that the user has completed the custom configuration of the animation triggering rules and the corresponding media resources for the target graphic element and saved them, it generates two sets of core data and stores them in the JSON configuration file of the configuration scene. These two sets of core data are the animation triggering rule configuration file and the media resource configuration file for the target graphic element in the configuration scene.

[0077] The animation triggering rule configuration file includes an object that describes the animation triggering logic. This object defines the animation type (such as state or analog) and the list of states (values).

[0078] The media resource configuration file includes media resources that can be directly attached to the graphical elements in the configuration graphical editing interface to display the content. Specifically, this media resource configuration file can be an array of media resources, where each media resource index corresponds one-to-one with a trigger state index in the animation triggering rule file. Each graphical element contains a media resource URL (Uniform Resource Locator) that should be displayed in that state. In other words, one graphical element corresponds to one or more states, one state corresponds to one trigger state index value, one trigger state index value corresponds to one media resource index value, and one media resource index value corresponds to one media resource URL.

[0079] Step S206: When the real-time update data corresponding to the target device data point sent by the backend device is obtained, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, and the configuration graphic editing interface is refreshed synchronously.

[0080] Real-time updated data typically refers to changes in the status of a target device data point or changes in its monitored values. For example, if the target device data point is a temperature detection point, then the real-time updated data for that temperature detection point could be the change in the device's temperature.

[0081] The technical solution provided in this application adopts a web-based plug-in configuration editing architecture, which does not require the installation of client software and can be accessed through a browser, greatly reducing deployment and maintenance costs; it uses a visual data binding method to complete complex configuration and animation configuration, which can be used proficiently by non-technical personnel after simple training, improving efficiency by more than 80% compared with the traditional programming method; the data latency is less than 50 milliseconds, which fully meets the needs of industrial real-time monitoring.

[0082] In some embodiments, a configuration graphical editing interface is displayed, including:

[0083] Initialize the configuration graphics editing component and create a canvas;

[0084] Get the canvas size, the viewport size of the front device, and the container size of the intermediate container. The viewport of the front device, the intermediate container, and the canvas form a hierarchical dependency relationship from the outside to the inside.

[0085] Calculate the canvas scaling ratio and canvas offset based on the canvas size and container size;

[0086] Based on the canvas scaling ratio and canvas offset, update the first viewport transformation matrix of the canvas so that the canvas size adapts to the container size of the intermediate container and the viewport size of the front-end device.

[0087] The configuration graphic editing interface is displayed on the adjusted canvas.

[0088] As an example, the configuration graphics component is initialized, the Fabric.js canvas instance is loaded and the workspace management component is initialized, the canvas is created by calling newfabric.Canvas('editorCanvas',{preserveObjectStacking:true}), and then the adaptive plugin is registered by calling newWorkspacePlugin(canvas,container,{}) to establish the adaptation foundation and prepare for dynamic adjustment of the environment.

[0089] In some embodiments, the canvas size includes the canvas width and the canvas height, and the container size includes the container width and the container height. Based on the canvas size and the container size, the canvas scaling ratio and the canvas offset are calculated, including:

[0090] Calculate the horizontal scaling factor based on the canvas width and container width;

[0091] Calculate the vertical scaling factor based on the canvas height and container height;

[0092] Calculate the canvas scaling ratio based on the horizontal scaling factor, vertical scaling factor, and preset adjustment coefficients;

[0093] Determine the canvas offset based on the container size, canvas size, and canvas scaling ratio.

[0094] As an example, the horizontal scaling factor can be calculated according to formula (1).

[0095]

[0096] In equation (1), scaleX represents the horizontal scaling factor, containerWidth represents the container width, and canvasWidth represents the canvas width.

[0097] Calculate the vertical scaling factor according to formula (2).

[0098]

[0099] In equation (2), scaleY represents the vertical scaling factor, containerHeight represents the container height, and canvasHeight represents the canvas height.

[0100] Calculate the canvas scaling ratio according to formula (3).

[0101] scale=Math.min(scaleX,scaleY)*β (3);

[0102] In equation (3), scale represents the canvas scaling ratio, scaleX represents the horizontal scaling factor, scaleY represents the vertical scaling factor, and β represents the adjustment coefficient, which can be a decimal between 0 and 1. Generally, the value is 0.95 to avoid excessive scaling that could cause graphic distortion.

[0103] The canvas offset includes a horizontal offset and a vertical offset. For example, the horizontal offset can be calculated according to formula (4), and the vertical offset can be calculated according to formula (5).

[0104]

[0105] In equation (4), offsetX represents the horizontal offset, containerWidth represents the container width, canvasWidth represents the canvas width, and scale represents the canvas scaling ratio.

[0106]

[0107] In equation (5), offsetY represents the vertical offset, containerHeight represents the container height, canvasHeight represents the canvas height, and scale represents the canvas scaling ratio.

[0108] Next, the Graphics Component applies the above calculation results to adjust the canvas viewport. Specifically, it can call canvas.setViewportTransform([scale,0,0,scale,offsetX,offsetY]) to update the first viewport transformation matrix of the canvas, so that the canvas size adapts to the container size of the intermediate container and the viewport size of the front-end device, thereby achieving cross-device scaling and layout adaptation.

[0109] In some embodiments, the configuration graphics component can be bound to window.addEventListener('resize',()=>{...}) to re-execute the above detection and adjustment logic when the event is triggered, so as to respond to window size changes in real time and ensure continuous real-time adaptation.

[0110] In some embodiments, displaying a configuration graphics editing interface on the adjusted canvas includes:

[0111] Get the current pixel ratio of the viewport of the front-end device;

[0112] The canvas is rendered and updated based on the current pixel comparison adjustment to obtain the updated canvas, and the configuration graphic editing interface is displayed on the updated canvas.

[0113] Current pixel ratio refers to the ratio of the width to the height of a single pixel in the viewport of the front-end device (the content area actually visible to the user on the front-end device) at the current moment.

[0114] As an example, the current pixel ratio of the front-end device's viewport can be detected in real time via the browser API. Specifically, the Graphics Component calls `window.devicePixelRatio` to obtain the current pixel ratio of the front-end device's viewport and records the initial value. Then, it calls the `canvas.renderAll()` method to update the rendering parameters (such as resolution) of the adjusted canvas using the current pixel ratio, resulting in an updated canvas, on which the configuration graphics editing interface is displayed.

[0115] By detecting the current pixel ratio of the viewport of the front-end device in real time and using this current pixel ratio to dynamically adjust the resolution of the adjusted canvas, the high-definition display effect of the configuration graphics editing interface can be ensured, thereby improving the user experience.

[0116] In some embodiments, when real-time updated data corresponding to the target device data point sent by the backend device is obtained, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, including:

[0117] Based on the animation trigger rule configuration file, the real-time updated data corresponding to the target device data points is parsed to obtain the trigger status index value;

[0118] Query the media resource configuration file to obtain the media resource corresponding to the trigger status index value;

[0119] Update the display content of the target graphic element to the media resource.

[0120] As an example, when the Graphics Component receives real-time updated data corresponding to the target device data point from the backend device in backend layer 103 via the WebSocket real-time communication component, the updateCanvasObjects function is triggered. This function internally calls the checkAnimationValues ​​method, which parses the received real-time updated data according to the pre-stored "animation trigger rule configuration file" and returns a triggeredIndex (trigger status index value). Then, this triggeredIndex is used to look up the corresponding visual representation in the (animationStatusBasedValues) array of the "media resource configuration file" corresponding to the target graphic element to obtain the correct image or GIF animation URL. Finally, the display content of the target graphic element is dynamically updated to the obtained media resource, thereby achieving precise data-to-animation driving.

[0121] If the media resource is a GIF, the Configurable Graphics Component can also utilize an efficient cloning and reuse mechanism to create animation instances, ensuring performance.

[0122] In some embodiments, querying a media resource configuration file to obtain the media resource corresponding to the trigger state index value includes:

[0123] If the media resource cache includes cached media resources corresponding to the trigger status index value, then read the cached media resources from the media resource cache;

[0124] If the media resource cache does not include the cached media resource corresponding to the trigger state index value, then the media resource corresponding to the trigger state index value is downloaded from the media resource configuration file, the media resource is decoded to obtain the decoded media cache resource, and the decoded media cache resource is stored in the media resource cache.

[0125] Cached media resources refer to media resources that have already been downloaded and cached.

[0126] As an example, when the Graphics Component receives real-time update data from the backend device, it parses the data to obtain a trigger state index value. Then, it queries a download cache (blobCache) or fabricGifCache mapping table with the URL as the key. If a cached media resource corresponding to the trigger state index value is found, it is directly read from the media resource cache. If no cached media resource corresponding to the trigger state index value is found, it indicates that the media resource corresponding to the trigger state index value has not been downloaded and cached. In this case, it can further query the media resource configuration file, download the media resource corresponding to the trigger state index value from the media resource configuration file, decrypt the media resource to obtain a decoded media cache resource, and store the decoded media cache resource in the media resource cache for subsequent use.

[0127] After successfully decoding a GIF animation for the first time, the generated fabric.Image animation object (containing all frame information) can be stored in a fabricGifCache mapping table with the local URL as the key for easy subsequent calls.

[0128] Decoding and creating instances of GIF animations is a relatively time-consuming operation. By using the method described above, we can ensure that the same media resource is downloaded and decoded only once globally, avoiding repeated downloading and decoding of the same media resource. This helps to save the download and decoding time of media resources, thereby improving the real-time update of the display content corresponding to the target graphic element.

[0129] In some embodiments, when a second identical GIF animation is needed in a configured scenario (e.g., two identical fans are rotating), the "source" animation object can be retrieved directly from fabricGifCache, and a new instance can be quickly cloned using the fabric.util.object.clone method. Cloning is much faster than decoding, thus enabling efficient animation reuse.

[0130] In some embodiments, the configuration graphical editing interface is refreshed synchronously, including:

[0131] Determine the current viewport boundary of the configuration graphics editing interface;

[0132] Iterate through all graphic elements on the configuration graphic editing interface and obtain the bounding box corresponding to each graphic element;

[0133] The current viewport boundary is compared with the bounding box corresponding to each graphic element to determine the graphic elements to be rendered and the non-rendered graphic elements.

[0134] When the configuration graphic editing interface is refreshed synchronously, the rendering operation is performed on the graphic elements to be rendered on the configuration graphic editing interface, but the rendering operation is not performed on the non-rendering graphic elements.

[0135] As an example, before each frame rendering task begins, the Graphics Component first obtains the current viewport transformation matrix of the canvas. Combining this with the actual width and height of the intermediate container (or canvas container), it calculates the rectangular boundary of the user's currently visible area in the canvas coordinate system—that is, the current viewport boundary of the graphics editing interface. Next, it iterates through all graphic elements (or graphic objects) on the graphics editing interface and obtains the bounding box of each graphic object. It then determines whether the bounding box of each graphic object intersects the current viewport boundary (completely containing or partially intersecting). If the bounding box of a graphic object intersects the current viewport boundary, then that graphic object is identified as a graphic element to be rendered (visible image element within the viewport); if the bounding box of a graphic object does not intersect the current viewport boundary, then that graphic object is identified as a non-rendered graphic element (not visible outside the viewport). Finally, while synchronously refreshing the graphics editing interface, it performs rendering operations on the graphic elements to be rendered on the interface, but does not perform rendering operations on non-rendered graphic elements.

[0136] The above solution can be implemented by enabling the skipOffscreen:true property in Fabric.js or by overriding the canvas rendering method. Combined with WorkspacePlugin's precise management of the viewport, the accuracy of the culling algorithm (used to cull invisible graphic elements outside the viewport) can be ensured.

[0137] By using the above method, it is possible to render only the graphic elements that are rendered into the user's current browser viewport, while skipping the rendering of graphic elements outside the viewport, thereby greatly reducing unnecessary rendering calculations and improving the rendering performance of large-scale canvases.

[0138] In some embodiments, the configuration graphical editing interface is refreshed synchronously, including:

[0139] Identify and cache static graphical elements on the configuration graphical editing interface;

[0140] When the configuration graphic editing interface is refreshed for the first time during rendering, the vector drawing result of the static graphic elements is rasterized into a bitmap and cached;

[0141] If the configuration graphic editing interface is refreshed again and the attributes of the static graphic elements have not changed, the bitmap corresponding to the static graphic elements will be cached and directly drawn on the configuration graphic editing interface.

[0142] Static graphic elements refer to graphic elements that do not change frequently on the canvas (such as background images, device stands, etc.).

[0143] During the initial rendering, the Graphics Component first rasterizes the vector drawing results of the identified static graphic elements into a bitmap and caches it in the front-end device's memory. During subsequent renderings, as long as the attributes of the static graphic element (such as color and size) remain unchanged, the corresponding bitmap is directly drawn onto the configuration graphics editing interface, caching it as is. This eliminates the need for complex vector calculations, significantly improving rendering efficiency.

[0144] In some embodiments, if there are multiple target graphic elements to be updated in the same update batch, the real-time update data of all target graphic elements to be updated is written into an update array.

[0145] Iterate through each real-time update data in the update array and update the attribute information of the target graphic element corresponding to each real-time update data;

[0146] After the attribute information of the target graphic element corresponding to each real-time updated data is updated, the rendering function is called in a unified manner to update the display content of all target graphic elements to be updated, and the configuration graphic editing interface is refreshed synchronously.

[0147] As an example, the Graphics Component can receive an update array containing multiple real-time update data entries at once via a WebSocket listener, such as [{objectId_1, value_1}, {objectId_2, value_2}, ...]. Here, objectId_1 represents target device data point 1, value_1 represents real-time update data 1 corresponding to target device data point 1, objectId_2 represents target device data point 2, and value_2 represents real-time update data 2 corresponding to target device data point 2. Next, the Graphics Component calls the updateCanvasObjects function, passing the entire update array as a parameter. This function iterates through the update array. For each update data entry, the system finds its corresponding graphic object (graphic element) on the canvas and calls the object's set() method to update its properties (such as modifying text, changing color, or setting visibility). This step only changes the state of the graphic object in memory and does not immediately trigger rendering. After iterating through the entire update array and updating the memory state of all related graphics objects, the system will call canvas.renderAll() only once at the end of the function.

[0148] To further improve smoothness, the execution of batch updates and the final rendering instructions are scheduled to be executed in the callback of requestAnimationFrame. This ensures that all updates are completed before the browser's next repaint, in sync with the browser's rendering cycle, thus achieving the smoothest visual effect.

[0149] All of the above-mentioned optional technical solutions can be combined in any way to form the optional embodiments of this application, and will not be described in detail here.

[0150] Figure 3 This is a schematic diagram illustrating the interactive flow of a visual data binding method provided in an embodiment of this application. Please refer to [link / reference]. Figure 3 The method includes:

[0151] 1) Users select graphic elements. Specifically, users can select the target graphic element from the graphic element library on the configuration graphic editing interface.

[0152] 2) Open the binding panel. Specifically, when the Graphics Component detects that the user has selected a graphic element, it calls the DataBinding Component to open the binding panel, which displays a set of device data points provided by the backend device.

[0153] 3) Users select device data points. Specifically, users can drag and drop the desired target device data points directly from the binding panel.

[0154] 4) Save the binding configuration. Specifically, save the binding configuration between the target device data point selected by the user and the target graphic element.

[0155] 5) Devices at the device layer report real-time updated data to backend devices.

[0156] 6) The backend device pushes real-time updated data to the real-time communication component (WebSocket).

[0157] 7) The real-time communication component (WebSocket) sends real-time updated data to the configuration graphics editing component (Graphics Component).

[0158] 8) The configuration graphics component receives the real-time update data and uses it to update the graphic state of the target graphic element.

[0159] Figure 4 This is a flowchart illustrating a real-time data update method provided in an embodiment of this application. Please refer to... Figure 4 Taking the real-time data update process of the sensor as an example, this method includes:

[0160] 1) Data acquisition: The sensor starts the data acquisition unit to collect real-time data and performs data conversion on the real-time data to obtain converted data.

[0161] 2) Data processing: The transformed data is filtered, aggregated, and processed by a rule engine to obtain the processed data.

[0162] 3) Data push: The processed data is pushed into the message queue. The backend device pushes the processed data to the frontend device by calling the WebSocket service. The frontend device uses the processed data to update the graphic animation, numerical display or state switching of the graphic elements.

[0163] In some embodiments, the configuration software of this application further includes a visual data value display component. This component can be created on a Fabric.js canvas using a group of graphical objects (fabric.Group), which consists of multiple independent graphical sub-objects such as "valueText" and "unitText". This component can declare its special identity and bound device data points through custom properties isBasicValueBox:true and bindingId.

[0164] In practical applications, the canvas's mouse:down event checks if the clicked object is an isBasicValueBox. If it is, the getPresentValueInfoData function is triggered, automatically connecting to subsequent API requests and pop-up logic.

[0165] After receiving real-time updated data through the real-time communication component (WebSocket), the updateCanvasObjects function is called to accurately locate the corresponding visualization data value display component. This component not only updates the displayed value, but also changes the text color according to information such as priority in the data (for example, changing color when an alarm is triggered), providing richer status visualization.

[0166] This visual data display component is a two-way interactive control unit. It not only displays data in real time, but more importantly, it allows users to directly initiate control commands by clicking the component. Clicking it brings up a dialog box with standard industrial control operations such as "Force" and "Release," allowing users to enter new values ​​or modify priorities, and then send commands to the backend system. Essentially, this seamlessly integrates data display and equipment control functions onto a single graphical element.

[0167] In some embodiments, the configuration software provided in this application has intelligent graphic editing functions, including intelligent pipeline drawing (straight line / right angle mode), automatic alignment and distribution, batch operation, layer management, etc.

[0168] The specific implementation process of the intelligent pipeline drawing (straight line / right angle mode) function is as follows:

[0169] 1) Select the mode (right angle mode or straight line mode).

[0170] 2) If the straight line mode is selected, the point coordinates are recorded and a polyline path is generated; if the right angle mode is selected, the inflection points are calculated and a right angle path is generated.

[0171] 3) Apply gradient effects: metallic base layer, white highlight layer, and custom color layer.

[0172] 4) Create a pipe group and add it to the canvas.

[0173] The automatic alignment and distribution feature optimizes the layout of graphic elements through intelligent algorithms, supporting horizontal / vertical alignment and equidistant distribution, improving the efficiency and aesthetics of graphic editing. The specific implementation process of this feature is as follows:

[0174] 1) Trigger detection: When the user selects multiple graphic elements (by Shift+click or by selecting with a box), the system automatically detects the bounding box of the selected objects.

[0175] 2) Alignment calculation: Calculate reference lines (e.g., the coordinates of the leftmost / rightmost object) based on the alignment method selected by the user (left alignment, center alignment, right alignment, etc.).

[0176] 3) Position adjustment: Call the set method of Fabric.js to update the left or top property of the objects in batches, so that they are aligned with the reference line.

[0177] 4) Distribution processing: If the distribution operation is selected, the system calculates the number of selected objects and the total width / height, distributes the spacing evenly, and updates the object positions.

[0178] 5) Render update: Execute canvas.renderAll() to refresh the canvas and display the aligned or distributed results.

[0179] 6) Auxiliary feedback: Real-time drawing of alignment lines (using Fabric.js Line object) to help users verify the effect.

[0180] The beneficial effects of the above technical solution include: alignment accuracy at the pixel level, improved operating efficiency by about 50%, and suitability for complex industrial layout design.

[0181] Batch operation functionality supports unified modification of multiple graphic elements (such as moving, scaling, and adjusting attributes), improving the efficiency of multi-object management. The specific implementation process is as follows:

[0182] 1) Object selection: Users select multiple graphic elements using box selection or multi-select tools, and the system records a list of IDs of the selected objects.

[0183] 2) Operation trigger: The user selects the batch operation type (move, zoom, attribute modification) and inputs parameters (such as movement distance or zoom ratio).

[0184] 3) Batch update: Iterate through the selected objects and call the set method of Fabric.js to apply the operation uniformly, for example, set({left:left+dx,top:top+dy}).

[0185] 4) Conflict check: Detects objects that overlap or extend beyond the canvas boundary, automatically adjusts their position or prompts the user.

[0186] 5) Synchronous rendering: Execute canvas.renderAll() to refresh the canvas and display the results of batch operations.

[0187] 6) Undo support: Records operation state to history stack, supporting single-step or full undo.

[0188] The beneficial effects of the above technical solution include: batch operation time is reduced by 70% compared to single operation, and it supports simultaneous editing of 100+ objects.

[0189] The layer management function supports the organization and editing of complex graphics through hierarchical control and visibility adjustment, enhancing the user experience. Its specific implementation process is as follows:

[0190] 1) Initialization: The graphics editor loads the Fabric.js canvas, creates a default layer list, and assigns initial layer IDs.

[0191] 2) Layer creation: Users add new layers through the interface, and the system generates a unique ID and inserts it into the layer list.

[0192] 3) Object assignment: When a user drags a graphic to a specified layer, the object's layerID property is updated and bound to the corresponding layer.

[0193] 4) Layer adjustment: Users can drag the layer bar or click the move up / down button, and the system will reorder the layer list and update the rendering order.

[0194] 5) Visibility control: Users can toggle layer on / off switches and modify the object's visible property to render only the content of visible layers.

[0195] 6) Lock Editing: The user locks the layer and sets the object lockMovement to true to prevent modification; unlocking restores editing.

[0196] 7) Save and synchronize: The layer configuration is serialized as JSON and saved to the backend, and then synchronized to other clients via WebSocket.

[0197] The benefits of the above technical solution include: support for 50+ layer management, 60% improvement in editing efficiency, and real-time synchronization latency of less than 50 milliseconds.

[0198] In some embodiments, Konva.js can be used instead of Fabric.js to provide similar Canvas manipulation capabilities, Three.js can be used to implement 3D configuration graphics, and the native Canvas API can be used with the configuration graphics editing component (GraphicsComponent).

[0199] In some embodiments, the aforementioned real-time communication component (WebSocket) can be replaced with Server-SentEvents (SSE), HTTP / 2 Server Push, or MQTT protocol communication components.

[0200] In some embodiments, the front-end layer can be designed using Vue.js + Element UI, Angular + Material Design, or native Web Components frameworks.

[0201] In summary, the technical solutions provided in this application have the following beneficial effects:

[0202] (1) Zero installation and deployment: It is based entirely on Web technology, requiring no client software installation and can be accessed through a browser, greatly reducing deployment and maintenance costs.

[0203] (2) Low operating threshold: Complex configuration can be completed through visual drag and drop. Non-technical personnel can become proficient in using it after simple training. Compared with the traditional method that requires programming, the efficiency is improved by more than 80%.

[0204] (3) Superior real-time performance: Using WebSocket long connection and optimized update algorithm, the data latency is less than 50ms, which fully meets the needs of industrial real-time monitoring.

[0205] (4) Strong cross-platform capability: Automatically adapts to various terminal devices such as PCs, tablets, and mobile phones, and supports operating systems such as Windows, Linux, and Mac.

[0206] (5) Good scalability: The plug-in architecture design allows for the rapid development of new functions according to industry needs and supports integration with third-party systems.

[0207] (6) Strong graphic editing capabilities: It provides complete graphic editing functions, including intelligent pipeline drawing, automatic alignment, layer management, etc., and improves editing efficiency by 60% compared with traditional software.

[0208] (7) High data security: Supports HTTPS encrypted transmission and fine-grained access control to ensure data security.

[0209] This application also provides a web-based configuration graphics editing system, including a front-end device and a back-end device communicatively connected to the front-end device;

[0210] The front-end device is configured to display a configuration graphic editing interface, which includes a data point display area and a graphic element library. The graphic element library includes various types of graphic element sets, and a graphic element set includes at least one graphic element.

[0211] The data point display area displays a set of device data points provided by the backend devices. The set of device data points includes multiple devices, and each device includes at least one device data point.

[0212] Based on the graphic element library and the device data point set, the target graphic elements and target device data points are determined.

[0213] In response to the binding operation between the target graphic element and the target device data point, a mapping relationship between the target graphic element and the target device data point is established;

[0214] In response to an animation configuration request for a target graphic element, generate an animation trigger rule configuration file and a media resource configuration file corresponding to the target graphic element, and save them to the graphic element library;

[0215] When the real-time updated data corresponding to the target device data point sent by the backend device is obtained, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, and the configuration graphic editing interface is refreshed synchronously.

[0216] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0217] Figure 5 This is a schematic diagram of the electronic device 500 provided in an embodiment of this application. For example... Figure 5 As shown, the electronic device 500 of this embodiment includes: a processor 501, a memory 502, and a computer program 503 stored in the memory 502 and executable on the processor 501. When the processor 501 executes the computer program 503, it implements the steps in the various method embodiments described above. Alternatively, when the processor 501 executes the computer program 503, it implements the functions of each module / unit in the various device embodiments described above.

[0218] Electronic device 500 can be a desktop computer, laptop, handheld computer, cloud server, or other electronic device. Electronic device 500 may include, but is not limited to, processor 501 and memory 502. Those skilled in the art will understand that... Figure 5 This is merely an example of electronic device 500 and does not constitute a limitation on electronic device 500. It may include more or fewer parts than shown, or different parts.

[0219] The processor 501 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0220] Memory 502 can be an internal storage unit of electronic device 500, such as a hard disk or RAM of electronic device 500. Memory 502 can also be an external storage device of electronic device 500, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, Flash Card, etc., equipped on electronic device 500. Memory 502 can also include both internal and external storage units of electronic device 500. Memory 502 is used to store computer programs and other programs and data required by electronic device.

[0221] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0222] If an integrated module / unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, all or part of the processes in the methods of the above embodiments can also be implemented by a computer program instructing related hardware. The computer program can be stored in a readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program may include computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. A computer-readable medium may include: any entity or device capable of carrying computer program code, recording media, USB flash drives, portable hard drives, magnetic disks, optical disks, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc. It should be noted that the content included in a computer-readable medium can be appropriately added to or subtracted according to the requirements of legislation and patent practice in a jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, a computer-readable medium does not include electrical carrier signals and electrical signals.

[0223] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included within the protection scope of this application.

Claims

1. A Web-based configuration graphics editing method, characterized in that, include: Front-end device: The configuration graphic editing interface includes a data point display area and a graphic element library. The graphic element library includes various types of graphic element sets, and each graphic element set includes at least one graphic element. The data point display area displays a set of device data points provided by the backend device. The set of device data points includes multiple devices, and each device includes at least one device data point. Based on the aforementioned graphic element library and device data point set, the target graphic element and target device data point are determined; In response to the binding operation between the target graphic element and the target device data point, a mapping relationship between the target graphic element and the target device data point is established; In response to the animation configuration request for the target graphic element, an animation triggering rule configuration file and a media resource configuration file corresponding to the target graphic element are generated and saved to the graphic element library; Upon receiving the real-time updated data corresponding to the target device data point sent by the backend device, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, and the configuration graphic editing interface is refreshed synchronously.

2. The method according to claim 1, characterized in that, The configuration graphical editing interface is displayed, including: Initialize the configuration graphics editing component and create a canvas; The canvas size, the viewport size of the front-end device, and the container size of the intermediate container are obtained, wherein the viewport of the front-end device, the intermediate container, and the canvas form a hierarchical dependency relationship from the outside to the inside. Based on the canvas size and container size, calculate the canvas scaling ratio and canvas offset; Based on the canvas scaling ratio and canvas offset, update the first viewport transformation matrix of the canvas so that the canvas size adaptively matches the container size of the intermediate container and the viewport size of the front-end device. The configuration graphic editing interface is displayed on the adjusted canvas.

3. The method according to claim 2, characterized in that, The canvas size includes the canvas width and the canvas height, and the container size includes the container width and the container height; Based on the canvas size and container size, calculate the canvas scaling ratio and canvas offset, including: Calculate the horizontal scaling factor based on the canvas width and container width; Calculate the vertical scaling factor based on the canvas height and container height; The canvas scaling ratio is calculated based on the horizontal scaling factor, the vertical scaling factor, and the preset adjustment coefficient. The canvas offset is determined based on the container size, canvas size, and canvas scaling ratio.

4. The method according to claim 2 or 3, characterized in that, Display the configuration graphics editing interface on the adjusted canvas, including: Obtain the current pixel ratio of the viewport of the front-end device; Based on the current pixel ratio, the adjusted canvas is rendered and updated to obtain an updated canvas, and the configuration graphic editing interface is displayed on the updated canvas.

5. The method according to claim 1, characterized in that, Upon receiving real-time updated data corresponding to the target device data point sent by the backend device, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, including: Based on the animation triggering rule configuration file, the real-time update data stream corresponding to the target device data point is parsed to obtain the triggering state index value; Query the media resource configuration file to obtain the media resource corresponding to the trigger status index value; Update the display content of the target graphic element to the media resource.

6. The method according to claim 5, characterized in that, Query the media resource configuration file to obtain the media resource corresponding to the trigger state index value, including: If the media resource cache includes cached media resources corresponding to the trigger state index value, then the cached media resources are read from the media resource cache; If the media resource cache does not include the cached media resource corresponding to the trigger state index value, then the media resource corresponding to the trigger state index value is downloaded from the media resource configuration file, the media resource is decoded to obtain the decoded media cache resource, and the decoded media cache resource is stored in the media resource cache.

7. The method according to claim 4, characterized in that, The configuration graphic editing interface is refreshed synchronously, including: Determine the current viewport boundary of the configuration graphics editing interface; Traverse all graphic elements on the configuration graphic editing interface and obtain the bounding box corresponding to each graphic element; The current viewport boundary is compared with the bounding box corresponding to each of the graphic elements to determine the graphic elements to be rendered and the non-rendered graphic elements. When the configuration graphic editing interface is refreshed synchronously, the rendering operation of the graphic elements to be rendered on the configuration graphic editing interface is performed, but the rendering operation of the non-rendering graphic elements is not performed.

8. The method according to claim 1, characterized in that, The configuration graphic editing interface is refreshed synchronously, including: Identify and cache static graphic elements on the configuration graphic editing interface; When the configuration graphic editing interface is refreshed for the first time during rendering, the vector drawing result of the static graphic element is rasterized into a bitmap and cached; If the configuration graphic editing interface is refreshed again and the attributes of the static graphic element have not changed, the bitmap corresponding to the static graphic element is cached and directly drawn on the configuration graphic editing interface.

9. The method according to claim 1, characterized in that, If there are multiple target graphic elements to be updated in the same update batch, the real-time update data of all target graphic elements to be updated are written into an update array; Iterate through each piece of real-time updated data in the update array and update the attribute information of the target graphic element corresponding to each piece of real-time updated data; After the attribute information of the target graphic element corresponding to each real-time updated data is updated, the rendering function is called in a unified manner to update the display content of all target graphic elements to be updated, and the configuration graphic editing interface is refreshed synchronously.

10. A Web-based configuration graphic editing system, characterized in that, Includes a front-end device and a back-end device that is communicatively connected to the front-end device; The front-end device is configured to display a configuration graphic editing interface, which includes a data point display area and a graphic element library. The graphic element library includes various types of graphic element sets, and a graphic element set includes at least one graphic element. The data point display area displays a set of device data points provided by the backend device. The set of device data points includes multiple devices, and each device includes at least one device data point. Based on the aforementioned graphic element library and device data point set, the target graphic element and target device data point are determined; In response to the binding operation between the target graphic element and the target device data point, a mapping relationship between the target graphic element and the target device data point is established; In response to the animation configuration request for the target graphic element, an animation triggering rule configuration file and a media resource configuration file corresponding to the target graphic element are generated and saved to the graphic element library; Upon receiving the real-time updated data corresponding to the target device data point sent by the backend device, the display content of the target graphic element is updated based on the animation trigger rule configuration file and the media resource configuration file, and the configuration graphic editing interface is refreshed synchronously.

Images