设备上云后,所有的数据展示与调试都是基于通讯协议的交互,数据展示非常的不直观。物联网应用开发(IoT Studio)中的Web可视化开发工具可帮助您开发一个基于网页的控制界面,无需编写代码,十分的方便快捷。本案例通过开发Web应用,实现检测边缘计算机状态和控制设备电源指示灯开关的功能。
编辑监控树莓派的应用
- 创建Web可视化应用。详细操作请参见创建Web应用。
说明 以下Web应用的样式配置仅为示例,用户可根据实际场景自定义。
- 在应用的页面的画布左侧,编辑页面标题。
单击编辑按钮

后,输入自定义标题即可。

- 在应用编辑页面,单击左侧导航栏的组件图标。
- 配置CPU相关组件,并为其配置数据源。
- 在画布左侧的组件列表栏,选择基础组件。
- 在画布中添加矩形组件和一个文字组件。
文字组件:如下图所示设置
文字内容。

矩形组件:作为其他组件的背景。
- 在画布左侧的组件列表栏,选择工业组件。
- 配置两个仪表组件(多色仪表盘),用于显示CPU状态数据。

- CPU负载仪表盘的样式设置如图所示。

- CPU温度仪表盘的样式设置如图所示。

- 为CPU的仪表盘配置数据源。
在画布中分别选中CPU的仪表盘组件,在右侧对应的样式栏,单击数据源右侧的
配置数据源。
依次选择设备数据源、目标产品、指定设备和功能属性,单击确定。
- CPU负载仪表盘的数据源设置如图所示。

- CPU温度仪表盘的数据源设置如图所示。

参数 |
描述 |
选择数据源 |
选择数据源为:设备。 |
产品 |
选择应用所在项目关联的产品:树莓派计算机。
有关项目关联产品的详细内容,请参见关联产品和设备。
|
设备 |
选择树莓派计算机下指定设备:raspberry4-00001。 |
数据项 |
选择待展示的设备属性。您可根据组件需要展示的数据,选择对应的功能属性。
有关产品功能属性的详细内容,请参见为产品定义物模型。
|
- 配置内存空闲组件,并为其配置数据源。
- 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个单色仪表盘到画布,进行如图所示配置。
- 选中单色仪表盘,单击右侧样式栏的配置数据源。
- 单击确定。
- 配置磁盘存储组件,并为其配置数据源。
- 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个刻度表到画布,进行如图所示配置。
- 选中刻度表组件,单击右侧样式栏的配置数据源。
- 单击确定。
- 配置指示灯开关组件,并为其配置数据源。
- 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个旋钮开关到画布,进行如图所示配置。
- 选中旋钮开关组件,单击右侧样式栏的配置数据源。
- 单击确定。
- 单击页面顶部栏中的保存按钮,保存应用设置。
- 单击页面顶部栏中的预览按钮,预览并调试应用。
发布应用
Web应用编辑完成后,将应用发布到云端,以供使用。
- 单击编辑器页面上方的发布。
- 在发布应用中,输入当前版本信息,单击确定。
应用发布成功。

应用发布成功后,您可根据需要选择绑定域名、设置Token,可将应用嵌入其他网站或修改已发布页面中绑定的具体设备。
执行结果
在Web应用页面查看树莓派系统运行过程中的相关状态。
至此,体验Web可视化应用监控树莓派状态的流程就结束了。
如果您想进一步体验IoT Studio的Web可视化和业务逻辑功能,可继续执行后续步骤,体验“监控机房温湿度”案例的开发过程。
后续步骤
添加温湿度传感器,完成检测设备数据的目标,实现对机房温度和湿度环境参数的数据展示。
- 为温湿度传感器定义物模型
- 上传温湿度数据
- 开发数据服务API
- 展示机房温湿度数据
- 开发温度告警服务