背景:

智能家居普及的程度越来越高,但是市面上的品牌繁多,我们很难在一个app中进行管理,而homeassistant则是一个可以将多个品牌智能家居(得看有没有大神做对应的插件)融合到一个页面进行控制甚至进行联动的应用,且高度可定制化的支持,可以实现非常多的玩法。

先看下本文大纲:

  • 功能演示

  • 部署homeassistant(包括容器和OS版本)

  • 部署HACS商店

  • 部署xiaomi_miot并连接米家产品

  • 其他一些产品的接入

  • 连接homekit教程

  • 美化主题应用教程

  • 3D房型图的创建和使用教程

  • 摄像头的添加

  • 人员是否在家状态的配置

  • 好看的彩云天气卡片

  • HA仪表盘排版的两个关键卡片使用介绍

  • docker版本node-red容器的部署以及关联HA

  • node-red自动化实战:通过开灯触发打开空调并根据当前房间温度判断使用制冷还是制热模式

PS:本教程会按照上方的大纲,手把手的叫你怎么去部署配置,比较适合小白玩家入门,太过于进阶的内容,后续会看反馈的情况再看要不要出一些更有深度的进阶玩法也可以加qq群交流:183651625。

PS2:本教程适用于所有支持docker或者支持虚拟机的设备,如果是物理机那更好。

PS3:本教程需要网络可以良好的访问github(如果太多人反馈无法访问,我看情况是不是下载下来放到网盘,不过这个东西更新也比较频繁,无法持续更新的话,指不定什么时候就用不了了)。

功能演示:

我这个是非常非常初级的效果,实在是精力和能力有限,时间和能力足够的情况下可以实现非常非常漂亮的效果。

a34af5114f4cd7e6849b71e81a6e6830.png

495d05fd5b5e33fba4a511345bbf3f87.png

部署homeassistant(包含docker版本和虚拟机OS版本):

说明:docker HA版本add-on功能是受限制的(其实主要是node-red,学习成本较高,在本教程的最后也会通过再部署一个docker版本node-red关联HA的方式来弥补HA容器版本的不足),如果想一次性实现全功能建议直接通过硬件或者虚拟机安装HA的os版本。

docker版本HA部署

以绿联私有云为例,部署的方式非常的简单,极空间和群晖可以直接参考。

首先打开docker(群晖7.2版本后为ContainerManager),在镜像管理>镜像仓库(群晖为注册表)里搜索homeassistant/home-assistant,点击下载。

2c3c69ef4d427c1034604f1f48fac4fc.png

直接选择latest版本,镜像拉取根据网络情况不同,可能需要等待较长的时间,显示ALL done后点击完成。

9c128f7170767aff7ee501df75498478.png

回到镜像管理>本地镜像(群晖在映像中),找到刚才下载的镜像,点击创建容器(群晖为右键点击运行)。

18fe35df9b8726af0a073f366f0999b8.png

勾选创建后启动容器,再点击下一步。

9ad36ecf7e90ebb20cf2c9ad4b954fd0.png

重启策略选择容器退出时总是重启容器。

f6ecc513d2c46911051d4362b9590feb.png

网络选择host。

f2d0f24a5d330feef5ede166937e4512.png

先在docker目录下新建一个homeassistant文件夹,再到存储空间添加这个文件夹,并映射到/config,类型注意选择读写,端口号填不填都没有关系,因为默认会使用8123,如果8123被占用了怎么办,下面会有相应的解决办法,我们先将部署过程弄完。

b94b7fb0cc476ed40c8a6d8cda98a178.png

环境中点击添加新增一个时区的环境变量TZ:Asia/Shanghai。

8a1b1dacf3e37fb1a2bbaeb9c20c7dcd.png

到这一步直接点击下一步,点击完成既可以成功创建容器了,同样,如果可以进入ssh,我们可以使用更简单的方式进行创建,直接到命令行执行以下命令。(标红的部分需要根据自己的情况进行替换)。

docker run -d --name="homeassistant" --restart=always --net=host -v /volume1/docker/homeassistant:/config -e TZ=Asia/Shanghai homeassistant/home-assistant:latest

另外群晖7.2版本已经可以支持docker-compose的方式进行部署,进入container manage,选择项目,点击新增。

8fe692a8f93acd8659428700783f83d6.png

来源选择为:创建 docker-compose.yml,填入项目名称,选择docker目录,填入docker-compose命令,点击下一步即可直接创建容器。

f39bffdeb165da11e824f9cdfcbd70f1.png

说到这里,如果小伙伴手里只有docker run的命令,没有docker-compose命令的话,可以到www.composerize.com上,进行命令转换。

ad4b1acd972e53ba21e654eeb4c6beec.png

