Cross-platform development method and configuration system based on IOT and B / S architecture

Abstract

The invention discloses a cross-platform development method and configuration system based on IOT and B / S architecture, and the method comprises the steps: S1, setting a configuration system: the configuration system comprises preset various types of configuration primitives, and defines different performances of each configuration primitive in each state for configuration management; and S2, a configuration system is created and operated through a browser, configuration editing is carried out, and a whole configuration editing unit comprises multiple areas in a primitive type area, a primitive library area corresponding to the primitive type, a system operation area, a toolbar area, a canvas area, a node style area, a primitive attribute editing area, a primitive data binding area and an animation configuration area. According to the method, a user can complete the layout design of the visual page through simple dragging at a browser end without the code writing capability and the technical background of industrial automatic configuration software development.

Description

Technical Field

[0001] The present invention relates to the fields of IOT architecture, B / S architecture and standard Web technology, and in particular to a cross-platform development method and configuration system based on IOT and B / S architecture. Background Art

[0002] Configuration software is an important branch of industrial automation software. The so-called configuration software refers to some special software for data acquisition and process control. They are software platforms and development environments at the first level of the automatic control system monitoring layer. They use flexible configuration methods to provide users with general-level software tools for quickly building industrial automatic control system monitoring functions.

[0003] Traditional configuration software needs to be installed and run on a local computer, which means that the user must have a computer configured with specific software. At the same time, traditional configuration needs to take into account hardware costs and field network limitations, as well as the need for professionals to go to the site for programming and debugging and program download operations. Traditional configuration software data is stored locally, and if hardware failure or data leakage occurs, it may cause serious consequences.

[0004] With the rapid development of the Internet of Things, business needs are often updated and iterated very quickly. Configuration software needs to be scalable. Traditional configuration software may encounter hardware and software limitations in terms of expansion. This makes the development and update speed of configuration software very slow and unable to meet the needs of rapid business growth. At the same time, access to configuration software is no longer limited to the deployment site, and access needs from outside the enterprise are also increasing.

[0005] As mentioned above, we have designed a cross-platform development method and configuration system based on IOT and B / S architecture to solve the above problems. Summary of the invention

[0006] The purpose of the present invention is to solve the shortcomings of the prior art and to propose a cross-platform development method and configuration system based on IOT and B / S architecture.

[0007] In order to achieve the above object, the present invention adopts the following technical solutions:

[0008] A cross-platform development method and configuration system based on IOT and B / S architecture, including:

[0009] Step S1, setting up the configuration system: the configuration system includes presetting various types of configuration elements, and defining different performances of various configuration elements in various states for configuration management;

[0010] Step S2, create and operate the configuration system through the browser to perform configuration editing; the entire configuration editing unit includes multiple areas in the graphic element type area, the graphic element library area corresponding to the graphic element type, the system operation area, the toolbar area, the canvas area, the node style area, the graphic element attribute editing area, the graphic element data binding area, and the animation configuration area;

[0011] Step S3, operate through the configuration editing unit: add independent configuration primitives to the canvas area by dragging; adjust the position and size of the configuration components by using the mouse tool or keyboard, add pipelines by using the built-in brush tool, establish connections between primitives, and form a complete configuration system;

[0012] Step S4: after forming a complete configuration system, setting the attributes and styles of the configuration primitives, including one or more of the name, border, transparency, and rotation;

[0013] Step S5, binding device: setting data binding of configuration elements, binding the elements in the canvas with device parameters of the actual device;

[0014] Step S6, save the configured configuration screen, and convert and store the graphic data into a JSON data structure, construct a configuration visualization system composed of various configuration graphics elements and interactive components, so as to realize real-time data monitoring based on Web services and multi-user access on the server side.

[0015] Preferably, the shapes and types of the graphic element type areas include one or more of various polygons, circles, hyperlinks, text boxes, labels, and various background boxes;

[0016] The device graphics primitives include: 2D and 3D restored graphics of various types of devices;

[0017] The interactive component includes one or more of a button, a switch button, a selector, and an interactive button;

[0018] The attributes of the configuration primitives include one or more of position, size, text display, and rotation attributes;

