平面圖的座標怎麼抓？三個不用算數學的方法

charles

上一篇的圖示位置可能還很亂。

這篇講怎麼快速把它們放到對的位置。



方法一：用圖形介面拖拉（最直覺）

其實 HA 的 Picture Elements 編輯器可以直接拖。

• 進編輯模式，點那張卡片的編輯
  
• 不要切到 YAML 模式，留在圖形介面
  
• 左邊會列出所有元素，點一個
  
• 直接在右邊的預覽圖上把它拖到你要的位置
  

優點：最直覺，看到哪裡就放哪裡。

缺點：

• 元素多了之後很難點到想要的那個
  
• 拖出來的數字會很醜（例如 23.47%）
  
• 沒辦法批次調整
  

我的做法：先用拖的抓大概，再切到 YAML 把數字修整齊。

方法二：用小畫家量（最準）

這個方法很土，但非常有效。

• 用小畫家（或任何看得到像素座標的工具）打開你的平面圖
  
• 先看圖片的總寬高（小畫家左下角會顯示，例如 1000 × 620）
  
• 滑鼠移到你想放圖示的位置，左下角會顯示座標（例如 220, 148）
  
• 算百分比：
  

1. left = 220 ÷ 1000 = 0.22 → 22%
2. top  = 148 ÷ 620  = 0.239 → 24%

複製代碼

算式很簡單：那個點的像素座標 ÷ 圖片總尺寸 × 100。

懶得算的話：把圖片縮成 寬 100 px 再量，
這樣量到的數字直接就是百分比（高度也要同樣處理）。

Mac 的話用「預覽程式」，或者直接用線上工具
（搜尋「image coordinates picker」有很多）。

方法三：先貼一張「格線圖」（最快）

這是我自己最常用的方法。

做法：先在平面圖上疊一層 25% 的格線，
調完座標之後再拿掉。

1. type: picture-elements
2. image: /local/floorplan/home.png
3. elements:
4.   # === 暫時的格線，調完就刪掉 ===
5.   - type: state-label
6.     entity: sun.sun
7.     style:
8.       top: 25%
9.       left: 25%
10.       color: red
11.       font-size: 14px
12.       background: white
13.     # 這個元素的內容不重要，重點是它出現在 (25%, 25%)
15.   # ... 你真正的元素

複製代碼

更實用的版本：用 icon 元素，一次放九個當參考點：

1.   - type: icon
2.     icon: mdi:plus
3.     style: {top: 25%, left: 25%, color: red}
4.   - type: icon
5.     icon: mdi:plus
6.     style: {top: 25%, left: 50%, color: red}
7.   - type: icon
8.     icon: mdi:plus
9.     style: {top: 25%, left: 75%, color: red}
10.   - type: icon
11.     icon: mdi:plus
12.     style: {top: 50%, left: 25%, color: red}
13.   - type: icon
14.     icon: mdi:plus
15.     style: {top: 50%, left: 50%, color: red}
16.   - type: icon
17.     icon: mdi:plus
18.     style: {top: 50%, left: 75%, color: red}
19.   - type: icon
20.     icon: mdi:plus
21.     style: {top: 75%, left: 25%, color: red}
22.   - type: icon
23.     icon: mdi:plus
24.     style: {top: 75%, left: 50%, color: red}
25.   - type: icon
26.     icon: mdi:plus
27.     style: {top: 75%, left: 75%, color: red}

複製代碼

九個紅色的十字出現在圖上，你就有參考點了 ——
「客廳的燈大概在左上那個十字和中間十字之間」，
一看就知道是 (35%, 25%) 左右。

調完之後把這九個元素刪掉。



五個讓座標更好調的技巧

一、YAML 的一行寫法

style 可以寫成一行，看起來清爽很多：

1.   - type: state-icon
2.     entity: light.living_room
3.     style: {top: 24%, left: 22%}

複製代碼

這樣一個元素只要三行，一頁可以看到十幾個。

二、用整數，不要用小數

拖出來的 23.47% 改成 23% 就好。

沒人看得出 0.47% 的差別，但整數好維護太多。

三、同一排的元素用同一個 top

客廳、餐廳、廚房都在上排 → top 都用 24%。

對齊之後整張圖會好看很多，而且要整排往下移的時候，
用搜尋取代一次改完。

四、先做一個房間，確認之後再複製

不要一次寫八個然後全部都要調。

做一個、調到滿意、再複製七份改座標和實體。

五、記得留白

圖示不要貼著牆壁放，離牆至少 5%。

貼太近的話在手機上會很難點（手指比滑鼠粗很多）。

手機上的特別考量

在電腦上調好的平面圖，到手機上可能會很難點。

原因：

• 手機螢幕小，整張圖被縮小
  
• 手指的觸控範圍大概是 44×44 px
  

檢查方法：調完之後一定要用手機實際點一次。

如果太難點：

• 把圖示調大（`--mdc-icon-size: 44px`）
  
• 減少元素數量
  
• 或者手機用另一個版面（之後的篇章會講）
  

一個省事的建議：不要放太多



一張平面圖上超過 30-40 個元素就會開始覺得亂。

我的建議：

• 每個房間 1-3 個元素
  
• 主燈一定要有
  
• 溫濕度選幾個重要的房間放就好，不用每間都放
  
• 門窗感應器只放大門和對外窗
  
• 看不到的東西不要放（例如 Zigbee 訊號品質）
  

平面圖的價值是「一眼看完」，塞太多就失去意義了。

真的想看全部的話，另外做一頁清單式的儀表板。

---

下一篇：讓燈在平面圖上真的「亮起來」。

不是圖示變色而已，是整個房間變亮。
這篇會講 Picture Elements 最容易踩的一個坑。