會動的家裡平面圖（一）：半小時做出第一張，再決定要不要走完

charles

這篇的內容（6 段）

1. 步驟 1：準備一張底圖
2. 步驟 2：把圖放進 HA
3. 步驟 3：建立卡片
4. ⚠ 這裡不要裝 card-mod
5. 接下來這個系列
6. 你需要準備的東西

這個系列要做的東西是：一張你家的平面圖，燈開著的房間會整塊亮起來，點一下就能開關。



上面這張是整個系列會用的範例 —— 一個兩房的家，黃色代表燈開著。
你家格局不一樣完全沒關係，做法一模一樣。

這一篇不是「先看比較再決定」，是「先做出一張會動的，再決定要不要做漂亮的」。
照做大約半小時，結束時你的儀表板上會有一張可以點的平面圖。

開始之前，先花十分鐘整理實體 ID

平面圖會引用一大堆實體 ID。做完之後才想改名的話，你要回去改十幾個地方。

設定 → 裝置與服務 → 實體，在篩選欄打 `light.`。

你會看到什麼：一排燈的實體。如果有 `light.0x00158d0004a1b2c3`
這種一串亂碼的名字，現在就改掉：

• 點進去 → 齒輪 → 把實體 ID 改成 `light.living_room` 這種看得懂的
  
• HA 會問要不要一起更新引用到它的地方，選更新
  

實體 ID 一律用英文。如果你把名稱取成中文，HA 會把它音譯成拼音
（「客廳主燈」變成 `light.ke_ting_zhu_deng`），
之後你在 YAML 裡寫 `light.客廳主燈` 會指到一個不存在的東西，
而且不會報錯，只是點了沒反應。

至少整理出三四個燈或開關，不然做出來沒東西可看。

步驟 1：準備一張底圖

這一篇不需要你會畫圖。任何一張圖都可以先用：

• 最快：把建商給的格局圖、或權狀上的平面圖用手機拍下來
  
• 次快：591 或房仲網站上同社區同戶型的格局圖，截圖
  
• 都沒有：先隨便找一張純色的圖（或用手機的繪圖 App 畫幾個方框），
  反正這一篇的重點是把流程跑通
  

拍照的話做兩件事：裁切到只剩平面圖本身、把亮度拉高一點。
底圖越淡，後面放上去的色塊和圖示越清楚。

這一篇夠用的規格：寬度 1000 到 2000 像素、PNG 或 JPG、檔案 500 KB 以內。
（怎麼畫一張真正漂亮的，是這個系列第三篇的事，那一篇會從零做完。）

步驟 2：把圖放進 HA

HA 有一個公開的靜態資料夾：`/config/www/` 這個目錄，對外的網址是 `/local/`。

也就是說 `/config/www/floorplan.png` 這個檔，

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

登入繼續閱讀使用 Google 登入