Visual configuration development method and device, electronic equipment and storage medium

Abstract

The invention provides a visual configuration development method and device, electronic equipment and a storage medium. The method comprises the following steps: loading a visual configuration design interface; creating a configuration picture in the resource bar, and opening the configuration picture in the editing area; dragging the visual object in the resource bar to an editing area for visual drawing, configuring appearance attributes, interaction logic and data source binding of an icon control and a graphic object in an attribute bar, and generating configuration picture content; creating a user-defined control in the resource bar, quoting the user-defined control in the configuration picture, and loading and displaying graphic content of the user-defined control in the editing area; and in response to the access of the user to the preview page of the configuration picture, rendering is performed according to the configuration picture data, and the rendered configuration picture data is pushed to the front end. According to the application, the complexity of deployment and maintenance can be reduced, the expansibility is improved, the system cost is reduced, and the cross-platform compatibility is improved.

Description

Technical Field

[0001] The present application relates to the field of industrial automation technology, and in particular to a visual configuration development method, device, electronic device and storage medium. Background Art

[0002] In the field of human-machine interface (HMI), visual configuration technology is an important means to achieve production process monitoring, data collection and analysis, and process management in industrial automation. At present, HMI configuration development methods are mainly based on the following two architectures:

[0003] Desktop configuration software based on C / S architecture: Traditional C / S architecture configuration tools usually consist of locally installed editors, rendering engines, and databases. Users design monitoring screens through editors, use specific rendering engines to generate visual interfaces, and store them in local or network databases. This method requires the installation of dedicated software on each client and has a strong dependence on hardware and operating systems.

[0004] Web configuration tools based on B / S architecture: Configuration tools based on B / S architecture use Web technologies such as HTML, CSS, and JavaScript to run in the browser, and usually use SVG or HTML DOM elements for screen rendering. Users access online configuration tools through browsers without installing additional software, which has certain cross-platform advantages.

[0005] Although existing technologies have achieved certain results in configuration development, there are still problems such as complex deployment and maintenance, high hardware requirements, increased system costs, lack of cross-platform support, performance bottlenecks and low rendering efficiency, and poor dynamic adaptability. Summary of the invention

[0006] In view of this, the embodiments of the present application provide a visual configuration development method, device, electronic device and storage medium to solve the problems of complex deployment and maintenance, poor scalability, increased system cost and poor cross-platform compatibility in the prior art.

[0007] According to a first aspect of an embodiment of the present application, a visual configuration development method is provided, including: accessing a configuration editor deployed in the cloud, loading a resource bar, an editing area, and a property bar to obtain a visual configuration design interface; creating a configuration screen in the resource bar, opening the configuration screen in the editing area, and loading operation tools and property configuration interfaces associated with the configuration screen; dragging a visual object in the resource bar to the editing area for visual drawing, and configuring the appearance properties, interaction logic, and data source binding of icon controls and graphic objects in the property bar to generate configuration screen content; creating a custom control in the resource bar, referencing the custom control in the configuration screen, and loading and displaying the graphic content of the custom control in the editing area; in response to a user's access to a preview page of the configuration screen, rendering is performed according to the configuration screen data, and the data of the rendered configuration screen is pushed to the front end, so that the front end updates the screen display content according to the data of the rendered configuration screen.

[0008] According to a second aspect of an embodiment of the present application, a visual configuration development device is provided, including: a loading module for accessing a configuration editor deployed in the cloud, loading a resource bar, an editing area, and a property bar to obtain a visual configuration design interface; a creation module for creating a configuration screen in the resource bar, opening the configuration screen in the editing area, and loading operation tools and property configuration interfaces associated with the configuration screen; a drawing module for dragging visual objects in the resource bar to the editing area for visual drawing, and configuring the appearance properties, interaction logic, and data source binding of icon controls and graphic objects in the property bar to generate configuration screen content; a display module for creating a custom control in the resource bar, referencing the custom control in the configuration screen, and loading and displaying the graphic content of the custom control in the editing area; a rendering module for rendering according to the configuration screen data in response to a user's access to a preview page of the configuration screen, and pushing the rendered configuration screen data to the front end so that the front end updates the screen display content according to the rendered configuration screen data.

[0009] According to a third aspect of an embodiment of the present application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the steps of the above method are implemented when the processor executes the computer program.

[0010] According to a fourth aspect of an embodiment of the present application, a computer-readable storage medium is provided, which stores a computer program, and when the computer program is executed by a processor, the steps of the above method are implemented.

[0011] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects:

[0012] By accessing the configuration editor deployed in the cloud, loading the resource bar, editing area and property bar to obtain a visual configuration design interface; creating a configuration screen in the resource bar, opening the configuration screen in the editing area, and loading the operation tools and property configuration interface associated with the configuration screen; dragging the visual object in the resource bar to the editing area for visual drawing, and configuring the appearance properties, interaction logic and data source binding of the icon control and the graphic object in the property bar to generate the configuration screen content; creating a custom control in the resource bar, referencing the custom control in the configuration screen, and loading the graphic content of the custom control in the editing area; in response to the user's access to the preview page of the configuration screen, rendering is performed according to the configuration screen data, and the data of the rendered configuration screen is pushed to the front end, so that the front end updates the screen display content according to the data of the rendered configuration screen. This application can reduce the complexity of deployment and maintenance, improve scalability, reduce system costs, and enhance cross-platform compatibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0014] Figure 1 It is a schematic diagram of the system architecture involved in the visual configuration development method based on B / S architecture provided in the embodiment of the present application;

[0015] Figure 2 It is a flowchart of the visual configuration development method provided in the embodiment of the present application;

[0016] Figure 3 It is a schematic diagram of the process of creating a custom control and dragging a primitive object to the editing area for drawing provided in an embodiment of the present application;

[0017] Figure 4 It is a schematic diagram of the flow of configuration screen rendering provided by an embodiment of the present application;

