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

 找回密碼
 立即註冊
    惟家的智能論壇»論壇 › 惟家智能生活討論區 › Home Assistant 討論 › ha-floorplan 動畫實作：燈漸亮、門轉開、風扇轉（含可 ...
    返回列表 發新帖
    查看: 159|回覆: 0

    ha-floorplan 動畫實作：燈漸亮、門轉開、風扇轉（含可直接貼的 SVG／CSS／YAML）

    [複製鏈接]
    charles

    !lvup!   100%

    386

    主題

    27

    回帖

    2200萬

    積分

    管理員

    積分
    22006063
    發表於 2026-9-21 12:59:34 | 顯示全部樓層 |閱讀模式
    這篇的內容（18 段）
    1. 步驟 1：裝 ha-floorplan
    2. 步驟 2：放一個最小的 SVG
    3. 步驟 3：放一個最小的 CSS
    4. 步驟 4：加卡片
    5. 步驟 5：確認它活著
    6. 動畫二：亮度對應真實亮度
    7. 動畫三：燈的光暈
    8. 動畫四：門真的轉開
    9. 動畫五：風扇旋轉
    10. 動畫六：警報脈動
    11. 動畫七：房間有人的柔和呼吸
    12. 完整的 CSS 檔
    13. 完整的卡片 YAML
    14. 三個最常見的卡關
    15. 一、元素飛到畫面外
    16. 二、CSS 改了沒反應
    17. 三、動畫很卡
    18. 還想再往下走的話
    這篇要做出來的東西：一張會動的家裡平面圖。燈開的時候房間慢慢變黃、門開的時候門片真的轉開、風扇轉起來、漏水的時候紅點在閃。

    這篇要做出來的東西

    不需要任何繪圖基礎。下面第一段會給你一個「兩個房間」的最小檔案，直接複製貼上就會動，你先讓它動起來，再把動畫一個一個加上去。每加一個都有「你會看到什麼」，看不到就知道是哪一步沒成。

    這篇用到的工具叫 ha-floorplan，是 HACS 上的自訂卡片。它的工作只有一件事：

    實體狀態變了，就去改 SVG 裡某個圖形的 class 或 style。

    剩下全部是 CSS 的事。所以只要是 CSS 做得到的效果，平面圖上都做得到。

    版本要求：ha-floorplan v1.2.0 以上（2026-07 發布）。這篇用到的「一條規則對應多個圖形」在 v1.2.0 才修好，舊版會有部分圖形沒反應而且不報錯。

    步驟 1：裝 ha-floorplan

    前提是你已經有 HACS。


    • HACS → 搜尋 floor
    • 找到 ha-floorplan → 下載
    • 重新整理瀏覽器（Ctrl+F5）


    你會看到什麼：之後在儀表板「新增卡片」的清單最下方，會多出一張叫 Floorplan Card 的卡片。

    看不到那張卡片，代表資源沒載入。先 Ctrl+F5 清一次快取；還是沒有就去「設定 → 儀表板 → 右上角三點 → 資源」，確認清單裡有一筆 /hacsfiles/ha-floorplan/floorplan.js。

    步驟 2：放一個最小的 SVG

    在 Home Assistant 的設定目錄底下建一個資料夾 www/floorplan/（`www` 對外的網址是 `/local/`，這是 HA 的固定規則）。

    用「檔案編輯器」或 Samba 建一個檔案 www/floorplan/home.svg，內容完整貼這一份：
    1. <svg xmlns="http://www.w3.org/2000/svg"
    2.      width="600" height="320" viewBox="0 0 600 320">
    4.   <!-- 光暈濾鏡，後面動畫三會用到 -->
    5.   <defs>
    6.     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
    7.       <feGaussianBlur stdDeviation="8" result="b"/>
    8.       <feMerge>
    9.         <feMergeNode in="b"/>
    10.         <feMergeNode in="SourceGraphic"/>
    11.       </feMerge>
    12.     </filter>
    13.   </defs>
    15.   <!-- 兩個房間。注意 id 是純英文，沒有點號 -->
    16.   <rect id="room-living"  x="0"   y="0" width="360" height="320"/>
    17.   <rect id="room-bedroom" x="360" y="0" width="240" height="320"/>
    19.   <!-- 房間名稱，純裝飾 -->
    20.   <text class="room-name" x="14"  y="30">客廳</text>
    21.   <text class="room-name" x="374" y="30">臥室</text>
    23.   <!-- 門片，動畫四會用到。畫成一條細長方形 -->
    24.   <rect id="door-front" x="40" y="312" width="80" height="6"/>
    26.   <!-- 風扇葉片，動畫五會用到 -->
    27.   <g id="fan-living">
    28.     <rect x="-3" y="-26" width="6" height="52" transform="translate(180,170)"/>
    29.     <rect x="-26" y="-3" width="52" height="6" transform="translate(180,170)"/>
    30.   </g>
    32.   <!-- 漏水警示圓點，動畫六會用到 -->
    33.   <circle id="alert-leak" class="alert-idle" cx="480" cy="250" r="14"/>
    34. </svg>
    複製代碼

    為什麼 id 用 `room-living` 而不是 `light.living_room`

    很多舊教學教你把 SVG 的 id 直接寫成實體 ID。不要這樣做，三個理由：


    • CSS 選擇器碰到點號要跳脫，變成 `#light\.living_room`，很容易打錯。ha-floorplan 官方文件自己就寫「強烈建議完全不要在 id 裡用點號」
    • 一個實體要同時驅動兩個圖形（例如房間底色 + 一個小燈泡圖示）就做不到，因為 id 不能重複
    • 哪天換一顆燈，你要回去改 SVG


    正確做法是在 YAML 裡把「實體」和「圖形」配對起來，下面會用到。

    步驟 3：放一個最小的 CSS

    同一個資料夾，建 www/floorplan/home.css：
    1. /* 兩個房間的共同外框 */
    2. #room-living, #room-bedroom {
    3.   stroke: #3A4250;
    4.   stroke-width: 3;
    5.   cursor: pointer;
    6. }
    8. .room-name {
    9.   font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
    10.   font-size: 18px;
    11.   font-weight: bold;
    12.   fill: #344052;
    13.   pointer-events: none;
    14. }
    16. /* 燈：先只有換色，動畫下一段才加 */
    17. .light-off { fill: #F4F6FA; }
    18. .light-on  { fill: #FFD54F; }
    20. .alert-idle { opacity: 0; }
    複製代碼

    pointer-events: none 這一行不要省。房間名稱的文字疊在房間上面，沒有這一行的話，點到字的位置會點不到房間，使用者會覺得「有時候點得到有時候點不到」。

    步驟 4：加卡片

    儀表板 → 編輯 → 新增卡片 → 拉到最下面選 Floorplan Card → 右上角切到「顯示程式碼編輯器」，整份換成：

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

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

    使用道具 舉報

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

    本版積分規則

    延伸閱讀

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

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

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

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