[0019] The style of the configuration primitive includes one or more of color, border, and transparency;

[0020] The event processing method of the configuration element includes one or more of mouse click, mouse right click, mouse slide, and keyboard operation;

[0021] The data binding of the configuration graphic element is the binding of the configuration graphic element with the device parameter of the actual device.

[0022] Preferably, it also includes:

[0023] Establish the UI rendering behavior of the configuration graphic element design for each device type, and predefine the state standard of the graphic element during runtime; the attribute list, event list and animation list of the graphic element.

[0024] Preferably, it also includes:

[0025] The configuration screen editing operations issued by the user in the graphic element library area, canvas area and graphic element attribute editing area can be returned to the last saved configuration screen through the redo function.

[0026] Preferably, it also includes:

[0027] The configuration screen editing operations issued by the user in the graphic element library area, canvas area and graphic element attribute editing area can be returned to the last saved configuration screen through the redo function.

[0028] Preferably, it also includes:

[0029] Receive the request to save the configuration system, push all the information of the current configuration canvas area to the server, and store it in the database.

[0030] Preferably, it also includes:

[0031] The user selects a configuration element, checks an event preset by the configuration system from the event area, and stores the event in JSON format.

[0032] Preferably, it also includes:

[0033] The user selects a configuration element, checks actual device parameters from the device database, binds the element to the actual device data, and stores the event in JSON format.

[0034] Preferably, it also includes:

[0035] When the user clicks on an element during configuration preview, a device parameter panel bound to the element pops up. The user can modify the device parameter values, switch buttons, and other operations on the panel as needed to control the on-site equipment.

[0036] A cross-platform system based on IOT and B / S architecture includes a configuration management unit, a configuration editing unit and a configuration preview unit. The configuration management unit includes project management, the configuration editing unit includes canvas operation, graphic element editing, data association and animation setting, and the configuration preview includes real-time monitoring, visual chart display and large-screen preview.

[0037] Compared with the prior art, the present invention has the following beneficial effects: the present invention adopts an open architecture design and can be integrated with other systems. At the same time, the user does not need the ability to write code or the technical background of industrial automation configuration software development. The user can simply drag and drop on the browser to complete the layout design of the visual page, store the data in the cloud, and ensure the security of the data through encryption and security measures. At the same time, external users can view and manage on any device by simply connecting to the Internet. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Figure 1 A schematic diagram of the core functional modules of a cross-platform development method and configuration system based on IOT and B / S architecture proposed by the present invention;

[0039] Figure 2 The present invention provides a cross-platform development method based on IOT and B / S architecture and an operation flow chart of the configuration system of the configuration system;

[0040] Figure 3 A cross-platform development method based on IOT and B / S architecture and a screen distribution diagram of the configuration system proposed by the present invention;

[0041] Figure 4 This is a schematic diagram of the layout operation of a cross-platform development method and a configuration system based on IOT and B / S architecture proposed by the present invention. DETAILED DESCRIPTION

[0042] The technical solutions in the embodiments of the present invention will be described clearly and completely below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments.

[0043] The present invention is a new generation of web configuration software product, based on standard Web technology, without any plug-in, and can easily access the configuration system directly on the browser. It is not limited by Windows / Linux / Mac operating systems, and can access the configuration screen through different Android and iOS mobile terminals and industrial panels, easily realizing 2D / 3D visualization functions and digital twins.

[0044] In this embodiment, a cross-platform development method based on IoT and B / S architecture includes a cross-platform based on IOT and B / S architecture. The system includes a configuration management unit, a configuration editing unit and a configuration preview unit. The configuration management unit includes project management, the configuration editing unit includes canvas operation, graphic element editing, data association and animation setting, and the configuration preview includes real-time monitoring, visual chart display and large-screen preview.

[0045] Also includes:

[0046] Step S1, setting up the configuration system: the configuration system includes presetting various types of configuration elements, and defining different performances of various configuration elements in various states for configuration management;

[0047] Step S2, create and operate the configuration system through the browser to perform configuration editing, the entire configuration editing unit includes multiple areas in the graphic element type area, the graphic element library area corresponding to the graphic element type, the system operation area, the toolbar area, the canvas area, the node style area, the graphic element attribute editing area, the graphic element data binding area, and the animation configuration area;