注意:因为极空间的8123端口被portainer进程占用,所以注定不会启动成功。

126c13d4d6eb8aa1f90ad1e5b41fd9c3.png

从homeassistant的docker日志中也能看到8123端口被占用的报错。

afb00f0e6028ff47702c7173d711a371.png

这个时候我们需要到homeassistant的docker目录下,将configuration.yaml下载到本地

be0581bdf3822457c869e5ab89e94936.png

并在文件内加入以下内容,保存后上传替换原来的文件,并重启容器,即可使用这里配置的端口号进行登录了。(绿联私有云和群晖如果也有这个端口被占用的报错,同样可以使用这个方法)

http:
  server_port: 12345

c8478e23c33e3928915be1714c390ccb.png

到这一步,HA的docker版本部署就已经完成了,打开浏览器,输入nasip:端口号就可以打开HA的web页面了。

虚拟机部署教程

先到HA的官网,根据你的虚拟机环境下载对应虚拟机文件

https://www.home-assistant.io/installation/alternative

f5a0c6e7162a05d46ff8d7bb3d54ae06.png

我这里以极空间和群晖的虚拟机为例:

极空间

极空间我选择下载.qcow2,将解压缩后的文件先上传到极空间上

742685a236213297cbf1d5af7551661d.png

打开极空间虚拟机,点击新增,选择最后一个选项,使用虚拟硬盘安装,点击下一步。

95239d3f6066d98151224638f5b77487.png

按照HA官网给出的要求,机器至少要分配如下的资源,固件需要选择UEFI。

  • 2 GB RAM

  • 32 GB Storage

  • 2vCPU

cf285357b9e1f5ed3b1b51f47f79180d.png

点击下一步,分配硬盘空间。

5e8e18393226d9848b6467be0724b313.png

继续点击下一步,网卡选择bridge,直接点击创建。

806ccf429148cd44d43b056652204b7b.png

通过访问vnc页面可以看到部署进度。

22a16eebdb093e9c4635acfc60ba5d80.png

当出现如下页面的时候,就说明已经部署完成了,我们到浏览器中通过页面中的这个ip:8123,即可访问OS版本的web端了。

4b193e83465e47cc9ef0bc9146e43d1f.png

物理机群晖通过虚拟机安装HA OS:

下载.ova文件,直接上传到群晖,然后到套件中安装virtual machine manager

f78ba968c013e0dbc4133d03ae53be8f.png

打开套件,跟着提示一直下一步选择存储卷,等待初始化完成。

4d134b1808e7ba271defb59ebc3bbe84.png

选择虚拟机,点击导入。

fb83acde2afcb9b9a519f9951bf8cbfc.png

选择从ova导入,点击下一步,选择上传的ova文件,继续下一步。

0471ab0f744979e7ab229c4907f5908d.png

选择存储空间和配置规格,依然和上面要求一致。

5753e70cb541b13d761ef60be117820e.png

一路下一步,固件选择UEFI,选择管理用户后,直接创建开启虚拟机。

5d52cb9bd0e91fae47035e5cc5ab86e8.png

创建后在虚拟机页面可以看到创建HA的ip,同样通过ip:8123进行访问web端。

3e34bde88d8e11db69ffbdbe45fb9cda.png

OS版本需要等待一段时间的组件更新(取决于你的网络,可能会等非常长的时间,我这个等了一天一夜),详情可以点击show detail查看。

bde5af48bbd3774242aeb73bf4823ad5.png

登录HA并进行基础配置

docke版本部署完或者OS版本准备完后,就可以通过ip:端口号,登录进入web端了,点击创建我的智能家居。

02c9c07cdfc26288203598a4740386e0.png

输入用户名密码创建账户

2922a6c3bd747f3e3cdc7c6fea3c0087.png

设置家庭位置,这里可能需要浏览器所在的机器有优质网络才能设置成功,设置不成功也没关系,后面也可以改,点击下一步。

5e72e359ba567939d5fe7601b8f0fac2.png

这里根据情况随便选择打开还是不打开,点击下一步。

298d1f8cd61655e455bc2b2a76a9758c.png

这里可以找到一些网络上本来就有的设备,直接点击完成即可进入HA的主页。

561618a289dc0095bafdee0f3eabf93a.png

另外如果之前家庭地点设置有误的话,也可以到配置>区域与地点>地点中,手动拖拽地图中的小房子标记来进行更改。

6d7cfddfc43a34f69188f788aa0cfebd.png

部署HACS商店

可以理解为插件商店,先到homeassistant目录下新建www和custom_components两个目录,并在custom_components下新建一个hacs目录。

21ff6e8f3e1c24306ad09cb7e55dbc1c.png

