家居控制面板
更新时间：2019-04-04 23:41:46
概述
在这个教程里，我们将学习如何用Web可视化开发搭建一个H5家居应用控制面板。在这个文档里，我们将学习以下几个点：
- 画布分辨率自定义；
- 开关组件的图片样式运用；
- 组件的复制粘贴功能；
- 开关的数据源配置；
最终效果预览
Step1 新建应用，调整画布分辨率
在页面设置中，点击页面分辨率下拉框，选择自定义，在出来的选项中改画布分辨率为：375*667 （iPhone8尺寸）。
tips：
- 鼠标点击画布任意非组件区域，右边操控面板都会变成当前页面的配置项。
- 页面分辨率一旦调整，所有新建的页面画布都遵循该分辨率。
- H5分辨率参考：iPhone8 375667； iPhone 8 Plus 736414；iPhone XS 812375；iPhone XR & iPhone XS Max 896414；Android 640*360；
- Web可视化编辑器暂时不支持自动保存，切记随时Ctrl+S保存一下。
Step2 添加页面背景
找到页面设置项的背景图片，选择上传图片，在弹框中选择背景图片（需要自己上传）。
tips：
- 图片分辨率建议为画布分辨率的2倍，保证实际在手机上看的效果不会模糊。
Step3 布局标题和时间
步骤3-1 标题
拖拽左侧组件的文字到画布，在右侧操作栏中设置文字内容以及文字样式。最终调整到合理的位置。
步骤3-2 时间
拖拽时钟组件到画布，将展示格式设为日期时间，调整背景颜色不透明度为0，调节文字字号和颜色，调整边框宽度为0，最终拖拽组件到合适的位置。
时钟调整背景透明：
时钟调整文字及边框透明：
Tips：**
- 时钟组件默认带背景和边框，如果想要去掉，可设置背景颜色不透明度为0，边框粗细设置为0。
- 在当前版本中，组件尺寸及位置的步长为5px，即尺寸需要为5的倍数，x及y轴位置也需要是5的倍数，如果你设置的值不满足5的倍数，则系统会自动调节到5的倍数，请知悉。
Step4 增加灯泡开关
目前支持设备开关控制的组件为：开关。我们将利用开关组件的图片样式功能制作符合预期的圆角开关按钮。
步骤4-1
拖拽开关组件到画布上，将样式类型选择为图片，上传对应状态的图片。
步骤4-2
拖拽文字组件到开关图片上作为标题。
步骤4-3
将鼠标拖拽选中标题和开关图片，右键，选择成组，然后通过快捷键Ctrl + C，Ctrl + V可复制多个相同的组件。
步骤4-4
右键选择“解散组”，然后选中标题，可更改标题名称。
tips：
- 开关组件支持默认样式和图片两种配置，选择图片可随心所欲配置想要的开关样式。
- 开关组件默认为关闭状态，所以在编辑器里只能看到off状态的图，可以点击预览，在预览状态下点击开关组件，查看on状态是否符合预期。
- 该案例中，标题部分单独出来加是考虑到灵活性，可通过更改标题来表达不同的房间控制。
- 充分利用组件成组和复制功能，记住快捷键 Ctrl+C , Ctrl+V。
- 成组状态下，是不能编辑组内内容的，所以要先解散组，再编辑。
Step5 配置开关数据源
- 点击已经配好的开关图片，选择右侧导航栏的数据面板，点击数据源配置。
- 在数据源配置处选择已经建好的家居灯产品及设备（需要自己提前创建好含有布尔属性的灯产品及设备）。
- 选择属性 - 主灯开关。
- 点击右下角“确定”完成配置。
tips：
- 设备选择可为“空”，即当前不配置任何具体设备，此时会出现mock 数据的输入框选项，可通过mock 数据方式来模拟设备运行。
- 当选择设备后，如果没有真实设备，则需要通过“在线模拟”让设备上线。你可以通过“在线模拟”推送设备属性或事件消息，在编辑器中可直接看到设备状态引起的变化。
关于所有数据源的详细配置文档可点击此处查看。
Step6 增加窗帘开关
同Step4-5 制作即可，最终效果：