[0018] Figure 5 It is a structural diagram of a visual configuration development device provided in an embodiment of the present application;

[0019] Figure 6 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0020] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0021] In the field of industrial automation, the visualization configuration of the human-machine interface (HMI) is the core technology for factory production process monitoring, data collection and analysis, and process management. Through HMI, operators can monitor equipment status in real time, control industrial processes, and respond to abnormal alarms.

[0022] In order to realize the visualization operation of HMI, it is usually necessary to develop a "configuration software" whose purpose is to dynamically map industrial equipment, processes and data to the human-machine interaction interface in a graphical way. In other words, the core task of the configuration software is to provide users with a visual "industrial control panel".

[0023] Traditional HMI configuration development methods mainly use the following two architectures:

[0024] C / S architecture (Client-Server architecture): Dedicated configuration software needs to be installed on the client (usually a PC), and users design and edit the monitoring screen through a local visual editor.

[0025] B / S architecture (Browser-Server architecture): Users access the Web-based configuration tool through a browser and directly design and interact with the HMI interface on the web page.

[0026] The emergence of these two architectures has promoted the development of visualization in industrial automation systems, but they also have many technical bottlenecks and limitations.

[0027] Desktop configuration software based on C / S architecture is generally composed of a locally installed editor, rendering engine and database. Users design and configure the monitoring screen through the editor, and the editor generates the interface through a specific rendering engine and stores it in a local or network database.

[0028] Web configuration tools based on B / S architecture generally use technologies such as HTML, CSS, JavaScript, etc. to run in the browser, and render the screen based on SVG or HMTL DOM elements; users access the online editor through the browser.

[0029] Traditional desktop software with C / S architecture is limited by system platform restrictions and cannot be used on tablets and smart phones. It has complex deployment (high version update and maintenance costs), poor control scalability, high hardware requirements, does not support cross-platform operation, and has complex configuration operations and high learning costs.

[0030] The configuration method of the SVG / DOM solution based on the B / S architecture relies on the browser's DOM tree and style calculation when processing a large number of graphics or complex charts, and has low rendering efficiency. As the complexity of industrial flow charts increases, the number of nodes increases dramatically, and when a large number of node operations are involved, it is easy to cause interface jams.

[0031] With the existing configuration software method, when there is a change in the industrial controlled object, the source program of the software must be modified, which has a high technical threshold and leads to a long development cycle. The successfully developed controls have a narrow scope of application and a low reuse rate due to the differences in each project.

[0032] Therefore, the above-mentioned prior art solutions still have the following disadvantages:

[0033] 1. Complex deployment and maintenance, poor scalability: The configuration tools of the traditional C / S architecture need to be installed and configured on each client. Version updates and maintenance require the installation, upgrade and configuration of each client to be handled separately. In addition, the control has poor scalability and often requires customized development, which increases the cost and complexity of operation and maintenance. This approach not only increases time costs, but also makes it difficult to uniformly manage and quickly respond to update needs.

[0034] 2. High hardware configuration requirements: In the traditional C / S architecture, client software usually requires high hardware configuration, especially when processing complex graphics and data interaction, which has high requirements for CPU, memory and graphics card. This increases the cost of the system and limits its application on low-configuration devices, which cannot meet the needs of cost-sensitive production environments.

[0035] 3. Lack of cross-platform support: Traditional client applications usually rely on specific operating systems (such as Windows) and do not support cross-platform operation. This means that users can only use configuration tools on a specific platform (such as a desktop PC) and cannot operate seamlessly on different operating systems or devices, which requires users to rely on specific hardware platforms, reducing the flexibility and scalability of the system.

[0036] 4. Reduced rendering performance and response speed: Although the SVG / DOM solution based on B / S architecture can solve the above problems, there are significant performance bottlenecks when processing large amounts of graphics, dynamic interactions, and frequent real-time data updates, resulting in interface freezes and high latency, which cannot meet the real-time and smoothness requirements of the industrial automation field.

[0037] In view of the problems existing in the prior art, this application proposes a visual configuration development method for a factory human-computer interaction interface based on a B / S (browser-server) architecture, which uses the HTML 5 technical standard, the underlying rendering adopts the Canvas API, and the configuration software programs are deployed on a cloud server; users access the configuration program designer page through a browser to create a configuration project screen, and the configuration project files are stored on the cloud server, which users can export to a local computer; users view the online configuration monitoring screen and data by accessing the configuration program preview page.

[0038] This application aims to solve the above-mentioned technical problems through a rendering solution based on HTML5 Canvas technology, combined with B / S architecture and low-code development methods, and provide a more flexible, easy-to-operate, and high-performance configuration development method that can not only solve the software limitations of the traditional C / S architecture, but also achieve excellent performance in the modern B / S architecture.

[0039] Before describing the technical solution of the present application in detail, the overall system architecture involved in the technical solution of the present application in actual scenarios is explained in conjunction with the drawings and embodiments. Figure 1 Schematic diagram of the system architecture involved in the visual configuration development method based on B / S architecture provided in the embodiment of the present application. Figure 1 As shown, the system architecture of the visual configuration development method based on B / S architecture can include the following module layers:

[0040] 1. Rendering layer: Encapsulates the graphics drawing related Canvas API provided by the browser, provides 2D graphics rendering and interaction capabilities, supports running in the browser environment, and provides basic rendering capabilities for the business layer. It is also a key core technology to improve graphics rendering performance and solve performance bottlenecks compared to SVG / DOM solutions based on traditional B / S architecture.

[0041] The rendering layer class design follows the structure of HTML Dom and provides two major categories: container and graphics. The container class provides the display area, including the Stage canvas, Layer layer, Group combination, etc. The graphics class provides parameter drawing of specific graphics, such as Rect rectangle, Polygon polygon, Image picture, etc. The two have a common parent class Node, which is used to provide common methods such as event processing, filters, bounding boxes, attribute access, etc. required by both.