方法一:进入容器的命令行中直接进行部署

绿联私有云:

点击容器详情。

451a5ef3faefb7023aa3cfb2e480bafe.png

再点击终端,并连接。

886e54d72b9b3638b9dec491b288a67e.png

极空间:

直接点击对应容器的ssh按钮,进行连接进入

bf2de94e4ac5fc788c09cc5472f21bdc.png

群晖:

选中容器后点击详情。

d6300b4b7dd74d5ef8ad2e4dca070d09.png

详情页右上角点击操作,点击打开终端机。

9e01c650fb0fa8fffd43e34ad7e45cb3.png

点击新增,创建一个终端连接。

31bd0171b7ea765de6e841619d32d814.png

在打开的终端中输入以下的命令,如果网络不好这里可能会卡住或者速度很慢,当显示以下的绿字则表示已经安装成功。

wget -o - https://get.hacs.xyz |bash -

b26dcf2ff17b7deabdf7e0df46103358.png

方法二:到github上下载包后上传。

这也是为什么说网络需要支持github才能部署的原因,不论是方法一,还是方法二,都依赖于优质的网络。另外后面需要用到github账号授权,如果之前没有github账号的话,可以在这一步先把账号注册了再下载hacs包,包地址如下,直接下载最新的hacs.zip包,github注册按照页面提示进行即可。

https://github.com/hacs/integration/releases

755283973d4a2c2184b54804e66cb9c5.png

下载完成后,将hacs.zip包解压缩,并将解压缩后的内容上传到custom_components>hacs目录下。

57be041dd4c4770d4983bbe828faa581.png

长传完成后在docker管理器中重启HA容器,或者在HA页面的开发者工具中,点击重新启动。

e7904fb01e77ab21bbd23a8cba2e02a2.png

等待一段时间,等重启完成后进入配置>设备与服务中。

5178ac94dfb446341b63915292f3ad34.png

点击添加集成,搜索HACS,并选中。

a6a31d7f740c8adf278a6f58f051b4e9.png

将所有选项打勾,点击提交。

784cbee3a1d1c67b5cc77d2421646705.png

根据提示打开页面,并将下方的验证码填入进行账号绑定。

8216f805606ac2b226fb76b9b587c839.png

绑定完成后,即可在HA页面的左侧看到一个HACS的菜单了。

fd2096d548603017b17824fcac8f94f3.png

安装xiaomi_miot插件并连接米家

方法一:直接在HACS商店的搜索框搜索xiaomi_miot,并点击进入。

4f3c32878a105831ef7fe03d70b646f5.png

点击右下方的download,在弹框中再次点击download。

bb25fe10982a6226b375bdcfd67c1467.png

方法二:或者到容器内的命令行中输入以下一键安装命令进行安装,同样的,安装完成后,记得重启一下HA容器:

wget -O - https://raw.githubusercontent.com/al-one/hass-xiaomi-miot/master/install.sh | ARCHIVE_TAG=latest bash -

方法三:直接到github的项目地址,下载对应的包,解压后,上传到custom_components下即可。

https://github.com/al-one/hass-xiaomi-miot/releases

接下来到点击进入配置>设备与服务中。

6349316b6a008a33dd844349907039b2.png

接下来点击右下角添加集成,在搜索框中输入xiaomi,找到Xiaomi Miot Auto,点击。

ee81a39722e4135b3e0bc422fa03d9b4.png

不会获取小米设备token的话直接使用账号集成,这个也更加的方便。

27f63f23dfcd2e4ea134848e2f12dd41.png

填入小米账号信息,连接模式直接自动,点击提交。

8d63ddd4d56a6679e1f3053243aba279.png

提交后进入设备筛选页面,包含模式为手动选择绑定的设备,排除模式为手动选择不想绑定的设备。

6d730a8a46eababd15c0206ea9f5dff9.png

提交后,就可以把账号下的设备集成进来了。

683c3ed2a9225dd7fdc676d185b56c11.png

其他一些品牌产品的集成

美的:

同样是通过hacs商店,搜索midea AC LAN进行下载。

742f435822ef18459b5cd1ab457f2a76.png

再到设备服务中搜索对应插件进行绑定。

d740b549ba691d0e1575fa5d4d295933.png

选择自动模式。

5a79e20446a8b433ee91a44aa7f77cc4.png

直接默认auto,点击提交。

23361f525a85b4233186d64590e8a8a8.png

选择设备进行提交。

ddf4876af171cb97c965bf0968ff34dd.png

第一次使用需要根据你设备的绑定平台,选择账号进行登录,登录成功后会返回到选择设备的页面,选择后提交即可。

1688bb8b06284e677edc8988b802feaa.png

格力:

格力直接在设备集成中搜索gree Climate进行设备绑定。

b1cde33b238a40a3a7e166eab3efd040.png

海尔:

从下面的链接中下载对应的插件包,解压缩后,将haier目录上传到custom_components目录下,并重启HA。

https://github.com/banto6/haier/releases

e75c71c3a7f8df6962bb8cd561d9a6ac.png

到设备与服务中添加集成找到haier插件。

0452057b37d009fce348ad8eec278408.png

使用账号密码登录后即可将海尔智家绑定的设备集成进来。

d195adb50d5d9818c7bbaff9be46490e.png

当然还有更多的设备支持集成,不过我也只有这几个品牌设备,没法给大家一一举例。

连接homekit教程

在配置>设备与服务>添加集成中,搜索apple或者homekit,点击apple图标。

8d75bd96b773b98d2fb2bf41329e4a42.png

进入下级菜单,即可看到apple相关的一些插件。

b1bebcd8ed596fac534d51a70dc439a3.png

选择homekit bridge的话,则需要先选择添加域,建议不同的域(可以理解为不同的设备类型)创建不同的homekit bridge(可以创建多个),选择后点击提交。

7696edefe1585f8353d28c084f5ae76c.png

点击提交,再点击完成,并点开通知。

eb149a98866934da928eca8509bf5623.png

使用苹果家庭扫描通知中出现的二维码,手机上根据提示进行添加即可。

2bf28760c4087f13ac9ed75f25b18ecf.png

若要反向从homekit添加到HA,则选择homekit设备,选择设备后,点击提交。

da5e143dd1b987e745ad62796749e39e.png

输入设备识别码进行绑定即可。

5217a9fe606d8057d227436d92210c37.png

其他的品牌也是同样的思路,先到设备与服务的集成中直接搜索,没有的话到hacs商店搜索,再不行就到github上找找看是否有对应的插件包。

美化主题应用教程

完成以上步骤,已经可以使用起来了,不过看着这么粗糙的界面,多多少少还是觉得不太好看。

a8680bd9f809a9a5e20a5a4817412710.png

而HA的强大在于,他的美化天花板取决于你的能力,能力足够强,可以实现任何你想要的美化效果,当然我没那么强的能力,所以只能使用大佬做好的美化包。

我这里以一个比较简单的主题举例,我们打开HACS商店,先清除右上角已经筛选的项,再点击三个横杠,选择theme,搜索your name(因为我实验了好多个主题,就这个可以更换背景图)。

4c9223e6e8503266fc35e57d6f52249f.png

点进去点击右下角的download进行下载,另外往下翻,会有安装的要求和更换背景图片的方式。

5f6c749e7083f0ba3da15807117c1f84.png

首先到configuration.yaml文件中添加如下内容:

frontend:
  themes: !include_dir_merge_named themes

f9b1ab9f73940728789119d344f60247.png

再到之前创建的www的目录下再新建一个backgrounds的目录,将想要的背景图片丢进去,并命名为yourname.jpg

3f2474bc9ba9e90c9fd0239ee68cbeff.png

重启HA,并点击个人的头像,选择yourname主题。

bff32e9b5cedb9c087be06a4f299b6df.png

不过在概览中无法看到效果,需要新建一个仪表盘,右上角点击三个点,选择编辑仪表盘。

621d1b08e2ced1f2ba3c48e0ada8bf1d.png

再次点击三个点,选择管理仪表盘。

7974d237fae09e87004b4ae0ad42a616.png

右下角选择添加仪表盘,新建一个。

9fec75b41ee4999aeda04dfb0e3b4716.png

新建完成后,再左侧选择对应的仪表盘就可以看到背景图片效果了。

bccfdffbfce4c5462c50bd9e5cd61dc3.png

当然,现在的主题也仅仅只是改了下背景图,背景颜色,更漂亮的定制化主题,需要自己去论坛或者github找其他大佬更深层的教程了(忠告:玩其他大佬的定制化主题之前,一定要把自己当前homeassistant docker目录下的文件全部进行备份,防止玩崩了重新恢复)。

3D房型图的创建和使用教程

最开始的演示图里,有一个3D户型图不知道大家注意到没有,我个人最喜欢这个组件,可以很形象的看出当前家里的灯光状态,也可以点击3D图上对应的房间上的开关实现现实房间的灯光,空调的控制。

00723ea2c774a44ccee0eb6049ec7e01.png

本教程使用酷家乐网页版进行3D房型图的创建,地址如下,使用微信扫码登录,到这一步建议小伙伴可以点击基础会员图标,新用户有3天试用时间,后面如果想要生成高清图会用到会员权益,另外注意,3D房型图部分完成后,记得关闭订阅,不然2天后会自动扣费(我是已经使用完了,所以没有试用图标了),不试用也问题不大,只是最终图片清晰度的区别,用还是可以用的。

