第七章 UI展示

Dbh321

已于 2024-09-23 19:48:17 修改

阅读量344

点赞数 4

分类专栏：智能家居构建文章标签：智能家居

于 2024-09-23 17:51:46 首次发布

本文链接：https://blog.csdn.net/Dbh321/article/details/142464394

版权

智能家居构建专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第七章 UI展示

学完UI功能当然是众所周知的抄作业环节，首先进行效果展示。

效果展示

**这里感谢这位大神的细心教导：地址** 。

再记录一下我用老哥的步骤遇到的问题：

图片需要放到www/images/目录下，才能读取。

在此基础上，主要看我之前第五章前端接入配置即可。由于家庭智能设备有限，以后如果有什么设备接入，再单独做该设备的补充更新。

这里记录一下，UI图片的生成步骤，这里以浇灌系统为例子。

找到对应形状的图片

在这里插入图片描述

导入AI（Adobe Illustrator）打开图像描摹

在这里插入图片描述

设置背景，设置透明网格图

在这里插入图片描述

点击扩展，给图像转化为路径。

在这里插入图片描述

删除背景并，设置线条，一般线条设置为3pt

在这里插入图片描述

删除多余的线条，并添加颜色，注意左边点击第二个箭头再选择线条。

在这里插入图片描述

导出为ps文件

在这里插入图片描述

打开ps，将亮的点分开涂层，再分别导出off 和 on 的状态

在这里插入图片描述

传入ha，再设置配置。

  				  - type: image
                    info1: '************************************************************'
                    info2: '********************    灌溉系统      **********************'
                    info3: '************************************************************'
                  - type: custom:button-card
                    entity: switch.lou_ding_hua_yuan_guan_gai_xi_tong_switch
                    variables:
                      entity: switch.lou_ding_hua_yuan_guan_gai_xi_tong_switch
                    show_name: false
                    show_entity_picture: true
                    tap_action:
                      action: more-info
                    entity_picture: |
                      [[[var state = states[variables.entity].state;
                        return '/local/images/UI/灌溉头/浇灌系统'+state+'.png']]]
                    styles:
                      entity_picture:
                        - width: 100%
                      card:
                   
                        - width: 60px
                    style:
                      top: 145px
                      left: 850px