文档

开发可视化应用监控树莓派状态

更新时间:
一键部署

设备上云后,所有的数据展示与调试都是基于通讯协议的交互,数据展示非常的不直观。物联网应用开发(IoT Studio)中的Web可视化开发工具可帮助您开发一个基于网页的控制界面,无需编写代码,十分的方便快捷。本文介绍通过开发Web应用,实现检测边缘计算机状态和控制设备电源指示灯开关的功能。

前提条件

已完成项目开发和设备关联。详细内容请参见创建IoT Studio项目

编辑监控树莓派的应用

  1. 创建Web可视化应用。详细操作请参见创建Web应用

    说明

    以下Web应用的样式配置仅为示例,用户可根据实际场景自定义。

  2. 在应用的页面的画布左侧,编辑页面标题。

    单击编辑编辑图标后,输入自定义标题即可。页面标题

  3. 在应用编辑页面,单击左侧导航栏的组件图标。

  4. 配置CPU相关组件,并为其配置数据源。

    1. 在画布左侧的组件列表栏,选择基础组件

    2. 在画布中添加一个矩形组件和一个文字组件。

      文字组件:如下图所示设置文字内容文字组件

      矩形组件:设置矩形组件填充颜色,作为其他组件的背景。

      组件配置的具体操作,请参见矩形文字

    3. 在画布左侧的组件列表栏,选择工业组件

    4. 配置两个仪表组件(多色仪表盘),用于显示CPU状态数据。组件配置的具体操作,请参见多色仪表盘

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

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

    5. 为CPU的仪表盘配置数据源。

      在画布中分别选中CPU的仪表盘组件,在右侧对应的样式栏,单击数据源右侧的配置数据源

      依次选择设备数据源、目标产品、指定设备和功能属性,单击确定

      • CPU负载仪表盘的数据源设置如图所示。CPU负载数据源

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

      参数

      描述

      选择数据源

      选择数据源为:设备。

      产品

      选择应用所在项目关联的产品:树莓派计算机。

      有关项目关联产品的详细内容,请参见关联产品和设备

      设备

      选择树莓派计算机下指定设备:raspberry4-00001

      数据项

      选择待展示的设备属性。您可根据组件需要展示的数据,选择对应的功能属性。

      有关产品功能属性的详细内容,请参见为产品定义物模型

  5. 配置内存空闲组件,并为其配置数据源。

    1. 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个单色仪表盘到画布,进行如图所示配置。组件配置的具体操作,请参见单色仪表盘

      内存组件
    2. 选中单色仪表盘,单击右侧样式栏的配置数据源

      内存空闲数据源
    3. 单击确定

  6. 配置磁盘存储组件,并为其配置数据源。

    1. 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个刻度表到画布,进行如图所示配置。组件配置的具体操作,请参见刻度表

      磁盘存储
    2. 选中刻度表组件,单击右侧样式栏的配置数据源

      刻度表数据源
    3. 单击确定

  7. 配置指示灯开关组件,并为其配置数据源。

    1. 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个旋钮开关到画布,进行如图所示配置。组件配置的具体操作,请参见旋钮开关

      指示灯开关
    2. 选中旋钮开关组件,单击右侧样式栏的配置数据源

      指示灯开关数据源
    3. 单击确定

  8. 单击页面顶部栏中的保存按钮,保存应用设置。

  9. 单击页面顶部栏中的预览按钮,预览并调试应用。

发布应用

Web应用编辑完成后,将应用发布到云端,以供使用。

  1. 单击页面顶部栏中的发布image.png图标。

  2. 发布应用中,输入当前版本信息,单击确定

    发布应用

    应用发布成功。应用发布成功

    应用发布成功后,您可根据需要选择绑定域名设置Token,可将应用嵌入其他网站修改已发布页面中绑定的具体设备

执行结果

在Web应用页面查看树莓派的系统运行状态。树莓派数据示例

至此,体验Web可视化应用监控树莓派状态的流程就结束了。

如果您想进一步体验IoT Studio的Web可视化和业务逻辑功能,可继续执行后续步骤,体验监控机房温湿度案例的开发过程。

后续步骤

添加温湿度传感器,完成检测设备数据的目标,实现对机房温度和湿度环境参数的数据展示。

  1. 为温湿度传感器定义物模型

  2. 上传温湿度数据

  3. 开发数据服务API

  4. 展示机房温湿度数据

  5. 开发温度告警服务

  • 本页导读 (1)
文档反馈