https://www.kujiale.com/

827e73aac2e5f978edca594e1288c6a7.png

点击右上角的开始设计,进入设计页面。

974a2f54cf8899039d2f0e2f933df058.png

有现成房型图的,选择导入图纸,没有房型图的,可以选择搜索户型,根据自己小区名,找到和自己一样户型的房子,实在找不到类似的就选择自由绘制(不需要很精确,只要户型差不多就行,还是建议尽量从户型搜索里面找类似的户型直接使用,自由绘制除非专业人员,自己绘制的真的不会太好看)。

8894d0cc16a3aeca32ad760615687e2b.png

如果非要使用自由绘制,进入页面后选择墙体,通过在页面多次点击选择墙体的长度。

2a4aeb888130b3b38f4707ac37342641.png

通过墙体封闭来画出一个个房间。

b728a5bcc2ea73aa3a44656721459437.png

2D图画完后,可以点击左下角的3D看下房型是否满意,根据情况再做下微调。

71fa61d3c66911046e24e1249352c518.png

如果想要效果更加的精细,可以从左边的素材库加入:门、家具等等的装饰。

887dfb55be7be615463141bb6e3684c1.png

完成户型图构建之后,点击上方的渲染>俯视图。

cc77c7c4b1c3d70da5b96af9bbe5eee3.png

选择左侧的手动添加灯光

b5d758acf7b69e6fe2b7304105cb8f4b.png

基础灯光模板选择俯视图夜晚,填入名称后,点击确定。

62554da2e687366096f9413c1e157175.png

先点击上方的清空将默认方案中的灯光全部删掉。

b41d19451d2d51e3a37e2c2d9140eff4.png

从左侧,将想要的光源拖动到3D图对应的位置,可以选中后调整大小,高低,右侧还可以调整灯光颜色,亮度等等参数(可以参考我的灯光大小和亮度参数),注意,右侧的灯光状态开关记得要打开。右侧往下拉可以将所有设置应用到所有同类灯光,配置完后通过上方的实时预览大概看下灯光效果。

dcb071d827b8877ae888850c21737273.png

点击完成回到渲染页面,先到下方背景中,选择一个纯色背景,右侧视野和方位角根据自己喜好进行修改,确认好方位后,一定要点击下保存相机视角,防止不小心改了后续渲染效果有问题。

feb8ec0f4755e028b7858209eceecd21.png

选择尽可能高清的清晰度(没有会员的话,只能渲染1k,所以需要领取免费会员,但是一定要记得取消订阅。)

3cb05ac2d9d4701aeff9f11e4860bd27.png

点击渲染后,可以到右上角的相册中查看渲染结果,可能需要多次微调,想要好看需要多点耐心。

61993a4ba94f368d01ec8520c8b43378.png

这一次渲染的为灯光全亮的照片。

9deb8daa60be1bc55942b3ebb5ce7d7e.png

再回到渲染页面,选中灯光模板下的亮度设置,将亮度调整为0, 记得点击已经保存的视角,确保视角和上次开灯的渲染视角一致,选择清晰度再次点击渲染。

dd3daf7a2f543265447f263e93bffe72.png

这次可以得到一个灯光全灭的图片,点击相册下方的下载按钮,将全量和全灭的原图下载下来,到这一步,酷家乐步骤就全部完成了(记得取消订阅)。

e04b5376601f9690bd978c267104953f.png

打开PS,点击ctrl+o打开灯光全黑的图片。

6cf782ee84b01b7ecb5158267173ad25.png

将全亮的图片拖进来。

4b89b5073aea0525849eb4d705731867.png

选中右下角的全亮图层后,左侧找到钢笔工具。

af02861b888f554d8849246aebb2233a.png

使用多次点击的方式,将我们对应的灯光范围框起来,比如我图中就是框住了我的书房,然后右键点击建立选区。

8c9b9684320fa989e42e77822d2277ef.png

直接点击确定。

23c08d410929ef211396a31c1754ec2c.png

在出现动态的虚线后,键盘按CTRL+ALT+J创建图层。

73ace4d498dc12a349479ef2899daa05.png

命名改为书房,点击确定。

fe6a1f884a3431373e131a50cf942ddd.png

可以看到右下角多了一个图层,我们将全亮前的展示点掉,可以看到单独的书房灯亮的效果。

55a017ff5f0bf9c9795608c8142b4149.png

上面是密闭空间灯光可以直接圈定选区,如果是有交叉灯光的,比如客厅和餐厅,我们同样是先选中全亮,灯光往外适当蔓延,然后右键选区。

