|
|
上一篇的圖示位置可能還很亂。
這篇講怎麼快速把它們放到對的位置。
方法一：用圖形介面拖拉（最直覺）
其實 HA 的 Picture Elements 編輯器可以直接拖。
- 進編輯模式，點那張卡片的編輯
- 不要切到 YAML 模式，留在圖形介面
- 左邊會列出所有元素，點一個
- 直接在右邊的預覽圖上把它拖到你要的位置
優點：最直覺，看到哪裡就放哪裡。
缺點：
- 元素多了之後很難點到想要的那個
- 拖出來的數字會很醜（例如 23.47%）
- 沒辦法批次調整
我的做法：先用拖的抓大概，再切到 YAML 把數字修整齊。
方法二：用小畫家量（最準）
這個方法很土，但非常有效。
- 用小畫家（或任何看得到像素座標的工具）打開你的平面圖
- 先看圖片的總寬高（小畫家左下角會顯示，例如 1000 × 620）
- 滑鼠移到你想放圖示的位置，左下角會顯示座標（例如 220, 148）
- 算百分比：
- left = 220 ÷ 1000 = 0.22 → 22%
- top = 148 ÷ 620 = 0.239 → 24%
算式很簡單：那個點的像素座標 ÷ 圖片總尺寸 × 100。
懶得算的話：把圖片縮成 寬 100 px 再量，
這樣量到的數字直接就是百分比（高度也要同樣處理）。
Mac 的話用「預覽程式」，或者直接用線上工具
（搜尋「image coordinates picker」有很多）。
方法三：先貼一張「格線圖」（最快）
這是我自己最常用的方法。
做法：先在平面圖上疊一層 25% 的格線，
調完座標之後再拿掉。
- type: picture-elements
- image: /local/floorplan/home.png
- elements:
- # === 暫時的格線，調完就刪掉 ===
- - type: state-label
- entity: sun.sun
- style:
- top: 25%
- left: 25%
- color: red
- font-size: 14px
- background: white
- # 這個元素的內容不重要，重點是它出現在 (25%, 25%)
- # ... 你真正的元素
更實用的版本：用 icon 元素，一次放九個當參考點：
- - type: icon
- icon: mdi:plus
- style: {top: 25%, left: 25%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 25%, left: 50%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 25%, left: 75%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 50%, left: 25%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 50%, left: 50%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 50%, left: 75%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 75%, left: 25%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 75%, left: 50%, color: red}
- - type: icon
- icon: mdi:plus
- style: {top: 75%, left: 75%, color: red}
九個紅色的十字出現在圖上，你就有參考點了 ——
「客廳的燈大概在左上那個十字和中間十字之間」，
一看就知道是 (35%, 25%) 左右。
調完之後把這九個元素刪掉。
五個讓座標更好調的技巧
一、YAML 的一行寫法
style 可以寫成一行，看起來清爽很多：
- - type: state-icon
- entity: light.living_room
- 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 最容易踩的一個坑。 |
|
窺視卡
雷達卡
發表於 
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
照妖鏡