Home Assistant进阶---UI设置之3D户型图

在开始折腾HA之后，发现这确实是一个需要很长时间折腾的过程。今天折腾下3D户型图。

准备工作

1、找到家里的户型图；

2、找一个3D绘制软件，酷家乐不错，这里我用的是sweet home 3d；

3、图片编辑软件，ps、美图秀秀都行，这里我用的GIMP。

绘制户型图

1、导入背景--这里我用的sweet home 3d，用的是mac版本，软件免费，使用起来也比较简单，（其实酷家乐效果更好，就是导出有限制）。准备好户型图之后，打开软件，右击-导入背景图像。

这里输入下房间实际尺寸，这里很多户型图是有原始尺寸的，注意下单位是厘米。

坐标这里不用管，直接导入即可。

2、绘制基础原素--载入户型图之后，点击绘制墙体。

绘制其实还挺简单的，按照原始的户型图，划线绘制即可，门和窗户之类的先忽略，把所有墙画线，绘制之后在软件下方就能看到初步的3d户型了。

下面在左侧去添加室内元素，先添加窗户和门，拖动大小和方向即可。

添加所有的门窗。

这里继续设置下房间名称。

然后选取房间的地板。

然后添加灯光。

导出元素

在下面的3d视图上，找一个合适的观看角度，点击保存视点，保存下这个视角。后边照相的时候，保证都是同一视角照相。

然后点击菜单里面的照相，弹出来的界面选一下比例，质量选取高质量。

然后看一下今天几点日落，选一下日落后的几分钟时间，点击开始。

这里首先渲染的就是一张全屋灯光都关闭的照片，看一下没问题我们就可以开始每个房间保存照片了。在左下角的地方，先点击可见的勾选，将所有灯光关闭，保存一张全屋黑灯的底图。这个底图我们保存为1.png。

然后依次打开每个灯，关闭其他光源，然后进行照相，保存。

这样我们就得到了每个房间开灯的照片和一张全屋关灯的照片1.png。

加工素材

每个房间照相完成之后，用图像编辑软件，大家习惯用什么就用什么，这里我用的是GIMP。打开图像，右下角右击--添加一个透明图层。

然后用套索工具，分别把亮灯的房间圈出来，然后右键--选择--反转。

然后选择清楚，这样就只留下我们选取的亮灯的房间部分。

然后点击导出（mac版本是英文）

导出界面记得勾选保存透明图层。

将每一个房间都按照这个流程操作，这样我们得到了每个亮灯的房间的单独素材照片，最后再保存一个完全透明的图层。这样我们搞定了完整的素材库。素材库主要就是三个文件，原始底图1.png，透明图2.png，然后就是每个房间的模块图，我命名为了chufang1.png、cesuo1.png。。。。

接下来把素材库上传到home assistant的www文件夹下面，我是新建了一个同样名为3D的文件夹。

HA设置

我们做好准备工作之后，就进入ha的UI界面进行设置，添加图片元素的卡片。

然后需要写代码了，代码看着复杂，其实整体就几个重复模块不断重复，零基础也能搞。

type: picture-elements 通用部分，不需要更改

image: /local/3D/1.png local就代表我们刚才复制的www文件夹

elements:

- type: image 表示图片模式

entity: switch.zimi_dhkg01_0300_switch 设备的名称，去ha的开发者工具-状态-实体寻找

name: 厨房 避免弄错，命个中文名，实际不显示

tap_action: none

hold_action: none 这部分表示图片只是显示，并不实际操作开关

state_image:

'off': /local/3D/2.png 关闭状态下显示透明图片2.png

'on': /local/chufang1.png 打开状态下显示chufang1.png这张图片

unavailable: /local/3D/1.png 其他未知状态比如掉线显示透明图片2.png

style:

top: 50% 这部分表示显示的位置等信息

left: 50%

width: 100%

然后重复写入- type部分，就可以将所有的设备和图片进行一一对应。右侧的预览可以实时显示，务必记得命令书写的的缩进和对齐（参考下图），还有冒号后面一定要有空格，稍有不对右侧预览部分就会显示错误，大家查找错误修改即可。

再添加完所有设备之后，下面添加开关按键，开关按键用图标表示。

- type: icon 和上面的图片模式的区别就是添加图标

entity: light.philips_bulb_f7e2_light 同样的设备实体名称

tap_action: 固定模块无需修改

action: toggle

hold_action: none

icon: mdi:lightbulb 图标的默认样式，大家也可以自己下载使用。

style: 这里注意下，修改百分比大家就能看到图标在动

top: 35% 横纵的坐标交叉点， 修改到默认区域即可

left: 43%

每个房间开关和灯一一对应，这样我们就完成添加了，图片显示每个房间的灯光状态，点击图标实现每个房间开关灯。

今天就先折腾到这，后边可以继续添加温度、窗帘等设备，同样添加关闭全屋灯光等操作按钮，美化UI，后边继续。