CN119440518A - A cross-platform development method and configuration system based on IOT and B/S architecture - Google Patents
A cross-platform development method and configuration system based on IOT and B/S architecture Download PDFInfo
- Publication number
- CN119440518A CN119440518A CN202411473306.9A CN202411473306A CN119440518A CN 119440518 A CN119440518 A CN 119440518A CN 202411473306 A CN202411473306 A CN 202411473306A CN 119440518 A CN119440518 A CN 119440518A
- Authority
- CN
- China
- Prior art keywords
- configuration
- area
- primitive
- iot
- editing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 238000011161 development Methods 0.000 title claims abstract description 27
- 238000013461 design Methods 0.000 claims abstract description 8
- 238000012800 visualization Methods 0.000 claims abstract description 7
- 238000012544 monitoring process Methods 0.000 claims description 12
- 230000000007 visual effect Effects 0.000 claims description 9
- 238000003672 processing method Methods 0.000 claims description 8
- 230000002452 interceptive effect Effects 0.000 claims description 7
- 238000009877 rendering Methods 0.000 claims description 5
- 238000005516 engineering process Methods 0.000 claims description 3
- 238000007726 management method Methods 0.000 description 11
- 230000003993 interaction Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000006399 behavior Effects 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000004886 process control Methods 0.000 description 1
- 238000012216 screening Methods 0.000 description 1
- 230000026676 system process Effects 0.000 description 1
- 230000004382 visual function Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种基于IOT和B/S架构的跨平台的开发方法及组态系统，包括：步骤S1、设置组态系统：组态系统包括预置多种类型的组态图元，并定义各种组态图元在各个状态的不同表现进行组态管理；步骤S2、通过浏览器创建、操作组态系统，进行组态编辑，整个组态编辑单元包括图元类型区域、图元类型对应的图元库区域、系统操作区域、工具栏区域、画布区域、节点样式区域、图元属性编辑区域、图元数据绑定区域、动画配置区域中的多种区域。本发明使得用户无需代码的编写能力，无需工业自动化组态软件开发的技术背景，在浏览器端简单的拖拽即可完成可视化页面的编排设计。
The present invention discloses a cross-platform development method and configuration system based on IOT and B/S architecture, including: step S1, setting the configuration system: the configuration system includes presetting various types of configuration primitives, and defining various configuration primitives in different states for configuration management; step S2, creating and operating the configuration system through a browser, and performing configuration editing, the entire configuration editing unit includes 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 a variety of areas in an animation configuration area. The present invention allows users to complete the layout design of a visualization page by simply dragging and dropping on the browser side without the ability to write code or the technical background of industrial automation configuration software development.
Description
Technical Field
The invention relates to the technical fields of IOT architecture, B/S architecture and standard Web, in particular to a cross-platform development method and configuration system based on the IOT and B/S architecture.
Background
Configuration software is an important branch of industrial automation software, and refers to special software for data acquisition and process control, which is a software platform and development environment at the level of an automatic control system monitoring layer, and a flexible configuration mode is used to provide a software tool for a user to quickly construct a general level of an industrial automatic control system monitoring function.
Conventional configuration software needs to be installed and run on a local computer, which means that a user must have a computer configured with the particular software. Meanwhile, the conventional configuration needs to consider the limitation of hardware cost and field network, and the professional goes to the field to perform programming debugging and program uploading and downloading operations. The data storage of the conventional configuration software is local, and if a hardware fault or data leakage occurs, serious consequences may occur.
Along with the rapid development of the internet of things, the business requirements are often updated and iterated very quickly, the configuration software is required to have expandability, and the traditional configuration software can meet the limitation of hardware and software in terms of expansion. The development and updating speed of the configuration software is very slow, and the requirement of rapid service growth cannot be met. Meanwhile, access to configuration software is no longer restricted to deployment sites, and access requirements from outside the enterprise are increasing.
Therefore, we have devised a cross-platform development method and configuration system based on IOT and B/S architecture to solve the above problems.
Disclosure of Invention
The invention aims to solve the defects in the prior art, and provides a cross-platform development method and a configuration system based on an IOT and B/S architecture.
In order to achieve the above purpose, the present invention adopts the following technical scheme:
A cross-platform development method and configuration system based on IOT and B/S architecture comprises the following steps:
Step S1, setting a configuration system, wherein the configuration system comprises presetting configuration primitives of various types, and defining different performances of the various configuration primitives in various states for configuration management;
s2, creating and operating a configuration system through a browser to perform configuration editing, wherein the whole configuration editing unit comprises 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 a plurality of areas in an animation configuration area;
S3, adding independent configuration primitives into the canvas area through dragging, adjusting the position and the size of the configuration elements through a mouse tool or a keyboard, adding pipelines through a built-in drawing tool, and establishing connection between the primitives to form a complete configuration system;
s4, after a complete configuration system is formed, setting the attribute and the style of the configuration primitive, including one or more of name, frame, transparency and rotation;
Step S5, binding equipment, namely setting data binding of configuration primitives, and binding the primitives in the canvas with equipment parameters of actual equipment;
and S6, storing the configured configuration pictures, converting and storing the graphic data into a JSON data structure, and constructing a configuration visualization system consisting of various configuration graphic primitives and interaction components, thereby realizing real-time data monitoring based on Web services and multi-user access of a server.
Preferably, the shape and the kind of the primitive type area comprise one or more of various polygons, circles, hyperlinks, text boxes, labels and various background boxes;
the equipment graphic primitive comprises 2D and 3D reduction diagrams of various equipment;
the interactive component comprises one or more of a button, a switch button, a selector and an interactive button;
the attribute of the configuration primitive comprises one or more of position, size, text display and rotation attribute;
the pattern of the configuration primitive comprises one or more of color, frame and transparency;
The event processing method of the configuration primitive comprises one or more of mouse clicking, right clicking, sliding of a mouse and keyboard operation;
the data binding of the configuration primitive is the binding of the configuration primitive and the device parameters of the actual device.
Preferably, the method further comprises:
The UI rendering behavior during configuration primitive design of each device type is established, and the state standard of the primitive operation is predefined, and the attribute list, the event list and the animation list of the primitive are established.
Preferably, the method further comprises:
The user can return to the last saved configuration picture through the redo function in the operation of editing the configuration picture sent by the primitive library area, the canvas area and the primitive attribute editing area.
Preferably, the method further comprises:
The user can return to the last saved configuration picture through the redo function in the operation of editing the configuration picture sent by the primitive library area, the canvas area and the primitive attribute editing area.
Preferably, the method further comprises:
and receiving a request for storing the configuration system, pushing all information of the current configuration canvas area to a server side, and storing the information into a database.
Preferably, the method further comprises:
The user selects the configuration graphic element, checks the event preset by the configuration system from the event area, and stores the event in a JSON format.
Preferably, the method further comprises:
And the user selects the configuration primitive, checks the actual equipment parameter from the equipment database, binds the data of the primitive and the actual equipment, and stores the event in a JSON format.
Preferably, the method further comprises:
and when the user clicks the graphic element in the preview configuration, the user ejects the equipment parameter panel bound by the graphic element, and modifies the operations such as equipment parameter values, switch buttons and the like on the panel according to the requirements, so that the operation of the field equipment can be realized.
The system comprises a configuration management unit, a configuration editing unit and a configuration preview unit, wherein the configuration management unit comprises engineering management, the configuration editing unit comprises canvas operation, primitive editing, data association and animation setting, and the configuration preview unit comprises real-time monitoring, visual chart display and large screen preview.
Compared with the prior art, the invention has the beneficial effects that the invention adopts an open architecture design and can be integrated with other systems. Meanwhile, the user can finish the layout design of the visual page by simply dragging the visual page at a browser end without the capability of writing codes or the technical background of developing industrial automatic configuration software, and the data is stored in the cloud end, so that the safety of the data is ensured through encryption and safety measures. Meanwhile, an external user can view and manage on any device only by connecting through the Internet.
Drawings
FIG. 1 is a schematic diagram of a cross-platform development method and a configuration system based on the IOT and B/S architecture;
FIG. 2 is a flowchart illustrating a cross-platform development method and configuration system based on IOT and B/S architecture according to the present invention;
FIG. 3 is a diagram illustrating a cross-platform development method and configuration system based on the IOT and B/S architecture according to the present invention;
FIG. 4 is a schematic diagram of a cross-platform development method and configuration system layout operation based on the IOT and B/S architecture according to the present invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments.
The invention is a brand new generation of webpage configuration software product, and based on the standard Web technology, the configuration system is directly and easily accessed on a browser without any plug-in. The method is not limited by Windows/Linux/Mac operating systems, and the 2D/3D visual function and digital twin are easily realized by accessing configuration pictures on different Android and iOS mobile terminals and industrial panels.
In this embodiment, the cross-platform development method based on the IoT and the B/S architecture includes a cross-platform based on the IoT and the B/S architecture, the system includes a configuration management unit, a configuration editing unit and a configuration preview unit, the configuration management unit includes engineering 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.
Further comprises:
Step S1, setting a configuration system, wherein the configuration system comprises presetting configuration primitives of various types, and defining different performances of the various configuration primitives in various states for configuration management;
S2, creating and operating a configuration system through a browser to perform configuration editing, wherein the whole configuration editing unit comprises 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 a plurality of areas in an animation configuration area;
S3, adding independent configuration primitives into the canvas area through dragging, adjusting the position and the size of the configuration elements through a mouse tool or a keyboard, adding pipelines through a built-in drawing tool, and establishing connection between the primitives to form a complete configuration system;
s4, after a complete configuration system is formed, setting the attribute and the style of the configuration primitive, including one or more of name, frame, transparency and rotation;
Step S5, binding equipment, namely setting data binding of configuration primitives, and binding the primitives in the canvas with equipment parameters of actual equipment;
and S6, storing the configured configuration pictures, converting and storing the graphic data into a JSON data structure, and constructing a configuration visualization system consisting of various configuration graphic primitives and interaction components, thereby realizing real-time data monitoring based on Web services and multi-user access of a server.
More specifically, the shape and the type of the primitive type area comprise one or more of various polygons, circles, hyperlinks, text boxes, labels and various background boxes;
the equipment graphic primitive comprises 2D and 3D reduction diagrams of various equipment;
the interactive component comprises one or more of a button, a switch button, a selector and an interactive button;
the attribute of the configuration primitive comprises one or more of position, size, text display and rotation attribute;
the pattern of the configuration primitive comprises one or more of color, frame and transparency;
The event processing method of the configuration primitive comprises one or more of mouse clicking, right clicking, sliding of a mouse and keyboard operation;
the data binding of the configuration primitive is the binding of the configuration primitive and the device parameters of the actual device.
The method comprises the steps of establishing UI rendering behaviors during configuration primitive design of each equipment type, predefining state standards during primitive operation, and establishing attribute lists, event lists and animation lists of primitives.
More specifically, the operation of editing the configuration picture sent by the user in the primitive library area, the canvas area and the primitive attribute editing area can be returned to the configuration picture saved last time through the redo function.
The user can return to the last saved configuration picture through the redo function in the operation of editing the configuration picture sent by the primitive library area, the canvas area and the primitive attribute editing area.
In this embodiment, a request for saving the configuration system is received, all information of the current configuration canvas area is pushed to the server side, and the information is stored in the database.
More specifically, the user selects a configuration primitive, checks an event preset by the configuration system from the event area, and stores the event in JSON format.
And the user selects the configuration primitive, checks the actual equipment parameter from the equipment database, binds the data of the primitive and the actual equipment, and stores the event in a JSON format.
And when the user clicks the graphic element in the preview configuration, the user ejects the equipment parameter panel bound by the graphic element, and modifies the operations such as equipment parameter values, switch buttons and the like on the panel according to the requirements, so that the operation of the field equipment can be realized.
Referring to fig. 1, web configuration software just solves the problems of low deployment and accessibility of the conventional industrial automation configuration application, but the invention provides a brand-new method for solving the actual engineering problem on the basis of the VUE framework, and users can complete the required software functions by a simple mode like building blocks without editing computer programs. The configuration software can well solve various problems in various scenes, so that a user can complete final scene control automation and data visualization according to the management objects and any configuration of management purposes.
In the present invention, the configuration frames are important components of a configuration system, namely, real-time data monitoring and visual display frames, and one configuration system comprises one or more configuration frames. The configuration picture is an important component of a configuration picture, is an important component for forming a configuration function, and comprises one or more configuration picture elements, various interaction components and charts.
The configuration software realized based on the standard Web technology can finish convenient man-machine interaction at the browser end, finish the layout design of the visual page through simple dragging, and preview the stored result at multiple ends.
Therefore, as shown in fig. 1, the present invention first discloses a cross-platform development method based on IOT and B/S architecture.
Referring to fig. 1, the configuration software of the present invention realizes three functions of configuration management, configuration editing and configuration preview by operating a configuration tool and browsing configuration pictures through a browser;
Referring to fig. 2, the operation flow of the configuration software of the present invention is shown.
As shown in fig. 2, after creating a new configuration scene, adding independent configuration primitives into the configuration screen, wherein the configuration primitives of various types predefined in the present invention are arranged in a primitive type area in a list form for user screening. The configuration primitive types include, but are not limited to, basic primitives including, but not limited to, various polygons, circles, hyperlinks, text boxes, labels, various background boxes, etc., device primitives including 2D and 3D restored drawings of various devices, interaction components including, but not limited to, buttons, switch buttons, selectors, etc., and event processing methods of the configuration primitives including, but not limited to, mouse click, right mouse click, mouse slide, keyboard operation. And after the configuration system starts to operate (preview), the configuration system receives real-time data, and after the data processing system processes the real-time data, the configuration system is used for a monitoring interface to call the related data, and the screen is continuously refreshed to complete real-time monitoring. The user can also click the related primitive control through the mouse, intuitively know the data information of the equipment and the measurement and control points, and can send a command to the field equipment within the owned authority range so as to finish remote control and remote adjustment operation.
With continued reference to fig. 3, the configuration screen includes a primitive type area, a primitive library area corresponding to the primitive type, an operation toolbar, a canvas area, a node style area, a primitive attribute editing area, a primitive event setting area, and a primitive data binding area;
As shown in FIG. 4, the layout of the configuration can be adjusted at will in the canvas area, and the operations of changing the size of the graphic primitive, deleting the graphic primitive, associating the graphic primitive through pipeline tools and the like can be performed. The primitive style editing area can enable the user to adjust the color, transparency, frame and the like of the configuration primitives in the configuration picture according to the requirements, the primitive attribute editing area can enable the user to adjust the rotation angle, text and the like of the configuration primitives in the configuration picture according to the requirements, and can enable the user to increase the animation style of the primitives for the configuration according to the requirements and respond to the primitives in the canvas area in real time
After the above steps are completed, the data binding relation of the configuration primitive is set in the primitive data editing area, and the step receives the request of primitive data association sent by the user, and configures the data association relation of the current primitive in a specified form.
After the steps are completed, visual operation is provided for the user. The user can also add the animation style of the graphic primitive and modify the event processing method of the graphic primitive for the configuration according to the requirement, and respond to the graphic primitive in the canvas area in real time, and provide the visual operation for the user.
After the steps are finished, setting an event processing method of the configuration primitive, and storing the event processing method through a JSON data format. The step receives a request for editing the element event sent by a user in the element event processing mode editing area, and configures the event processing mode of the current element in a specified mode.
After the steps are finished, setting the animation effect of the configuration primitive, and storing the event processing method through a JSON data format. The step receives a request for animation editing of the primitive sent by a user in the animation editing area, and configures the event processing mode of the current primitive in a specified mode.
After the steps are completed, compiling the configured configuration picture, and constructing a real-time data monitoring picture consisting of configuration graphic primitives, pipelines and interaction components by analyzing the stored JSON data. The method comprises the steps of receiving a request for saving a configuration picture in a development tool, pushing all information of a current configuration picture to a server side, and storing the information into a database;
after the steps are completed, a request of clicking the configuration primitive by the user is received, and the server pushes the equipment parameter information bound by the current configuration primitive to the user. And receiving an instruction configured by a user in the authority range of the user, and pushing the instruction to a server so as to complete remote control and fine adjustment operation of the field device.
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 exporting configuration software item information to the local in a JSON data structure.
As a second preferred embodiment of the above steps, the step of pushing all information of the current configuration picture to the server side, packages and transmits to the server in JSON data structure.
Compared with the prior art, in the cross-platform based on the IOT and B/S architecture, the configuration visualization tool can be essentially understood as a configuration visualization tool integrated at a browser end, the browser end can complete convenient man-machine interaction, and the layout design of the visualization page can be completed through simple dragging. In addition, as the configuration software has complex functions, the module integration is performed by the configuration software in order to reduce the use threshold, so as to simplify the operation steps of the user and improve the working efficiency of the user.
On the other hand, the graphic element library of the development tool of the invention encapsulates a large number of graphic elements conforming to the current industrial use field Jing Zutai, and the graphic elements use the same UI rendering logic in the editing state and the running state, so that the inconsistency of UI rendering logic in editing and running of many other similar tools is avoided.
The foregoing has shown and described the basic principles, principal features and advantages of the invention. It will be appreciated by persons skilled in the art that the present invention is not limited to the embodiments described above, but is capable of numerous variations and modifications without departing from the spirit and scope of the invention as hereinafter claimed. The scope of the invention is defined by the appended claims and equivalents thereof.
Claims (10)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202411473306.9A CN119440518A (en) | 2024-10-22 | 2024-10-22 | A cross-platform development method and configuration system based on IOT and B/S architecture |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202411473306.9A CN119440518A (en) | 2024-10-22 | 2024-10-22 | A cross-platform development method and configuration system based on IOT and B/S architecture |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN119440518A true CN119440518A (en) | 2025-02-14 |
Family
ID=94515722
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202411473306.9A Pending CN119440518A (en) | 2024-10-22 | 2024-10-22 | A cross-platform development method and configuration system based on IOT and B/S architecture |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN119440518A (en) |
-
2024
- 2024-10-22 CN CN202411473306.9A patent/CN119440518A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7661071B2 (en) | Creation of three-dimensional user interface | |
| CN107408142B (en) | 3D CAD system based on multi-user cloud parameter features | |
| CN108597014B (en) | Cross-platform rendering effect editing system based on visual programming | |
| US11733973B2 (en) | Interactive graphic design system to enable creation and use of variant component sets for interactive objects | |
| US12333278B2 (en) | Interface object manipulation based on aggregated property values | |
| CN109670222A (en) | A kind of model or the online contrast difference's methods, devices and systems of drawing | |
| CN113032708A (en) | Code-free Web development system | |
| US20250029331A1 (en) | Method, apparatus and computer program product for building and configuring a model of a three-dimensional space scene | |
| US6281900B1 (en) | Information processing apparatus and method, and providing medium | |
| CN109783596B (en) | ArcGIS map configuration preview method based on Angular component | |
| CN119127162A (en) | Method for building web-based configuration software based on the Internet of Things through resource models | |
| CN119440518A (en) | A cross-platform development method and configuration system based on IOT and B/S architecture | |
| CN113888726A (en) | 3D space model parameter correction editor based on webGL frame | |
| CN111897530B (en) | UI system and method based on UE4 platform | |
| US20030160779A1 (en) | Method and apparatus for managing solid model feature history and changes | |
| US12210735B1 (en) | Commenting feature for graphic design systems | |
| US12141926B2 (en) | Computer-implemented human-machine interaction method and user interface | |
| Ma et al. | Innovative Applications of Digital Art and Augmented Reality in the Construction Industry through Building Information Modeling | |
| EP4423593A1 (en) | Commenting feature for graphic design systems | |
| Kulseth et al. | User interface issues for evolving open systems | |
| WO2025020568A1 (en) | Method for completing lightweight editing and collaboration of 3d model by means of custom format language | |
| CN118887335A (en) | A method for perceiving data morphology of logistics parks based on 3D visualization technology | |
| CN117762370A (en) | WEB terminal P & ID and three-dimensional online multi-screen linkage system and method | |
| CN117788697A (en) | Distributed integration method for three-dimensional model loading assembly and data display frame | |
| CN120339456A (en) | Scene rendering method, scene building method, electronic device, storage medium, and program product |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |