Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6

不囉嗦直接上圖！今天來教學如何在 Home Assistant 製作 Floor plan dashboard，讓你的智慧家庭控制「所見即所得」，也讓不熟悉 Home Assistant 的其他家庭成員也能享受智慧家庭的極致懶人生活。

目錄

概念說明

Floor plan 的概念其實很單純就是圖層的堆疊，底圖是關燈狀態，上面疊開燈狀態，接著再把控制按鈕放在最上層。

今天會以右上客廳區塊來做製作示範，也就是由以下三張圖疊出來的：

事前準備

1. 平面圖

你會需要分別準備暗色版 (關燈狀態)、亮色版 (開燈狀態)，這裡我使用酷家樂製作平面圖，大家可以找個自己用得順手工具製作平面圖，總之最終取得暗色、亮色兩個版本即可，參考下圖：

暗色版命名為 “平面圖.png” 存起來 (一般來說不太建議用中文命名，但為了教學好理解我這邊先用中文)。

2. 把亮色版平面圖分區切圖

我使用 Figma 切圖，取得各個區域的開燈狀態：

以客廳區域為例，將上面亮色版的客廳區塊命名為 “客廳.png” 存起來。

💡 Tips
開放區域的區塊邊緣做一點漸層處理，會在開燈的時候看起來更協調
(參考上面客廳、餐廳、玄關)

3. 準備控制按鈕

用任何繪圖軟體製作用來操作裝置的按鈕圖示，可以先預想想要控制的裝置有哪些狀態，一般最基礎狀態有這些：

• 燈光：關、開
• 風扇：關、開
• 窗簾：關、開啟中、關閉中、開
• 空調：關、冷氣、暖氣

大家可以依照自己的狀況來製作，如果沒有慣用的繪圖軟體這裡推薦試試看 Figma。

接著一樣把這些按鈕圖片命名存起來，今天會用到，懶得做的人可以直接另存下面的圖檔 (因為是不同時期做的，所以檔案命名邏輯有點不一致，別砲我…😂)：

💡 Tips
可以做 gif 動圖，像是窗簾開關

4. 將平面圖、按鈕放入 Home Assistant

如果還不知道怎麼把檔案放進 Home Assistant 中的就請先 Google 找一下答案，把上面準備好的平面圖和按鈕圖片放到 Home Assistant 中，下面是我的配置給大家參考：

⚠️ 注意
要把檔案放在 ../config/www/ 裡，等等才能從 /local/ 拿到

config
┕ www
    ┕ ui
        ┕ 平面圖
            ┕ 平面圖.png
            ┕ 客廳.png
        ┕ icon
            ┕ light-on.png
            ┕ light-off.png
            ┕ curtains.png
            ┕ curtains-closed.png
            ┕ opening.png
            ┕ closing.png
            ┕ air-conditioner-off.png
            ┕ air-conditioner-on.png
            ┕ air-conditioner-heat.png

5. 新增放置平面圖的 Home Assistant Dashboard (可略過)

如果不想變更目前使用的 Dashboard，可以從「設定 > 主面板」進入 Dashboard 列表並新增一個。

6. 新增視圖

從 Dashboard 右上選擇「編輯主面板」，接著新增視圖。

Step 1. 新增面板

右下角點擊「新增面板」，接著點選「手動」。沒錯，要開始寫 YAML 囉！別擔心，YAML 語法蠻簡單的，下面也會提供範例讓你複製、貼上，再看自己的需求微調吧！

Step 2. 放入模板框架

直接複製下面的 YAML code 貼上，如果你有 coding 能力，下面快速看過應該就大概知道怎麼完成；如果 coding 經驗不多就先依步驟做，熟悉後再慢慢改。

type: custom:config-template-card
entities:
  - 
card:
  type: picture-elements
  image:
  style:
  elements:
    - type: image

上面這段 YAML code 是這次使用的大框架，這個 dashboard 是由 custom:config-template-card (Line 1) 這個面板組成；entities: (Line 2~3) 等等後面會用來宣告會使用到的實體 (entity) 讓後面操作開關反應更快；接著就是 card: (Line 4) 是這個面板的本體，後面會陸續把平面圖和各元件陸續填上。

