Configuration visualization product-based integration method and system
By determining the integration goals and methods, generating offline packets and realizing data interface interaction, the complex problem of the integration process of configuration visualization products is solved, and fast and stable system integration and data transmission is achieved, which promotes its application in more fields.
Patent Information
- Application Number
- CN202510595588.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-09
- Publication Date
- 2025-08-08
AI Technical Summary
The prior art faces complex code writing and deep customization requirements when integrating configuration visualization products into third-party systems, resulting in cumbersome integration process, long development cycle, and data transmission and interactive compatibility issues, limiting its application scope.
It provides an integration method based on configuration visualization products. By determining the integration target and method, generating offline packets, and realizing data interaction with third-party systems through data interfaces, storing and transmitting data in JSON format, and supporting real-time communication with REST API and WebSocket.
The integration process between configuration visualization products and third-party systems is simplified, development costs and technical thresholds are reduced, integration stability and efficiency are improved, adapted to different system environments, and expanded the scope of application.
Smart Images

Figure CN120455487A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of computer software, and in particular to an integration method and system based on configuration visualization products. Background Art
[0002] In today's era of rapid digital information development, configuration visualization products, with their intuitive data display and convenient interactive methods, play a key role in numerous fields, including industrial control, intelligent monitoring, and data analysis. However, existing technologies face numerous challenges when integrating configuration visualization products into third-party systems. Traditional integration methods often rely on complex code writing and in-depth customization, resulting in a cumbersome integration process, long development cycles, and extremely high technical expertise requirements. Furthermore, due to differences in data structures and interface specifications between different systems, errors and compatibility issues are prone to occur during data transmission and interaction, seriously affecting the stability and efficiency of integration. This limits the application of configuration visualization products in a wider range of scenarios and prevents them from fully meeting the diverse business needs of users. Summary of the Invention
[0003] In response to the above-mentioned defects, the technical problem solved by the present invention is to provide a method based on configuration visualization, aiming to provide an efficient, simple and highly compatible method for integrating configuration visualization products into third-party systems, solve the problems existing in existing integration technologies, achieve fast and stable system integration, and broaden the application scope of configuration visualization products.
[0004] A first aspect of the present invention provides a method for integrating a configuration visualization product into a third-party system. The method comprises: determining an integration target and an integration method; the integration target includes display data, control operations, and an interaction method; packaging the display data and control operations to generate an offline package; and integrating the offline package into the third-party system.
[0005] According to an embodiment of the present invention, integrating the offline package into the third-party system includes: deploying a configuration visualization product to a server, introducing a configuration page on a third-party platform, and setting data transmission and interaction methods.
[0006] According to one embodiment of the present invention, real-time interactive transmission between configuration visualization product data and a data source of a third-party system is achieved.
[0007] According to an embodiment of the present invention, integrating the offline package into the third-party system further includes: implementing data interaction between the configuration and the third-party system through an exposed data interface, including: determining data interaction information with the third-party system.
[0008] A matching data interface is selected according to the interaction information, and data interaction is completed through the data interface.
[0009] According to an embodiment of the present invention, the data interaction information includes: data type, data update frequency and interaction mode.
[0010] A second aspect of the present invention discloses an integrated system for configuration visualization products, the system comprising: The acquisition unit is used to determine the integration target and integration method; the integration target includes display data, control operations and interaction methods.
[0011] The generating unit is configured to generate an offline package according to the display data and the operation control package.
[0012] An integration unit is used to integrate the offline package into the third-party system.
[0013] According to one embodiment of the present invention, the integration unit includes: a first settings module for deploying the configuration visualization product to a server, introducing the configuration page on a third-party platform, and configuring data transmission and interaction methods. A second settings module for enabling real-time interactive transmission of configuration visualization product data with data sources in third-party systems. A third settings module for enabling data interaction between the configuration and third-party systems through exposed data interfaces.
[0014] The third aspect of the present invention provides an intelligent device, including a transmitter, a receiver, a memory and a processor; the memory is used to store computer instructions; the processor is used to run the computer instructions stored in the memory to implement the above-mentioned integration method of configuration visualization products.
[0015] A fourth aspect of the present invention provides a storage medium, comprising: a readable storage medium and computer instructions, wherein the computer instructions are stored in the readable storage medium; the computer instructions are used to implement the above-mentioned integration method of the configuration visualization product.
[0016] The present invention provides beneficial effects: The integration method greatly simplifies the integration process between configuration visualization products and third-party systems, eliminating the need for complex code writing and in-depth customization, reducing development costs and technical barriers. Data is stored and transmitted in JSON format, ensuring data accuracy and compatibility, improving integration stability and efficiency. Furthermore, the offline package format makes the integration process more flexible, adapting to different third-party system environments and promoting the application and promotion of configuration visualization products in more fields. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.
[0018] Figure 1 This is a flow chart of the integration method of the configuration visualization product disclosed in an embodiment of the present invention.
[0019] The above drawings illustrate specific embodiments of the present disclosure, which will be described in more detail below. These drawings and textual descriptions are not intended to limit the scope of the present disclosure in any way, but rather to illustrate the concepts of the present disclosure to those skilled in the art by reference to specific embodiments. DETAILED DESCRIPTION
[0020] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all possible embodiments consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.
[0021] Configuration visualization generally refers to the use of visualization tools and techniques to graphically represent industrial equipment, production processes, or systems, enabling users to intuitively monitor, manage, and control various aspects of the system. Commonly used in fields such as industrial automation, intelligent manufacturing, and building monitoring, configuration visualization is a technology that presents complex control systems and data through a graphical interface.
[0022] In industrial control systems, configuration visualization is widely used to display the working status of production lines, equipment operation, real-time data collection, and alarm information. Through charts, graphics, and dynamic displays, it helps operators quickly understand various information in the production process and conduct real-time monitoring.
[0023] SCADA (Supervisory Control and Data Acquisition) is an important industrial control system, commonly used in fields such as water, electricity, gas, and transportation. Configuration visualization technology is used in SCADA systems to graphically display monitoring data, including real-time data, trend analysis, and alarm management.
[0024] Configuration visualization is also widely used in building automation, intelligent buildings, and energy management systems. Through a visual interface, users can view and control the operating status of a building's air conditioning, power, lighting, and other systems in real time, optimizing energy consumption.
[0025] In smart manufacturing, configuration visualization is used to monitor and optimize production processes, ensuring efficiency and consistency. Graphical interfaces display the real-time status of the production line, the health of the equipment, and key parameters of the production process.
[0026] Through configuration visualization, the system's real-time data (such as temperature, pressure, speed, flow, etc.) can be displayed in real time in the form of charts, numbers, meters, etc., helping operators quickly obtain important information.
[0027] The configuration visualization system can dynamically display the status of each device and process, update data in real time, and also set an alarm mechanism. When the monitored parameters exceed the set range, the system will automatically trigger an alarm to remind the operator to take corresponding measures.
[0028] Users can interact with the system through a graphical user interface (GUI), controlling functions such as starting, stopping, and adjusting devices. The GUI typically includes various components such as icons, buttons, sliders, and indicators, which users control by clicking and dragging.
[0029] By displaying historical data in the form of charts and trends, Configurable Reality can help users analyze past performance, trends and anomalies, and make more scientific decisions.
[0030] It supports multi-level display methods. For example, you can check the status of a device, or you can check the overall operation of the entire production line, factory or even the enterprise.
[0031] Standard communication protocols are generally used for integration. The integration between configuration visualization products and third-party systems (such as PLC, SCADA, ERP, MES, etc.) usually relies on some standardized communication protocols. These protocols can ensure the interoperability and interaction of data between different systems.
[0032] OPC (OLE for Process Control) is a communication protocol widely used in industrial automation, particularly in SCADA systems and configuration visualization products. OPC UA (Unified Architecture) and OPC DA (Data Access) are commonly used to enable data exchange between different devices, software systems, and platforms.
[0033] Through the server, the configuration visualization product is connected to PLC, DCS (distributed control system) and other equipment to achieve real-time data collection and control operations. Through the client of the server, the configuration visualization can interact with industrial equipment and third-party systems.
[0034] Configure the communication between the OPC server and the configuration visualization system, and configure the communication between the OPC client and the third-party system.
[0035] Ensure data reliability and real-time performance.
[0036] Integrate the configuration visualization platform into the third-party system and embed the configuration display modules and functions into the third-party application to ensure the smoothness of data interaction and user operation between the two. Figure 1 A method for integrating a configuration visualization product into a third-party system is shown. The method includes: determining an integration target and an integration method; the integration target includes display data, control operations, and interaction methods; generating an offline package based on the display data and control operations; and integrating the offline package into the third-party system.
[0037] The specific implementation methods include: first, defining the integration requirements, clarifying the integration goals and requirements, such as displaying data, including the real-time data that needs to be displayed in the third-party system (such as temperature, pressure, equipment status, etc.), defining control operations, including the need to implement device control in the third-party system (such as switching devices, adjusting parameters, etc.), and defining interaction methods, including determining the interaction method with the third-party system (such as touch screen, desktop application, WEB page, etc.).
[0038] Next, select the integration method. The configuration visualization platform integration method is embedded integration, which is achieved through iframe or WebView. Embed the offline package or online visualization module into the page of the third-party platform. The specific steps include: First, deploy the configuration visualization platform to the server and ensure that it can be accessed through the URL. Use iframe to introduce the configuration page in the third-party system, for example: "html <iframe src=""http: / / your-visualization-platform-url”" width=""100%”" height=""600px”" frameborder=""0”">< / iframe> ”.
[0039] Set up data transmission and interaction to ensure data can be transferred between the third-party platform and the configuration visualization platform through the interface. Specifically, use the REST API to obtain and display real-time data. Use WebSocket to achieve two-way transmission of real-time data, and pass instructions to the visualization platform through URL parameters or JavaScript call control methods. If the goal is to achieve deeper integration with third-party systems, such as combining configuration data with other data sources within the system, or passing data from third-party systems to the configuration platform, this can be achieved through API interfaces.
[0040] Expose data interfaces. Provide REST APIs or WebSocket interfaces within the configuration visualization platform, allowing third-party systems to retrieve data, send commands, or control the platform. For example, expose interfaces for obtaining data such as device status, temperature, and pressure, as well as control interfaces for turning devices on and off or setting device parameters.
[0041] Integrate APIs in third-party systems, which use HTTP requests (such as RESTful APIs) to obtain real-time data or send control instructions. In third-party systems, you can call the configuration platform's API interface through JavaScript or backend services to regularly update data or submit control requests.
[0042] If real-time data transmission is required, WebSocket technology can be used to allow a persistent connection to be established between the client and the server, enabling two-way real-time communication.
[0043] Set up a server and reconfigure the corresponding server in the configuration visualization platform to support real-time data push. For example, real-time data in the platform (such as device status and alarm information) is sent to the front end through the server, and the third-party system obtains real-time data through the server connection.
[0044] To integrate WebSocket in a third-party system, first establish a WebSocket link to exchange real-time data with the configuration platform.
[0045] For some embedded devices or device control systems, the configuration platform needs to interact directly with the hardware devices. Alternatively, the configuration system and the hardware devices can be connected via local communication protocols (such as Modbus and OPC UA). The specific steps include: Choose appropriate communication protocols, such as Modbus, OPC UA, BACnet, REST API, etc. These protocols can help exchange data between the configuration platform and embedded devices.
[0046] Integrate the device communication module in the configuration platform. According to the selected protocol, the integrated communication module allows the configuration platform to obtain data from the hardware device and send control instructions.
[0047] Integrate hardware interfaces in third-party systems, such as communicating directly with devices via Modbus or OPC UA protocols, read data and pass it to the configuration platform for display.
[0048] In order to realize data interaction between third-party systems and configuration visualization platforms, the following methods are usually adopted, including: REST APIs are suitable for batch data acquisition and operations, or for periodic data synchronization. WebSockets are suitable for real-time data updates, such as device status and alarm information. HTTP requests are used to obtain static data or send control commands.
[0049] If the third-party system has specific requirements, customize the data display format or style of the configuration platform, and add or modify the interactive functions of the configuration platform (such as adding new control buttons, alarm prompts, etc.) according to the third-party business needs.
[0050] It also needs to be integrated with a third-party authentication system to achieve single sign-on or integration to ensure consistency of user permissions.
[0051] When user rights management and security are integrated, data security and user rights management are ensured. This includes authentication, data encryption, and access control. For example, access control limits the access rights of different users, allowing only authorized users to view or control specific data or functions.
[0052] After integration is complete, the entire system needs to be deployed to the production environment and the system's operating status needs to be monitored. This involves deploying the configuration visualization platform and third-party systems to ensure stable operation, monitoring data flow, API calls, device status, and other aspects to ensure the integrated system is functioning properly.
[0053] Modbus is a communication protocol widely used in industrial automation. It is typically used for communication between configuration and visualization systems and devices, and is particularly suitable for serial communication (RTU) and Ethernet communication (TCP).
[0054] Through the Modbus protocol, configuration visualization products can be connected to various Modbus-supported devices (such as PLCs, sensors, etc.) to obtain real-time data and perform monitoring.
[0055] Set up the Modbus client of the configuration visualization system and configure the device or third-party system as a Modbus server to ensure reliable data transmission between the device and the system.
[0056] In the configuration visualization platform, users intuitively drag and drop components onto the canvas through large-screen assembly and data storage. They then configure component parameters such as size, position, and display content in the configuration area based on their specific needs. After component assembly and parameter configuration are complete, the system automatically serializes the entire large-screen layout and configuration information in JSON format and saves it to the database. This data storage method facilitates data management, access, and transmission, and the JSON format offers excellent cross-platform and readability.
[0057] The display module of the configuration visualization platform is packaged separately to generate a standalone offline package. This offline package contains all the front-end resources required for large-screen display, such as HTML, CSS, JavaScript, and image files. A specific tag is also exposed in the offline package. This tag serves as an interface for interacting with third-party systems, receiving and displaying large-screen data.
[0058] An offline package typically bundles all configurations, scripts, graphical user interfaces, data sources, and other related files for a configuration visualization system into one file or a set of files. These files can be run without a network connection and typically contain both static and dynamic display elements (such as graphics, reports, and controls).
[0059] Exposed tags usually refer to the names of certain data points in the control system (such as temperature, pressure, status, etc.). These tags are exposed in the configuration system and can be accessed by other systems through APIs or data protocols.
[0060] Before integrating an offline package into a third-party system, ensure that the configuration visualization system has successfully generated and configured the offline package. The offline package typically contains the following: Interface design, configuring the graphical interface in visualization (such as dashboards, charts, status displays, etc.). Data connection configuration, the data connection configuration file in the offline package is used to obtain tag values from the specified data source (such as database, PLC, sensor, etc.).
[0061] Tag settings, including exposed tags, ensure that the offline package can share data with external systems.
[0062] Use the configuration tool to complete the design of the configuration visualization, package and export the offline package, and ensure that all related files (such as graphic files, script files, label configuration files, etc.) are included.
[0063] Integrating the generated offline package into a third-party system mainly involves embedding the visualization and data display functions in the offline package into the front-end interface of the third-party system (such as the large-screen display area).
[0064] Before designing interfaces, it's crucial to first identify the data source and what type of data the configuration visualization platform needs to exchange with third-party systems, including device status, sensor data, or alarm information. Secondly, the frequency of data updates—whether real-time or periodically polled—is required. Thirdly, the specific control operations, such as turning a device on or off or adjusting parameters, are required. Fourthly, the interaction method, such as using a RESTful API, WebSocket, or other methods.
[0065] Choose an appropriate interface. Common data interfaces include: RESTful API, used for request / response interactions over HTTP, suitable for retrieving static data or sending control commands. WebSocket, used for real-time two-way communication, suitable for pushing and receiving real-time data, such as device status changes or alarm information.
[0066] For example, RESTful APIs can be used to implement data interaction. RESTful APIs are a communication protocol based on HTTP that uses common HTTP request methods (such as GET, POST, PUT, and DELETE) to complete data interaction, including obtaining device status, sending control commands, and uploading data. Specifically, the third-party system obtains device data in the configuration platform through a "GET" request, such as device status, temperature, and pressure, and sends control instructions based on the obtained device data. The third-party system can send control instructions to the configuration platform through a "POST" request (such as turning on / off the device, adjusting settings, etc.).
[0067] The API backend is implemented using Node.js and Express framework.
[0068] Alternatively, WebSocket can be used to achieve real-time data interaction. The configuration platform and the third-party system establish a persistent connection through WebSocket. The configuration platform can push data to the third-party system in real time. At the same time, the third-party system can also send control instructions to the configuration platform. Corresponding programs are written, including the logical relationship between devices and control instructions and device parameters.
[0069] Offline package packaging steps and implementation methods: First, prepare the development environment and dependencies, install necessary front-end development tools, select and configure build tools, and manage project dependencies.
[0070] Next, initialize and configure the project, set up the project structure and source files; configure the build tool to optimize resource processing.
[0071] Then develop applications, using HTML, CSS, and JavaScript to build user interfaces and interactive logic, and implement data acquisition, processing, and display functions.
[0072] Next, we implement offline support, including using Service Worker to cache static resources and ensure offline access. We also define custom tags (e.g., sne-viewer) in the generated HTML for standalone critical components.
[0073] Finally, build and publish, execute the build command, and generate the optimized offline package.
[0074] Integrate the generated offline package into the third-party system. In the area of the third-party system where the large screen is required, embed the configuration visualization by referencing the exposed tags. When the page loads, the system automatically retrieves the previously saved large screen JSON data from the database and imports it into the component corresponding to the tag. Based on the rendering engine in the offline package, the component automatically parses and renders the received JSON data, ultimately presenting a complete large screen visualization interface in the third-party system.
[0075] The present invention achieves the following beneficial effects: The integration method significantly simplifies the integration process between configuration visualization products and third-party systems, eliminating the need for complex code writing and in-depth customization, thereby reducing development costs and technical barriers to entry. Data is stored and transmitted in JSON format, ensuring accuracy and compatibility, and improving integration stability and efficiency. Furthermore, the offline package format makes the integration process more flexible, adapting to diverse third-party system environments and promoting the application and promotion of configuration visualization products in a wider range of fields.
[0076] Obviously, the above specific implementation cases are merely examples for illustrating the application of the present method, and are not intended to limit the implementation methods. A person skilled in the art can make other variations and modifications based on the above description to study other related issues. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.
[0077] Those skilled in the art will understand that all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above-mentioned method embodiment; and the aforementioned storage medium includes: ROM, RAM, disk or optical disk, etc. Various media that can store program codes.
[0078] The embodiments of electronic devices and the like described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of the embodiments. Persons of ordinary skill in the art will be able to understand and implement the present invention without inventive effort.
[0079] Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented using software plus a necessary general-purpose hardware platform, or of course, hardware. Based on this understanding, the essence of the above technical solution, or the portion that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, or an optical disk, and includes a number of instructions for causing a computer device (such as a personal computer, server, or network device) to execute the methods described in each embodiment or certain portions of the embodiments.
[0080] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the embodiments of the present invention, rather than to limit them. Although the embodiments of the present invention have been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.
[0081] Other embodiments of the present disclosure will readily occur to those skilled in the art after considering the specification and practicing the invention disclosed herein. The present invention is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, with the true scope and spirit of the present disclosure being indicated by the following claims.
[0082] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims
1. A method for integrating configuration visualization products, characterized in that: The configuration visualization product is used to be integrated into a third-party system, and the method includes: S101: Determine integration goals and integration methods; the integration goals include displaying data, controlling operations, and interaction methods; S102: Generate an offline package based on the display data and operation control package; S103: Integrate the offline package into the third-party system.
2. The integration method according to claim 1, characterized in that Integrating the offline package into the third-party system includes: Deploy the configuration visualization product to the server, introduce the configuration page on the third-party platform, and set up data transmission and interaction methods.
3. The integration method according to claim 1, characterized in that Integrating the offline package into the third-party system further includes: achieving real-time interactive transmission between the configuration visualization product data and the data source of the third-party system.
4. The integration method according to claim 1, characterized in that Integrating the offline package into the third-party system further includes: Data interaction between configuration and third-party systems is achieved through exposed data interfaces, including: Determine data interaction information with third-party systems; A matching data interface is selected according to the interaction information; and data interaction is completed through the data interface.
5. The integration method according to claim 4, characterized in that: The data interaction information includes: data type, data update frequency and interaction mode.
6. An integrated system for configuration visualization products, characterized in that: The system comprises: The acquisition unit is used to determine the integration target and integration method; the integration target includes displaying data, controlling operations and interaction methods; A generating unit, configured to generate an offline package based on the display data and the operation control package; An integration unit is used to integrate the offline package into the third-party system.
7. The integrated system according to claim 6, characterized in that The integrated unit comprises: The first setting module is used to deploy the configuration visualization product to the server, introduce the configuration page on the third-party platform, and set the data transmission and interaction mode; The second setting module is used to realize the real-time interactive transmission of configuration visualization product data and data sources of third-party systems; The third setting module is used to realize data interaction between configuration and third-party systems through the exposed data interface.
8. A smart device, characterized in that: include: transmitter, receiver, memory, and processor; The memory is used to store computer instructions; The processor is configured to execute the computer instructions stored in the memory to implement the configuration visualization product integration method according to any one of claims 1 to 6.
9. A storage medium, characterized in that: include: a readable storage medium and computer instructions, wherein the computer instructions are stored in the readable storage medium; The computer instructions are used to implement the integration method of the configuration visualization product according to any one of claims 1 to 6.
Citation Information
Patent Citations
Page display method and device, storage medium and electronic device
CN112241298A
Three-dimensional visualization method and system, storage medium and electronic equipment
CN115562784A
Offline service calling method, device and system and storage medium
CN115994017A
Centralized control method, device and system for fully mechanized coal mining face based on digital twinning
CN117130709A
Providing an offline mode for applications and interfaces across multiple platforms
US20170331915A1