Method for building Web end configuration software based on Internet of Things through resource model

Abstract

The invention relates to a method for building Web end configuration software based on the Internet of Things through a resource model, which belongs to the field of intelligent manufacturing and comprises the following steps of: (1) defining the resource model, and defining the resource model comprising equipment types, attributes and operation methods according to equipment characteristics and service requirements of the Internet of Things; (2) Web end configuration software is developed, and a software framework is built through a front-end display layer and a rear-end logic layer; (3) integrating a resource model, and integrating the resource model into Web end configuration software to realize unified management and monitoring of equipment; and (4) providing a visual interface design tool for dragging the component and setting parameters. The method has the advantages that the B / S architecture is different from the traditional C / S architecture, and the Web end configuration software adopts the browser / server (B / S) architecture. Therefore, the user does not need to install client software and can access the system only through the Web browser, and the usability and convenience of the system are greatly improved.

Description

Technical Field

[0001] The invention relates to a method for building Web-side configuration software based on the Internet of Things through a resource model, and belongs to the field of intelligent manufacturing. Background Art

[0002] At present, the technical implementation of Web-based configuration software based on the Internet of Things may face the following problems: Development efficiency and maintainability: The development process of traditional configuration software often involves complex coding and configuration work, which not only prolongs the development cycle but also increases the technical difficulty. For inexperienced developers, this complexity becomes a barrier to entry. In addition, the subsequent maintenance of the software also faces challenges, because as the scale of the system expands, the maintenance cost and difficulty also increase.

[0003] Platform compatibility and scalability: Limited to dedicated software for specific operating systems, the compatibility issues of traditional configuration software limit its ability to be used across platforms. In today's diverse operating system environment, this limitation has seriously affected the popularity and application scope of the software. At the same time, with the continuous development of corporate business, the demand for the expansion of software functions is increasing, and the lack of scalability of traditional software makes it difficult to meet these needs.

[0004] User experience: Modern users expect intuitive, smooth and responsive interactive experience. However, many traditional configuration software have outdated interface designs and complex operations, which are difficult to meet user expectations. This poor user experience may lead to a decline in user satisfaction and even affect the overall image and market competitiveness of the enterprise.

[0005] Insufficient real-time data processing capabilities: In the IoT environment, the amount of data generated by devices is huge and needs to be processed and analyzed in real time. Traditional configuration software may have performance bottlenecks in processing large-scale real-time data and cannot respond to data changes in a timely manner, affecting the timeliness of decision-making. Summary of the invention

[0006] In order to overcome the defects of the prior art, the present invention provides a method for building a Web-based configuration software based on the Internet of Things through a resource model. The technical solution of the present invention is: A method for building a web-based configuration software based on the Internet of Things through a resource model includes the following steps: (1) Define the resource model. According to the characteristics of IoT devices and business requirements, define the resource model including device type, attributes and operation methods; (2) Develop Web-based configuration software and build a software framework using the front-end display layer and the back-end logic layer; (3) Integrate resource models into the Web-based configuration software to achieve unified management and monitoring of equipment; (4) Provide visual interface design tools for dragging components and setting parameters.

[0007] The step (1) is specifically as follows: 1.1 Define resources: Specify resource types: Specify all resource types that the Web-based configuration software needs to manage; Define resource attributes: define the inherent attributes for each resource type; Defines the operations or methods that a resource performs; Define the events or state changes that a resource may generate; 1.2 Resource association: clarify the relationship between resources; Association attributes: define attributes for association relationships; Association operation: defines the operation to be performed on the association relationship; 1.3 Build data model: Design database table structure. Based on resource definitions and association relationships, design database table structure to store data of resource instances and associated instances; Define the data interaction format, define the format of data interaction between the front-end and the back-end, including the format of requests and responses; Real-time data processing, data collection, storage, query and display; 1.4 Extended resource model: Carry out modular design and design the resource model into modular ones; 1.5 Encrypted resource model: Set access permissions: Design access control mechanisms to ensure that only authorized users or systems can access or modify resources; Data encryption: Encrypt sensitive data during storage and transmission to prevent data leakage or malicious use.

[0008] Audit log: Records all operations on resources for auditing or tracking when necessary.