貼上上方的 YAML code 之後在右側會出現錯誤，別擔心，這只是提醒我們有些必要的值沒給，下面帶大家陸續填上。

Template 中第 9 行是為了在下面的步驟可以正常顯示預覽而暫時放置，在接下來的 Step 4 開始會替換掉。

Step 3. 放入底圖

在原 code 第 6 行 “image:” 後新增底圖路徑 “../local/ui/平面圖/平面圖.png” (從這裡開始，只要和檔案路徑有關的都要依照自己放置檔案的狀況替換喔！)

⚠️ 注意
YAML 語法蠻嚴謹的，key (在這裡是 “image”) 和 value (在這裡是 “../local/ui/平面圖/平面圖.png”) 中間一定要有空格，組合後長這樣：
image: ../local/ui/平面圖/平面圖.png

type: custom:config-template-card
entities:
  - 
card:
  type: picture-elements
  image: ../local/ui/平面圖/平面圖.png
  style:
  elements:
    - type: image

這時候就會在右側顯示底圖，如果沒顯示記得檢查一下檔案路徑和檔名是不是正確。

Step 4. 疊上開燈狀態

接下來要把各別區域的開燈狀態疊上，下面是一組「區域開/關燈顯示」的 template code，把這段 template 替換 Step 2 YAML code template 中的最後一行，這時候右側的預覽不會有任何改變。

    - type: image
      entity: 
      tap_action:
        action: none
      style:
        pointer-events: none
        width: 
        top: 
        left: 
      state_image:
        'off': 
        'on': 

- type: image (Line 1) 說明現在要放進 dashboard 的 element 的 type 是 “image”，也就是 “圖片元素”，在這次建立 floor plan 視覺化 dashboard 都是用圖片元素，後面遇到就不重複說明囉！

Line 2~12 就是 image element 的各個屬性設定，不同用途的設定各有不同，後面介紹各模板時再分別介紹，這裡先針對「開燈狀態模板」說明：

• entity: 是宣告在這個 element 使用到的 entity (實體)，可以從 HA 的「設定 > 裝置與服務 > 實體」中找到，在這裡範例填上 switch.xuan_guan_wu_kai_guan_2_l2 (這裡別照抄嘿！請放你自己 HA 中的實體)；這裡特別注意也要把 entity 放到最前頭的 entities: 區段，這樣燈光在開關時才會即時變更圖片顯示狀態。
• tap_action: 這裡是宣告這個 image element 被點擊時要執行的動作是什麼，因為在這裡只是為了要顯示開燈狀態而已，點擊後不需要執行任何動作，所以這裡設定 action: none。
• style: 用來設定 image element 的顯示樣式，如果你剛好熟 CSS 的話，這裡可以用任何 CSS 屬性：
  • pointer-events: none 放這段是因為在我的做法，接下來每個區域都會 100% 疊圖在原圖上，為了讓點擊事件可以穿透，所以需要加上這行，以避免後面的疊圖影響前面的按鈕點擊。
  • width: 設定該圖片的寬，因為我使用的開燈圖是和底圖一樣大小，所以這裡設定 100%，效果是開燈圖和底圖一樣大。
  • top: 和 left: 作用是設定圖片顯示的位置，這裡把 top 和 left 都設定 50%，指的是將圖片從頂端往下推 “圖片高度 50%” 的距離，再從左往右推 “圖片寬度 50%” 的距離。
  • state_image: 設定 entity 在不同狀態時要顯示的圖片
    • 'off' : 因為不需要顯示任何圖片，所以放一張透明圖 /local/ui/平面圖/transparent.png (這裡就隨意放一張透明的 png 就行)。
    • 'on' : 這裡就放在前面已經準備好的開燈狀態圖片/local/ui/平面圖/客廳.png

到這裡，整體的 code 會長這樣，讓大家對一下功課：

