前言:

最近几年，有很多疫情。因为工作的性质，大部分时间我都在家工作。家里什么都没有的时候，就开始折腾一些简单的智能家居。一开始换了小米生态链的指纹锁，送了个蓝牙网关，所以后来加了单火开关，体温计，小爱同学，还有一些智能插头。最早是米家和萧艾控制的，我觉得挺方便的。折腾了几天hass.io，装了之后感觉比较鸡肋。毕竟我是小米家桶，没必要用第三方来控制，所以删了。直到有一天，家里的猪队友带回来一个homepod mini，说要用siri控制开关，我只好又走上了折腾的道路。之前安装的hass.io是蜗牛星，性能略差。运行hass会影响上面其他服务的性能。后来买了个nas，j3455+8G内存。这次只安装了homeassistant，没有安装全套，对系统性能的影响要小很多。初调后功能基本实现，但感觉略丑。后来在网上看到大神的作品，惊叹不已，于是想到了类似的3D平面图界面。

网上某大神的作品

主题:

要求:在home assistant主界面添加3D效果图，实时显示当前开关状态和灯光渲染效果。点击图片上的图标可以直接操作。(上图转载)

准备材料:首先你需要有3D房型效果图，包括每个房间的关灯状态和开灯状态。

在这里，如果设计公司在你装修设计的时候就把图纸给你了，或者你跟他们关系好，能拿到，那是最好的。如果没有，可以去一些房产中介网站找找和小区相同房型的图片。也许有。当然，如果你有耐心，自己画。现在有很多超简单的软件可以满足这个要求，包括pc，web，平板。我在pc端用sweethome画的。如何使用这个软件超出了本文的范围。

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

这里，我以卧室为例。卧室中间和窗边分别有一盏智能控制的灯。这里需要生成三张图片，其中一张是灯光完全关闭的图片，作为底图。然后，生成单个灯光打开状态的两个渲染。这两张图需要ps处理成半透明，后期需要在home assistant中叠加在底图上。

在home assistant中实现:在Lovelace中添加一张图片元素卡。图片卡不同于其他类型的卡。它没有可用的可视化编辑器。在这里，你需要写纯代码，但是代码其实很简单。

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

关于像素卡的几个变量和参数:

首先介绍一下变量图像，这是卡片的底图。我会用那张关了所有灯的图片作为底图。这样开灯后，再叠加一层开灯的图片就ok了。在这里，填写图片在服务器上的路径。homeassistant中的本地目录是指home assistant根目录下的www目录。把照片放在这里。

然后是可变元素，它下面有几个参数。首先，类型表示元素的类型。这里，使用了图片元素和图标元素，它们分别是图像和状态图标。

-image:图片元素，当灯打开时，分别由off和on参数指示。在关的状态下，我会显示完全透明的画面，然后在开的状态下，我会显示开灯的效果。放置在中心的实体指向相应的交换机实例。

-state-icon: icon元素，entity指向对应的switch实例，tap_action指按下后触发的动作。因为是开关，所以选择了toggle。图标是指使用系统中的哪个图标。这里有个灯，用灯泡的图标就行了:mdi:lightbulb。网上有home assistant所有图标的索引，你可以自己找合适的图标。(https://mdi.bessarabov.com/)在“样式”下，你可以编写自己的css样式表。熟悉css的朋友可以自己玩花。普通用户可以写一些基本的背景颜色，大小，边框之类的。你可以看看我照片里的那些。css怎么写，这篇文章不累。

这两个变量是图片卡中最常用的。如果有多个交换机或设备，则根据相应的交换机或设备添加多个元素。需要注意的是，每个元素都是上下堆叠的，写在前面的元素会堆叠在底部。在我的例子中，图片元素-image写在icon -state-icon前面，所以会出现在按钮下面。如果写反了，图标会被图片挡住，无法按下。

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

最终卧室的效果完成

结束:

目前，按照以上方法，我已经完成了整体房型的总平面图和各个房间的单体效果图。刚开始还算满意，但是看了半天效果图还是觉得有点粗糙。如果将来我找到更好的软件，我可能会更新这些图片。基本达到了预先设定的要求。在home assistant中点击每个灯或开关的图标，打开相应的设备，并实时显示在效果图上。如果这些设备由siri或萧艾同学的语音控制，实时状态可以在家庭助手中正确显示。经过简单的折腾，我学到了很多没用的技巧，心里也有点高兴，所以来找上水阿姨体验一下，希望能给有同样需求的有价值的朋友一些帮助。