Cross-platform internet of things configuration method

Abstract

The application particularly relates to a cross-platform Internet of Things configuration method. The cross-platform Internet of Things configuration method is based on Angular language fabric.js plug-ins and editing and storage of a multi-protocol communication point table, realizes logical binding of both, and binding objects of a web configuration component are divided into display type components and control components; wherein, the display type components include a data panel and a chart panel, and the control components include buttons and input boxes; the communication protocol point table supports a modbus protocol, and device attributes are registered and issued quickly in the form of a table; based on the web configuration component and the communication protocol point table, the communication protocol point table is quickly bound in the web configuration. The cross-platform Internet of Things configuration method can be compatible with different device use scenes, improves the ease of use of configuration, establishes an efficient data channel, makes device running states and data be intuitively displayed, reduces development and maintenance costs, and optimizes the use experience.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, in particular to a cross-platform Internet of Things configuration method. BACKGROUND

[0002] With the rapid development of the Internet, the convenience of the network has penetrated into people's daily life and work, and the Internet of Things is one of the most notable application fields.

[0003] The Internet of Things refers to a network of interconnected objects. With the help of information sensing devices, it follows established protocols to closely connect devices and networks. These devices exchange and communicate information through information transmission media, thereby realizing intelligent identification, positioning, tracking, and control functions.

[0004] Especially in the industrial sector, it has become a valuable matter to be able to view the running status of devices in real time and master their running data. Therefore, for practitioners in the field of Internet of Things, developing a configuration software that is easy to use and supports cross-platform has great potential value, whether from a practical or commercial perspective.

[0005] In order to be compatible with different device usage scenarios, maintain a unified user experience, and reduce development and maintenance costs, the present application proposes a cross-platform Internet of Things configuration method. SUMMARY

[0006] The present application provides a simple and efficient cross-platform Internet of Things configuration method to overcome the shortcomings of the prior art.

[0007] The present application is achieved by the following technical solutions:

[0008] A cross-platform Internet of Things configuration method based on Angular language fabric.js plug-in and multi-protocol communication point table editing and storage to realize logical binding of the two;

[0009] The binding object of the web configuration component is divided into display class components and control components; wherein the display class components include data panels and chart panels, and the control components include buttons and input boxes;

[0010] The communication protocol point table supports the modbus protocol, and the device attributes are quickly registered and issued in the form of a table;

[0011] Based on the web configuration component and the communication protocol point table, the communication protocol point table is quickly bound in the web configuration.

[0012] The method comprises the following steps:

[0013] Step S1, developing a web configuration component

[0014] Use the selector for app-draw to draw graphics; the web configuration component in the basic version has control dragging, picture drawing, SVG drawing, element size color setting, form component support and chart drawing functions;

[0015] Introduce the @angular / animations module to add interactive animations to page elements; introduce the FormsModule module and the ReactiveModule module to implement form control development; introduce the DragDropModule module to implement element dragging;

[0016] The web configuration component path src / app / cleverlink / draw contains the board.service.ts service and the button.service.ts service in the same directory, which provides method support for different configuration elements;

[0017] Step S2, bind the communication point table

[0018] Bind the configuration component with communication function with the point table parameter, in essence, the ID of the data point, the device to which the data point belongs, and the information of the gateway are stored in the web configuration component attribute through base64 encoding, and the component attribute is saved and run with the configuration; Then run the configuration, realize the device data viewing and device control function through the bound component.

[0019] In step S1, the @angular / animations module provides animation API, which can realize css animation effects such as translation, zoom in, zoom out, and slide in and out; This configuration uses transition animation to realize the switching and translation effect of the controls in the configuration control panel;

[0020] When the user selects, switches and cancels the configuration elements on the configuration canvas, the control panel displays different control groups according to the element type; In order to realize the smooth transition effect, use the transition animation effect provided by the @angular / animations module for the display and hiding of controls.

[0021] Introduce the FormsModule module and the ReactiveModule module to create a reactive form; When reading and displaying data and issuing in the web configuration, the Angular framework's data binding, input box and button are needed respectively, and the reactive form provided by the Angular framework is used to handle user input and realize centralized management of configuration data.