[0042] 2. The business layer provides core capability support for the entire configuration editing method. It is mainly divided into two parts, one is the editing state (d2-editor) and the other is the preview state (d2-preview). It provides capability support for the editor UI layer. The business layer encapsulates most of the functional implementations of the entire editing software. For example, by clicking a button on the UI layer toolbar, the interface of the business layer is called. The goal is to simplify the implementation of the UI layer as much as possible.

[0043] 3. The editor UI layer refers to editor-related UI interface operations, which are strongly related to the business layer. In principle, the implementation and development difficulty of the UI layer should be simplified as much as possible. The UI is mainly responsible for the rendering and operation of the interface view. The business layer provides specific interface implementations for the UI layer to call. For example, click the button on the UI layer toolbar to call the interface of the business layer.

[0044] The contents of the technical solution of the present application are described in detail below with reference to the accompanying drawings and specific embodiments.

[0045] Figure 2 Schematic diagram of the process flow of the visual configuration development method provided in the embodiment of the present application. Figure 2 As shown, the visual configuration development method may specifically include:

[0046] S201, accessing the configuration editor deployed in the cloud, loading the resource bar, the editing area and the property bar to obtain a visual configuration design interface;

[0047] S202, creating a configuration screen in the resource bar, opening the configuration screen in the editing area, and loading the operation tool and property configuration interface associated with the configuration screen;

[0048] S203, dragging the visualization object in the resource bar to the editing area for visualization drawing, and configuring the appearance properties, interaction logic and data source binding of the icon control and the graphic object in the property bar to generate the configuration screen content;

[0049] S204, creating a custom control in the resource bar, referencing the custom control in the configuration screen, and loading and displaying the graphic content of the custom control in the editing area;

[0050] S205, in response to the user accessing the preview page of the configuration screen, rendering is performed according to the configuration screen data, and the rendered configuration screen data is pushed to the front end, so that the front end updates the screen display content according to the rendered configuration screen data.

[0051] In some embodiments, creating a configuration screen in a resource bar includes:

[0052] Create configuration screen resources in the resource bar, generate configuration screens based on the configuration screen resources, open the configuration screens in the editing area, and load the operation tools and property configuration interfaces related to the configuration screens;

[0053] Drag the visualization object to the editing area for drawing, so as to design the configuration screen in the editing area to obtain the designed configuration screen.

[0054] Specifically, when users access the configuration editor page through a browser, the system automatically loads interface components related to configuration development, including the resource bar, editing area, toolbar, and property configuration bar. The resource bar contains partitions such as "Drawing Tab" and "Symbol Tab" to manage various resources of users during the configuration process.

[0055] Furthermore, the user clicks the "Drawing Tab" on the left side of the Resource Bar and selects the "Create Configuration Screen" option to generate a new configuration screen resource file.

[0056] Furthermore, the system automatically stores the created configuration screen resources in the form of a JSON file in the backend server. The JSON file records the initial configuration content of the configuration screen, including the screen size, background settings, and the default blank layer structure.

[0057] Furthermore, after the creation is completed, the system automatically opens the configuration screen resource and displays it in the editing area. At the same time, the system loads the operation tools and property configuration interface related to the configuration screen:

[0058] Toolbar: Displays commonly used tools (such as selection, drawing, resizing, etc.) to facilitate users' quick operations.

[0059] Property configuration bar: used to display the properties of the currently selected object (such as position, size, color, etc.). Users can directly edit the object properties in the property bar.

[0060] Editing area: As the main working area, users can perform visual design and adjustment on the configuration screen in the editing area.

[0061] Furthermore, during the design of the configuration screen, the user can complete the screen editing in the following ways:

[0062] 1) Drag the visualization object to the editing area:

[0063] The user selects a basic graphic element (such as a rectangle, polygon, or picture) or a custom icon from the resource bar and drags it to the editing area to draw. The system will automatically locate the object according to the user's drag position and display the outline and properties of the object in the editing area.

[0064] 2) Adjust object properties:

[0065] After the user selects an object in the editing area, the specific parameters of the object can be modified in the property configuration bar, including but not limited to position, size, color, layer level, etc. After the modification is completed, the system will update the display effect in the editing area in real time.

[0066] 3) Dynamic interactive operation:

[0067] The user can adjust the size of the object by dragging the bounding box with the mouse, or set the hierarchical relationship of the object (such as top or bottom) through the right-click menu.

[0068] Finally, after the configuration design is completed, the user clicks the "Save" button, and the system synchronizes the designed configuration screen data to the backend server and stores it in the form of a JSON file. The JSON file contains the configuration information of all objects in the screen, including the object's type, attributes, location, and binding relationship with the data source.

[0069] Through the operation of the above embodiment, the user can complete the whole process from creating a configuration screen to designing a configuration screen, and at the same time realize the visual management and dynamic editing of resources, laying the foundation for subsequent screen preview and real-time data update.

[0070] In some embodiments, dragging a visualization object in a resource bar to an editing area for visualization drawing includes:

[0071] Drag the visualization object to the editing area to draw it, adjust the position, size and level of the visualization object in the editing area to generate a graphic layout, and configure the appearance properties, interaction logic and data source binding of the visualization object in the property bar to generate the configuration screen content;

[0072] The visualization objects include icon controls, graphic objects and / or resource files, and the editing area is used to display the design area of ​​the configuration screen.

[0073] Specifically, the user accesses the configuration editor page through a browser, and the system loads interface components such as a resource bar, an editing area, and a property bar.

[0074] Resource bar: Displays available resource objects, including icon controls, basic graphics elements (such as rectangles, polygons, pictures), and external resource files (such as charts and form controls).

[0075] Editing area: As the design area of ​​the configuration screen, it is used to display and adjust in real time the visual objects that the user drags to this area.