[0009] The step (2) is specifically as follows: 2.1 System architecture design: The system architecture of the Web-based configuration software adopts the browser / server B / S architecture, which allows users to access the configuration software through a browser without having to install client software locally; the system architecture is divided into the front-end display layer, the back-end logic layer, the data layer, and the communication layer; The front-end display layer is responsible for interacting with users and displaying configuration screens, real-time data, and alarm information; The backend logic layer is used to process business logic; The data layer is used to store and manage data; The communication layer is responsible for the communication between the front-end display layer, the back-end logic layer, and the back-end logic layer and the device; 2.2 Design resource model: Define resource types and clarify the resources that the configuration software needs to manage; Design resource attributes and define inherent attributes for each resource type; Define the resource implementation method, which defines the operations or methods performed by the resource; Define resource events to clarify events or state changes generated by resources; Related resource management: design the relationship between resources; 2.3 Security and scalability design: Carry out security design: perform access control, data encryption, and audit logs to ensure data security and system stability of the configuration software; The scalability design is modular, configurable or plug-in design.

[0010] In the step (2), the step 2.1 is specifically: 2.1.1 In the front-end display layer, HTML, CSS and JavaScript are used for interface design to realize the layout, style and interactive effects of the configuration screen; real-time data and alarm information are displayed through reused front-end components; data interaction is carried out: data interaction between the front-end display layer and the back-end logic layer is realized, including real-time data query, historical data query and control instruction sending; 2.1.2 In the back-end logic layer, Java and Python programming languages ​​are used to implement business logic, including device communication protocol processing, data processing algorithms, and user authority verification; interface design: design RESTful API or WebSocket interface for the front-end display layer to call; when operating the database, add, delete, modify, and query data, and process transactions; 2.1.3 Testing and deployment: Conduct unit testing on front-end components and back-end interfaces to ensure that each module functions correctly; conduct testing on the integrated front-end components and back-end ports to verify the overall functionality of the system; conduct performance testing on the system to evaluate the system's response speed and concurrent processing capability indicators; deploy the system to the production environment after development is completed to ensure that the system can run stably and meet user needs.

[0011] The step (3) includes primitive configuration, a graphics engine, and forming a graphics structure; the primitive configuration specifically includes: 3.1 The graphic elements are classified and defined, including lines, rectangles, circles, and text graphic elements, and configurable properties are defined for each graphic element; 3.2 Use the mouse to drag the graphics elements to the canvas and adjust the layout to combine multiple graphics elements into a whole; 3.3 Combine and manage graphics elements and build a graphical interface; The graphics engine is implemented by the following components, specifically including: mxGraphModel is used to store and manage graphic elements and their relationships, and to operate on the graphic structure. When modifying the graphic structure, a transaction is started and ended through the beginUpdate and endUpdate methods to ensure the atomicity and consistency of the modification operation. The mxGraphModel provides an event mechanism that allows the listener to perform corresponding operations when the graphic structure changes. mxCell is the basis for representing graphic elements and contains attributes such as ID, value, style, and geometric information. The parent-child relationship between mxCells represents the inclusion relationship of graphic elements and is used to implement the layering and grouping of graphics. mxGeometry is used to store the geometric information of graphic elements, including the width, height, and position attributes of the graphic elements.

[0012] The formation of the graphic structure is specifically achieved by calculating the node positions by simulating the attraction and repulsion between particles to achieve a balanced state of the graphic; The natural length and elastic coefficient of the edges in the graph are set through the spring force model, the repulsion or attraction is calculated according to Hooke's law, and the node position is updated through iterative optimization; Based on the Coulomb force model, the repulsive force between nodes is calculated according to Coulomb's law. The node position is moved by considering the combined force of all nodes on a certain node, and a stable and beautiful graphic layout is achieved through iterative optimization. The steps of calculating repulsion or attraction and moving nodes are repeated until a stopping condition is met.

[0013] In the step (4), specifically: 4.1 Web-based or desktop-based applications, design custom interfaces by dragging components and setting parameters; 4.2 Predefined components: Provide predefined interface components, allowing users to upload or create custom components and add them to the component library; 4.3 Add components from the component library to the design area by dragging and dropping; adjust the position, resize, and rotate the components; provide a property editor for each component to set the component's color, font, and border style properties; bind events to the components, such as clicks and mouse hovers, and set the corresponding event handling logic.