[0022] In step S1, introduce the related Angular basic module, and use the decorator @Component to create the component DrawComponent;

[0023] Create draw.component.html file, the file includes four parts of top toolbar, left material panel, configuration canvas and right control panel;

[0024] Among them, the top toolbar provides common functions including copy, paste, delete, zoom in and zoom out of configuration elements; the left material panel uses tab label to load material resources including controls, SVG files and pictures; the configuration canvas uses the canvas element of html, and then uses the fabric.js plug-in in the ts file to initialize it; the right control panel uses tab label page to load view control panel and data processing panel.

[0025] The TopBarComponent component of the top toolbar, the MaterialComponent component of the left material panel, and the ControlComponent component of the right control panel are separated and developed independently.

[0026] The configuration canvas uses the core class fabric.Canvas to obtain the canvas element in html to initialize it; after initialization, the action of the canvas element is listened to to respond to element state changes.

[0027] When the fabric.js plug-in initializes the canvas element, first introduce the fabric.min.js file in the angular.json file, declare the fabric object in the component DrawComponent, and use the fabric object to initialize the canvas element and add the listening code when the component DrawComponent is initialized.

[0028] In step S1, the drag action of the html element is listened to using the html native method, and the processing function is bound; when the mouse is lifted, if the element is in the canvas element, the current coordinates of the element are calculated, and the corresponding element type is added to the canvas element using the fabric.js method; the implementation process is as follows:

[0029] Bind the processing function to the dragstart attribute and the dragend attribute of all material pictures by setting the draggable attribute to true.

[0030] First, calculate the distance x1 of the left side of the canvas from the left side of the screen, and when the element is dragged to the end, calculate the distance x2 of the left side of the element from the left side of the screen; the difference between the distance x2 of the left side of the element from the left side of the screen and the distance x1 of the left side of the canvas from the left side of the screen is the distance of the element from the left side of the canvas.

[0031] When the distance of the element from the left boundary of the canvas is greater than 0 and less than the sum of the distance x1 of the left side of the canvas from the left side of the screen and the width of the canvas, it indicates that the element is in the canvas in the horizontal range; similarly, calculate whether the element is in the canvas in the vertical distance;

[0032] When the element is in the canvas in both horizontal and vertical distances, the coordinates of the element are calculated, and the corresponding element is loaded into the canvas using the native method of fabric.js.

[0033] In the step S1, the Fabric.js plug-in supports adding line, geometric figure and text elements to the canvas; through the combination of geometric figures and text, a simple display frame is realized for data display; by adding a rectangle and adding click animation and click event to it, it is simulated as a button and used as a configuration switch; the dom element is added to the canvas with the rect figure as the carrier to realize the input box control.

[0034] In the step S2, the communication protocol point table of the modbus protocol defines a series of modbus standard data points, including register type, register address and slaveID (unique identification address of slave device) parameters.

[0035] In the step S2, a unique ID is generated for each data point in the communication protocol point table of the modbus protocol; when editing the web configuration, the user binds the web configuration component and the corresponding data point one by one;

[0036] The web configuration performs suitability judgment according to the component type and the data point type, and the button component is prohibited from being bound with the read-only data.

[0037] A cross-platform Internet of Things configuration device, characterized by comprising a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to realize the method steps.

[0038] A readable storage medium, characterized by: the readable storage medium stores a computer program, and the computer program is executed by a processor to realize the method steps.

[0039] The cross-platform Internet of Things configuration method can be compatible with different device use scenarios, improve the ease of use of the configuration, establish an efficient data channel, make the device running state and data be intuitively displayed, reduce the development and maintenance cost, and optimize the use experience. BRIEF DESCRIPTION OF DRAWINGS

[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings described below are some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0041] Appendix Figure 1 The schematic diagram of the cross-platform Internet of Things configuration method of the present application. DETAILED DESCRIPTION

[0042] In order to make the person skilled in the art better understand the technical solutions in the present application, the following will combine the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, not all. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor should be within the scope of protection of the present application.

[0043] At present, the development of Web configuration components shows a diversified trend, and the modbus protocol, as a mature and widely used industrial protocol, is combined with these components, and through the development of components, an efficient data channel can be established to make the device running state and data be intuitively displayed.