type: custom:config-template-card
entities:
  - switch.xuan_guan_wu_kai_guan_2_l2
card:
  type: picture-elements
  image: ../local/ui/平面圖/平面圖.png
  style: null
  elements:
    - type: image
      entity: switch.xuan_guan_wu_kai_guan_2_l2
      tap_action:
        action: none
      style:
        pointer-events: none
        width: 100%
        top: 50%
        left: 50%
      state_image:
        'off': /local/ui/平面圖/transparent.png
        'on': /local/ui/平面圖/客廳.png

這時候你可以手動開關燈來驗證一下效果。

Step 5. 加入開關燈按鈕

同樣，先把下面的模板放到 code 末端。

    - type: image
      entity: 
      tap_action:
        action: toggle
      style:
        width: 
        top: 
        left: 
      state_image:
        'off':
        'on':

• entity: 的部分放上要控制的實體，這裡是要控制客廳燈光的開關，所以和前面用同一個實體 switch.xuan_guan_wu_kai_guan_2_l2。
• tap_action: 在這裡設定為 action: toggle 效果是點擊切換實體開或關。
• style: 的部分 width 可以控制開關燈按鈕的大小，top 和 left 和前面一樣是決定按鈕位置，這裡就完全依照你家的狀況去做設定。
• state_image:
  • 'off' : 放上關燈時的按鈕圖 /local/ui/icon/light-off.png
  • 'on' : 放上開燈時的按鈕圖 /local/ui/icon/light-on.png

來！對功課，加上開關燈按鈕後整體的 code 長這樣：

type: custom:config-template-card
entities:
  - switch.xuan_guan_wu_kai_guan_2_l2
card:
  type: picture-elements
  image: ../local/ui/平面圖/平面圖.png
  style: null
  elements:
    - type: image
      entity: switch.xuan_guan_wu_kai_guan_2_l2
      tap_action:
        action: none
      style:
        pointer-events: none
        width: 100%
        top: 50%
        left: 50%
      state_image:
        'off': /local/ui/平面圖/transparent.png
        'on': /local/ui/平面圖/客廳.png
    - type: image
      entity: switch.xuan_guan_wu_kai_guan_2_l2
      tap_action:
        action: toggle
      style:
        width: 5%
        top: 30%
        left: 73%
      state_image:
        'off': /local/ui/icon/light-off.png
        'on': /local/ui/icon/light-on.png

這時候客廳的開關燈控制就已經完成囉！按那個小按鈕試試看吧！

接下來就依樣畫葫蘆把家中各個空間的開關燈狀態和按鈕加入吧！你的 Floor plan dashboard 雛型就完成啦！

同場加映

這裡分享其他裝置控制的模板，大家就視需要取用囉！

窗簾控制

    - type: image
      entity: cover.zhu_wo_sha_lian # 換上你的窗簾實體
      tap_action:
        action: toggle
      style:
        top: 12%
        left: 30%
        width: 5%
      state_image: # 因為每種裝置的狀態值可能不同，所以這裡需要依照你的窗簾控制實體能區分哪些狀態再進行調整
        open: /local/ui/icon/curtains.png
        closed: /local/ui/icon/curtains-closed.png
        closing: /local/ui/icon/closing.gif
        opening: /local/ui/icon/opening.gif

冷氣控制

    - type: image
      entity: climate.ci_wo_leng_qi # 換上你的冷氣實體
      tap_action:
        action: more-info
      style:
        top: 69%
        left: 28%
        width: 5%
      state_image: # 一樣要看一下你的冷氣能區分哪些狀態進行調整
        cool: /local/ui/icon/air-conditioner-on.png
        heat: /local/ui/icon/air-conditioner-heat.png
        'off': /local/ui/icon/air-conditioner-off.png
        fan_only: /local/ui/icon/air-conditioner-fan.png

分享你的成果！

恭喜你完成你的 Floor plan dashboard 啦！留言分享你的成果吧！

如果你嘗試了不同的做法，也歡迎在留言區跟大家分享！

Home Assistant 最高！