IoT Studio平台,即物联网开发平台。您可以使用IoT Studio中的Web应用编辑器搭建监控大屏,展示设备上报的数据。本文介绍Web应用开发过程。

操作步骤

  1. 登录物联网应用开发控制台,在页面左上角选择对应实例后,在左侧导航栏单击项目管理。在项目管理页面新建一个普通项目,具体操作,请参见普通项目
    创建成功,自动进入该项目。
  2. 在项目左侧导航栏,选择产品,然后单击关联物联网平台产品,将已创建的气象监测产品与该项目关联,具体操作,请参见关联产品至普通项目
  3. 在项目左侧导航栏,选择设备,然后单击关联物联网平台设备,将要监控数据的来源设备与该项目关联,具体操作,请参见关联设备至普通项目
  4. 在项目左侧导航栏,选择主页,单击Web应用页签中新建,新建一个Web应用,具体操作,请参见创建Web应用
  5. 在Web应用编辑器中,搭建实时气象数据监控面板。
    1. 选择自定义新增页,设置页面标题和背景颜色等面板页面显示效果。在左侧导航栏中,选择组件组件,打开组件列表。
    2. 从组件列表中,拖拽一个矩形组件到画布上,并配置组件样式,具体操作,请参见矩形
    3. 从组件列表中,拖拽一个文字组件重叠于矩形组件上,再配置文字组件的数据源为气象监测设备的温度属性,具体操作,请参见文字
      设置完成后,该文字组件将显示气象监测设备上报的温度值。
    4. 从组件列表中,拖拽一个文字组件重叠于矩形组件上,文字内容设置为温度(℃),作为温度显示组件的标题。
    5. 选中配置好的三个组件,单击鼠标右键,选择成组,将这三个组件组成组件组。
      成组
    6. 根据要展示的属性数量,复制多个组。
      复制组件组时,各组件的显示效果配置和数据源配置同时被复制。组件组
    7. 对复制的组件组单击鼠标右键,选择解散组
      复制的组件组所有配置均相同。需先解散组,才能重新配置组件数据源等信息。
    8. 分别将数据源设置为该产品的其他属性,并设置对应的属性名称和单位。
      如有需要,还可在页面上增加其他组件,如图片组件等,请参见基础组件使用说明
      控制面板效果参考图如下。效果
    9. 所有组件配置完成后,单击页面上方的预览预览,预览和测试应用页面。
  6. 在Web应用编辑器中,新建空白页面,配置属性数据曲线展示图。
    以配置温度数据展示曲线图为例。
    1. 在左侧导航栏,选择页面页面,再单击新建符号+,新增空白页面。
    2. 在左侧导航栏,选择组件组件,拖拽一个实时曲线组件到画布上,并配置实时曲线组件的数据源为气象监测设备的温度属性,具体操作,请参见实时曲线(旧)
    3. 配置曲线图的显示样式。
      调整曲线图大小、坐标,设置是否显示时间选择器,设置系列名称为温度等。
      说明 如果选中时间选择器前的复选框,表示曲线图上显示时间选择器。应用发布后,可以设置时间,查看对应时间段的温度数据。
    4. 配置完成后,单击页面上方的预览预览,预览和测试应用页面。
  7. 单击页面上方的发布发布,发布应用。

后续步骤

应用发布后,在左侧导航栏中选择设置应用设置,可以开启应用Token验证,为应用绑定您自己的域名等。

更多Web应用可视化开发操作指导,请参见Web可视化开发文档