【平面圖實作】從一張底圖開始：座標怎麼算、燈亮怎麼發光（picture-elements + card-mod）

charles

這篇的內容（12 段）

1. 做完這篇你會有什麼
2. 第一步：準備底圖
3. 6-2 下載 card-mod
4. 6-3 建議：加 extra_module_url
5. 進階：亮度也跟著變
6. 柔和版：呼吸燈
7. 進階：轉速對應實際風速
8. 第十步：深色模式的底圖
9. 動畫的四條原則
10. 四、動畫要有意義
11. 除錯對照表
12. 要不要改用 SVG

這篇從「手上只有一張平面圖檔」開始，做到燈亮時房間會慢慢亮起來、漏水時圖示會脈動、風扇開著會轉。

不需要 SVG，用 HA 內建的 picture-elements 卡片配 card-mod 就做得出來。

每一步都有「你會看到什麼」。做完第三步能自己確認第三步成功了，才走第四步。



做完這篇你會有什麼

• 一張可以點的互動平面圖：點房間開關燈、長按叫出詳細資訊
  
• 一套算座標的方法，不是靠一直試 —— 這是做平面圖最花時間的部分
  
• 四種動畫的完整寫法：漸亮、脈動、旋轉、依亮度變化
  
• 一份可以整段貼進去的成品設定
  

---

第一步：準備底圖

你需要一張俯視的平面圖。三個來源：

• 建商給的平面圖 —— 掃描或拍照後，用修圖軟體把尺寸標註、文字擦掉
  
• 自己畫 —— 用免費的 Sweet Home 3D 或 Floorplanner 畫完匯出俯視圖，這是最乾淨的做法
  
• 手繪拍照 —— 格線紙畫完拍照，拉一下對比度，其實很堪用
  

規格建議：

• 寬度 1200 到 1600 像素。再大沒有意義（手機螢幕根本顯示不了那麼細），只會拖慢載入
  
• 檔案壓到 500 KB 以內。平面圖是每次開頁面都要下載的東西，3 MB 的 PNG 會讓首頁多等兩秒
  
• 格式用 PNG（線條圖用 PNG 比 JPG 乾淨）。想更小可以存成 WebP，HA 直接支援
  
• 先想好深色模式。白底平面圖在深色模式下會很刺眼，等一下第十步會講怎麼準備第二張
  

壓縮工具：網頁版的 Squoosh 或 TinyPNG，拖進去就好，不用裝東西。

---

第二步：把底圖放進 HA，並確認真的讀得到

HA 的設定目錄底下有一個叫 www 的資料夾（沒有就自己建），裡面的東西會以 /local/ 開頭對外提供。

建立這個路徑：

1. <設定目錄>/www/floorplan/home.png

複製代碼

怎麼把檔案放進去，任選一種：

• File editor 附加元件 —— 設定 → 附加元件商店 → 搜尋 File editor → 安裝啟動，裡面有上傳按鈕
  
• Samba share 附加元件 —— 裝完之後可以直接從電腦的檔案總管拖進去，最方便
  
• Studio Code Server 附加元件 —— 如果你已經在用它編 YAML，左邊檔案樹直接拖曳上傳
  

⚠ 如果 www 資料夾是你這次才新建的，一定要重新啟動 HA（設定 → 系統 → 右上角 重新啟動）。HA 只在啟動時掃一次這個目錄，沒重啟的話新建的資料夾不會被提供出去，而症狀是圖片 404，看起來像是路徑打錯。

現在驗證一次（這步不要跳過）：在瀏覽器網址列直接打

1. http://你的HA位址:8123/local/floorplan/home.png

複製代碼

你會看到什麼：整個分頁就是你那張平面圖。

• 看到圖 → 成功，記住 `/local/floorplan/home.png` 這個路徑，下一步要用
  
• 看到 404 或空白頁 → 三個原因：檔名大小寫不一致（`Home.png` 和 `home.png` 是不同的檔案）、資料夾名稱打錯、或是 www 資料夾建立後沒重啟 HA
  

小技巧：之後你換了底圖但畫面還是舊的，就是瀏覽器快取。在路徑後面加一個版本號 `/local/floorplan/home.png?v=2`，改圖就把數字加一。

---

第三步：放上第一張 picture-elements 卡片

先放一張「只有底圖、什麼都沒有」的卡片，確認圖顯示得出來。

• 打開儀表板，按右上角鉛筆進編輯模式
  
• 按 + 新增卡片，往下捲到最底選 手動 Manual
  
• 把文字框清空，貼進下面這段
  

1. type: picture-elements
2. image: /local/floorplan/home.png
3. elements: []

複製代碼

你會看到什麼：右邊預覽區出現你的平面圖，滿版顯示，沒有任何圖示。

預覽是灰色破圖 → 路徑不對，回第二步用網址直接開一次確認。

預覽整張圖被壓扁或拉長 → 通常是你在卡片外層還包了 grid 或 sections 的格子尺寸限制。先把它單獨放在一個 view 裡調好，最後再搬。

按儲存。接下來我們要往這張圖上面放東西。

---

第四步：算座標（這是整篇最重要的一步）

picture-elements 的每個元素都用 `top` 和 `left` 定位，而且單位是百分比，不是像素。

• 原點在圖的左上角：`top: 0%` 是最上面，`left: 0%` 是最左邊
  
• 百分比是相對於「底圖本身」，所以卡片被縮放、換手機看，位置都不會跑掉
  
• 座標指的是元素的「中心點」，不是左上角 —— 因為 HA 預設給每個元素套了 `transform: translate(-50%, -50%)`
  

最後那一條非常重要，第七步的動畫踩坑就是它造成的，先記著。

方法一：用圖檔的像素座標換算（精準，推薦）

• 用任何看得到游標座標的軟體打開底圖 —— Windows 內建的「小畫家」就可以，游標移動時視窗左下角的狀態列會顯示像素座標
  
• 把游標移到你想放圖示的位置（例如客廳天花板燈的位置），把那組數字記下來，假設是 352, 240
  
• 再記下整張圖的尺寸（小畫家狀態列右邊也有，假設是 1600 x 1000）
  
• 套公式：
  

1. left(%) = X 座標 ÷ 圖寬  × 100
2. top (%) = Y 座標 ÷ 圖高  × 100
4. 以上面的數字代進去：
5. left = 352 ÷ 1600 × 100 = 22
6. top  = 240 ÷ 1000 × 100 = 24
8. 寫成設定就是：
9. style:
10.   top: 24%
11.   left: 22%

複製代碼

以下還有約 80% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入