[0076] Property bar: used to display the relevant properties of the selected object. Users can configure the object's appearance, interaction logic, and data source binding in detail.

[0077] Furthermore, the user selects one or more visual objects (such as basic graphics or custom icons) from the resource bar and places them in the editing area by dragging the mouse. The system dynamically generates the initial layout and display effect of the object according to the drag position of the object.

[0078] The position of the object in the editing area is recorded in the form of coordinates, and the initial size and other appearance parameters are set according to the system default values, which can be further adjusted by the user.

[0079] Furthermore, after the user selects an object in the editing area, the user can adjust the position, size and level of the object through the following operations:

[0080] Position adjustment: Hold down the left mouse button and drag the object to update its position in the editing area in real time. The system records the final position coordinates of the object and updates the preview effect.

[0081] Resizing: Dynamically change the width and height of an object by dragging the bounding box of the object. The adjusted size information is reflected in the property bar in real time.

[0082] Hierarchy adjustment: Use the right-click function menu to adjust the hierarchical structure of the object, including "top", "bottom", or "move one layer up / down" to achieve the correct superposition display of the front and back graphics.

[0083] Furthermore, after selecting an object, the user can configure its appearance properties, interaction logic, and data source binding in the property bar on the right:

[0084] Appearance properties: including the object's color, border style, transparency and other appearance parameters. Users can directly enter values ​​or select preset options. The system will update the display effect in the editing area in real time based on the input.

[0085] Interaction logic: Configure the interactive behavior of the object through the right-click menu, such as click events, mouse hover trigger actions, etc. Users can select predefined interaction templates or customize interaction scripts.

[0086] Data source binding: Use the data binding option in the property bar to associate an object with an external real-time data source. For example, you can bind the real-time status data of a device to the text display property of an object, or bind the operating parameters of a production line to a chart control.

[0087] Furthermore, after the drawing and configuration of the object are completed, all the user's operations will be dynamically recorded in the configuration screen resource file.

[0088] The system stores the configuration screen content in the backend server in JSON format, including the location, size, level, appearance attributes, interaction logic, and data source binding information of each object. The edited configuration screen can be directly used for subsequent preview and real-time rendering operations.

[0089] For example, in a specific scenario, the user needs to design an interface for real-time monitoring of factory equipment status in the configuration screen:

[0090] The user drags a rectangular basic graphic element from the resource bar to the editing area and adjusts its size and position as the background frame of the device icon.

[0091] Select a custom icon from the resource bar (such as a device status indicator light control), place it in the center of the background frame, and bind the control's color property to the device operation status data source through the right-click menu (such as "running", "fault", "standby" and other states correspond to green, red and yellow respectively).

[0092] Finally, configure a click event for the device icon, which will display a pop-up window with detailed device operating parameters.

[0093] Through the operation of the above-mentioned embodiment, the user can quickly complete the design of the configuration screen, while achieving efficient adjustment and configuration of visualization objects, and generating configuration content with interactive functions and real-time data update capabilities.

[0094] In some embodiments, after generating the configuration screen content, the method further includes:

[0095] In response to a save operation triggered by the user, the design data of the configuration screen is synchronized to the cloud server, and the design data is stored in the cloud server in the form of a structured data file, wherein the design data includes layout information, attribute information, data binding relationship and permission configuration information of the graphic object.

[0096] Specifically, after the user completes the configuration screen design, clicks the "Save" button in the configuration editor interface, the system triggers the save operation, and synchronizes all the design data of the configuration screen to the cloud server.

[0097] The system captures all configuration contents configured by the user in the editing area, including the layout information, attribute information, data binding relationship and permission configuration information of the graphic objects.

[0098] The design data is stored in a structured data file (such as JSON format) to ensure the lightness and portability of the data.

[0099] Furthermore, after the save operation is completed, the system structures the design data and synchronizes it to the backend cloud server, where the design data may include the following:

[0100] Layout information: records the position, size, rotation angle, and hierarchical relationship of each graphic object in the editing area.

[0101] Attribute information: records the appearance attributes of graphic objects (such as color, transparency, font style) and interactive logic configuration (such as click events and mouse hover actions).

[0102] Data binding relationship: storage object and external data source binding information, including the data source address, data type and update frequency.

[0103] Permission configuration information: records the user's access rights to the configuration screen (such as viewing rights and editing rights) and related user role information.

[0104] Furthermore, after the configuration screen data is stored in the cloud, users can access the configuration application through different devices (such as PC, tablet and smartphone). The specific process includes:

[0105] The user logs in to the system through the preview address, and the back-end server sends the stored configuration screen design data to the front-end browser.

[0106] The front-end browser parses the received design data and calls the Canvas API to generate the rendering result of the configuration screen to achieve visual display of the screen.

[0107] Furthermore, during the preview phase of the configuration screen, the system pushes real-time data to the front end through the WebSocket connection for dynamically updating the screen content, that is, the back end pushes update information to the front end according to the real-time changes of the data source.

[0108] The front end parses the pushed data and calls the Canvas API to dynamically update the bound component display. For example, if the running status data of a device changes, the front end will immediately update the color or status icon of the device status indicator control bound to it.

[0109] For example, in an example of a specific scenario, in a factory equipment monitoring scenario, after the user completes the design of the equipment monitoring configuration screen, clicks the "Save" button, and the system synchronizes the screen's device layout, real-time data binding (such as device temperature, operating status), and permission information to the cloud.

[0110] Users can access the preview address through a tablet computer to view the device monitoring screen. The monitoring screen will update the device's operating status and display content (such as changes in the value of the temperature gauge or movement of the pointer) based on real-time data.

[0111] Through the operation of the above embodiments, this embodiment realizes efficient storage and real-time update of configuration screens, meets the industrial needs of multi-device access and real-time monitoring, while reducing deployment and maintenance costs and improving system flexibility and operational efficiency.

