15.3.2 智能家居系统可视化开发
阿里云物联网平台提供了一套物联网应用开发（IoT Studio）工具，可开展Web可视化开发、移动可视化开发和业务逻辑开发与物联网数据分析等业务。使用这些工具，可通过图形化的方式实现快速开发和应用。下面以Web可视化开发为例创建智能家居可视化网页，步骤如下。
1.创建项目
登录物联网应用开发控制台，在页面左上角选择对应实例后，在左侧导航栏选择“项目管理”选项，在“普通项目”下单击“新建项目”按钮。在“新建项目”页面的空白区域单击，创建空白项目，输入名称“智能家居”。创建项目后，会直接进入项目详情页。“智能家居”页面如图15.22所示。
图15.22 “智能家居”页面
2.编辑Web页面
在“Web应用”选项卡中单击“新建”按钮，在“应用名称”中输入“智能家居”，单击“确定”按钮，进入Web编辑器。在左侧的导航栏中依次进行设置，左侧导航栏中按钮的功能如表15.4所示。
表15.4 左侧导航栏中按钮的功能
（1）页面设置。
在“顶部栏”中单击下面的“配置”按钮，可在页面右侧对Logo和颜色进行配置。(https://www.daowen.com)
在“智能家居”页面中，在“导航布局”中选择空白页，可在右侧配置窗口选择分辨率，还可以选择阿里云物联网平台提供的模版来建立页面。
（2）组件设置。
“图表”选项卡下的仪表盘分别指示温度、湿度、光照度数据。“控制”下的“开关”用于控制主灯开关、加湿开关和空调开关，分别将其拖曳到空白页面中。另外，还可以将“基础”选项卡下的“时间”“图片”等拖曳到空白页中，调整位置和大小，智能家居Web页面如图15.23所示。
图15.23 智能家居Web页面
页面设置好后，选中第一个温度指示仪表盘，在页面右侧出现“样式”窗口，依次可对数值范围、全局样式、展示数据、单位、标题、刻度数字等进行设置。
将前面创建的智能家居产品和设备的数据关联起来。选择右边“样式”窗口中的“展示数据”的“配置数据源”选项，在弹出的“数据源配置”对话框中的“选择数据源”下拉列表中选择“设备”选项，“产品”项选择“智能家居”选项，“设备”项选择“SmartHome”选项，在“数据项”的“属性”项中选择“温度”选项，数据源配置如图15.24所示。
依次将湿度、光照度关联，再将主灯开关、加湿开关和空调开关一一进行关联，在图片控件中选择一张家居图片。这样智能家居的Web页面就建立完成，最后单击右上角的“发布”按钮即可完成发布。
图15.24 数据源配置
