文档中心

使用面板工作台

更新时间:2020-10-23 08:10:14下载pdf

当您在涂鸦 IoT 工作台上完成产品功能定义后,即可通过面板工作台拖拽可视化的功能组件快速打造具有您产品风格的 App 面板。最快 5 分钟内即可设计出具有您的品牌风格的产品面板。

本文以空气净化器产品为例为您介绍如何通过面板工作台快速打造具有您产品风格的 App 面板,如下图所示。

使用面板工作台

介绍视频

有关面板工作台的使用,您可以观看以下视频:

适用场景

若有更高的个性化要求,或当前提供的公版面板无法满足您的需求时,您可以选择其中一个面板,进行自定义修改。类别下的所有面板,均具备全新的自定义能力,基于现有的面板UI,进行风格、颜色、图标、文字、排序等各纬度的自定义配置。

说明:若您对个性化和差异化要求较低时,可直接选用现有公版面板进行使用,无需额外调整或配置。详情请参考 公版面板配置

使用面板工作台

您可以基于面板需求,进行面板配置。在本操作示例中,空气净化器产品的面板进行了调整:

  • 风格调整:产品的品牌色是蓝色,面板主体风格需要突出品牌色。
  • 功能顺序调整:开关、风速、模式、童锁四个功能放在一行展示,不能做成平铺。
  • 样式联动:模式 可以根据当前的模式值展示不同的图标和文字。
  • 全局规则:在自动模式中,风速和童锁禁用。
  • 云功能:支持定时功能,支持跳转到商城。

第一步:登录面板工作台

  1. 前往 IoT 工作台产品管理列表

  2. 在产品列表中,选择并单击一款 开发中 的目标产品。

    说明:如果您还未创建过产品,请参考 选品类创建产品 完成。

  3. 在开发流程中,单击 继续开发,然后单击 App 面板

    使用面板工作台
  4. 选择一款公版面板后,单击 编辑 跳转至 面板工作台

    使用面板工作台
  5. 根据工作台提供的各项能力进行面板自定义设置。

    1. 拖拽左侧的可视化组件至面板画布。

    2. 选中面板画布内的组件,切换右侧的 样式属性 标签进行个性化配置。

      左侧的功能列表,是取自产品 PID 的功能 DP。

      使用面板工作台

第二步:调整风格

  1. 单击编辑器的面板画布外面的空白处,在右侧配置栏 全局主题 页面的 主题色背景-单色 参数中选择 蓝色 或输入色值。

    使用面板工作台

  2. 选中动画组件,在 默认图库 更换图和字体颜色或将自定义图片上传至 我的图库 进行选择。

    使用面板工作台

第三步:调整功能

  1. 选中左侧的功能开关,拖拽图示组件至面板画布。

    使用面板工作台

  2. 选中 开关 组件,在 属性 下单击 添加配置,新增一个功能按钮,共添加三次。

    使用面板工作台

  3. 选中任意按钮,单击 设置功能或链接,在抽屉弹窗里选择功能,并在 属性 选择 图标

    使用面板工作台

  4. 把平铺的 开关模式风速童锁 四个组件从面板画布删除。

    使用面板工作台

    说明:您可以在 样式 中了解更多关于字体颜色、图标大小、组件背景的功能。

第四步:样式联动

通过 模式 这个按钮,根据当前的模式值展示不同的图标和文字。

  1. 选中 模式,在 属性 - 模式 配置框,单击 样式联动 - 新建规则,通过样式规则进行实现。

    使用面板工作台

  2. 规则配置时,以 “如果…那么…“ 的逻辑思路进行。例如,如果模式等于自动模式, 那么图标为自动的图标,文字自动

    使用面板工作台

  3. 效果如下图切换不同的模式,展示的样式各异。

    使用面板工作台

说明:样式规则,用于设置特定场景下,面板文字、图标的特定展示,某个按钮是否隐藏等规则。

第五步:设置全局功能规则

本步骤中,模式自动时,风速和童锁禁用。

  1. 单击工作台顶部的 “全局规则”按钮,进入抽屉弹窗新建规则,保存即可

    使用面板工作台

  2. 效果如下图,手动或舒适等其他模式时,风速和童锁均可用;自动模式时,风速和童锁均不可用

    使用面板工作台

说明: 全局规则,用于控制特定场景下的功能逻辑。例如关闭开关,禁用风速,启用倒计时。同时,还支持控制功能的某个值。

第六步:设置定时功能

  1. 在定时页面,设置定时链接。

    使用面板工作台

  2. 设置面板链接。

    使用面板工作台

第七步:预览和调整面板

面板配置后,可通过工作台右上角的手机实时预览功能,体验网页端的修改,实时同步至手机App。切换至真实设备进行预览,可直接控制真实设备。

发布面板

灰度发布

面板设计、配置完成后,可通过灰度发布生成测试面板,让团队其他成员一起验收、试用 (面板灰度发布后,只用于小范围试用,线上用户不会受到影响)

  1. 面板配置完成后,单击发布,进入灰度发布流程。

  2. 灰度发布 页面,填写发布内容。

    • 发布内容:尽量通用可理解、特征明显,便于记忆和未来查询。

    • 测试账号:只有输入账号后才能在灰度发布成功后参与测试面板的试用。支持邮箱和手机账号。

      • 邮箱格式示例:someone@example.com
      • 手机格式示例:86-12345678901

      使用面板工作台

  3. (可选)灰度过程若退出,可重新从 App 面板编辑 入口进入。

  4. 灰度发布成功后,只能通过 涂鸦智能app 进行扫码体验,也可将二维码截图给到团队成员进行验收或试用。扫码体验支持“虚拟设备体验测试”和“真实设备体验测试”。真实设备体验二维码,可以直接控制真实设备。

    说明:可体验或试用的团队成员,一定要是涂鸦智能 App 的用户,且账号已加入“面板测试账号”。

  5. (可选)二维码若失效,可单击发布按钮, 在弹窗内单击扫描二维码进行测试重新扫码。

正式发布

灰度发布成功,且测试没问题后,可单击 发布 进行正式发布。正式发布成功后,此面板将直接应用至当前产品,并且跳转至 App面板

使用面板工作台

点击获取服务和帮助