使用阿里云IoT Studio建立物模型可视化界面
使用阿里云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界面的实时曲线正确显示改变的温度值，如果发现温度值没改变，则点击曲线进行刷新，横坐标的时间也会刷新，左上角显示最后一次温度值，符合预期