ed1f8f438db02d1c78c8ff2ffd8414c2.png

建立选区先别点确认,把羽化半径设置成20,再点击确定,同样的方法建立图层。

84dad056a0f1ddb19ac10ab5dd7753d5.png

依然是去掉全亮看下单独的客厅灯效果,羽化半径会让灯光显得更加柔和自然。

9839159d86d70302b196583abf0c85e7.png

按照这个方法,把所有的灯光图层都建立,将其他图层前面的小眼睛都勾掉,只保留单个灯光图层,选中后点击ctrl+shift+alt+s保存图层,注意格式选择png-24,点击储存,修改文件名称为对应的灯光名称,进行保存,按照同样方式将所有灯光进行保存。

5c418a05fed929046a6c6eb7c4404b7a.png

最后将所有眼睛都勾掉,只留下一个空白页面,依然是使用ctrl+shift+alt+s保存一个透明的png图片。

096748d0617995e6399215785190779a.png

在homeassistant的www目录下新建一个home目录,将单个灯光图,全灭的背景图,透明图,以及你喜欢的灯光开关图标(开关的图标也可以使用内置的,使用内置的就不用上传了)上传到目录中。

367f58e2b08fb1a071978be5d1d342fd.png

回到homeassistant,我们先将对应的灯光开关实体id找到,编辑仪表盘后,点击添加卡片,选择按实体,搜索灯,找到对应的开关,下面的switch.xxxx就是对应的实体id,我们先记录下来。

0512339d4d66c64be2f2c024af414c32.png

再切换到以卡片菜单,选择图片元素。

e0502272f37ae74a37142c704f466a68.png

参考以下的代码,根据代码中的备注,替换背景图,设备实体id,调整开关位置,并点击保存,生成卡片。

type: picture-elements
#替换成背景图片地址/local就是www目录
image: /local/home/背景12.png
elements:
  - type: image
  #替换成对应的灯开关的实体id
    entity: switch.zimi_dhkg01_464c_switch
    tap_action:
      action: none
    style:
      pointer-events: none
      top: 50%
      left: 50%
      width: 100%
      mix_blend_mode: lighten
    state_image:
    #所有的关灯都对应透明图层
      'off': /local/home/透明12.png
    #开灯则加载对应灯的图层
      'on': /local/home/客厅12.png
  #以下为灯开关的图标
  - type: image
  # 替换成和上面灯光同样的实体id
    entity: switch.zimi_dhkg01_464c_switch
    tap_action:
      action: toggle
    style:
    # 手动调整下开关状态图片的位置和大小
      top: 50%
      left: 60%
      width: 11%
    state_image:
    # 替换成灯光开关状态的图标地址
      'off': /local/home/关灯.png
      'on': /local/home/开灯.png
  #多个灯光则复制上面elements
  - type: image
    entity: switch.zimi_dhkg02_cbb8_left_switch_service
    tap_action:
      action: none
    style:
      pointer-events: none
      top: 50%
      left: 50%
      width: 100%
      mix_blend_mode: lighten
    state_image:
    #关灯对应透明图层
      'off': /local/home/透明.png
    #开灯则加载对应灯的图层
      'on': /local/home/书房.png
  #以下为灯开关的图标
  - type: image
    entity: switch.zimi_dhkg02_cbb8_left_switch_service
    tap_action:
      action: toggle
    style:
      top: 20%
      left: 60%
      width: 11%
    state_image:
      'off': /local/home/关灯.png
      'on': /local/home/开灯.png
  ## 实现空调状态动态效果
  - type: image
    entity: climate.lumi_mcn02_ed43_air_conditioner
    tap_action:
      action: toggle
    style:
      top: 18%
      left: 67%
      width: 6%
    state_image:
      cool: /local/home/空调冷.gif
      'off': /local/home/空调关.png
      heat: /local/home/空调热.gif

6832c186419e8aea2756bc21eb853c24.png

摄像头的添加

首先摄像头需要支持ONVIF协议或者RTSP流。本教程以ONVIF协议为例,到配置>设备与服务中,点击右下角添加集成,搜索并选择ONVIF。

83a6e23ad8d97964e666ea52d0025a8d.png

点击提交会自动搜索内网的摄像头。

e67dac50ba6cb6b58619ee57f45a6c2a.png

没自动找到也没关系,我们填入摄像头的ip,端口号,用户名和密码即可集成。

dae60b03931cb579a6071b0549970405.png

集成完后,我们到仪表盘页面编辑仪表盘,点击添加卡片,选择图片概览。

74ed9d345bb078899adcf6da1fc189b0.png

选择相机实体,并将相机视图选择为live,点击保存,即可将摄像头添加到仪表盘了。

