插座产品面板配置

App 控制面板提供不同类型的界面模板，包括 固定样式模板、自定义模板、自由配置模板 （0 代码 App 界面生成引擎）和 开发调试模板。

产品创建过程中的 App 界面，可以选择 App 界面 模版并进行编辑设置。

每种模板支持配置不同，可查看模板介绍及扫码在手机体验（请使用智能生活 App 扫码），确定该模板是否适合您的产品。

如果需要更换尝试其他的 App 面板，可单击 更换，将出现该类别支持的其他界面模板。单击 确定 后，可扫码体验。



涂鸦提供以下类型的界面模板：

• 固定样式模板
• 自定义模板
• 自由配置模板
• 开发调试模板

固定样式模板

不同类别提供了不同的类别模板，该类型模板可以根据标准功能的配置情况（启用、不启用）影响 App 界面的功能展示。

选用模板时请结合模板介绍及扫码效果，选择适用于您产品的界面模板。如果有功能未展示，请检查或更换模板。

自定义模板

自定义模板：选中其中一个模板后，可单击编辑模板进行自定义样式。页面的 UI 界面背景、UI 界面主题色、字体颜色、图标样式 都可以进行编辑，编辑后单击 保存。配置步骤如下。

一、设置面板样式

该部分可修改面板的图案样式，平台提供固定样式模板和自定义模板

二、选择自定义面板

注意：只有左上角标注了自定义的面板才支持自定义修改

三、使用选中模板后，进入模板编辑界面

3.1 编辑 UI 界面背景

此处可选择 App 面板的 UI 界面背景。

UI 界面背景可设置产品 UI 界面的背景样式，可设置颜色或者图片。编辑完成后可扫描页面右侧二维码预览效果。（若修改未生效请清理 App 缓存或重新扫码）

3.1.1 纯色背景

可选择预设背景色，填写完成后单击保存。

3.1.2 图片背景

可选择预设图片背景，填写完成后单击保存。

3.2 编辑 UI 界面主题色

此处可选择 App 面板的 UI 界面主题色。

UI 界面主题色可设置产品 UI 界面的主题色。编辑完成后可扫描页面右侧二维码预览效果。

3.3 编辑字体颜色

此处可选择 App 面板的字体颜色。

字体颜色可设置产品 UI 界面的字体颜色。编辑完成后可扫描页面右侧二维码预览效果。

3.4 编辑图标样式

此处可选择 App 面板的图标样式。
图样样式可设置每个功能点的页面图标状态，每个功能点设置可不同。

页面图标状态分关闭和开启两种，每种均支持更换预设样式和自定义样式，其中自定义图标尺寸要求：360px*660px，格式要求：png。

编辑完成后请单击保存，并可扫描页面右侧二维码预览效果。

四、如需调整功能点文案，请前往 多语言管理 进行设置。

在产品界面可编辑 DP 点对应的字段文案

除产品界面外，还可编辑 App 信息、配网引导、告警文案、固件升级文案等信息。

编辑完成后请单击保存，并可扫描页面右侧二维码预览效果。

五、插座公版面板可配置项

涂鸦公版面板支持丰富的自定义功能配置，但是目前以下功能暂时需要联系涂鸦工作人员进行配置。如您需要，可提交工单并且附上 PID，向涂鸦申请配置。工单提交方法请参考本文第二部分-配置步骤-第三步。

品类	可配置	备注
开关	是否显示电量统计（默认不显示）
	是否显示群组倒计时（默认不显示）
	是否显示群组电量统计（默认不显示）

自由配置模板

自由配置模板：可以对 App 界面进行自由配置。不同的功能点可选择不同形状组件、图标、背景，拖拽可排序，点点鼠标，即可变化界面风格。

选择自由配置模板后，可单击 编辑，进入界面配置页面。

如何使用自由配置模板

自由配置模板的配置方式是，为每个产品功能配置一种形状的组件，目前提供大模块、中模块、小模块等样式，系统会自动适配功能的类型，不同功能类型的指令下发上报亦不同。

• 背景选择：影响 App 界面的整体色调。

• 开关功能点设定：App 定布尔型的功能点作为开关，设定之后将作为产品的主开关位于界面下方，非必选。

• 功能点样式设置和排序：自定义设置功能点的样式和排序，其中功能点样式目前提供大模块、中模块、小模块三种样式。

• 大模块：支持更换背景图片、图标等。

• 中模块：支持更换图标。

• 小模块：支持更换图标。

自由配置界面修改过程，需要先保存修改，再扫码预览修改效果。

开发调试模板

开发调试模板支持查看通讯日志。选中开发调试模板后，单击下一步，进入第三步硬件开发页面。

单击 虚拟设备调试，再用智能生活 App 扫描二维码，即可进行在线调试。

根据示例代码，拉低一下 Arduino 开发板的引脚 7（按键脚），Arduino 开发板会给模组发重置配网指令。

指令发送成功后，板载 LED_BUILTIN 会闪烁，表示模组进入配网模式。此时可以使用智能生活 App 给模组配网，配网成功后即可使用测试数据进行上报和下发操作。

下图以 DataPointType 例程为例，通过智能生活 App 配网成功后的设备控制界面（面板配置采用了开发调试面板）。