設為首頁收藏本站
切換到窄版

 找回密碼
 立即註冊
    惟家的智能論壇»論壇 › 惟家智能生活討論區 › Home Assistant 討論 › 安裝 ha-floorplan，把你的 SVG 接上 HA（第一個會動的 ...
    返回列表 發新帖
    查看: 159|回覆: 0

    安裝 ha-floorplan，把你的 SVG 接上 HA（第一個會動的實體）

    [複製鏈接]
    charles

    !lvup!   100%

    386

    主題

    27

    回帖

    2200萬

    積分

    管理員

    積分
    22006063
    發表於 2026-9-21 12:59:30 | 顯示全部樓層 |閱讀模式
    這篇的內容（12 段）
    1. 第一步：用 HACS 安裝
    2. 第二步：建立一個 CSS 檔案
    3. 第三步：加入卡片
    4. 這段設定在講什麼
    5. 怎麼對應到 SVG 元素
    6. 四個核心的動作服務
    7. floorplan.image_set —— 換圖片
    8. 那個 ${...} 是什麼
    9. 第一次通常會遇到的四個狀況
    10. 狀況三：點得到但房間不變色
    11. 狀況四：圖片破掉
    12. 除錯的萬用招：記錄面板
    上一篇畫好 SVG 了，這篇把它接上 HA。

    目標：做完這篇，點一下 SVG 上的客廳，燈會開關。

    目標：做完這篇，點一下 SVG 上的客廳，燈會開關。

    第一步：用 HACS 安裝


    • 打開 HACS
    • 右上角三個點 → 自訂儲存庫（Custom repositories）
    • 網址填 experiencelovelace/ha-floorplan
    • 類別選 Dashboard（或 Lovelace，看你的 HACS 版本）
    • 加入之後，在 HACS 裡搜尋 floorplan → 下載
    • 重新整理瀏覽器（Ctrl+F5）


    有些版本的 HACS 已經收錄了，可以先直接搜尋看看，有的話就不用加自訂儲存庫。

    第二步：建立一個 CSS 檔案

    這一步不能省 —— ha-floorplan 一定要有一個樣式表。

    建立 /config/www/floorplan/home.css：
    1. /* 燈關著的房間 */
    2. .light-off {
    3.   fill: #F4F6FA;
    4.   transition: fill 0.8s ease-in-out;
    5.   cursor: pointer;
    6. }
    8. /* 燈開著的房間 */
    9. .light-on {
    10.   fill: #FFD54F;
    11.   transition: fill 0.8s ease-in-out;
    12.   cursor: pointer;
    13. }
    複製代碼

    就這樣，兩個 class。

    第三步：加入卡片

    在儀表板加一張手動卡片（Manual card），貼上：

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

    登入繼續閱讀使用 Google 登入
    回覆

    使用道具 舉報

    返回列表 發新帖
    高級模式
    B Color Image Link Quote Code Smilies
    您需要登入後纔可以回帖 登入 | 立即註冊

    本版積分規則

    延伸閱讀

    加入惟家 LINE 群 QR Code加入惟家 LINE 群

    Archiver|手機版|惟家的智能論壇

    GMT+8, 2026-11-10 00:38 , Processed in 0.118725 second(s), 25 queries .

    快速回覆 返回頂部 返回列表