[0112] In some embodiments, creating a custom control in a resource bar includes:

[0113] Create a custom control in the resource bar and generate a control resource file. Open the custom control in the editing area and load the operation interface related to the custom control.

[0114] Configure the custom control in the editing area to design the graphic content of the custom control, and save the control resource file of the designed custom control to the cloud server. The control resource file is displayed in the resource bar as a thumbnail to facilitate users to reference the custom control in the configuration screen.

[0115] Specifically, the implementation method of creating a custom control and dragging a graphic primitive object to the editing area for drawing in the present application will be described below in conjunction with the accompanying drawings and embodiments. Figure 3 1 is a flow chart of creating a custom control and dragging a primitive object to the editing area for drawing provided by an embodiment of the present application. Figure 3 As shown, the process of creating a custom control can include the following:

[0116] First, the user accesses the configuration editor page through a browser, and the system loads interface components related to control creation, including the following:

[0117] Resource bar: Contains the "Icon Tab" which is used to display existing control resources and options for creating new controls.

[0118] Editing area: The main working area used to draw and design controls.

[0119] Toolbar: Provides common tools for drawing graphics and editing control contents.

[0120] Property bar: Displays the relevant properties of the control. Users can use this area to adjust the control's appearance, interaction logic, and data binding relationship.

[0121] Furthermore, when the user clicks the "Create Control" option in the "Icon Tab" of the Resource Bar, the system automatically generates a new control resource file and stores it in the backend server in JSON format by default.

[0122] The created control resource file contains the initial configuration of the control (such as default size, position, layer structure, etc.).

[0123] The system displays a thumbnail of the control resource in the resource bar and automatically opens the control in the editing area for the user to design and configure.

[0124] Furthermore, after creating a control, the system automatically loads the operation interface related to the control, including:

[0125] Toolbar: Displays tools related to control drawing and editing (such as drawing graphics, adjusting position, modifying size, etc.).

[0126] Property bar: used to set the properties of the control (such as color, border style, transparency) and interaction logic (such as click events, data binding).

[0127] Furthermore, the user designs the control content in the editing area, including the following operations:

[0128] 1) Draw the control content: Users can drag basic graphics (such as rectangles, polygons, and chart controls) from the resource bar to the editing area and draw them. For example, users can draw a control that includes a device status indicator and a temperature display area for reuse in the configuration screen.

[0129] 2) Adjust the control layout: Use the left mouse button to drag the control object to adjust its position. Adjust the size of the control object by dragging the object's bounding box, and set the level of the control object (such as "top" or "bottom") through the right-click menu.

[0130] 3) Configure control properties: Users can set the appearance parameters of the control object (such as color, transparency, border style, etc.) through the property bar. Users can set the interactive logic template of the control (such as triggering an event to display detailed information after clicking the control).

[0131] Furthermore, objects in the control are bound to external data sources, such as real-time equipment status data or production line operation parameters. After the user completes the design and configuration of the control, click the "Save" button, and the system will synchronize the control resource file to the backend cloud server.

[0132] For example, the saved control resource file is stored in JSON format, recording the layout information, property information, data binding relationship and interaction logic configuration of each object in the control.

[0133] The system generates a thumbnail for the control in the "Symbol Tab" of the resource bar so that users can quickly reference it in the configuration screen.

[0134] Furthermore, in the subsequent configuration screen design, the user can directly drag the created custom control into the editing area of ​​the configuration screen through the resource bar for reference.

[0135] The referenced control inherits all the design contents of the original control, including object layout, property settings and interaction logic. If the user modifies the control resource file, the configuration screen needs to be reloaded to update the control contents.

[0136] For example, in a specific scenario, when a user needs to design a status control for factory equipment monitoring, the following operations can be performed:

[0137] First, the user creates a new custom control and drags a rectangular basic element in the editing area as the background of the device status box.

[0138] Next, add a circular graphic element to the background as a status indicator light, and use the property bar to set the color of the indicator light to bind to the device operation status data (such as green for normal operation and red for failure).

[0139] Finally, the user adds a text box in the control to display real-time temperature data and binds it to the device's temperature data source.

[0140] Through the operation of the above embodiment, the user successfully creates a reusable custom control and saves it to the server for subsequent configuration screen design. This embodiment realizes the efficient creation and reuse of custom controls, and improves the flexibility and efficiency of configuration development.

[0141] In some embodiments, a custom control is referenced in a configuration screen, and graphic content of the custom control is loaded and displayed in an editing area, including:

[0142] In the configuration screen, drag the thumbnail of the custom control in the resource bar to the editing area of ​​the configuration screen, load and display the graphic content of the custom control in the editing area, and render and present the appearance and layout of the custom control based on the definition of the control resource file;

[0143] After selecting the custom control in the editing area, configure the data source for instantiation of the custom control through the operation menu to bind the external data source with the interaction logic and display content of the custom control.

[0144] Specifically, Figure 3 As shown, the process of dragging a primitive object to the editing area for drawing may include the following:

[0145] The user opens a configuration screen and selects the custom control to be referenced through the "Symbol Tab" in the resource bar. The system displays the thumbnail of the custom control in the resource bar. The thumbnail corresponds to the control resource file, which contains the graphic content and property configuration of the control. The user drags the thumbnail of the control with the mouse and places it in the editing area of ​​the configuration screen.

[0146] Furthermore, when a custom control is dragged into the editing area, the system automatically loads the control's graphic content according to the definition of the control resource file and presents it in the editing area. The loaded content includes the control's layout, size, appearance properties, and internal sub-object hierarchy.

[0147] For example, if the control is a device status monitoring control, the editing area will display the device status box, indicator light, text box and other graphic objects that make up the control, and present the preset style (such as color, font and size) according to the definition of the control resource file.