[0014] 4.4 Check the actual effect of the design interface at any time through preview, and export the design interface as HTML / CSS / JavaScript code for use in web projects; 4.5 Use HTML and CSS to build the interface layout of the tool, including the component library, design area, and property editor; use JavaScript or front-end frameworks to implement drag and drop, adjust layout, and set parameter interaction logic; use Canvas, SVG, or Web Components to achieve real-time rendering of the design area; 4.6 Manage the component library, including uploading, downloading, and deleting components; manage users, including user registration, login, and authority management; use the database to store user design data and component data; 4.7 Integration and testing: conduct integration testing on the front-end and back-end to ensure the normal coordination of various functional modules; test the response speed and stability indicators of the test tools to ensure a good experience in actual use; 4.8 Deployment and maintenance: deploy the tool to the server and ensure that users can access it through the Web or desktop application; regularly update the component library, fix known issues, and add new features to maintain the competitiveness of the tool and user satisfaction.

[0015] The advantages of the present invention are: 1. Architecture advantages: B / S architecture is different from the traditional C / S architecture. The Web-side configuration software adopts the browser / server (B / S) architecture. This means that users do not need to install client software and can access the system through a Web browser, which greatly improves the availability and convenience of the system. Cross-platform: Since it runs based on a browser, the Web-side configuration software naturally supports multiple operating systems (such as Windows, Linux, Mac OS), achieving seamless cross-platform integration and lowering the user's usage threshold.

[0016] 2. Real-time monitoring and data management Real-time data display: Through real-time communication with IoT devices, the Web-based configuration software can instantly obtain and display the operating status and data changes of the equipment, helping users to respond quickly to system changes.

[0017] Data recording and analysis: The collected data is stored in the database, and rich data analysis and reporting functions are provided to support users in data mining and decision support.

[0018] Historical data query: Users can query historical data and intuitively display data change trends in the form of charts and dashboards to facilitate problem tracing and system optimization.

[0019] 3. Visualization and Customization Graphical interface: Using HTML5 Web technology, it provides an intuitive and easy-to-use graphical operation interface. Users can complete the design of the configuration screen through simple drag and drop operations.

[0020] Highly customizable: supports users to design interfaces and develop functions according to actual needs, including drawing configuration diagrams, implementing process control, etc., to meet personalized needs.

[0021] Rich charts and reports: Provides a variety of charts and report templates to help users understand the operation status of the equipment and data change trends more intuitively.

[0022] 4. Scalability and integration Scalability: Web-based configuration software can be easily integrated with advanced technologies such as cloud computing, big data, and artificial intelligence to achieve higher levels of data analysis and processing.

[0023] Rich API interfaces: Provides multiple API interfaces to support seamless integration with other third-party systems to meet the diverse needs of enterprises.

[0024] Modular design: Through modular integrated design, it simplifies user operation steps and improves work efficiency, while supporting users to customize the development of modules according to actual needs.

[0025] 5. Security and stability Data encryption: Use encryption technologies such as HTTPS and SSL to ensure the security of data transmission and prevent data leakage. Unified security management: Can be integrated with the enterprise's security management system to achieve a unified security management strategy.

[0026] Performance optimization: Ensure the stable operation of the Web-based configuration software under high load through the rational use and optimization of system resources.

[0027] 6. Reduce costs and improve efficiency Reduce hardware investment: Users do not need to install additional client software, reducing hardware investment and maintenance costs.

[0028] Improve work efficiency: The intuitive operation interface and rich functional support enable users to quickly get started and complete their work efficiently.

[0029] Flexible deployment: supports local or cloud deployment to meet the deployment needs of different enterprises. DETAILED DESCRIPTION

[0030] The present invention will be further described below in conjunction with specific embodiments, and the advantages and features of the present invention will become clearer as the description proceeds. However, these embodiments are exemplary only and do not constitute any limitation to the scope of the present invention. It should be understood by those skilled in the art that the details and forms of the technical solution of the present invention may be modified or replaced without departing from the spirit and scope of the present invention, but these modifications and replacements all fall within the scope of protection of the present invention.

[0031] The present invention relates to a method for building a Web-based configuration software based on the Internet of Things through a resource model, comprising the following steps: (1) Define the resource model. According to the characteristics of IoT devices and business requirements, define the resource model including device type, attributes and operation methods; (2) Develop Web-based configuration software and build a software framework using the front-end display layer and the back-end logic layer; (3) Integrate resource models into the Web-based configuration software to achieve unified management and monitoring of equipment; (4) Provide visual interface design tools for dragging components and setting parameters.