[0048] Step S3, operate through the configuration editing unit: add independent configuration primitives to the canvas area by dragging; adjust the position and size of the configuration components by using the mouse tool or keyboard, add pipelines by using the built-in brush tool, establish connections between primitives, and form a complete configuration system;

[0049] Step S4: after forming a complete configuration system, setting the attributes and styles of the configuration primitives, including one or more of the name, border, transparency, and rotation;

[0050] Step S5, binding device: setting data binding of configuration elements, binding the elements in the canvas with device parameters of the actual device;

[0051] Step S6, save the configured configuration screen, and convert and store the graphic data into a JSON data structure, construct a configuration visualization system composed of various configuration graphics elements and interactive components, so as to realize real-time data monitoring based on Web services and multi-user access on the server side.

[0052] More specifically, the shapes and types of the primitive type areas include one or more of various polygons, circles, hyperlinks, text boxes, labels, and various background boxes;

[0053] The device graphics primitives include: 2D and 3D restored graphics of various types of devices;

[0054] The interactive component includes one or more of a button, a switch button, a selector, and an interactive button;

[0055] The attributes of the configuration primitives include one or more of position, size, text display, and rotation attributes;

[0056] The style of the configuration primitive includes one or more of color, border, and transparency;

[0057] The event processing method of the configuration element includes one or more of mouse click, mouse right click, mouse slide, and keyboard operation;

[0058] The data binding of the configuration graphic element is the binding of the configuration graphic element with the device parameter of the actual device.

[0059] Among them, the UI rendering behavior of the configuration graphic element design for each device type is established, and the state standard of the graphic element during runtime is predefined; the attribute list, event list and animation list of the graphic element.

[0060] More specifically, the configuration screen editing operations issued by the user in the graphic element library area, the canvas area and the graphic element attribute editing area can be returned to the last saved configuration screen through the redo function.

[0061] The configuration screen editing operations issued by the user in the graphic element library area, canvas area and graphic element attribute editing area can be returned to the last saved configuration screen through the redo function.

[0062] In this embodiment, a request to save the configuration system is received, all information of the current configuration canvas area is pushed to the server, and stored in the database.

[0063] More specifically, the user selects a configuration element, checks an event preset by the configuration system from an event area, and stores the event in a JSON format.

[0064] The user selects a configuration element, checks actual device parameters from the device database, binds the element to the actual device data, and stores the event in JSON format.

[0065] When the user clicks on an element during configuration preview, a device parameter panel bound to the element pops up. The user can modify the device parameter values, switch buttons, and other operations on the panel as needed to control the on-site equipment.

[0066] Reference Figure 1 , WEB configuration software just solves the deployment and low accessibility problems of traditional industrial automation configuration applications. Based on the VUE framework, this invention provides a brand-new method for solving practical engineering problems. Users can complete the software functions they need in a simple way similar to "building blocks" without editing computer programs. Configuration software can well solve various problems existing in various scenarios, allowing users to complete the final scene control automation and data visualization according to their own management objects and management purposes.

[0067] In the present invention, the configuration screen is an important part of the configuration system, that is, the real-time data monitoring and visual display screen. A configuration system includes one or more configuration screens. The configuration primitive is an important part of the configuration screen and an important part of the configuration function. A configuration screen includes one or more configuration primitives, various interactive components, and charts.

[0068] The configuration software implemented based on the standard Web technology of the present invention means that convenient human-computer interaction can be completed on the browser side, and the layout design of the visual page can be completed by simple dragging and dropping; the saved results can be previewed on multiple terminals.

[0069] Therefore, if Figure 1 As shown, the present invention first discloses a cross-platform development method based on IOT and B / S architecture.

[0070] Reference Figure 1 The configuration software of the present invention realizes three functions of configuration management, configuration editing and configuration preview by operating the configuration tool and browsing the configuration screen through the browser;

[0071] Reference Figure 2 , the operation flow of the configuration software of the present invention.