567603f24f798beabac2bfd530621220.png

人员是否在家状态的配置

准备配置几个人员需要先到配置>人员中添加对应的人员账号。

2369ba860c3f587ad74459f783da1782.png

再使用对应人员的手机下载homeassistant手机客户端,使用对应的账号登录客户端,登录后HA中就会生成一个移动应用的设备。

1007345b8b2f13221eb9945d8d9146fe.png

生成后回到配置>人员中,点击对应人员。

90a9733fb974c197f7bd1af1dffd1d45.png

选择对应人员手机的跟踪设备实体保存。

633206a1f23c191863fe391d505d3679.png

再到仪表盘中编辑后添加卡片,选择实体卡片。

51f39eea6e5ef9ded9135255b69ae64d.png

将其他实体都删掉,只保留一个,选择人员的实体保存即可。

b546d540ee66deedd390ea8cde479e15.png

不过这一步完成,会发现我们出门后,状态变更不及时,一个是定位刷新频率问题,一个是HA原版的app地图网络问题,定位问题我们可以到手机app的配置>companion app中调整传感器刷新频率和位置传感器设置,网络问题可以找下网上大佬魔改的国内版本Homeassistant app来解决。

9fed232adbe11af22c1ef26f3b54fa8e.png

好看的彩虹天气

彩虹天气则需要通过HACS下载一个天气预报和一个Colorfulclouds Weather Card的插件。

443ff0cf25f119bd65b0532782dce75a.png

如果天气预报在HACS中无法直接找到的话,则到github如下连接中,自行下载上传重启,来进行安装。

https://github.com/hasscc/tianqi

2390ad32b81f90247b4ace345a7e0e57.png

下载完后,则需要到设备与服务中点击添加集成,搜索并选择天气预报。

e4215ebe8a05a83c71ac7db15dbfd859.png

服务器填入weather.com.cn,填入地点进行搜索,选中搜索结果,勾上兼容彩云卡片,点击提交。

880fc6fdbd72a4e4de3e07bac93e7a41.png

再回到编辑添加卡片的页面,选择自定义:colorful字样的卡片。

e64fd2f2c79bffcff7a234c3daf6ae0c.png

选择是否使用详细预报等等配置,点击提交即可。

b5fd7c2b92321f81c1b31d07ea3c9f79.png

HA仪表盘排版的两个关键卡片使用介绍

一、水平堆叠卡片

直接搜索水平即可出现。

7dd20d30f8f488f61b1e58d7888a3a31.png

实现的效果就是可以通过添加页签,实现一个卡片横向展示多个实体。

341f7e29df22fb3fb109b61807535036.png

二、垂直堆叠卡片

和水平类似,可通过搜索垂直找到,效果则是可以通过添加页签,实现一个卡片垂直展示多个实体。

b3d29d865ea30d7bb3956f6f44b53e8b.png

最关键的是:这两个卡片可以互相嵌套,你可以在水平里面的页签里选择垂直堆叠,实现各种样式的组合。

ec926729cde2eae2591aee39447c6701.png

node-red容器的部署以及关联HA

直接镜像仓库搜索node-red,选择nodered/node-red,点击下载进行镜像拉取。

8e95163ad042b0947d5e397a68f013ce.png

本地镜像中找到node-red点击创建容器。

c3016befd95727d8ee9a351d47db314b.png

勾上创建后启动容器,点击下一步。

5f14c4cdc6073f0ac1253e681abb61d7.png

选择容器退出时总是重启容器。

8a863bb2d4817e25a04174f47e2ad888.png

在docker目录下新建一个nodered的目录,选择并装载到/data,注意类型为读写。

0f2b51a07110bb2aed1f1514ccead177.png

填入一个未被占用的端口号,直接点击下一步再点击完成。

ba716b0f8902c34ee4a09ea09ddcac58.png

使用nasip:端口号登录node-red的web端。

3f93ae23d3b06c0f0a580458ae26cff0.png

先回到homeassistant页面,点击左下角的管理员用户名,往下翻找到长期访问令牌,点击创建令牌。

f4e4cff0a9d4b0e82c22e42248ef2015.png

随便输入一个名称后点击确定可以得到一串令牌编码,复制下来,再回到node-red,点击右上角三个点,点击节点管理。

6157d8d19d2b4ab07ab667cc003405fd.png

在控制板中点击安装,搜索框中输入node-red-contrib-home-assistant-websocket,点击安装。

6c9ec8040e5a4b2f6ab3bda70eb12581.png

这一步如果安装一直失败,则进入到容器的终端中使用shift+ctrl+v将如下的命令粘贴进去直接回车。

npm config set registry http://mirrors.cloud.tencent.com/npm/