[0032] The step (1) is specifically as follows: 1.1 Define resources: Identify resource types: Identify all resource types that the Web-based configuration software needs to manage; in an IoT scenario, these resources may include devices, sensors, actuators, data points, alarm points, etc.

[0033] Define resource attributes: define the inherent attributes for each resource type; such as the name, model, manufacturer, installation location, etc. of the equipment; the measurement type, range, accuracy, etc. of the sensor; the data type, unit, collection frequency, etc. of the data point.

[0034] Define the operations or methods that resources can perform, such as turning on and off devices, setting parameters, and calibrating devices; collecting data from sensors, and cleaning sensors.

[0035] Defines the events or status changes that may occur in resources, such as equipment failure, sensor data exceeding the limit, etc.

[0036] 1.2 Resource association: Clarify the association relationship between resources. For example, a device may contain multiple sensors, and a sensor may generate multiple data points.

[0037] Association properties: Define properties for the association relationship, such as the connection type and communication protocol between the device and the sensor.

[0038] Association operations: define the operations that can be performed on association relationships, such as adding, deleting, and modifying associations.

[0039] 1.3 Build data model: Design database table structure. Based on resource definitions and association relationships, design database table structure to store data of resource instances and associated instances; Define the data interaction format, define the format of data interaction between the front-end and the back-end, including the format of requests and responses. This usually involves structured data formats such as JSON and XML.

[0040] Real-time data processing includes data collection, storage, query and display; data structures or algorithms need to be designed to support real-time data processing.

[0041] 1.4 Extended resource model: Design the resource model to be modular so that new resource types or relationships can be easily added when needed.

[0042] Configurability: Whenever possible, make parts of the resource model configurable so that resource properties, methods, or events can be adjusted without modifying the code.

[0043] Plug-in: Consider implementing some of the resource model's functionality as plug-ins so that they can be dynamically loaded or unloaded when needed.

[0044] 1.5 Encrypted resource model: Set access permissions: Design access control mechanisms to ensure that only authorized users or systems can access or modify resources; Data encryption: Encrypt sensitive data during storage and transmission to prevent data leakage or malicious use.

[0045] Audit log: Records all operations on resources for auditing or tracking when necessary.

[0046] The step (2) is specifically as follows: 2.1 System architecture design: The system architecture of the Web-based configuration software adopts a browser / server B / S architecture, allowing users to access the configuration software through a browser without having to install client software locally; the system architecture can be divided into a front-end display layer, a back-end logic layer, a data layer, and a communication layer.

[0047] The front-end display layer is responsible for interacting with users, displaying configuration screens, real-time data, alarm information, etc. The front-end technology stack mainly includes HTML, CSS and JavaScript, as well as possible front-end frameworks such as React and Vue.js.

[0048] The back-end logic layer is used to process business logic, including device communication, data processing, user rights management, etc. The back-end technology stack can choose programming languages ​​such as Java and Python, and match corresponding web frameworks such as Spring Boot and Django.

[0049] The data layer is used to store and manage data, including device information, real-time data, historical data, etc. The database can be a relational database such as MySQL, Oracle, or a non-relational database such as MongoDB, depending on specific needs.

[0050] The communication layer is responsible for the communication between the front-end display layer, the back-end logic layer, and the back-end logic layer and the device. The communication protocol can be HTTP, WebSocket, etc. to ensure efficient and real-time data transmission.

[0051] 2.2 Design resource model: In the architecture design, the design of resource model is one of the cores. Resource model defines the resource types, properties, methods, events and their relationships that need to be managed in the configuration software.

[0052] Define resource types and clarify the resources that the configuration software needs to manage, such as devices, sensors, data points, etc.

[0053] Design resource attributes and define inherent properties for each resource type, such as the name, model, location, etc. of the device.

[0054] Define resource implementation methods and define the operations or methods that resources can perform, such as device switches, data collection, etc.

[0055] Define resource events and clarify the events or status changes that may occur in resources, such as data over-limit alarms.

[0056] Associated resource management: Design the association relationship between resources, such as the containment relationship between devices and sensors, and implement the management function of associated resources.

[0057] 2.3 Security and scalability design: Conduct security design: perform access control, data encryption, and audit logs to ensure data security and system stability of the configuration software.

[0058] Scalable design: Modular, configurable or plug-in design is adopted to enable the system to flexibly expand new resource types, functional modules, etc.

