使用阿里云IoT Studio建立物模型可视化界面

上一篇文章介绍了如何使用ESP-01S上报数据到物模型：https://blog.csdn.net/weixin_46251230/article/details/128996719

这次使用阿里云IoT Studio建立物模型的Web页面

阿里云IoT Studio： https://studio.iot.aliyun.com/

注意：IoT Studio免费使用期限是一个月，过了一个月之后要付费才能继续使用

创建项目

打开网页后，点击项目管理

在这里插入图片描述

点击新建项目，如果原来有项目的，要先删除原来的才能新建，体验版只能创建一个项目

在这里插入图片描述

点击新建空白项目

在这里插入图片描述

输入项目名称

在这里插入图片描述

在项目主页点击产品关联

在这里插入图片描述

选择关联自己的产品，再勾选关联其下所有设备，点击确定

在这里插入图片描述

产品一栏中已经显示了之前创建的产品信息，后续如果要删除产品关联，可以点击解除关联，设备同理

在这里插入图片描述

点击新建Web应用

在这里插入图片描述

输入页面名称，点击确定
在这里插入图片描述

编辑Web页面

创建温度仪表盘

在Web页面中点击组件栏，就可以将组件拖动到画板上，做出自己的显示页面

在这里插入图片描述

选择一个仪表盘并点击，在右侧可以为其配置数据源

在这里插入图片描述

选择自己的产品，设备，设备里要显示的属性值，这里选择温度，最后确定

在这里插入图片描述

再配置单位和文字

在这里插入图片描述

就设置好了温度仪表盘

在这里插入图片描述

点击右上角的预览按钮，就可以浏览可视化页面

在这里插入图片描述

ESP-01S发送AT指令，改变温度值

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

因为配置了数据源，所以温度仪表盘的数据被自动改变了

在这里插入图片描述

创建按钮开关

创建一个开关并设置数据源为BOOL类型的继电器

在这里插入图片描述

在预览的Web页面点击开关时要注意，每次点击开关都会往ESP-01S下发数据，需要ESP-01S回应数据开关才会设置成功，否则会反弹

点击按钮时，云平台下发到ESP-01S的数据

在这里插入图片描述

若不回应，则Web页面显示超时，同时按钮没有被打开

在这里插入图片描述

在ESP-01S接收到下发数据后，立即发送AT指令进行回应

在这里插入图片描述

则Web页面显示数据下发成功，同时按钮也被正常打开，关闭按钮同理，要发送关闭继电器的AT指令

在这里插入图片描述

创建实时曲线

为实时曲线配置数据源，选择单设备多属性，属性选择温度值

在这里插入图片描述

在交互中添加事件，当鼠标点击实时曲线时，刷新曲线组件，显示最新数据

在这里插入图片描述

发送AT指令多设置几次温度值，看实时曲线是否显示温度变化

在这里插入图片描述

Web界面的实时曲线正确显示改变的温度值，如果发现温度值没改变，则点击曲线进行刷新，横坐标的时间也会刷新，左上角显示最后一次温度值，符合预期

在这里插入图片描述