[0148] Furthermore, in the editing area, users can adjust the referenced custom controls by performing the following operations:

[0149] Resize: Dynamically change the size of a control by dragging the edge of its bounding box. The system updates the layout information of the control in real time and displays the adjustment results synchronously.

[0150] Move position: Hold down the left mouse button and drag the control object to adjust its position in the screen. The position coordinates will be recorded in the design data of the configuration screen.

[0151] Hierarchy adjustment: Use the right-click menu to adjust the layer hierarchy of the control, including "top", "bottom", or "move one layer up / down" to ensure the correct display priority of the control and other objects.

[0152] Furthermore, the user selects the loaded custom control in the editing area, right-clicks to open the function menu, and selects the "Data Source Configuration" option. The system enters the control's instantiated data source configuration interface, which supports the following operations:

[0153] Bind external data source: Users can select and bind external real-time data sources (such as device operating status, temperature sensor data).

[0154] Interaction logic binding: Users can set the interaction logic of the control (such as displaying detailed information after clicking the control, double-clicking to switch the display state, etc.).

[0155] Dynamic display content configuration: Users can specify data fields to associate with the display content of the control. For example, bind the content of the text box in the control to the real-time temperature value of the device, or bind the color of the indicator light to the operating status data of the device (green for normal operation, red for failure).

[0156] Furthermore, after the user completes the configuration, the system records all the configuration information of the control instance (including data source binding relationship and interaction logic) in the design data of the configuration screen and synchronizes it to the cloud server in JSON format. If the control resource file is modified, the user needs to reopen the configuration screen to load the latest control content and refresh the screen display.

[0157] For example, in a specific scenario, when a user references a "device operation monitoring control" in a configuration screen, the following operations can be performed:

[0158] The user drags the thumbnail of the device control from the resource bar to the editing area. After the control is loaded, the device status box, indicator light and real-time temperature display area are displayed.

[0159] The user sets the data source binding for the indicator light of the control through the right-click menu, and associates its color with the device operation status (running / stopping / fault) data.

[0160] At the same time, the user binds the real-time temperature data of the device to the text box of the control and configures the interaction logic so that the device details dialog box pops up after clicking the control.

[0161] Through the operation of the above embodiments, this embodiment realizes the function of referencing and dynamically configuring custom controls in the configuration screen, so that the controls can interact with external data in real time, meeting the requirements of reusability, high real-time performance and dynamic configuration in industrial automation scenarios.

[0162] In some embodiments, the data of the rendered configuration screen is pushed to the front end so that the front end updates the screen display content according to the data of the rendered configuration screen, including:

[0163] Push the data of the rendered configuration screen to the front end, and update the rendered configuration screen to the user interface through the front end display component to dynamically display the configuration screen in the user interface;

[0164] In response to the user's interactive operation with the screen elements of the rendered configuration screen, the screen display content or interactive logic of the rendered configuration screen is updated in real time, so that the user can dynamically interact with the configuration screen.

[0165] Specifically, the implementation method of the configuration screen rendering of the present application will be described below in conjunction with the accompanying drawings and embodiments. Figure 4 Schematic diagram of the flow of configuration screen rendering provided by the embodiment of the present application. Figure 4 As shown, the process of configuring screen rendering can include the following:

[0166] The design data of the configuration screen (including the layout information, attribute information and data binding relationship of the screen elements) is stored in the cloud server and organized in JSON format.

[0167] When a user opens a configuration screen through a browser, the backend server parses the stored configuration screen JSON data according to the request, and pushes the data required for rendering to the front end in real time through the WebSocket connection.

[0168] In some examples, the pushed data may include: definitions of basic graphic elements (such as rectangles, polygons, chart controls, etc.), resource definitions of custom controls referenced in the screen, real-time update content of dynamic data sources, and front-end parsing and rendering data and updating the screen display.

[0169] Furthermore, after the front end receives the configuration screen data pushed by the back end, the parsing module is used to parse the JSON data.

[0170] Based on the parsing results, the front end renders the screen content through the HTML5 Canvas API, including: drawing basic graphic objects, such as geometric figures and chart controls. Drawing referenced custom controls, and defining their appearance and layout according to the control resource file. After rendering, the configuration screen is displayed in the user interface, and users can intuitively view the dynamically updated screen content.

[0171] Furthermore, the display content of the configuration screen will be dynamically updated as the external data source changes in real time. The WebSocket connection ensures that data changes on the server side can be pushed to the front end in real time. After the front end parses the changed data, it calls the Canvas API to update related components. For example:

[0172] If the operating status data of a device changes, the color of the device status indicator control will be updated immediately (such as green to red indicates a fault).

[0173] If the real-time temperature value of the device changes, the text box control bound to the temperature data will dynamically display the latest temperature value.

[0174] Furthermore, the user can interact with the rendered configuration screen through a mouse or touch device, and the system responds to the user's interaction request in real time, including:

[0175] Click event: When a user clicks a control (such as a device icon), the interaction logic is triggered, such as popping up a device details dialog box and displaying operating parameters.

[0176] Drag operation: When the user drags a screen element (such as a graphic or a control) in edit mode to adjust its position, the front end records the adjusted position coordinates and synchronizes them to the back end server in real time.

[0177] Double-click operation: Users can double-click a control to switch the display mode of the control (such as switching the display type of a chart).

[0178] Furthermore, the system dynamically modifies the display content or interaction logic of the configuration screen according to the user's interactive operation. For example:

[0179] When a user binds a new data source to a device status indicator control, the system will reload the binding relationship and update the display effect of the control in real time.

[0180] When the user switches the data display mode in the chart control (such as switching from a bar chart to a line chart), the front end calls the Canvas API to re-render the control.

[0181] Furthermore, when the user closes the configuration screen, the front end releases resources related to the screen (such as WebSocket connection and canvas memory) to optimize system performance. The back end synchronously releases cache resources occupied during the screen rendering process.