[0059] In the step (2), the step 2.1 is specifically, 2.1.1 In the front-end display layer, HTML, CSS and JavaScript are used for interface design to achieve the layout, style and interactive effects of the configuration screen. The front-end framework can be used to improve development efficiency.

[0060] Through the reuse of front-end components, such as chart components and alarm components, it is used to display real-time data and alarm information; Data interaction: Realize data interaction between the front-end display layer and the back-end logic layer, including real-time data query, historical data query, and control command sending, etc. This can be achieved using technologies such as Ajax and WebSocket.

[0061] 2.1.2 In the back-end logic layer, Java and Python programming languages ​​are used to implement business logic, including device communication protocol processing, data processing algorithms, and user authority verification; Design interface: Design RESTful API or WebSocket interface for the front-end display layer to call. Interface design should follow the RESTful principle to ensure the ease of use and scalability of the interface.

[0062] When operating the database, add, delete, modify, check, and process transactions. You can use the ORM framework to simplify database operations.

[0063] 2.1.3 Testing and deployment: Conduct unit tests on front-end components and back-end interfaces to ensure that each module functions correctly; After the front-end components and back-end ports are integrated, they are tested to verify the overall functionality of the system. Performance tests are performed on the system to evaluate the system's response speed and concurrent processing capability indicators. After development is completed, the system is deployed to the production environment to ensure that it can run stably and meet user needs.

[0064] The step (3) includes primitive configuration, a graphics engine, and forming a graphics structure; the primitive configuration specifically includes: 3.1 The graphic elements are classified and defined, including lines, rectangles, circles, and text graphic elements, and configurable properties are defined for each graphic element, such as color, size, position, etc.; 3.2 Use the mouse to drag the graphics elements to the canvas and adjust the layout to combine multiple graphics elements into a whole; 3.3 Combine and manage graphics elements and build a graphical interface; The graphics engine is implemented by the following components, specifically including: The data model of mxGraph is mainly based on a tree or graph data structure, where each node represents a graph element (such as a node, edge, etc.), and the connection relationship between nodes represents the logical or physical connection between graph elements. This data model not only supports the layering and grouping of graphs, but also can flexibly represent complex graph structures.

[0065] mxGraphModel is used to store and manage graphic elements and their relationships, and to operate on the graphic structure, such as adding, deleting, and updating graphic elements. When modifying the graphic structure, a transaction is started and ended through the beginUpdate and endUpdate methods to ensure the atomicity and consistency of the modification operation. The mxGraphModel provides an event mechanism that allows listeners to perform corresponding operations when the graphic structure changes. mxCell is the basis for representing graphic elements and contains attributes such as ID, value, style, and geometric information. The parent-child relationship between mxCells represents the inclusion relationship of graphic elements and is used to implement the layering and grouping of graphics. mxGeometry is used to store the geometric information of graphic elements, including the width, height, position (x, y coordinates) and other attributes of the graphic elements; The formation of the graphic structure is specifically achieved by calculating the node positions by simulating the attraction and repulsion between particles to achieve a balanced state of the graphic; The natural length and elastic coefficient of the edges in the graph are set through the spring force model, the repulsion or attraction is calculated according to Hooke's law, and the node position is updated through iterative optimization; Repulsion: Represents the mutual repulsion between nodes, ensuring that the nodes do not overlap and maintain a certain distance. This force is usually inversely proportional to the square of the distance between the nodes.

[0066] Gravity (attracting edges): represents the attraction between nodes connected by edges, trying to pull the connected nodes closer. This force is usually proportional to the distance between nodes, but there is a maximum limit to prevent nodes from being too close.

[0067] For two nodes i and j, the total force Fij between them can be expressed as the synthesis of repulsive force Frep and attractive force Fatt: ; Where dij is the distance between nodes i and j. The specific force calculation formula is as follows: Repulsion formula: , where k is a constant that determines the strength of the repulsive force.

[0068] Gravity formula: If there is an edge connecting nodes i and j, Fatt(dij)=−k′∗(dij−l0), where k′ is the strength coefficient of gravity and l0 is the ideal edge length; if there is no edge connecting, then Fatt(dij)=0.

[0069] The spring force model is: In the spring force model, each spring (i.e., edge in the graph) has a natural length, which can be set based on graph distance or other factors. When the distance between two nodes is less than the natural length of the spring, the spring will generate a repulsive force, trying to push the nodes apart; conversely, when the distance is greater than the natural length, the spring will generate an attractive force, trying to pull the nodes closer. Through this balance of repulsive and attractive forces, the layout of the entire graph will tend to be stable.

