讓房間在平面圖上亮起來：image 元素與圖層順序（最容易踩的坑）

charles

到目前為止，燈開了只是圖示變色。

這篇要做到整個房間亮起來。



原理很簡單

準備一張「客廳亮燈」的圖片，燈開的時候顯示它，關的時候顯示透明圖。

就這樣。沒有魔法。

第一步：做出「亮燈圖層」

這是唯一需要動手的部分。你要做的是：

一張跟底圖一樣大的圖片，只有客廳的位置有顏色，其他地方全透明。

怎麼做（用小畫家 3D 或任何有「透明背景」功能的工具）：

• 開一張跟底圖一樣尺寸的畫布（例如 1000 × 620）
  
• 背景設成透明
  
• 在客廳的位置畫一個半透明的黃色方塊
  
• 另存成 PNG（一定要 PNG，JPG 不支援透明）
  
• 檔名例如 living_on.png
  

顏色建議：

• 暖黃色：#FFD54F 或 #FFC107
  
• 透明度 30-50%（太不透明會蓋住底圖的細節）
  

用 Inkscape 的話更簡單：

• 開啟你的平面圖 SVG
  
• 複製客廳那個方形
  
• 填充改成黃色、透明度 40%
  
• 把其他東西都刪掉
  
• 匯出 PNG
  

第二步：把圖層檔案放進去

1. /config/www/floorplan/
2. ├── home.png              ← 底圖
3. ├── transparent.png       ← 全透明（上一篇講過）
4. └── rooms/
5.     ├── living_on.png
6.     ├── dining_on.png
7.     ├── kitchen_on.png
8.     ├── bedroom_on.png
9.     ├── bathroom_on.png
10.     └── second_bedroom_on.png

複製代碼

第三步：加上 image 元素

1. type: picture-elements
2. image: /local/floorplan/home.png
3. elements:
4.   # ========== 亮燈圖層（一定要放在最前面！）==========
5.   - type: image
6.     entity: light.living_room
7.     state_image:
8.       "on": /local/floorplan/rooms/living_on.png
9.       "off": /local/floorplan/transparent.png
10.     style:
11.       top: 50%
12.       left: 50%
13.       width: 100%
14.     tap_action:
15.       action: toggle
17.   - type: image
18.     entity: light.kitchen
19.     state_image:
20.       "on": /local/floorplan/rooms/kitchen_on.png
21.       "off": /local/floorplan/transparent.png
22.     style:
23.       top: 50%
24.       left: 50%
25.       width: 100%
26.     tap_action:
27.       action: toggle
29.   # ========== 圖示（一定要放在後面！）==========
30.   - type: state-icon
31.     entity: light.living_room
32.     style: {top: 24%, left: 22%}
34.   - type: state-icon
35.     entity: light.kitchen
36.     style: {top: 24%, left: 84%}

複製代碼

幾個重點

一、圖層是整張圖的大小，座標都是 (50%, 50%)

因為亮燈圖層本身就是一張跟底圖一樣大的圖，
只是大部分是透明的。

所以它要完全對齊底圖 → 中心放在 (50%, 50%)、寬度 100%。

二、`"on"` 和 `"off"` 一定要加引號

這是 YAML 的老問題：不加引號的話 on 會被讀成布林值 True，
然後就對不上實體的狀態字串 "on"。

三、tap_action: toggle 讓整個房間可以點

加了這個之後，點房間的任何地方都能開關燈，
不一定要點到那個小圖示。

在手機上這個差別很大。



最容易踩的坑：圖層順序

這是 Picture Elements 最常見的問題，而且症狀很怪。

規則：

elements 清單裡，越後面的元素蓋在越前面的元素上面。

所以：

• image 元素要放在最前面
  
• state-icon 要放在後面
  

順序寫反的話會發生什麼：

• 圖示被亮燈圖層蓋住，看不到
  
• 而且點不到 —— 你點下去點到的是那張透明的圖層
  
• 最詭異的是：燈關著的時候正常，開了之後圖示就消失
  [  （因為關的時候顯示的是透明圖，透明圖也會擋點擊）
  

我第一次做的時候在這裡卡了快一小時，
因為症狀看起來像「圖示壞掉」，完全想不到是順序問題。

記法：先鋪地板，再放家具。

另一種做法：用 state_filter（不用做圖層檔案）

如果你不想做一堆圖層 PNG，有一個偷吃步：

1.   - type: image
2.     entity: light.living_room
3.     image: /local/floorplan/home.png
4.     state_filter:
5.       "on": brightness(115%) saturate(1.3)
6.       "off": brightness(100%)
7.     style:
8.       top: 50%
9.       left: 50%
10.       width: 100%

複製代碼

這會對整張圖套用濾鏡，燈開的時候整張圖變亮。

• 優點：完全不用做圖層檔案
  
• 缺點：是整張圖一起變，沒辦法只亮一個房間
  

所以只適合「只有一盞主燈」的小空間，
或者拿來做「有人在家 / 沒人在家」的整體氛圍變化。

進階：亮度也要對應

想讓「燈越亮，房間越黃」的話，用 opacity 配範本：

1.   - type: image
2.     entity: light.living_room
3.     image: /local/floorplan/rooms/living_on.png
4.     style:
5.       top: 50%
6.       left: 50%
7.       width: 100%
8.       opacity: >
9.         {{ (state_attr('light.living_room','brightness') | int(0) / 255)
10.            | round(2) }}

複製代碼

注意：Picture Elements 的 style 支援範本，
這是很多人不知道的功能。

燈關著的時候 brightness 是 None，
所以 | int(0) 的預設值不能省 —— 少了它整個元素會報錯。



做到這裡的成果

• 燈開著的房間會整塊亮起來
  
• 點房間的任何地方都能開關燈
  
• 一眼就看出家裡哪裡還開著燈
  

這時候你的平面圖已經比大多數人的好用了。

檢查清單

• 所有 image 元素都在 state-icon 之前
  
• "on" 和 "off" 都有加引號
  
• 圖層 PNG 跟底圖同樣尺寸
  
• 圖層 PNG 是透明背景（不是白色）
  
• 每個圖層都有 width: 100% 和 top/left: 50%
  

---

下一篇：在平面圖上做更多控制 ——
點一下開燈、長按調亮度、雙擊跳到那個房間的詳細頁。