{"id":420,"date":"2023-09-13T13:33:16","date_gmt":"2023-09-13T13:33:16","guid":{"rendered":"https:\/\/iotmanager.org\/?page_id=420"},"modified":"2023-10-06T05:18:59","modified_gmt":"2023-10-06T05:18:59","slug":"webintrface","status":"publish","type":"page","link":"https:\/\/iotmanager.org\/en\/instructions\/webintrface\/","title":{"rendered":"Basic elements of the device's web interface"},"content":{"rendered":"

1. Dashboard control panel<\/strong><\/h4>\n\n\n\n

On this page, you will see widgets from all your devices simultaneously. Buttons, input boxes, graphs, and many other elements created on your devices. The web interface combines widgets on the same screen from different devices and there is no need to navigate to different ip addresses.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

2. Configurator<\/strong><\/h4>\n\n\n\n

This is the device settings page. The drop-down list contains elements of an automation system<\/strong>. Any automatic system consists of separate structural elements connected to each other and performing certain functions, which are commonly called elements or means of an automation system. You will be able to select the items you need from the list and they will appear in the table<\/strong>. Each element you select has configuration settings that you can change by clicking on the three-dot button. (…)<\/strong>. <\/p>\n\n\n\n

The second important necessary feature of any automation system is the ability to configure the relationship between its elements. To do this, a simplified scripting programming language is displayed in the web interface. This allows you to react to events and access elements, forming the system's logic. The built-in programming language will allow very flexible system configuration, as well as help you acquire basic programming skills. <\/p>\n\n\n\n

In addition to the main goal, our project also has a goal learning programming<\/strong> and getting people involved in this process. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

3. Connection<\/strong><\/p>\n\n\n\n

There are two sections on this page: connecting to WIFI and connecting to MQTT. With the first one, everything is usually clear, but with the second one, the question arises what it is, and why it is needed. MQTT is a standards-based messaging protocol used for communication between devices. In our project, there is a second independent way to monitor and manage the system \u2014 this is the IoT Manager mobile application. It requires MQTT to work. The second reason for using MQTT is for devices to communicate with each other. Our system uses network scripts that allow you to transfer control signals between devices. To use these two functions, you need to get an MQTT broker and enter its parameters in the window on the right. MQTT broker (or server) You can get it for example by registering on the site wqtt.ru<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

4. System Requirements<\/strong><\/p>\n\n\n\n

This section contains the device's system information. You can also make some system settings \u2014 time zone, clearing chart data, changing the device group. This setting affects the formation of widgets on the manage page. Devices from other groups will not be displayed. <\/p>\n\n\n\n

On this page, you can specify:<\/p>\n\n\n\n