运用图片元素组件在HomeAssistant中加入3D平面图

近年疫情连连。由于工作性质。大部分时间居家办公了。宅家无事就开始折腾一些简单的智能家居。刚开始是因为换了个小米生态链的指纹锁。送了个蓝牙网关。于是后来就又添加了点单火开关、温湿度计、小爱同学和一些智能插座。最早就用米家和小爱来控制。觉得也挺方便。折腾过几天hass.io。装完觉得挺鸡肋。毕竟我都是小米全家桶。没必要再用第三方控制。就删了。直到有一天。家里的猪队友拿回来个homepod mini。还说要用siri来控制开关。我就只能又走上折腾之路了。之前装hass.io的是一台蜗牛星际。性能略差。跑hass会影响上面的其他服务的性能。后来又买了台j3455+8G内存的nas。这次也只装了homeassistant。没装全套。对系统的性能影响就小的多了。初步调通后。功能基本实现了。就是感觉略丑。后来当我看到网上大神的作品后。被惊艳到了。于是就琢磨也整个差不多的3D Floorplan界面。

网上某大神的作品

正题：

需求：在home assistant主界面中加入3D效果图。并实时显示当前开关状态和光线渲染效果。并可通过点击图片上的icon直接进行操作。（复刻上图效果）

准备素材：首先需要有3D房型效果图。包括各个房间关灯状态和开灯状态的图。

这里如果你当初装修设计时。设计公司给过图或者你和他们关系好能弄到。那是最好。没有的话。可以去一些房产中介网站上找找同小区同样房型的图。说不定有。当然。有耐心的话就自己画。现在有很多超简单的软件能实现这个需求。pc端。网页端。平板端都有。我是用pc端的sweethome来画的。至于这个软件怎么用。不在本篇范围内。

渲染生成多张各种照明环境下的效果图

这里我拿卧室为例。卧室正中和靠窗处分别有一个可智能控制的灯。这里就需要生成3张图。一张是灯全关状态下的图。作为底图。然后再生成2张单个灯打开状态的效果图。这2张图需要用ps处理成半透明的。等下需要在home assistant里叠在底图上。

在home assistant中实现：Lovelace里添加一个图片元素卡片。图片元素卡片不同于其他类型的卡片。它并没有可视化的编辑器可用。这里就需要纯写代码了。不过代码其实很简单。

左边写代码。右边可以实时预览。还算很方便

关于图片元素卡片的几个变量和参数：

首先介绍一下变量image。这就是卡片的底图。我就用那张灯光全关的图来做底图。这样。在灯打开后。叠一层开灯状态的图上去就可以了。这里填上图片在服务器上的路径。home assistant中的local目录指的是homeassistant根目录下的www目录。图片放到这里。

然后是变量elements。它下面有几个参数。首先type代表元素的类型。

智能家居

这里用到了图片元素和图标元素。分别是image和state-icon。

-image: 图片元素。由off和on参数来表示开光状态下分别显示哪张图片。off状态下。我就显示一张完全透明的图片。然后在on状态下。显示开灯的效果图。位置居中摆放。entity

智能家居

指向对应的开关实例。

-state-icon：图标元素。entity

智能家居

指向对应的开关实例。tap_action指按下后触发的动作。既然是开关。那就选toggle。icon指使用系统内哪个图标。这里是个灯。就使用灯泡的图标：mdi:lightbulb。网上有home assistant所有图标的索引。可以自己查找合适的图标。（https://mdi.bessarabov.com/）style下面可以自己写css样式表。熟悉css的朋友可以自己玩出花来。普通用户就写些最基本的背景色、大小、边框之类的吧。可以看我图上的那些。css怎么写。本篇也不累述。

图片元素卡片中使用最多的就是这2个变量了。有多个开关或设备。就按对应添加多个元素。需要注意的是。每个元素的叠放是有上下顺序的。写在前面的元素会叠在最下方。我示例中。图片元素-image写在了图标-state-icon前面。那它就会出现在按钮的下面。如果写反了的话。图标就会被图片挡住按不到了。

看一下预览效果。保存后就完成了。

最终卧室的效果完成

尾声：

目前。照上述方法。我完成了整个房型的总平面图和各个房间单独的效果图。初步还算满意。效果图看久了还是觉得稍微有点粗糙。以后如果发现更好的软件。可能会更新这些图片。之前预设的需求基本都达成了。在home assistant中点击各个灯或开关的图标可以打开对应的设备并在效果图上实时显示。如果通过siri或小爱同学语音操控这些设备。在home assistant中也能正确显示实时状态。简单折腾了一番也算学到了不少没用的技能。心中略感喜悦。于是来大妈上水一篇经验。希望对有同样需求的值友有些许帮助。

作者声明本文无利益相关。欢迎值友理性交流。和谐讨论～