Use Alibaba Cloud IoT Studio to build a visual interface for the object model
The previous article introduced how to use ESP-01S to report data to the physical model: https://blog.csdn.net/weixin_46251230/article/details/128996719
This time, use Alibaba Cloud IoT Studio to build the web page of the object model
Alibaba Cloud IoT Studio: https://studio.iot.aliyun.com/
Note: IoT Studio is free for one month, after one month you have to pay to continue using it
create project
After opening the webpage, click Project Management
Click to create a new project. If there is a project before, you must delete the original one before creating a new one. The trial version can only create one project
Click New Blank Project
Enter project name
Click Product Association on the project home page
Choose to associate your own product, then check to associate all devices under it, and click OK
The previously created product information has been displayed in the product column. If you want to delete the product association later, you can click Disassociate. The device is the same
Click New Web Application
Enter a page name and click OK
edit web page
Create a Temperature Dashboard
Click the component bar in the web page, and you can drag the component to the drawing board to make your own display page
Select a dashboard and click to configure the data source for it on the right
Select your own product, equipment, and the attribute value to be displayed in the equipment, here select the temperature, and finally confirm
Reconfigure units and text
Just set up the temperature dashboard
Click the preview button in the upper right corner to browse the visualization page
ESP-01S sends AT commands to change the temperature value
AT+MQTTPUB=0,"/sys/hiyfcAbCXmq/ESP8266-1/thing/event/property/post","{\"method\":\"thing.event.property.post\"\,\"id\":\"1234\"\,\"params\":{\"temperature\":33}\,\"version\":\"1.0.0\"}",1,0
Because the data source is configured, the data of the temperature dashboard is automatically changed
Create a push button switch
Create a switch and set the data source to a relay of type BOOL
Pay attention when clicking the switch on the preview web page, each time the switch is clicked, the data will be sent to the ESP-01S, and the ESP-01S needs to respond to the data switch to set successfully, otherwise it will rebound
When the button is clicked, the data sent by the cloud platform to ESP-01S
If there is no response, the Web page will display a timeout, and the button will not be opened at the same time
After ESP-01S receives the sent data, it immediately sends an AT command to respond
Then the web page shows that the data is sent successfully, and the button is also opened normally, and the button is closed in the same way, it is necessary to send the AT command to close the relay
Create real-time curves
Configure the data source for the real-time curve, select the single device multi-attribute, and select the temperature value for the property
Add an event in the interaction, when the mouse clicks on the real-time curve, refresh the curve component and display the latest data
Send AT commands to set the temperature value several times to see if the real-time curve shows the temperature change
The real-time curve on the web interface correctly displays the changed temperature value. If you find that the temperature value has not changed, click the curve to refresh, and the time on the abscissa will also be refreshed. The upper left corner displays the last temperature value, which is in line with expectations
