你的第一張可點平面圖：Picture Elements 從零開始

charles

圖片準備好了，這篇做出第一張可以點的平面圖。

做完這篇你就有成果了。



第一步：加入卡片

照這個順序點：

• 打開你的儀表板
  
• 右上角鉛筆圖示（編輯模式）
  
• ＋ 新增卡片
  
• 搜尋框打 picture
  
• 選 圖片元素（Picture Elements）
  

第二步：先把預設的元素刪掉

HA 會自動幫你放一個 State Badge 的元素當範例。

先刪掉它，不然會擋住你的視線。

第三步：切到 YAML 模式

這是我的建議：一開始就用 YAML，不要用圖形介面。

理由：

• 圖形介面調座標很慢（一格一格點）
  
• YAML 可以複製貼上，做第二個房間只要改兩個字
  
• 出問題的時候你看得到全貌
  

卡片編輯器的左下角有「顯示程式碼編輯器」，點下去。

第四步：貼上這段

1. type: picture-elements
2. image: /local/floorplan/home.png
3. elements:
4.   - type: state-icon
5.     entity: light.living_room
6.     style:
7.       top: 24%
8.       left: 22%

複製代碼

按「儲存」。

你應該會看到：平面圖出現了，而且客廳的位置有一個燈泡圖示。

點那個圖示 —— 燈會開關。



座標是怎麼回事

這是整個 Picture Elements 最重要的觀念。

• left = 從左邊算起，佔整張圖寬度的百分之幾
  
• top = 從上面算起，佔整張圖高度的百分之幾
  
• 左上角是 (0%, 0%)，右下角是 (100%, 100%)
  

三個重點：

一、是百分比，不是像素

所以換一張大小不同的圖，元素不會跑掉。
在手機上看、在平板上看，位置都一樣。

二、座標指的是「元素的正中心」

HA 預設會幫元素加上 transform: translate(-50%, -50%)，
意思是「把元素的中心對到那個座標」。

所以你填 (22%, 24%)，圖示的正中心就在那裡。

三、不要寫 top: 24（要寫 24%）

漏掉百分號的話，CSS 會不知道單位，元素可能跑到左上角。

第五步：把其他房間加上去

複製貼上，改實體 ID 和座標：

1. type: picture-elements
2. image: /local/floorplan/home.png
3. elements:
4.   - type: state-icon
5.     entity: light.living_room
6.     style:
7.       top: 24%
8.       left: 22%
10.   - type: state-icon
11.     entity: light.dining_room
12.     style:
13.       top: 28%
14.       left: 55%
16.   - type: state-icon
17.     entity: light.kitchen
18.     style:
19.       top: 24%
20.       left: 84%
22.   - type: state-icon
23.     entity: light.bedroom
24.     style:
25.       top: 74%
26.       left: 36%
28.   - type: state-icon
29.     entity: light.bathroom
30.     style:
31.       top: 74%
32.       left: 59%
34.   - type: state-icon
35.     entity: light.second_bedroom
36.     style:
37.       top: 74%
38.       left: 86%

複製代碼

座標不用一次抓準 —— 下一篇會講三個快速抓座標的方法。

先隨便填，看到圖示出現之後再慢慢調。



四種最常用的元素類型

1. state-icon（狀態圖示）

• 顯示實體的圖示
  
• 會依狀態變色（燈開了變黃色）
  
• 點一下會切換（燈就是開關）
  
• 這是平面圖上最主要的元素
  

2. state-label（狀態文字）

1.   - type: state-label
2.     entity: sensor.living_room_temperature
3.     style:
4.       top: 44%
5.       left: 34%

複製代碼

顯示數值，例如「26.5 °C」。

3. icon（固定圖示）

1.   - type: icon
2.     icon: mdi:door
3.     style:
4.       top: 92%
5.       left: 9%

複製代碼

不會變色、不會依狀態改變，純粹是裝飾或標記。

4. image（圖片）

放一張圖片上去。這是做「亮燈效果」的關鍵，
第 7 篇會專門講。

調整圖示大小和顏色

預設的圖示可能太小或太大：

1.   - type: state-icon
2.     entity: light.living_room
3.     style:
4.       top: 24%
5.       left: 22%
6.       "--mdc-icon-size": 40px        # 圖示大小
7.       color: white                   # 圖示顏色（關的時候）

複製代碼

注意 `--mdc-icon-size` 要加引號，因為它以減號開頭，
YAML 不加引號會解析錯。

想讓開和關的顏色不一樣：

1.       "--paper-item-icon-color": "#888888"        # 關的時候
2.       "--paper-item-icon-active-color": "#FFC107"  # 開的時候

複製代碼

常見問題

問題一：圖示都擠在左上角

• 座標漏了百分號
  
• 或者 style 的縮排錯了（要在 element 底下多縮兩格）
  

問題二：點了沒反應

• 實體 ID 打錯了（去開發者工具 → 狀態複製正確的）
  
• 或者那個實體不能被切換（例如 sensor 就不行）
  

問題三：圖片沒出來，只有圖示

• 圖片路徑錯了。回上一篇，在瀏覽器直接打開那個網址測試
  

問題四：儲存之後卡片變成紅色錯誤

• YAML 縮排錯了。每一層縮兩個空格，不要用 Tab
  

做到這裡你應該有

• 一張你家的平面圖
  
• 上面有幾個燈泡圖示
  
• 點下去燈真的會開關
  
• 燈開著的時候圖示會變成黃色
  

這樣就已經可以用了。

接下來的幾篇是讓它更好看、更好用，但現在這個版本就能上線給家人用。

---

下一篇：座標怎麼快速抓準。

我會講三個方法，都不用算數學。