[0072] like Figure 2 As shown, after creating a new configuration scene, add independent configuration primitives to the configuration screen. The present invention has predefined a variety of different types of configuration primitives, which are arranged in the primitive type area in the form of a list for users to filter and use. Configuration primitive types include but are not limited to basic primitives, equipment primitives, interactive components, electrical symbols, charts, etc., where basic primitives include but are not limited to: various polygons, circles, hyperlinks, text boxes, labels, various background boxes, etc.; equipment primitives include: 2D and 3D restoration diagrams of various types of equipment; interactive components include but are not limited to: buttons, switch buttons, selectors and other interactive buttons; in addition, the event processing method of the configuration primitive includes but is not limited to mouse clicks, mouse right clicks, mouse slides, and keyboard operations. Finally, save the configuration configuration in JSON data format and submit it to the database; after the configuration system starts running (preview), the configuration system receives real-time data, and after processing by the data processing system, it is used for the monitoring interface to call relevant data, and continuously refresh the screen to complete real-time monitoring. Users can also click on relevant graphic controls with the mouse to intuitively understand the data information of the equipment and measurement and control points. Within the scope of their authority, they can send commands to on-site equipment to complete remote control and remote adjustment operations.

[0073] Continue to refer to Figure 3 , the configuration screen includes a graphic element type area, a graphic element library area corresponding to the graphic element type, an operation toolbar, a canvas area, a node style area, a graphic element attribute editing area, a graphic element event setting area, and a graphic element data binding area;

[0074] like Figure 4As shown, the layout of the configuration can be adjusted at will in the canvas area of ​​the present invention, and a series of operations such as changing the size of the primitive, deleting the primitive, associating the primitive through the pipeline tool, etc. can be performed. The primitive style editing area allows users to adjust the color, transparency, border, etc. of the configuration primitives in the configuration screen according to their needs, and the primitive attribute editing area allows users to adjust the rotation angle, text, etc. of the configuration primitives in the configuration screen according to their needs; users can also add primitive animation styles to the configuration according to their needs, and respond to the primitives in the canvas area in real time.

[0075] After completing the above steps, the data binding relationship of the configuration element is set in the element data editing area. This step receives the element data association request from the user and configures the data association relationship of the current element in a specified form.

[0076] After completing the above steps, users can be provided with very intuitive visual operations. Users can also add animation styles of graphics elements and modify event processing methods of graphics elements according to their needs, and respond to the graphics elements in the canvas area in real time, providing users with very intuitive visual operations.

[0077] After completing the above steps, the event processing method of the configuration element is set, and the event processing method is stored in the JSON data format. This step receives a request for component event editing from a user in the component event processing method editing area, and configures the event processing method of the current component in a specified form.

[0078] After completing the above steps, set the animation effect of the configuration element, and store the event processing method in JSON data format. This step receives an element animation editing request from a user in the animation editing area, and configures the event processing method of the current element in a specified form.

[0079] After completing the above steps, compile the configured configuration screen, and build a real-time data monitoring screen consisting of configuration elements, pipelines, and interactive components by parsing the stored JSON data. This step receives the request to save the configuration screen in the development tool, pushes all the information of the current configuration screen to the server, and stores it in the database;

[0080] After completing the above steps, the server receives the user's request to click on the configuration element, and pushes the device parameter information bound to the current configuration element to the user. The receiving user pushes the user's configured instructions to the server within the scope of the user's authority to complete the remote control and fine-tuning of the on-site equipment.

[0081] As a first preferred implementation of the above steps, the step of pushing all information of the current configuration system to the server side includes: and exporting the configuration software project information to the local in a JSON data structure.

[0082] As a second preferred implementation of the above steps, the step of pushing all the information of the current configuration screen to the server is to package and transmit it to the server in a JSON data structure.

[0083] Compared with the prior art, the cross-platform based on IOT and B / S architecture proposed in the present invention can essentially be understood as a configuration visualization tool integrated in the browser side, which can complete convenient human-computer interaction and complete the layout design of the visualization page by simply dragging and dropping. In addition, since the functions of the configuration software are relatively complex, in order to lower the threshold of use, the configuration software has been integrated into modules, aiming to simplify the user's operation steps and improve the user's work efficiency.

