平面圖房間顏色隨溫度連續變化：HSL 漸變的完整做法

charles

這篇的內容（8 段）

1. 步驟 3：把溫度接上去
2. 怎麼不用等就驗證整條漸變
3. 那段算式在做什麼
4. 範圍（lo 和 hi）怎麼挑
5. 飽和度和亮度
6. 一個配色上的提醒
7. 步驟 5：把數字也放上去
8. 效能：這件事要不要擔心

這篇要做出來的東西：平面圖上每個房間的顏色反映它現在的溫度。20 度是藍的、25 度是綠的、30 度是紅的，而且是連續漸變，不是三段跳。



一眼掃過去就知道哪間熱哪間冷，不用一顆一顆點開看數字。

這篇用的是 HACS 上的 ha-floorplan（v1.2.0 以上）。下面會從一個最小的可跑檔案開始，做完之後你會有一張會隨溫度變色的平面圖，外加房間裡的數字。

步驟 1：準備一個最小的平面圖

在 Home Assistant 設定目錄底下建 www/floorplan/ 資料夾，放這兩個檔。

www/floorplan/home.svg：

1. <svg xmlns="http://www.w3.org/2000/svg"
2.      width="600" height="320" viewBox="0 0 600 320">
3.   <rect id="room-living"  x="0"   y="0" width="360" height="320"/>
4.   <rect id="room-bedroom" x="360" y="0" width="240" height="320"/>
6.   <text class="room-name" x="14"  y="30">客廳</text>
7.   <text class="room-name" x="374" y="30">臥室</text>
9.   <!-- 溫度數字，步驟 5 會用到。初始內容故意放 "--" -->
10.   <text id="temp-living"  class="sensor-text" x="150" y="180">--</text>
11.   <text id="temp-bedroom" class="sensor-text" x="450" y="180">--</text>
12. </svg>

複製代碼

www/floorplan/home.css：

1. svg {
2.   font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
3. }
5. #room-living, #room-bedroom {
6.   fill: #E0E0E0;
7.   stroke: #3A4250;
8.   stroke-width: 3;
9. }
11. .room-name {
12.   font-size: 18px;
13.   font-weight: bold;
14.   fill: #344052;
15.   pointer-events: none;
16. }
18. .sensor-text {
19.   font-size: 26px;
20.   font-weight: bold;
21.   fill: #2C3440;
22.   text-anchor: middle;
23.   pointer-events: none;
24. }

複製代碼

SVG 的 id 一律用純英文、不要用點號。很多舊教學教你把 id 直接寫成實體 ID（`sensor.living_room_temperature`），不要跟著做：CSS 選擇器碰到點號要跳脫成 `#sensor\.living_room_temperature`，很容易打錯，而且一個實體想同時驅動兩個圖形就做不到。ha-floorplan 官方文件自己就寫「強烈建議完全不要在 id 裡用點號」。

對應關係等一下在 YAML 裡寫。

步驟 2：加上卡片，先確認它出得來

儀表板 → 編輯 → 新增卡片 → 選 Floorplan Card → 切到程式碼編輯器，貼：

1. type: custom:floorplan-card
2. title: 家裡
3. config:
4.   image: /local/floorplan/home.svg
5.   stylesheet: /local/floorplan/home.css
6.   log_level: info
7.   console_log_level: info
8.   rules: []

複製代碼

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

登入繼續閱讀使用 Google 登入