[0182] For example, in a specific scenario, in a factory production monitoring scenario, the user opens the device monitoring screen through a browser and performs the following operations:

[0183] The backend pushes configuration screen data including device layout, status indicator control definition, temperature display control binding data, etc.

[0184] The front end parses the data and renders the screen, and the device icon, status indicator light and real-time temperature display area are presented in the user interface.

[0185] When the status of a device changes from "running" to "faulty", the backend pushes the latest status data, and the frontend receives the data and updates the color of the status indicator light (such as from green to red).

[0186] When the user clicks a device icon, the system pops up a device operation details window, displaying real-time current, voltage and power data.

[0187] Through the method of the above embodiment, this embodiment realizes the real-time dynamic display and user interaction function of the configuration screen, and provides an efficient monitoring solution for the field of industrial automation.

[0188] According to the technical solution provided by this embodiment, this embodiment has at least the following advantages:

[0189] This application runs relatively independently, is simple, convenient and practical to operate, and improves the flexibility, versatility, scalability and adaptability of the monitoring business, meets various application scenarios of the factory human-computer interaction interface, improves the configuration development efficiency, shortens the development cycle, reduces development costs, and meets the diverse, personalized and increasing application needs of customers.

[0190] Through the development model based on B / S architecture, this application breaks through the limitations of traditional C / S architecture and realizes the seamless operation of configuration applications on multiple devices (such as PCs, tablets, and smart phones). Users do not need to perform additional development or adaptation for different operating systems or devices, which significantly improves the versatility and flexibility of the system. The B / S architecture reduces the complexity of client installation and version updates, and users can access the latest version of configuration tools and configuration content through a browser. This not only reduces IT maintenance costs, but also shortens the time for system launch and updates.

[0191] The use of Canvas technology for rendering configuration screens has greatly improved rendering performance compared to the traditional B / S architecture SVG or HTML DOM rendering solution. Especially when dealing with large-scale complex graphics and high-frequency real-time data update scenarios, the rendering effect is smooth and the delay is lower, providing users with a better user experience.

[0192] This application supports users to create and edit custom icon controls online, significantly enhancing the scalability of the system. Users can dynamically expand the control library according to the needs of actual industrial scenarios, thereby quickly adapting to different application scenarios and meeting the personalized needs of industrial enterprises.

[0193] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0194] Figure 5 Schematic diagram of the structure of the visual configuration development device provided in the embodiment of the present application. Figure 5 As shown, the visual configuration development device includes:

[0195] The loading module 501 is used to access the configuration editor deployed in the cloud, load the resource bar, the editing area and the property bar to obtain a visual configuration design interface;

[0196] The creation module 502 is used to create a configuration screen in the resource column, open the configuration screen in the editing area, and load the operation tools and property configuration interface associated with the configuration screen;

[0197] The drawing module 503 is used to drag the visual objects in the resource bar to the editing area for visual drawing, and configure the appearance properties, interaction logic and data source binding of the icon controls and graphic objects in the property bar to generate the configuration screen content;

[0198] Display module 504, used to create a custom control in the resource bar, reference the custom control in the configuration screen, and load and display the graphic content of the custom control in the editing area;

[0199] The rendering module 505 is used to render according to the configuration screen data in response to the user's access to the preview page of the configuration screen, and push the rendered configuration screen data to the front end so that the front end updates the screen display content according to the rendered configuration screen data.

[0200] In some embodiments, Figure 5The creation module 502 creates a configuration screen resource in the resource bar, generates a configuration screen according to the configuration screen resource, opens the configuration screen in the editing area, loads the operation tools and property configuration interface related to the configuration screen; drags the visual object to the editing area for drawing, so as to design the configuration screen in the editing area and obtain the designed configuration screen.

[0201] In some embodiments, Figure 5 The drawing module 503 drags the visualization object to the editing area for drawing, adjusts the position, size and level of the visualization object in the editing area to generate a graphic layout, and configures the appearance properties, interaction logic and data source binding of the visualization object in the property bar to generate the configuration screen content; wherein the visualization object includes icon controls, graphic objects and / or resource files, and the editing area is used to display the design area of ​​the configuration screen.

[0202] In some embodiments, Figure 5 After generating the configuration screen content, the storage module 506 synchronizes the design data of the configuration screen to the cloud server in response to a save operation triggered by the user, and stores the design data in the cloud server in the form of a structured data file, wherein the design data includes layout information, attribute information, data binding relationship and permission configuration information of the graphic object.

[0203] In some embodiments, Figure 5 The display module 504 creates a custom control in the resource bar and generates a control resource file, opens the custom control in the editing area, and loads the operation interface related to the custom control; configures the custom control in the editing area to design the graphic content of the custom control, and saves the control resource file of the designed custom control to the cloud server, wherein the control resource file is displayed in the resource bar in the form of a thumbnail so that the user can reference the custom control in the configuration screen.

[0204] In some embodiments, Figure 5 The display module 504 drags the thumbnail of the custom control in the resource bar to the editing area of ​​the configuration screen in the configuration screen, loads and displays the graphic content of the custom control in the editing area, and renders and presents the appearance and layout of the custom control based on the definition of the control resource file; after selecting the custom control in the editing area, the data source configuration of the instantiated custom control is performed through the operation menu to bind the external data source with the interaction logic and display content of the custom control.

[0205] In some embodiments, Figure 5The rendering module 505 pushes the data of the rendered configuration screen to the front end, and updates the rendered configuration screen to the user interface through the front end display component to dynamically display the configuration screen in the user interface; in response to the user's interactive operation with the screen elements of the rendered configuration screen, the screen display content or interactive logic of the rendered configuration screen is updated in real time to facilitate the user to dynamically interact with the configuration screen.

[0206] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean 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 the present application.

