通过之前的篇章,相信大家已经能够较舒适地使用 HA 这个平台了。然而,人往往是不安于现状的。作为积极向上的好青年,我们想让 HA 看起来更美观大方,特别是面对乱码一般的默认设备名称,大家的内心想必是凌乱的。

为了拯救各位强迫症患者,本期教程将向大家提供个性化配置的支持。我已将个人配置文件同步至 Github,国内用户可访问 Coding.net,欢迎大家参考及 Star。

特别提醒:Yaml 特别重视语法格式,之前很多派友出错也是因为格式不正确,请大家在配置时务必额外注意缩进、冒号、短横线的使用。


页面结构

开始具体配置教程前,我们需要先了解一下 HA 主页的页面构成,方便之后更快理解配置指向对象。由于我已修改硬核代码更改主题,再进行恢复较麻烦,这里使用 HA 公开的参考配置截图作说明:

HA 默认 UI
HA 默认 UI

由图可知,HA 主页面的左侧栏集中了所有面板的入口,默认主页即“State(状态)”面板。 该面板中又上至下依次包括工具栏,标签页,徽章栏及由设备卡片及灰色空白区组成的主区域。

当我们新接入一个设备,如果是带有开关属性可控制的、监控摄像头、媒体播放器等设备,HA 会自动为其生成一张卡片;而其他仅有信息展示属性的设备(比如温度、湿度、人体传感器、设备在线状态等)则会生成徽章集中在头部。

HA 提供了以上所有元素的个性化配置,本篇教程将重点讲述设备、组群、主题三项配置方法,能满足大部分的用户浅层的配置需求。


设备自定义

在本文开头提到的那些看起来乱码的名称,其实是 HA 中的 entity ID,该 ID 具有唯一性,是 HA 系统区别设备的代号。点击侧边栏左下 “< >” 进入开发者 States 面板,便可以获得所有接入设备的 Entity ID。

< > panel
< > panel

当然,代号是给计算机读的,并不适合展示于人,接下来我们就来学习如何对设备进行基本配置,解决乱糟糟的界面。

对设备进行自定义设置,请在 homeassistant:下新增 customize: 块,请特别注意代码的层级。

homeassistant:
  name: Home
  unit_system: metric
  customize:
    thermostat.family_room: #entity_ID
      entity_picture: https://example.com/images/nest.jpg #图片
      icon: mdi:kettle #图标,来自 https://materialdesignicons.com/
      #图标和图片只能选择一个配置
      friendly_name: Nest #昵称,显示在主页面
      hidden: true #是否隐藏
      homebridge_hidden: true #是否在 Homebridge中隐藏,避免 HB 重复添加设备

以上是设备所需最常见的属性设置,更多设置请参考官方文档

初步设置后,相信你的界面已经有了不少改变。


组群管理

随着更多的设备接入,我们不难发现主页面开始渐失逻辑性和层次性,这时候就需要引入组群管理。

顾名思义,组群管理就是将一系列的设备、场景等(后续教程将会涉及)组合在一起形成群组(Group)。比如,可将卧室内的所有设备集中为“卧室”群组,或者将所有灯集中为“灯”群组。通过配置组群,可以让我们的 HA 界面清晰明了,方便操作。

同样我们在configuration.yaml文件中添加如下配置,注意与 homeassistant平级

homeassistant: #此项为展示平级用,勿照搬
  name: Home
  unit_system: metric
group:
  default_view: #群组名称,必须为英文,空格使用 _ 代替
    name: Climate #昵称,可中文
    view: yes #是否以标签页形式展示,默认为是
    icon: mdi:home #图标
    entities: #组内设备
      - group.kitchen
      - group.awesome_people
      - group.climate
    control: #当群组内有多个可控制设备时,是否显示总控制开关

我们通过群组管理,可以将非控制类设备由徽章转化为卡片内项,避免了主页面一排徽章的窘境。


代码整洁

我们在进行个性化配置中,满足了界面的简洁需求,但是同时也应该注意到随着设置的不断增多,configuration.yaml的内容也不断增加,整个文件显得十分臃肿。这时候我们需要内外兼修,将设备个性化等较长的配置独立出来,形成文件,再接入 configuration.yaml

比如,我们在 HA 配置文件夹内新建 customize.yamlgroup.yaml 文件,把对应内容复制进去:

  • customize.yaml
    thermostat.family_room: #entity_ID
        entity_picture: https://example.com/images/nest.jpg #图片
        icon: mdi:kettle #图标,来自 https://materialdesignicons.com/
        #图标和图片只能选择一个配置
        friendly_name: Nest #昵称,显示在主页面
        hidden: true #是否隐藏
        homebridge_hidden: true #是否在 Homebridge中隐藏,避免 HB 重复添加设备
    
  • group.yaml:
    default_view: #群组名称,必须为英文,空格使用 _ 代替
      name: Climate #昵称,可中文
      view: yes #是否以标签页形式展示,默认为是
      icon: mdi:home #图标
      entities: #组内设备
        - group.kitchen
        - group.awesome_people
        - group.climate
      control: #当群组内有多个可控制设备时,是否显示总控制开关
    
    注意直接复制内容,无须 group 或 customize 前缀,顶格写起。