[0070] (1) Initialize node positions: Place nodes A, B, and C on the canvas randomly or according to a certain strategy.

[0071] (2) Set spring parameters: Set a natural length L for each edge (spring) (for example, it can be set based on the graph theory distance between nodes). Set the spring coefficient k, which determines the magnitude of the spring force.

[0072] (3) Calculate the elastic force: For each edge (such as AB), calculate its current length d.

[0073] If d is less than L, the repulsive force exerted by the spring on nodes A and B is calculated according to Hooke's law, F = k(L - d) (with a slight adjustment here to account for repulsive forces).

[0074] If d is greater than L, the gravitational force is calculated (but in the spring force model, usually only the repulsive force is considered to act on nodes that are too close, and the gravitational force is simulated by other mechanisms such as the gravitational model). However, in practical applications, in order to maintain the compactness of the layout, both gravitational force and repulsive force are usually considered at the same time. In this case, the gravitational force can be expressed as F = k(d - L) (when d > L). But please note that the gravitational force calculation method here is simplified for illustration, and the calculation of gravitational force in the actual algorithm may be more complicated.

[0075] (4) Move nodes: Update the positions of nodes A and B based on the calculated elastic force. The distance and direction of node movement depend on the magnitude and direction of the elastic force. Similarly, the same process is performed on edge BC.

[0076] Iterative optimization: Repeat steps (3) and (4) until the stopping condition is met (such as the number of iterations reaches a preset value, the position change of the node is less than a certain threshold, or the total energy of the system reaches the minimum value, etc.).

[0077] During the iteration process, as the node positions are continuously adjusted and optimized, the layout of the graph will gradually become stable and beautiful.

[0078] Based on the Coulomb force model, the repulsive force between nodes is calculated according to Coulomb's law. The node position is moved by considering the combined force of all nodes on a certain node, and a stable and beautiful graphic layout is achieved through iterative optimization. The Coulomb force model is specifically: The Coulomb force model is based on Coulomb's law, which states that the interaction force between two stationary point charges in a vacuum is proportional to the product of their charges and inversely proportional to the square of the distance between them. In the force-directed layout algorithm, this force is used to simulate the repulsion between nodes to maintain the spatial distance between nodes, avoid overlap, and achieve a visually beautiful layout effect.

[0079] (1) Initialize node positions and charges: Randomly place nodes A, B, C, and D on the canvas. Assign a charge to each node, which can usually be positive or negative. However, in the Coulomb force model, in order to simplify the calculation, usually only the absolute value of the charge is considered, because whether it is positive or negative, the repulsive force between them is the same (just in opposite directions).

[0080] (2) Calculation of Coulomb force: For each pair of nodes in the graph (such as A and B), the Coulomb force between them is calculated according to Coulomb's law. The magnitude of the Coulomb force is proportional to the product of the charges of the two nodes and inversely proportional to the square of the distance between them.

[0081] The direction of the Coulomb force is along the line between the nodes, and repulsion occurs between charges of the same kind (in the model, it is usually simplified to only consider the absolute value of the charge, so all nodes are considered to be "of the same charge"), that is, the direction of the force makes the nodes move away from each other.

[0082] (3) Mobile nodes: Update the node position based on the calculated Coulomb force. The node's movement distance and direction depend on the magnitude and direction of the Coulomb force.

[0083] It should be noted that when moving a node, the combined force of the Coulomb forces exerted by all other nodes on the node should be considered, rather than a single force. Therefore, it is usually necessary to calculate the vector sum of all the Coulomb forces exerted on each node, and then update the position of the node based on the vector sum.

[0084] (4) Iterative optimization: Repeat steps (2) and (3) until the stopping condition is met (such as the number of iterations reaches a preset value, the position change of the node is less than a certain threshold, or the total energy of the system reaches a minimum value, etc.).

[0085] In the iterative process, as the node positions are continuously adjusted and optimized, the layout of the graph will gradually become stable and beautiful. The Coulomb repulsion between nodes will ensure that they maintain a certain spatial distance, avoid overlap, and form a visually clear graph structure.

[0086] The steps of calculating repulsion or attraction and moving nodes are repeated until a stopping condition is met, such as the minimum number of iterations, the change in node position, or the total energy of the system.

