通過本篇教程袁串，你將獲得 Home Assistant 的另一種交互方式：平面圖（Floorplan）悔橄，并跟隨示例創(chuàng)建屬于你獨(dú)一無二的個(gè)人家庭控制界面。本文首發(fā)什么值得買顾患。
如果說 Home Assistant 復(fù)雜難搞自娩，那么就在于它的配置過程實(shí)在沒有什么用戶體驗(yàn)可言用踩，任何一個(gè)細(xì)節(jié)，從功能到展示忙迁、從設(shè)備到服務(wù)都需要你自己去安排脐彩；而如果說 Home Assistant 為何吸引人，那么也在于它的擁有無限的可能姊扔，你能夠構(gòu)建出只屬于你的 Style惠奸。本系列前期的文章，主要為了引領(lǐng)大家入門恰梢，對 Home Assistant 的整個(gè)配置過程有一個(gè)了解佛南，在此基礎(chǔ)上，通過官網(wǎng)嵌言、論壇的補(bǔ)充共虑，慢慢打造你的個(gè)人智能家居系統(tǒng)。從本篇開始呀页，我會(huì)試著分享一些更個(gè)性化的設(shè)置，一些額外的實(shí)驗(yàn)性的功能拥坛。
一蓬蝶、效果展示
Floorplan for Home Assistant 使用系統(tǒng)的前端功能，以一個(gè)更直觀“家庭平面圖”作為交互界面猜惋。在 Home Assistant 的 Web 頁面控制的所有設(shè)備丸氛、服務(wù)、場景著摔，都可以在平面圖中顯示并控制缓窜。
二、基礎(chǔ)準(zhǔn)備
實(shí)現(xiàn)原理
Home Assistant 提供的前端功能。由于 Home Assistant 本身使用 Web 頁面控制禾锤，理論上你可以以任意的 Web 圖形化形式展示并控制整個(gè)系統(tǒng)私股。而在平面圖（Floorplan）中，通過使自定義的 ha-floorplan.html 頁面文件配合SVG 格式圖片 floorplan.svg恩掷，可以將圖片中的可視化設(shè)備賦予系統(tǒng)設(shè)備的實(shí)例 ID（Entity ID）倡鲸，達(dá)到關(guān)聯(lián)控制的目的。
3D 的顯示效果很棒黄娘，可是由于下面幾個(gè)原因我最終仍選擇了 2D 視圖模式：
- 角度固定導(dǎo)致設(shè)備顯示問題峭状。
- 燈具的顯示控制問題。
- SVG 實(shí)現(xiàn)形式的局限（不支持三維物體的描述逼争，如效果展示2优床，大部分仍采用了菜單的形式來控制設(shè)備）。
SVG：可縮放矢量圖形（Scalable Vector Graphics）是一種基于可擴(kuò)展標(biāo)記語言（XML）誓焦，用于描述二維矢量圖形的圖形格式胆敞。SVG由W3C制定，是一個(gè)開放標(biāo)準(zhǔn)罩阵。
使用工具
SVG 編輯軟件：Inkscape竿秆，免費(fèi)、開源的矢量圖形編輯器稿壁，提供了大量繪圖和對象操作工具幽钢，不僅能導(dǎo)入導(dǎo)出SVG，還支持AI傅是、EPS匪燕、PSD和PNG。
三喧笔、安裝項(xiàng)目
復(fù)制文檔
在項(xiàng)目文檔（或百度網(wǎng)盤 提取密碼：rt2n）中下載最新的相關(guān)文件帽驯，復(fù)制到你的 config 目錄下，結(jié)構(gòu)如下：
主要需要修改的文件：
floorplan.yaml：設(shè)備配置文件floorplan.svg：平面圖圖片文件floorplan.css：顯示效果樣式文件
顯示方式
平面圖（Floorplan）在 Home Assistant 中有兩種顯示方式：
側(cè)邊欄
在 configuration.yaml 添加如下配置：
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:bulletin-board
url_path: floorplan
config: !include floorplan.yaml
狀態(tài)卡片
在 configuration.yaml 添加如下配置：
# 虛擬了一個(gè)實(shí)例來表示平面圖书闸，實(shí)例類型任意尼变。
homeassistant:
customize:
binary_sensor.floorplan:
custom_ui_state_card: floorplan
config: !include floorplan.yaml
binary_sensor:
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: Floorplan
group:
zones:
name: Zones
entities:
- binary_sensor.floorplan
以任意方式配置之后重啟 Home Assistant 服務(wù)，在 Floorplan 面板中你應(yīng)該能看見如下界面：
官方文檔提供了默認(rèn)的配置文件與 SVG 平面圖文件浆劲，由于沒有跟你的系統(tǒng)關(guān)聯(lián)嫌术，無法進(jìn)行任何操作，下面讓我們先將你的設(shè)備加入 floorplan.yaml 文件中牌借。
四度气、添加設(shè)備
目前僅支持傳感器（Sensor）、開關(guān)（Switch）膨报、燈具（Light）磷籍、報(bào)警面板（Alarm Panel）适荣、二進(jìn)制傳感器（Binary Sensors）、攝像頭（Camera）院领、媒體播放器（Media Player）弛矛，將你的設(shè)備的實(shí)例 ID（Entity ID） 添加到 floorplan.yaml 文件相應(yīng)位置（僅以部分設(shè)備為例，詳情參照下載文檔）：
name: Demo Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
# 可選項(xiàng)
warnings: # 開啟錯(cuò)誤提示栅盲，可以在Web頁面查看
# pan_zoom: # 縮放
# hide_app_toolbar: # 隱藏 Toolbar
# date_format: DD-MMM-YYYY # 自定義日期格式
last_motion_entity: sensor.template_last_motion # 最后動(dòng)作設(shè)備
last_motion_class: last-motion
groups:
- name: Sensors #傳感器 名稱自定 可以有多組
entities:
- sensor.dark_sky_temperature # 溫度傳感器 在此處添加你的設(shè)備 ID
# 文字顯示模板汪诉，在我的文檔中定義了兩類，分別帶有溫濕度單位的谈秫，可自行參考
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
# 顯示模板 調(diào)用不同的 CSS 信息
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 10)
return "temp-low"; # 在 CSS 文件中的 .temp-low 類下修改相關(guān)顯示屬性
else if (temp < 30)
return "temp-medium";
else
return "temp-high";
'
- name: Lights
entities:
- light.hallway
- light.living_room
- light.patio
- group.kitchen_lights
- group.living_room_lights
states: # 狀態(tài) 以及相應(yīng)調(diào)用的 CSS 信息
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action: #執(zhí)行動(dòng)作
domain: homeassistant
service: toggle
配置完成后扒寄，需要重啟 Home Assistant 服務(wù)，如果你開啟了配置文件中的 warnings 錯(cuò)誤提示拟烫，刷新瀏覽器该编，你將會(huì)看到類似上圖的信息，提示我們在 SVG 文件中沒有找到相應(yīng)的設(shè)備硕淑，下面我們將繪制屬于你的平面圖并將設(shè)備與圖形關(guān)聯(lián)起來课竣。
五、平面圖繪制
平面圖一般是在你的戶型圖基礎(chǔ)上進(jìn)行修改與添加相關(guān)設(shè)備顯示置媳，通過 floorplan.svg 文件展示出來于樟。
獲取你的戶型圖
如果你擁有自己的戶型圖源文件，你可以直接導(dǎo)入到 Inkscape 中進(jìn)行修改拇囊。如果你沒有的話迂曲，推薦以下兩種方式簡單的獲取你的戶型圖：
Inkscape 支持 CAD 文件導(dǎo)入，但是會(huì)產(chǎn)生很多雜項(xiàng)寥袭，線條也是獨(dú)立的路捧，不方便后期修改，經(jīng)過測試仍推薦重繪個(gè)人平面圖传黄。如果你不需要后期美化杰扫，可以在酷家樂下載你的戶型圖 CAD 文件，并通過在線DXF轉(zhuǎn)SVG直接獲得的你的戶型圖 SVG 文件膘掰。
CAD 導(dǎo)入
酷家樂：在線制作戶型圖章姓。開始設(shè)計(jì)后直接搜索你的戶型圖，找到后直接導(dǎo)出最簡戶型识埋。
magicplan：使用拍攝與增強(qiáng)現(xiàn)實(shí)功能創(chuàng)建個(gè)人戶型圖啤覆。如果線上沒有你的戶型圖，你可以使用 magicplan 自行制作惭聂。需要注意的是 magicplan 導(dǎo)出功能需要收費(fèi)，這里我們僅使用制成后的截圖來供我們參考制作所需的平面圖相恃。
戶型圖 SVG 文件的繪制
為了后期進(jìn)一步美化與定制辜纲，我們沒有使用 CAD 源文件，這就需要我們手動(dòng)修改戶型圖。將之前得到的戶型圖文件拖拽進(jìn) Inkscape 進(jìn)行臨摹耕腾。
美化后的戶型圖完全符合 SVG 文件的要求见剩，你可以試著再往里面添加你的家具家電。
設(shè)備的關(guān)聯(lián)
之所以重繪戶型圖扫俺，一個(gè)原因是為了能夠使你的平面圖看起來更美觀苍苞，另一個(gè)原因就是為了之后的設(shè)備關(guān)聯(lián)。所有你想要在平面圖中控制的設(shè)備狼纬，你都需要設(shè)置它在 SVG 文件中的屬性羹呵，賦予相關(guān)圖形你的實(shí)例 ID（Entity ID）。
為了方便觸控設(shè)備的操作疗琉，遵循人機(jī)交互的需求（Human Interface）冈欢，我采用統(tǒng)一大小格式的圖標(biāo)來作為設(shè)備的控件。大多數(shù)相關(guān)圖標(biāo)可以在 FLATICON 網(wǎng)站下載盈简，文末的附件中也含有我用到的一些圖標(biāo)供大家參考凑耻。
FLATICON
以下僅以燈具控制以及溫濕度信息顯示為例：
關(guān)聯(lián)燈具
在平面圖中適合位置添加你選擇的圖標(biāo)，調(diào)整到適合大小柠贤，設(shè)置對象屬性香浩。
關(guān)聯(lián)溫濕度信息
在平面圖中適合位置添加任意文字，調(diào)整到你希望顯示的大小臼勉，設(shè)置對象屬性邻吭。
完成后保存 floorplan.svg 文件并替換原文件，刷新瀏覽器坚俗，查看效果镜盯，并注意錯(cuò)誤提示。
六猖败、個(gè)性化設(shè)置
經(jīng)過前面幾步速缆，你已經(jīng)可以在瀏覽器中使用平面圖控制你的設(shè)備了，下面主要涉及 floorplan.css 文件的修改恩闻，也就是對設(shè)備開關(guān)狀態(tài)顯示效果艺糜、信息顯示效果、門窗狀態(tài)顯示效果的自定義幢尚，示例如下：
SVG 與 CSS 文件的修改不需要重啟 Home Assistant 服務(wù)破停，保存后刷新瀏覽器即可。
信息文本樣式
如我們在 floorplan.yaml 文件中添加的溫濕度傳感器為例（本例包含多種樣式的判斷選擇）：
# 溫度 由于溫濕度的單位不同尉剩，將之分別定義顯示模板 text_template
- name: Sensors
entities:
- sensor.temperature_158d0001141e1a
- sensor.temperature_158d0001145a31
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
# 樣式模板真慢，溫度在低于15、15-30理茎、高于30黑界，分別按照 temp-low temp-medium temp-high 的樣式顯示管嬉，在本例中分別顯示 藍(lán)色（寒冷）、綠色（舒適）朗鸠、紅色（炎熱）
class_template: '
var temp = parseFloat(entity.state);
if (temp < 15)
return "temp-low";
else if (temp < 30)
return "temp-medium";
else
return "temp-high";
'
# 濕度
- name: Sensors
entities:
- sensor.humidity_158d0001141e1a
- sensor.humidity_158d0001145a31
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
# 樣式模板蚯撩，濕度在低于45、45-65烛占、高于65胎挎，分別按照 humidity-low humidity-medium humidity-high 的樣式顯示，在本例中分別顯示 黃色（干燥）忆家、綠色（舒適）犹菇、藍(lán)色（潮濕）
class_template: '
var humidity = parseFloat(entity.state);
if (humidity < 45)
return "humidity-low";
else if (humidity < 65)
return "humidity-medium";
else
return "humidity-high";
'
在 floorplan.css 文件中對應(yīng)如下：
/*CSS樣式表，修改類似#5bc0de的信息弦赖，即改變相應(yīng)狀態(tài)顯示顏色*/
.temp-low {
fill: #5bc0de !important;
}
.temp-medium {
fill: #5cb85c !important;
}
.temp-high {
fill: #d9534f !important;
}
.humidity-low {
fill: #f0ad4e !important;
}
.humidity-medium {
fill: #5cb85c !important;
}
.humidity-high {
fill: #5bc0de !important;
}
Adobe 在線取色器
圖標(biāo)控件樣式
如我們在 floorplan.yaml 文件中添加的燈具為例项栏。通常會(huì)有開和關(guān)兩個(gè)狀態(tài)，對應(yīng)兩個(gè)樣式蹬竖。
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
在 floorplan.css 文件中對應(yīng)如下：
.light-off {
opacity: 0.75; /*關(guān)閉時(shí)不透明度為75%*/
}
.light-on { /*開啟時(shí)正常顯示*/
}
效果如下：
給一組樣式對比沼沈， floorplan.css 文件：
.light-off {
stroke: white; !important;
fill: #C3B7F4 !important;
}
.light-on {
stroke: white; !important;
fill: #F8D2B9 !important;
}
效果如下：
同理我們可以設(shè)置門窗、人體感應(yīng)器不同狀態(tài)下的顏色币厕、顯示列另，這里就不一一說明了。
目前大多數(shù)瀏覽器支持的 CSS 效果還有很多旦装，如果你對相關(guān)知識有一定了解页衙，你還可以設(shè)置動(dòng)態(tài)顯示效果，比如風(fēng)扇開時(shí)顯示動(dòng)態(tài)圖標(biāo)阴绢，關(guān)閉時(shí)顯示靜態(tài)圖標(biāo)店乐。
七、相關(guān)文檔下載
文中用到的配置文件呻袭、圖標(biāo)眨八、SVG、CSS文檔在百度網(wǎng)盤（提取密碼：rt2n）提供下載左电，以便大家參考廉侧。