[0207] Figure 6 Schematic diagram of an electronic device 6 provided in an embodiment of the present application. Figure 6 As shown, the electronic device 6 of this embodiment includes: a processor 601, a memory 602, and a computer program 603 stored in the memory 602 and executable on the processor 601. When the processor 601 executes the computer program 603, the steps in the above-mentioned method embodiments are implemented. Alternatively, when the processor 601 executes the computer program 603, the functions of the modules / units in the above-mentioned device embodiments are implemented.

[0208] The electronic device 6 may be a desktop computer, a notebook, a PDA, a cloud server, or other electronic device. The electronic device 6 may include, but is not limited to, a processor 601 and a memory 602. Those skilled in the art will appreciate that Figure 6 The electronic device 6 is merely an example and does not limit the electronic device 6 . The electronic device 6 may include more or less components than those shown in the figure, or different components.

[0209] The processor 601 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0210] The memory 602 may be an internal storage unit of the electronic device 6, for example, a hard disk or memory of the electronic device 6. The memory 602 may also be an external storage device of the electronic device 6, for example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the electronic device 6. The memory 602 may also include both an internal storage unit of the electronic device 6 and an external storage device. The memory 602 is used to store computer programs and other programs and data required by the electronic device.

[0211] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned 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 above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units.

[0212] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium (e.g., a computer-readable storage medium). Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. The computer program may include computer program code, which may be in source code form, object code form, executable file or some intermediate form. Computer-readable storage media may include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0213] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A visual configuration development method, characterized in that: include: Access the configuration editor deployed in the cloud, load the resource bar, editing area, and property bar to obtain a visual configuration design interface; Creating a configuration screen in the resource bar, opening the configuration screen in the editing area, and loading an operation tool and a property configuration interface associated with the configuration screen; Drag the visualization object in the resource bar to the editing area for visualization drawing, and configure the appearance properties, interaction logic and data source binding of the icon control and the graphic object in the property bar to generate the configuration screen content; Creating a custom control in the resource bar, referencing the custom control in the configuration screen, and loading and displaying graphic content of the custom control in the editing area; In response to a user accessing the preview page of the configuration screen, rendering is performed according to the configuration screen data, and the rendered configuration screen data is pushed to the front end, so that the front end updates the screen display content according to the rendered configuration screen data.

2. The method according to claim 1, characterized in that The step of creating a configuration screen in the resource bar includes: Creating a configuration screen resource in the resource column, generating the configuration screen according to the configuration screen resource, opening the configuration screen in the editing area, and loading an operation tool and a property configuration interface related to the configuration screen; The visualization object is dragged to the editing area for drawing, so as to design the configuration screen in the editing area to obtain the designed configuration screen.

3. The method according to claim 1, characterized in that The step of dragging the visual object in the resource bar to the editing area for visual drawing includes: Drag the visualization object to the editing area for drawing, adjust the position, size and level of the visualization object in the editing area to generate a graphic layout, and configure the appearance properties, interaction logic and data source binding of the visualization object in the property bar to generate the configuration screen content; The visualization object includes a graphic control, a graphic object and / or a resource file, and the editing area is used to display the design area of ​​the configuration screen.

4. The method according to claim 1, characterized in that: After the configuration screen content is generated, the method further includes: In response to a save operation triggered by the user, the design data of the configuration screen is synchronized to the cloud server, and the design data is stored in the cloud server in the form of a structured data file, wherein the design data includes layout information, attribute information, data binding relationship and permission configuration information of the graphic object.

5. The method according to claim 1, characterized in that The step of creating a custom control in the resource bar includes: Creating a custom control in the resource bar and generating a control resource file, opening the custom control in the editing area, and loading an operation interface related to the custom control; The custom control is configured in the editing area to design the graphic content of the custom control, and the control resource file of the designed custom control is saved to the cloud server, wherein the control resource file is displayed in the resource bar in the form of a thumbnail so that the user can reference the custom control in the configuration screen.

6. The method according to claim 5, characterized in that The step of quoting the custom control in the configuration screen and loading and displaying the graphic content of the custom control in the editing area comprises: In the configuration screen, drag the thumbnail of the custom control in the resource bar to the editing area of ​​the configuration screen, load and display the graphic content of the custom control in the editing area, and render and present the appearance and layout of the custom control based on the definition of the control resource file; After selecting the custom control in the editing area, the data source configuration of the instantiation of the custom control is performed through the operation menu to bind the external data source with the interaction logic and display content of the custom control.

7. The method according to claim 1, characterized in that The step of pushing the data of the rendered configuration screen to the front end so that the front end updates the screen display content according to the data of the rendered configuration screen includes: Pushing the data of the rendered configuration screen to the front end, and updating the rendered configuration screen to the user interface through the front end display component, so as to dynamically display the configuration screen on the user interface; In response to the user's interaction operation with the screen elements of the rendered configuration screen, the screen display content or the interaction logic of the rendered configuration screen is updated in real time, so that the user can dynamically interact with the configuration screen.

8. A visual configuration development device, characterized in that: include: Loading module, used to access the configuration editor deployed in the cloud, load the resource bar, editing area and property bar to obtain a visual configuration design interface; A creation module, used to create a configuration screen in the resource bar, open the configuration screen in the editing area, and load an operation tool and a property configuration interface associated with the configuration screen; A drawing module, used for dragging the visual objects in the resource bar to the editing area for visual drawing, and configuring the appearance properties, interaction logic and data source binding of the icon controls and graphic objects in the property bar to generate configuration screen content; A display module, used to create a custom control in the resource bar, reference the custom control in the configuration screen, and load and display the graphic content of the custom control in the editing area; The rendering module is used to respond to the user's access to the preview page of the configuration screen, render according to the configuration screen data, and push the rendered configuration screen data to the front end so that the front end updates the screen display content according to the rendered configuration screen data.

9. An electronic device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

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

Images