[0087] In the step (4), specifically: 4.1 Web-based or desktop-based applications, design custom interfaces by dragging components and setting parameters; 4.2 Predefined components: Provide predefined interface components, such as buttons, text boxes, charts, pictures, etc. Allow users to upload or create custom components and add them to the component library; 4.3 Add components from the component library to the design area by dragging and dropping; adjust the position, resize, and rotate the components; provide a property editor for each component to set the component's color, font, and border style properties; bind events to the components, such as click, mouse hover, etc., and set the corresponding event handling logic.

[0088] 4.4 Check the actual effect of the design interface at any time through preview, and export the design interface as HTML / CSS / JavaScript code for use in web projects; 4.5 Use HTML and CSS to build the interface layout of the tool, including the component library, design area, and property editor; use JavaScript or front-end frameworks (such as React, Vue.js) to implement drag and drop, adjust layout, and set parameter interaction logic; use Canvas, SVG, or Web Components to achieve real-time rendering of the design area; 4.6 Manage the component library, including uploading, downloading, and deleting components; manage users, including user registration, login, and authority management; use the database to store user design data and component data; 4.7 Integration and testing: Perform integration testing on the front-end and back-end to ensure that the various functional modules work together normally; test the response speed and stability indicators of the test tool to ensure a good experience in actual use.

[0089] 4.8 Deployment and maintenance: deploy the tool to the server and ensure that users can access it through the Web or desktop application; regularly update the component library, fix known issues, and add new features to maintain the competitiveness of the tool and user satisfaction.

[0090] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can make equivalent replacements or changes according to the technical scheme and inventive concept of the present invention within the technical scope disclosed by the present invention, which should be covered by the protection scope of the present invention.

Claims

1. A method for building a Web-based configuration software based on the Internet of Things through a resource model, characterized in that: The following steps are involved: (1) Define the resource model. According to the characteristics of IoT devices and business requirements, define the resource model including device type, attributes and operation methods; (2) Develop Web-based configuration software and build a software framework using the front-end display layer and the back-end logic layer; (3) Integrate resource models into the Web-based configuration software to achieve unified management and monitoring of equipment; (4) Provide visual interface design tools for dragging components and setting parameters.

2. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 1, characterized in that: The step (1) is specifically as follows: 1.1 Define resources: Specify resource types: Specify all resource types that the Web-based configuration software needs to manage; Define resource attributes: define the inherent attributes for each resource type; Defines the operations or methods that a resource performs; Defines events or state changes generated by resources; 1.2 Resource association: clarify the relationship between resources; Association attributes: define attributes for association relationships; Association operation: defines the operation to be performed on the association relationship; 1.3 Build data model: Design database table structure. Based on resource definitions and association relationships, design database table structure to store data of resource instances and associated instances; Define the data interaction format, define the format of data interaction between the front-end and the back-end, including the format of requests and responses; Real-time data processing, data collection, storage, query and display; 1.4 Extended resource model: Carry out modular design and design the resource model into modular ones; 1.5 Encrypted resource model: Set access permissions: Design access control mechanisms to ensure that only authorized users or systems can access or modify resources; Data encryption: Encrypt sensitive data for storage and transmission to prevent data leakage or malicious use; Audit log: Records all operations on resources for auditing or tracking when necessary.

3. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 1 or 2, characterized in that: The step (2) is specifically as follows: 2.1 System architecture design: The system architecture of the Web-based configuration software adopts the browser / server B / S architecture, which allows users to access the configuration software through a browser without having to install client software locally; the system architecture is divided into the front-end display layer, the back-end logic layer, the data layer, and the communication layer; The front-end display layer is responsible for interacting with users and displaying configuration screens, real-time data, and alarm information; The backend logic layer is used to process business logic; The data layer is used to store and manage data; The communication layer is responsible for the communication between the front-end display layer, the back-end logic layer, and the back-end logic layer and the device; 2.2 Design resource model: Define resource types and clarify the resources that the configuration software needs to manage; Design resource attributes and define inherent attributes for each resource type; Define the resource implementation method, which defines the operations or methods performed by the resource; Define resource events to clarify events or state changes generated by resources; Related resource management: design the relationship between resources; 2.3 Security and scalability design: Conduct security design: perform access control, data encryption, and audit logs to ensure data security and system stability of the configuration software; The scalability design is modular, configurable or plug-in design.

4. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 3 is characterized in that: In the step (2), the step 2.1 is specifically: 2.1.1 In the front-end display layer, HTML, CSS and JavaScript are used for interface design to achieve the layout, style and interactive effects of the configuration screen; Display real-time data and alarm information through reused front-end components; Data interaction: realize data interaction between the front-end display layer and the back-end logic layer, including real-time data query, historical data query and control instruction sending; 2.1.2 In the back-end logic layer, Java and Python programming languages ​​are used to implement business logic, including device communication protocol processing, data processing algorithms, and user authority verification; Design interface: Design RESTful API or WebSocket interface for the front-end display layer to call; When operating the database, add, delete, modify, and query data, and process transactions; 2.1.3 Testing and deployment: Conduct unit tests on front-end components and back-end interfaces to ensure that each module functions correctly; After the front-end components and back-end ports are integrated, they are tested to verify the overall functionality of the system. Performance tests are performed on the system to evaluate the system's response speed and concurrent processing capability indicators. After development is completed, the system is deployed to the production environment to ensure that it can run stably and meet user needs.

5. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 4 is characterized in that: The step (3) includes primitive configuration, a graphics engine, and forming a graphics structure; the primitive configuration specifically includes: 3.1 The graphic elements are classified and defined, including lines, rectangles, circles, and text graphic elements, and configurable properties are defined for each graphic element; 3.2 Use the mouse to drag the graphics elements to the canvas and adjust the layout to combine multiple graphics elements into a whole; 3.3 Combine and manage graphics elements in a hierarchical manner and construct a graphical interface.

6. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 5, characterized in that: The graphics engine is implemented by the following components, specifically including: mxGraphModel is used to store and manage graphic elements and their relationships, and to operate on the graphic structure. When modifying the graphic structure, a transaction is started and ended through the beginUpdate and endUpdate methods to ensure the atomicity and consistency of the modification operation. The mxGraphModel provides an event mechanism that allows the listener to perform corresponding operations when the graphic structure changes. mxCell is the basis for representing graphic elements and contains attributes such as ID, value, style, and geometric information. The parent-child relationship between mxCells represents the inclusion relationship of graphic elements and is used to implement the layering and grouping of graphics. mxGeometry is used to store the geometric information of graphic elements, including the width, height, and position attributes of the graphic elements.

7. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 6, characterized in that: The formation of the graphic structure is specifically achieved by calculating the node positions by simulating the attraction and repulsion between particles to achieve a balanced state of the graphic; The natural length and elastic coefficient of the edges in the graph are set through the spring force model, the repulsion or attraction is calculated according to Hooke's law, and the node position is updated through iterative optimization; Based on the Coulomb force model, the repulsive force between nodes is calculated according to Coulomb's law. The node position is moved by considering the combined force of all nodes on a certain node, and a stable and beautiful graphic layout is achieved through iterative optimization. The steps of calculating repulsion or attraction and moving nodes are repeated until a stopping condition is met.

8. The method for building a Web-based configuration software based on the Internet of Things through a resource model according to claim 7, characterized in that: In the step (4), specifically: 4.1 Web-based or desktop-based applications, design custom interfaces by dragging components and setting parameters; 4.2 Predefined components: Provide predefined interface components, allowing users to upload or create custom components and add them to the component library; 4.3 Add components from the component library to the design area by dragging and dropping; adjust the position, size, and rotate the components; provide a property editor for each component to set the component's color, font, and border style properties; set the corresponding event processing logic for component binding events; 4.4 Check the actual effect of the design interface at any time through preview, and export the design interface as HTML / CSS / JavaScript code for use in web projects; 4.5 Use HTML and CSS to build the interface layout of the tool, including the component library, design area, and property editor; use JavaScript or front-end frameworks to implement drag and drop, adjust layout, and set parameter interaction logic; use Canvas, SVG, or WebComponents to achieve real-time rendering of the design area; 4.6 Manage the component library, including uploading, downloading, and deleting components; manage users, including user registration, login, and authority management; use the database to store user design data and component data; 4.7 Integration and testing: conduct integration testing on the front-end and back-end to ensure the normal coordination of various functional modules; test the response speed and stability indicators of the test tools to ensure a good experience in actual use; 4.8 Deployment and maintenance: deploy the tool to the server and ensure that users can access it through the Web or desktop application; regularly update the component library, fix known issues, and add new features to maintain the competitiveness of the tool and user satisfaction.