本文介绍如何使用Web可视化开发搭建一个农业生产环境的温室监控大屏。

前提条件

  • 已完成创建项目。详细内容请参见项目
  • 已完成创建产品与设备。操作指导请参见产品设备

背景信息

在农业生产的场景中,使用监控大屏实时展示各智能监控设备上报的数据,便可随时了解温室内和温室外的温度、湿度、光照度、土壤水分等信息。

监控大屏示例图:

监控大屏

操作步骤

  1. 单击IoT Studio > 应用开发 > Web应用 > 新建,用来新建一个Web应用。
  2. 在Web应用编辑页左侧导航栏,单击页面,然后配置应用页面背景、分辨率等信息。
    • 分辨率选择为1920*1080(常见宽屏比例)。
    • 在底部工具栏,选中自适应前的复选框,应用页面就可以自适应屏幕大小(等比缩放,宽度撑满屏幕)。
    页面配置
  3. 布局。
    1. 拖拽矩形组件到画布上。这些矩形组件将作为其他组件的背景。
    2. 单击选中矩形组件,然后在右侧配置样式:大小、位置、填充颜色、边框颜色和粗细。
      矩形配置
    3. 拖拽一个iframe组件到页面中间,调整组件大小、位置,和配置关联链接。iframe组件可用于展示链接的页面内容,如企业介绍视频等。
      ifram配置

      设置目标链接为HTTPS链接后,组件中将展示目标页面的内容。

      注意 如果设置为HTTP链接,画布上不会显示链接页面内容。需单击上方预览按钮,预览页面会展示HTTP链接页的内容。
      预览
  4. 配置文字组件,用于展示大屏的标题。
    从左侧组件中,拖拽一个文字组件到画布上。然后在右侧配置栏中,设置文字显示位置、文字内容、文字样式等。标题
  5. 配置时钟组件,用于展示当前时间。
    时钟
  6. 配置数据展示组件。

    设备上报的数据可使用多种组件展示,如文字组件、表格组件、各种图形组件。配置组件时,需将组件的数据源配置为设备上报的对应数据。

    本文示例中,使用了以下组件:

    • 配置文字组件,展示各区域的标题。
    • 配置仪表盘组件,用于展示智能设备上报的属性数据。
      • 在仪表盘组件样式配置中,配置标题为该仪表盘展示的数据类名称,如湿度、室内温度、室外温度等。
      • 数据源配置为设备上报的对应属性。如,湿度的数据源为温湿度计上报的当前湿度。

      下图为展示温度数据的仪表盘配置。

      仪表盘
    • 配置文字组件,用于展示某类数据值。

      本示例中,使用三个文字组件共同实现数据展示,组成数据类+数据+数据单位的组合。三个文字组件的文字内容分别为:

      • 手动输入的数据类名称。
      • 单击文字内容右侧配置数据源按钮,在数据源配置面板,配置设备上报的相关属性数据。
      • 手动输入的属性数据单位。

      下图为展示室外温度数据的配置。

      文字数据
    • 配置开关组件,用于展示温室内设备状态。

      开关组件的数据源需配置为对应的设备。

      监控
    • 配置一个曲线图,展示一天内的光照度。

      曲线图的数据源配置为光照监控设备;实时数据时间段选择为当天0点-24点

      光照度
  7. 配置完成后,单击预览,查看和验证应用页面。
  8. 单击发布,将应用发布到云端。