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

前提条件

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

创建Web应用

  1. 在项目主页页面的项目开发下,选择Web应用
  2. 单击应用列表上方的新建
  3. 新建Web应用对话框中,填入应用名称和描述,并单击确认
    新建应用
    参数 描述
    应用名称 设置应用名称。支持中文汉字、英文大小写字母、数字、下划线(_)、连接号(-)和英文圆括号(());必须以中文汉字、英文字母或数字开头;长度不超过30个字符(一个中文汉字算一个字符)。
    描述 描述该应用。长度不超过100字符(一个中文汉字算一个字符)。
    Web应用创建完成,会打开应用的页面编辑界面。

编辑应用

说明 以下Web应用的样式配置仅为示例,用户可根据实际场景自定义。
  1. 在应用的页面的画布左侧,编辑页面标题。
    单击编辑按钮编辑后,输入自定义标题即可。页面标题
  2. 在应用编辑页面,单击左侧导航栏的组件图标。
  3. 配置CPU相关组件,并为其配置数据源。
    1. 在画布左侧的组件列表栏,选择基础组件
    2. 在画布中添加矩形组件和一个文字组件。
      文字组件:如下图所示设置文字内容文字组件

      矩形组件:作为其他组件的背景。

    3. 在画布左侧的组件列表栏,选择工业组件
    4. 配置两个仪表组件(多色仪表盘),用于显示CPU状态数据。
      仪表盘
      • CPU负载仪表盘的样式设置如图所示:CPU负载样式
      • CPU温度仪表盘的样式设置如图所示:CPU温度样式
    5. 为CPU的仪表盘配置数据源。
      在画布中分别选中CPU的仪表盘组件,在右侧对应的样式栏,单击数据源右侧的配置数据源

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

      • CPU负载仪表盘的数据源设置如图所示:CPU负载数据源
      • CPU温度仪表盘的数据源设置如图所示:CPU温度数据源
      参数 描述
      选择数据源 选择数据源为:设备。
      产品 选择应用所在项目关联的产品:树莓派计算机。

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

      设备 选择树莓派计算机下指定设备:raspberry4-00001。
      数据项 选择待展示的设备属性。您可根据组件需要展示的数据,选择对应的功能属性。

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

  4. 配置内存空闲组件,并为其配置数据源。
    1. 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个单色仪表盘到画布,进行如图所示配置。
      内存组件
    2. 选中单色仪表盘,单击右侧样式栏的配置数据源
      内存空闲数据源
    3. 单击确定
  5. 配置磁盘存储组件,并为其配置数据源。
    1. 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个刻度表到画布,进行如图所示配置。
      磁盘存储
    2. 选中刻度表组件,单击右侧样式栏的配置数据源
      刻度表数据源
    3. 单击确定
  6. 配置指示灯开关组件,并为其配置数据源。
    1. 参考步骤3,从左侧基础组件选择一个矩形组件和文字组件添加到画布;从工业组件选择一个旋钮开关到画布,进行如图所示配置。
      指示灯开关
    2. 选中旋钮开关组件,单击右侧样式栏的配置数据源
      指示灯开关数据源
    3. 单击确定
  7. 单击页面顶部栏中的保存按钮,保存应用设置。
  8. 单击页面顶部栏中的预览按钮,预览并调试应用。

发布应用

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

  1. 单击编辑器页面上方的发布
  2. 发布应用中,输入当前版本信息,单击确定
    发布应用
    应用发布成功。应用发布成功

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

执行结果

您可以在Web应用页面查看到树莓派系统运行过程中的相关状态了。树莓派数据示例

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

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

后续步骤

添加温湿度传感器,完成检测设备数据的目标,实现对机房温度和湿度环境参数的数据展示。
  1. 为温湿度传感器定义物模型
  2. 上传温湿度数据
  3. 开发数据服务API
  4. 展示机房温湿度数据
  5. 开发温度告警服务