[0044] The cross-platform Internet of Things configuration method is based on the Angular language fabric.js plug-in and the editing and storage of the multi-protocol communication point table to realize the logical binding of the two;

[0045] The binding objects of the web configuration components are divided into display type components and control components; wherein the display type components include data panels and chart panels, and the control components include buttons and input boxes;

[0046] The communication protocol point table supports the modbus protocol, and the device attributes are quickly registered and issued in the form of a table;

[0047] Based on the web configuration components and the communication protocol point table, the communication protocol point table is quickly bound in the web configuration.

[0048] The method comprises the following steps:

[0049] Step S1, developing a Web configuration component

[0050] The selector is used to draw graphics as app-draw. The Web configuration component in the basic version has the functions of control dragging, picture drawing, SVG drawing, element size and color setting, form component support and chart drawing;

[0051] To optimize the user experience, the @angular / animations module is introduced to add interactive animations to page elements; the FormsModule module and the ReactiveModule module are introduced to implement form control development; the DragDropModule module is introduced to implement element dragging;

[0052] The Web configuration component path src / app / cleverlink / draw contains the board.service.ts service and the button.service.ts service in the same directory, which provides method support for different configuration elements such as display boxes and buttons;

[0053] In step S1, the @angular / animations module provides rich animation APIs that can implement CSS animation effects such as translation, zooming, shrinking, and sliding in and out; this configuration uses transition animations to implement the switching and translation effects of the controls in the configuration control panel;

[0054] When the user selects, switches, and cancels configuration elements on the configuration canvas, the control panel displays different control groups according to the element type, for example, when the user selects a text control, the control panel displays font size setting controls, font color controls, etc., and when the user cancels the selection of the canvas element, the control panel font setting controls disappear. To achieve a smooth transition effect, the @angular / animations module is used to provide transition animation effects for the display and hiding of controls.

[0055] The FormsModule module and the ReactiveModule module are introduced to create a reactive form; when reading and displaying data and issuing data in the Web configuration, the Angular framework's data binding, input box, and button are required, and the reactive form provided by the Angular framework is used to handle user input and implement centralized management of configuration data.

[0056] In step S1, the relevant Angular base modules are introduced, and the decorator @Component is used to create the component DrawComponent;

[0057] The draw.component.html file is created, which includes the top toolbar, the left material panel, the configuration canvas, and the right control panel;

[0058] The top toolbar provides common functions including copy, paste, delete, zoom in and zoom out of configuration elements; the left material panel uses tab label loading control, SVG file and picture material resources; the configuration canvas uses the html canvas element, which is then initialized using the fabric.js plug-in in the ts file; the right control panel uses tab page to load view control panel and data processing panel.

[0059] The TopBarComponent component of the top toolbar, the MaterialComponent component of the left material panel and the ControlComponent component of the right control panel are separately developed.

[0060] The configuration canvas uses the core class fabric.Canvas to obtain the canvas element in html to initialize it; after initialization, the action of the canvas element is monitored to respond to element state changes.

[0061] When the fabric.js plug-in initializes the canvas element, first introduce the fabric.min.js file in the angular.json file, declare the fabric object in the component DrawComponent, and use the fabric object to initialize and add the listening code to the canvas element when the component DrawComponent is initialized.

[0062] In step S1, the html native method is used to listen to the drag action of the html element, and a processing function is bound to it; when the mouse is lifted, if the element is in the canvas element, the current coordinates of the element are calculated, and the corresponding element type is added to the canvas element using the fabric.js method; the implementation process is as follows:

[0063] Taking pictures as an example, add the draggable attribute to all material pictures and set it to true, add the dragstart attribute and the dragend attribute, and bind the processing function;

[0064] First, calculate the distance x1 of the left side of the canvas from the left side of the screen, and when the element is dragged to the end, calculate the distance x2 of the left side of the element from the left side of the screen; the difference between the distance x2 of the left side of the element from the left side of the screen and the distance x1 of the left side of the canvas from the left side of the screen is the distance of the element from the left side of the canvas.

[0065] When the distance between the element and the left boundary of the canvas is greater than 0 and less than the sum of the distance x1 between the left boundary of the canvas and the left side of the screen and the width of the canvas, it indicates that the element is in the canvas in the horizontal range; similarly, whether the element is in the canvas in the vertical distance is calculated;