[0084] On the other hand, the graphic element library of the development tool of the present invention has encapsulated a large number of configuration graphics elements that meet the current industrial usage scenarios, and these graphics elements use the same UI rendering logic in the editing state and the running state, avoiding the inconsistency of UI rendering logic in many other similar tools during editing and running.

[0085] The basic principles, main features and advantages of the present invention are shown and described above. It should be understood by those skilled in the art that the present invention is not limited to the above embodiments. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, which fall within the scope of the present invention. The scope of the present invention is defined by the attached claims and their equivalents.

Claims

1. A cross-platform development method and configuration system based on IOT and B / S architecture, characterized in that: include: Step S1, setting up the configuration system: the configuration system includes presetting various types of configuration elements, and defining different performances of various configuration elements in various states for configuration management; Step S2, create and operate the configuration system through the browser to perform configuration editing, the entire configuration editing unit includes multiple areas in the graphic element type area, the graphic element library area corresponding to the graphic element type, the system operation area, the toolbar area, the canvas area, the node style area, the graphic element attribute editing area, the graphic element data binding area, and the animation configuration area; Step S3, operate through the configuration editing unit: add independent configuration primitives to the canvas area by dragging; adjust the position and size of the configuration components by using the mouse tool or keyboard, add pipelines by using the built-in brush tool, establish connections between primitives, and form a complete configuration system; Step S4: after forming a complete configuration system, setting the attributes and styles of the configuration primitives, including one or more of the name, border, transparency, and rotation; Step S5, binding device: setting data binding of configuration elements, binding the elements in the canvas with device parameters of the actual device; Step S6, save the configured configuration screen, and convert and store the graphic data into a JSON data structure, construct a configuration visualization system composed of various configuration graphics elements and interactive components, so as to realize real-time data monitoring based on Web services and multi-user access on the server side.

2. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture is characterized in that: The shape and type of the graphic element type area include various polygons, circles, hyperlinks, text boxes, labels, and various background boxes. The device graphics primitives include: 2D and 3D restored graphics of various types of devices; The interactive component includes one or more of a button, a switch button, a selector, and an interactive button; The attributes of the configuration primitives include one or more of position, size, text display, and rotation attributes; The style of the configuration primitive includes one or more of color, border, and transparency; The event processing method of the configuration element includes one or more of mouse click, mouse right click, mouse slide, and keyboard operation; The data binding of the configuration graphic element is the binding of the configuration graphic element with the device parameter of the actual device.

3. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture is characterized in that: Also includes: Establish UI rendering behavior when designing configuration graphics for each device type, and predefine runtime state standards for graphics; The primitive's property list, event list, and animation list.

4. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture is characterized in that: Also includes: The configuration screen editing operations issued by the user in the graphic element library area, canvas area and graphic element attribute editing area can be returned to the last saved configuration screen through the redo function.

5. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture is characterized in that: Also includes: The configuration screen editing operations issued by the user in the graphic element library area, canvas area and graphic element attribute editing area can be returned to the last saved configuration screen through the redo function.

6. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture, characterized in that: Also includes: Receive the request to save the configuration system, push all the information of the current configuration canvas area to the server, and store it in the database.

7. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture is characterized in that: Also includes: The user selects a configuration element, checks an event preset by the configuration system from the event area, and stores the event in JSON format.

8. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture is characterized in that: Also includes: The user selects a configuration element, checks actual device parameters from the device database, binds the element to the actual device data, and stores the event in JSON format.

9. According to claim 1, a cross-platform development method and configuration system based on IOT and B / S architecture, characterized in that: Also includes: When the user clicks on an element during configuration preview, a device parameter panel bound to the element pops up. The user can modify the device parameter values, switch buttons, and other operations on the panel as needed to control the on-site equipment.

10. A new generation configuration system based on the IOT architecture and standard Web technology according to any one of claims 1 to 9, characterized in that: The system includes a configuration management unit, a configuration editing unit and a configuration preview unit. The configuration management unit includes project management, the configuration editing unit includes canvas operation, primitive editing, data association and animation setting, and the configuration preview includes real-time monitoring, visual chart display and large-screen preview.

Images