1895671c8fa551d613bc37251501e28f.png

再输入以下代码,回车,等待一段时间,显示如下图样式则重启下node-red容器。

npm install --no-audit --no-update-notifier --no-fund --save --save-prefix=~ --production --engine-strict node-red-contrib-home-assistant-websocket@0.59.0

d883f04d5835c98f31b87937ebd48ef4.png

然后再回到node-red web端,现在可以在左侧看到homeassistant的节点了。

a0da02051c0568d0212449ebabd70595.png

拖拽一个call service节点到流程中,双击进入编辑,点击server后的编辑按钮。

7bdc4f1f534b9cdeff96d79fdc8e2901.png

填入HA的环境信息(如:http://192.168.66.32:12345)和刚才获取的长期令牌,点击添加,再点击完成。

948c438b5b89cb1558e9e3a8a9686950.png

最后务必记得,一定要点击右上角的部署,不然刚才配置ha信息生效不了。

20ea6a451acad598a1e9dad601f9393e.png

现在可以在节点里看到我们的HA的设备信息了。

a9c1fec346fc2e69cd83ae8de167392a.png

另外,device的节点显示当前版本需要我们回到HA的hacs安装3.0+版本的node-red companion。

833e8cbceccfa204ea225d0317d55efc.png

直接进入并安装。

0223a549424f63f2f0efc1af22322b80.png

到设备服务的集成中,搜索node-red并点击。

d4c1d5f8c2a78cbe55fe59af90002e8e.png

弹框点击提交,至此node-red部署流程就完成了,我们可以通过node-red实现各种各样好玩的自动化或者各种智能家居的联动。

88a19e666d24edd103b88fee486255e4.png

node-red案例实战

node-red想要学精通非一朝一夕,下面就以一个联动场景:通过开灯触发打开空调并根据当前房间温度判断使用制冷还是制热模式,给大家简单简单的介绍下node-red怎么使用的。我们首先要把我们想要实现的场景,大概在脑袋里过一遍,形成一个流程图,比如我这个场景,首先我们是通过开灯进行触发>再获取房间的温度>然后根据温度情况做一个判断>最后是根据判断结果进行空调模式的切换,流程明确之后就很简单了。。

先从左侧homeassistant组里把events:state拖进来,双击进行编辑,entity选择书房灯开关,if state后填入on,判断开灯的状态变成on则进行触发后续事件。

5c36a0f0b17f812aea00a99c2c7329b3.png

接下来获取当前书房温度,从左侧拖入current_state组件,双击进行编辑,从HA的设备与服务找到温湿度计对应温度的实体id,填入entity id中,这里if state后留空即可,点击完成。

3f9ec5b534cba33fd4b9c0fc93f7f357.png

再从第一个组件后的灰色小方块迁一根线连接到第二个组件。

068d6ddb9d0880384750a3cf3d0898fb.png

接下来是进行判断,从左侧功能组拖一个switch到流程中,双击进行编辑,点击弹窗下方的添加,第一个条件填入<xxx作为制热判断条件,第二个条件>25作为制冷判断条件,点击完成,将第二个组件右侧的灰色方块和switch左侧连接。

e87bf0d4e89b3b26035acb78e8583c18.png

接下来从左侧的homeassistant组拖入两个call service组件,双击进行编辑,范围选择climate,服务选择set_hvac_mode,选择书房空调的实体,数据内填入以下内容,entity_id填入空调的实体id,hvac_mode对用制热的组件就填入heat,对应制冷的那个组件就填入cool:

{      
      "entity_id":"climate.lumi_mcn02_ed43_air_conditioner",
      "hvac_mode":"heat"  
}

8c4eb6ad157fb81874ba2525ff3a9b8d.png

将swtich灰色小框连到对应的call service组件上,从上往下,第一个组件对应的就是swtich内配置的第一个条件,第二个就是第二个条件,以此类推,至此,这个流程就配置完了,记得点一下右上角的部署进行保存和应用。

65f38ce9b51b2ec2f139f74097c7c02f.png

重新开关等实验一下,可以看到已经起作用了,并且正确的走了上面制热的流程,我这里是演示教程,大家使用的过程中,记得每个组件都命名下,方便后期维护。

e33725463fe292ed10b5914fca042f08.png

最后:

还是那句话,本文旨在带没玩过的小伙伴了解这个应用以及初步入门,想要精通,还是需要小伙伴自己花更多的时间去钻研,如果各位小伙伴有什么有意思的玩法,也可以分享给我,我们一起交流学习进步。

本教程是目前为止耗费心力和时间最多的一个教程,如果有帮助到各位小伙伴的话,一点要点点关注,点点赞,再不行点点赞赏也是可以的嘛。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