[0066] When the element is in the canvas in both horizontal and vertical distances, the coordinates of the element are calculated, and the corresponding element is loaded into the canvas using the native method of fabric.js.

[0067] In step S1, the Fabric.js plug-in supports adding line, geometric figure and text elements to the canvas; through the combination of geometric figures and text, a simple display frame is realized for data display; by adding a rectangle and adding click animation and click event to it, it is simulated as a button for use as a configuration switch; the dom element is added to the canvas with the rect figure as the carrier to realize the input box control.

[0068] Step S2, binding the communication point table

[0069] The configuration component with communication function is bound with the point table parameters, which is essentially to store the ID of the data point, the device to which the data point belongs and the information of the gateway into the web configuration component attribute through base64 encoding. The component attribute is saved and run with the configuration; then run the configuration, and realize the device data viewing and device control function through the bound component.

[0070] In step S2, the communication protocol point table of the modbus protocol defines a series of modbus standard data points, including register type, register address and slaveID (unique identification address of slave device) parameters. The point table contains all attributes of a type of device.

[0071] In step S2, a unique ID is generated for each data point in the communication protocol point table of the modbus protocol; when editing the web configuration, the user binds the web configuration component with the corresponding data point one by one;

[0072] The web configuration makes suitability judgment according to the component type and the data point type, and the button component is prohibited from being bound with the read-only data.

[0073] The cross-platform Internet of Things configuration device includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to realize the method steps described above.

[0074] The readable storage medium has a computer program stored thereon, and the computer program is executed by the processor to realize the method steps described above.

[0075] Compared with the prior art, the cross-platform Internet of Things configuration method has the following characteristics:

[0076] Firstly, multiple protocols are supported, and Modbus protocol and opc-ua protocol type communication point tables can be configured and configured and bound.

[0077] Secondly, multiple page configurations are provided, and when there are many field devices and management is complex, multiple page configurations can be used to group manage Internet of Things devices.

[0078] Thirdly, data point tables can be flexibly bound, and components can be intelligently matched according to data point types. For example, read-only data can be bound to a display box, and writable data can be bound to an input box.

[0079] Fourthly, from configuration initialization to loading data to normal operation, the configuration provides accurate information feedback to the user, and the use experience is optimized.

[0080] The above-described embodiments are only one of the specific embodiments of the present application, and the usual changes and replacements made by those skilled in the art within the scope of the technical solutions of the present application should be included in the protection scope of the present application.

Claims

1. A cross-platform Internet of Things configuration method, characterized in that: Based on the Angular language fabric.js plug-in and the communication protocol point table editing and storage, the logical binding of the web configuration component and the communication protocol point table is realized. The binding objects of the web configuration component are divided into display type components and control components; the display type components include data panels and chart panels, and the control components include buttons and input boxes; The communication protocol point table supports the modbus protocol, and the device attributes are quickly registered and issued in the form of a table; Based on the web configuration component and the communication protocol point table, the communication protocol point table is quickly bound in the web configuration; The method comprises the following steps: Step S1, developing a web configuration component Step S2, binding a communication protocol point table Binding the configuration component with communication function and the point table parameter is essentially to store the ID of the data point, the device to which the data point belongs and the information of the gateway into the web configuration component attribute through base64 encoding, and the component attribute is saved and run with the configuration; then, the configuration is run, and the device data viewing and device control functions are realized through the bound component; In step S2, a series of modbus standard data points are defined in the modbus protocol communication protocol point table, including register type, register address and slaveID parameters; A unique ID is generated for each data point in the modbus protocol communication protocol point table; when editing the web configuration, the user binds the web configuration component and the corresponding data point one by one; The web configuration performs suitability judgment according to the component type and the data point type, and the button type component is prohibited from being bound with the read-only type data.

2. The cross-platform IoT configuration method of claim 1, wherein: In step S1, the selector app-draw is used to draw graphics; in the basic version, the web configuration component has the functions of control dragging, picture drawing, SVG drawing, element size and color setting, form component support and chart drawing; The @angular / animations module is introduced to add interactive animations to page elements; the FormsModule module and the ReactiveModule module are introduced to realize form control development; the DragDropModule module is introduced to realize element dragging; The web configuration component path src / app / cleverlink / draw includes the board.service.ts service and the button.service.ts service in the same directory, which provides method support for different configuration elements.