之后在configuration.yaml使用!include xxxx.yaml进行调用:

homeassistant:
  customize: !include customize.yaml
group: !include group.yaml

这样我们就能保持配置文件的整洁和逻辑性。


主题

主题是 HA 在 0.49.2 更新中加入的功能,支持配置大部分 UI 中的字体、颜色等 CSS 值。最新 0.51.2 版本中已经添加对背景色替换的支持,也意味着黑暗模式终于得以实现。

配置主题需要两个步骤,一为添加配置文件,二为调用主题。

首先是添加配置文件,主题应在 frontend块内进行配置:

frontend:
  themes:
    night: #主题名称,英文
      # 主界面 #
      primary-color: "#1DE9B6" # 主 UI 字体颜色
      primary-background-color: "#303030" # 其他部件背景色 (dialogs, e.t.c)
      secondary-background-color: "#303030" # 主 UI 背景颜色
      paper-card-background-color: "#424242" # 卡片背景颜色
      paper-item-icon-color: "#1DE9B6" # Icon colour
      primary-text-color: "#FFFFFF" # 首选字体颜色
      secondary-text-color: "rgba(255, 255, 255, 0.7)" # 次字体颜色
      disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
      divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
      paper-card-header-color: "#FFFFFF" # 卡片标题颜色

      # 侧边栏 #
      paper-listbox-background-color: "#424242" # 背景色
      paper-listbox-color: "#FFFFFF" # 字体色
      paper-grey-200: "#616161" # 选中项背景色

      # 开关 #
      paper-toggle-button-checked-ink-color: "#1DE9B6"
      paper-toggle-button-checked-button-color: "#1DE9B6"
      paper-toggle-button-checked-bar-color: "#1DE9B6"

      # Sliders #
      paper-slider-knob-color: "#1DE9B6"
      paper-slider-knob-start-color: "#1DE9B6"
      paper-slider-pin-color: "#1DE9B6"
      paper-slider-active-color: "#1DE9B6"
      paper-slider-secondary-color: "#33F2D8"

具体可设置的对象有数十个,恕我无法一一列举及解释,有待大家自己调试,对象列表请参考此处

以上主题摘自 HA 官方论坛的网友分享,原文地址见此

主题配置后就是调用了,这里有 3 种方法:

  • 手动调用1:打开左下角 Service 面板,由上之下依次选择frontend - set_theme,之后填入{"name":"主题名称"},最后点击 call_service

Services Panel
Services Panel

PS:在这里,我们也可以进行 Home Assistant 的重启。

  • 手动调用2(仅限 0.51.2 及以上版本 HA):打开左侧面板 — 选择Configuration — 右侧点击configuration.yaml按钮 - 下方 Set A theme 选择你要的主题 - 即时生效

  • 自动调用:这里预习一下将要学习的自动化知识吧~
    configuration.yaml 文件中添加如下配置,注意与 homeassistant平级

automation:
  - alias: 'Set theme at startup'
    initial_state: 'on'
    trigger:
     - platform: homeassistant
       event: start
    action:
      service: frontend.set_theme
      data:
        name: happy #主题名称

相信到这里,大家的 HA 界面已经楚楚动人了,赶紧把 HA 拿出去秀一下吧~

null


HA 除了预设的个性化配置甚至还提供了自定义卡片、自定义面板等等接口,你可以在卡片中显示徽章,可以使用全文字面板控制设备甚至可以修改硬核代码实现各种动态效果……简直是促使程序员们大开脑洞啊,更多的详细教程欢迎关注接下来的高级篇。

…………

吊个胃口,比如一个具有交互性并且实时更新的“活点地图”?

动态平面图
动态平面图


更新日志

  • 08.27: 发布『答疑篇』,开放 Q&A,HA 最新版本为 0.52.0;
  • 08.18:修改主题部分,提供黑暗模式主题设置模板。

作者的话

距离我发布本系列首篇文章至今已经快半年了,系列至今已有 10 篇教程。无独有偶,JailbreakHum在 《少数派季度作者颁奖礼开场发言》所阐述的『内容调整』的观点恰恰与我的初衷十分契合。可以说从一开始,我就在整个系列中尽量保证内容的入门性,也在现实中帮助了很多派友成功搭建系统。

在和派友的互动中我意识到碍于英文水平的局限,很多人无法进一步地享受 Home Assistant 带来的便利。鉴于此,我个人独立制作了一份更接地气的 中文文档 ,目前仍处于雏形阶段,还在快马加鞭中,希望可以帮助到更多的人,欢迎大家阅读+收藏。

良好的体验需要良性的互动维持,为了保持版面的整洁,请大家不要在系列所有文章下方评论区 PO 整段的错误代码。遇到问题请至『维护答疑篇』集中评论。