在 HA 裡做「會動的家裡平面圖」：先看成果，再決定做哪一種

charles

這是一個系列的第一篇。

我們要做的東西是這樣：一張你家的平面圖，燈開著的房間會亮起來，
點一下房間就能開關燈。



上面這張就是我們整個系列要用的範例 —— 一個兩房的家。

黃色的房間代表燈開著。你家格局不一樣沒關係，做法完全一樣。

為什麼值得做

老實說，平面圖不是「比較快」。
要開客廳的燈，點一張 tile 卡片跟點平面圖上的客廳，速度差不多。

它的價值在別的地方：

• 一眼看完整個家 —— 哪裡的燈還開著、哪扇窗沒關，不用捲三頁
  
• 家人看得懂 —— 這是最大的好處。不用教，看到自己家的形狀就會用
  
• 放在平板或電視上很好看
  
• 做起來很有成就感（這是真的理由）
  

三種做法，先選一條

這是整個系列最重要的一個決定。選錯的話會走很多冤枉路。



做法一：Picture Elements（HA 內建）

• 不用裝任何東西，HA 本來就有
  
• 用一張圖片當底圖，在上面放「元素」（圖示、數值、圖片）
  
• 座標用百分比，在介面上拖拉就能調
  
• 可以做簡單的動畫（配 card-mod）
  
• 缺點：房間要「整塊變色」的話，要另外準備每個房間亮燈的圖片
  

做法二：ha-floorplan（HACS 外掛，用 SVG）

• 要先在 HACS 裝，而且要用 SVG 格式的平面圖
  
• 每個房間、每個圖示都是 SVG 裡的一個元素，
    把元素的 id 設成實體 ID 就接起來了
  
• 動畫很強 —— 用 CSS 就能做漸變、旋轉、發光、脈動
  
• 缺點：要會畫 SVG（用 Inkscape，免費），前期投入比較多
  

做法三：不做平面圖，用 Sections + Area 卡片

• HA 2026 的 Sections 版面 + 區域卡片，其實已經很好用
  
• 零成本、零維護
  
• 缺點：沒有「家的形狀」，家人的直覺度差一點
  

我的建議



先做 Picture Elements。

理由：

• 一個下午就能看到成果，不用先學 SVG
  
• 做完之後你會知道自己真正想要什麼
  
• 九成的人做到這裡就滿足了
  
• 真的不夠再升級到 SVG，底圖和座標的概念是通的
  

我自己就是先做 Picture Elements 用了半年，
後來想要「房間整塊漸變顏色」才換成 SVG。

這個系列的路線圖

• 第 1-3 篇：量你家、畫出平面圖、把圖放進 HA
  
• 第 4-7 篇：做出第一張可以點的平面圖（Picture Elements）
  
• 第 8-10 篇：加上感測器數值、條件顯示、動畫
  
• 第 11-13 篇：升級到 SVG，做出真正會動的效果
  

每一篇做完都會有一個看得到的成果，不會做到第三篇還是一片空白。

你需要準備什麼

• 一個能跑的 Home Assistant（廢話，但還是講一下）
  
• 至少三、四個可以控制的燈或開關（不然做出來沒東西可看）
  
• 一支捲尺（下一篇會用到）
  
• 大概兩三個晚上的時間
  

不需要：

• 不需要會寫程式
  
• 不需要會畫圖
  
• 不需要買任何東西
  

一個提醒

做這個之前，先確認你的實體 ID 已經整理過了。

平面圖會引用一堆實體 ID，做完之後才想改名的話，
你要回去改十幾個地方。

如果你的實體還叫 light.0x00158d0004a1b2c3 這種名字，
先花十分鐘改成 light.living_room_main 再開始。

---

下一篇：怎麼量你家。

完全沒畫過圖也沒關係，我會從「拿捲尺量什麼」開始講。