简体中文
简体中文
English
联系我们
注册
登录
语言
简体中文
简体中文
English
联系我们
登录
注册
返回主站
layout空间导航
文档中心面板开发公版面板配置

公版面板配置

更新时间:2021-04-23 03:57:56下载pdf

公版面板支持 SoC 和 MCU 配置。本文通过示例为您介绍 SoC 和 MCU 产品面板配置的方法。

注意:最终面板配置效果以设备最终显示为准。

SoC 产品面板配置

SoC 产品常见品类为电工和照明。本章节以 Wi-Fi 四路排插为例为您介绍 SoC 产品面板配置。

注意:SoC 免开发方案的产品,无法更改功能点,只能更改面板外观与面板文案。

产品功能需求

包含 2 个国标插座与 2 个 USB 插座的四路排插。

配置效果展示

公版面板配置

配置步骤

设置面板样式

设置面板样式即修改面板的图案样式。平台提供固定样式模板和自定义模板。

  1. 选择自定义面板。

    注意:仅左上角标注自定义的面板支持自定义修改。

    公版面板配置

  2. 单击编辑,进入模板编辑界面。
    公版面板配置

  3. 编辑面板背景
    此模块可选择 App 面板的背景样式,奠定面板基调。面板背景可选择纯色背景或图片背景。编辑完成后可扫描页面右侧二维码预览效果。修改完成前后的对比如下图。
    公版面板配置

    • 纯色背景:可选择预设颜色,也可填写十六进制的 RGB 颜色代码进行自定义。填写完成后点击保存
      公版面板配置

    • 图片背景:可选择预设图片,也可上传自定义背景图。填写完成后点击保存

      注意:图片尺寸要求:750*1334 px。图片格式支持:PNG、JPEG 和 JPG。

      公版面板配置

  4. 编辑面板主题色
    编辑面板主题色即选择面板呈现的主题颜色。在四路排插面板中呈现为总开关的背景颜色。

    • 面板主题色可选择预设颜色或十六进制 RGB 颜色代码。编辑完成后请点击保存,并可扫描页面右侧二维码预览效果。
      公版面板配置

    • 面板主题色修改前后的对比图如下所示。
      公版面板配置

  5. 编辑字体颜色
    编辑字体颜色即选择面板呈现的字体颜色。在四路排插面板中还能改变按钮图标的前景色。字体颜色可选择预设颜色或十六进制 RGB 颜色代码。点击自定义设置中的色块可出现调色盘进行更多颜色的选择。

    • 编辑完成后请点击保存,并可扫描页面右侧二维码预览效果。
      公版面板配置

    • 字体颜色修改前后的对比图如下所示。
      公版面板配置

  6. 编辑图标样式
    编辑图标样式即选择面板呈现的图标样式,也可上传自定义的图标样式。在四路排插面板中可选择插座规格样式。

    注意:自定义图标尺寸要求:336*336px。图标格式支持 PNG。

    • 编辑完成后请点击保存,并可扫描页面右侧二维码预览效果。
      公版面板配置

    • 图标样式修改前后的对比图如下所示。
      公版面板配置

  7. 设置面板文案

    说明:如果文案修改未生效,请清理 App 缓存后重试或重新扫码。

    您可以在多语言管理选项中编辑面板的文案描述。操作步骤如下。

    1. 点击设置,进入多语言管理页面。
      公版面板配置

    2. 产品功能页面,编辑 DP 点对应的字段文案。
      公版面板配置
      修改完成并保存后,App 面板如图。
      公版面板配置

    3. 面板界面界面可编辑面板上除 DP 点外的字段文案。
      公版面板配置
      面板效果如图。
      公版面板配置

MCU 产品面板配置

注意

  • 由于涂鸦公版的面板与默认的标准DP点一一对应,因此必选标准 DP 点的缺失可能导致面板无法加载。部分标准 DP 点 的缺失可会导致面板功能不全。
  • 部分设备标准功能及自定义功能点累计添加总数超过 25 可能会影响设备稳定性。建议最多添加 40 个功能点(不包括云功能)。

MCU 产品的常见品类为小家电、厨房电器和传感。本章节以 Wi-Fi 空气净化器为例为您介绍 MCU 产品面板配置方法。MCU 产品支持编辑 DP 点,您可以在部分支持自定义的公版面板上增删产品功能 DP点,操作步骤参考自定义功能点

注意事项

  • 自定义功能不可选择字符型Raw 型,否则将可能导致公版空净面板崩溃。
  • 自定义功能中可上报类型 DP 将展示在主界面上,可上报可下发类型 DP 将展示在设置界面上。
  • 故障型 DP 不展示。

产品功能需求

  • 面板上展示室内温湿度、TVOC 和甲醛浓度。
  • 面板上增加一个摆叶开关。
  • 室内 PM2.5 数值字体颜色根据数值进行改变(0-50 为绿色;50-100 为黄色;100 以上为红色)。
  • 室外天气展示天气图标。
  • 取消室内 PM2.5 曲线展示。

配置效果展示

公版面板配置

配置步骤

  1. 设置 DP 点。

    1. 根据产品需求勾选下图标准 DP 点。
      公版面板配置

    2. 确定后 DP 点详情展示如下。
      公版面板配置

    3. 根据产品需求自定义添加下图 DP 点。
      公版面板配置

    4. 选择一款公版空净模板。
      公版面板配置

    设置完成后面板样式如下。
    公版面板配置

  2. 设置多语言文案。

    说明:如果修改未生效请清理 App 缓存或重新扫码。

  3. 通过工单提交面板更改需求。
    PM2.5 数值字体颜色、天气图标、室内 PM2.5 曲线需要涂鸦工作人员通过配置后台代码实现,因此有上述修改需求请提交工单申请更改。

公版面板可配置项

目前以下功能需要提交工单进行定制化配置。如果您有定制配置需求,提交工单并且附上 PID。
公版面板配置