步骤二：搭建开关状态监控应用

步骤一：创建Web应用

在项目下创建待开发的Web应用。详细说明，请参见创建Web应用。

步骤二：配置页面

1. 设置分辨率和背景。

   本案例以自定义分辨率375（W）*667（H）和上传背景图片（您可自定义图片）为例。详细说明，请参见页面。

2. 添加文字组件，作为页面标题。
   从左侧组件列表中，拖拽一个文字组件到画布上。

   设置文字内容（例如：小丸子的家）和样式。详细说明，请参见文字。

3. 添加时钟组件，展示页面当前时间。

   拖拽一个时钟组件到画布上，设置时钟组件的展示格式（例如：日期时间）和样式。详细说明，请参见时钟。

   本案例中，样式参数设置为：背景颜色为#FFFFFF，字号为12，文字颜色为#FFFFFF，边框粗细为0。

步骤三：配置开关控制组件

1. 设置一个灯开关的控制组件。
   设置完成后，画布上将显示主卧灯开关组件区域，包含白色矩形背景、标题文字和开关状态图标。
   1. 从左侧组件列表中，拖拽一个矩形、一个开关和一个文字组件到画布上，设置标题和样式。
      • 矩形组件作为背景，设置填充颜色为#FFFFFF，详细说明请参见矩形。
      • 文字组件作为开关标题（例如：设置文字内容为主卧灯），详细说明请参见文字。
      • 开关组件作为灯开关状态的显示，分别为ON和OFF状态上传对应图片（您可自定义）。详细说明请参见开关。
   2. 配置开关组件数据源。
      参数配置说明如下，详细配置指导，请参见开关。

      参数	说明
      选择数据源	选中设备。
      产品	选择该开关组件对应的设备所属产品，本案例选择：开关遥控器。
      设备	选择该组件的数据源设备。本案例选择指定设备：switch_control_device。
      数据项	作为组件数据源的数据项。默认为设备属性。
      属性	选择该开关组件对应的属性：主卧灯开关。

2. 可选：设置多个相同样式的开关组件。
   配置完成后，画布上共显示6个开关组件，按2行3列排列，分别为主卧灯、次卧灯、客厅灯（第一行）和主卧窗帘、次卧窗帘、客厅窗帘（第二行），每个组件包含白色矩形背景、标题文字和开关状态图标。
   1. 选中已配置好的主卧灯开关组件（矩形、文字、开关），单击鼠标右键，选择成组。
   2. 复制粘贴5个相同配置的组件组到页面上，进行2行3列排列。
   3. 分别选中复制的组件组，单击鼠标右键，选择解散组。
   4. 分别选中文字组件，更改文字内容为次卧灯、客厅灯、主卧窗帘、次卧窗帘、客厅窗帘。
   5. 根据各组件对应的功能定义，分别选中开关组件，修改绑定的设备属性为：次卧灯开关、客厅灯开关、主卧窗帘开关、次卧窗帘开关、客厅窗帘开关。
   6. 为窗帘开关组件替换对应状态的图片。
3. 单击编辑器上方保存按钮，保存设置。
4. 鼠标指针移动到编辑器左上角的图标上，展开项目概览框，单击Web可视化开发。
5. 在新打开的项目详情页，单击左侧导航栏设备，找到switch_control_device，单击操作栏查看，单击物模型数据页签，查看调试虚拟设备上报的属性值。
   物模型数据页签的运行状态下显示6个开关属性的当前值：主卧灯开关和主卧窗帘开关为1（开），客厅窗帘开关、客厅灯开关、次卧窗帘开关和次卧灯开关为0（关）。
6. 回到Web应用编辑器，单击右上方预览按钮，预览应用，可看到应用中组件展示状态与设备运行状态数据一致。
   预览页面中，主卧灯和主卧窗帘显示为开启状态（绿色图标），次卧灯、客厅灯、次卧窗帘和客厅窗帘显示为关闭状态。

   您可单击关闭的次卧灯和次卧窗帘开关，控制对应开关开启。在设备详情的物模型数据页签，可查看到设备对应开关开启。