3. The cross-platform IoT configuration method of claim 2, wherein: In step S1, the @angular / animations module provides animation APIs to realize CSS animation effects such as translation, zoom-in, zoom-out and slide-in and slide-out; the configuration uses transition animations to realize the switching and translation effects of the controls in the configuration control panel; When the user selects, switches and cancels the configuration elements on the configuration canvas, the control panel displays different control groups according to the element type; in order to realize smooth transition effects, the transition animation effect provided by the @angular / animations module is used for the display and hiding of the controls; The introduction of the FormsModule module and the ReactiveModule module creates a reactive form; when reading and displaying data and issuing in the web configuration, the data binding, input box and button of the Angular framework are needed respectively, the user input is processed using the reactive form provided by the Angular framework, and the configuration data is centrally managed.

4. The cross-platform IoT configuration method of claim 2, wherein: In step S1, the relevant Angular base module is introduced, and the component DrawComponent is created using the decorator @Component; Create a draw.component.html file, which includes a top toolbar, a left material panel, a configuration canvas, and a right control panel. Among them, the top toolbar provides common functions including copying, pasting, deleting, zooming in and out of configuration elements; the left material panel uses tab labels to load control, SVG files and image material resources; the configuration canvas uses the html canvas element, and then initializes it in the ts file using the fabric.js plug-in; The right control panel uses tab pages to load view control panels and data processing panels. The TopBarComponent component of the top toolbar, the MaterialComponent component of the left material panel, and the ControlComponent component of the right control panel are separately developed.

5. The cross-platform IoT configuration method of claim 4, wherein: The configuration canvas uses the core class fabric.Canvas to obtain the canvas element in html to initialize it; after initialization, the action of the canvas element is listened to to respond to element state changes; When initializing the canvas element using the fabric.js plug-in, first introduce the fabric.min.js file in the angular.json file, declare the fabric object in the DrawComponent component, and use the fabric object to initialize the canvas element and add the listening code when the DrawComponent component is initialized.

6. The cross-platform IoT configuration method of claim 4, wherein: In step S1, the html native method is used to listen to the drag action of the html element, and a processing function is bound to it; when the mouse is lifted, if the element is inside the canvas element, the current coordinates of the element are calculated, and the corresponding element type is added to the canvas element using the fabric.js method; The implementation process is as follows: Add the draggable attribute to all material pictures, set it to true, add the dragstart attribute and the dragend attribute, and bind the processing function; First, calculate the distance x1 from the left side of the canvas to the left side of the screen, and when the element is dragged to the end, calculate the distance x2 from the left side of the element to the left side of the screen; The difference between the distance x2 from the left side of the element to the left side of the screen and the distance x1 from the left side of the canvas to the left side of the screen is the distance from the left side of the element to the left side of the canvas. When the distance between the element and the left boundary of the canvas is greater than 0 and less than the sum of the distance x1 between the left boundary of the canvas and the left side of the screen and the width of the canvas, it indicates that the element is in the canvas in the horizontal range; similarly, whether the element is in the canvas in the vertical distance is calculated; When the element is in the canvas in both horizontal and vertical distances, the coordinates of the element are calculated, and the corresponding element is loaded into the canvas using the native method of fabric.js.

7. The cross-platform IoT configuration method of claim 5, wherein: In the step S1, the Fabric.js plug-in supports adding line, geometric figure and text elements to the canvas; through the combination of geometric figures and texts, a simple display frame is realized for data display; by adding a rectangle and adding click animation and click event to it, the rectangle is simulated as a button for use as a configuration switch; the dom element is added to the canvas with the rect figure as the carrier to realize the input box control.

8. A cross-platform IoT configuration device, comprising: The memory is configured to store a computer program, and the processor is configured to execute the computer program to implement the method according to any one of claims 1 to 7.

9. A readable storage medium characterized by: The readable storage medium has a computer program stored thereon, and the computer program is executed by the processor to implement the method according to any one of claims 1 to 7.

Images