在平面圖上顯示溫度、濕度、門窗狀態（而且看得清楚）

charles

這篇的內容（6 段）

1. 步驟 3：加上前後文字
2. 步驟 7：版面上的四個取捨
3. 二、字不要太小
4. 三、顏色要跟底圖有對比
5. 四、決定哪些真的要放
6. 檢查清單

平面圖除了控制，也該能一眼看完家裡的狀態。

這篇把數值放上去，並且解決兩件一定會遇到的事：預設的字太小、跟底圖混在一起看不清楚；以及「溫度太高就變紅色」到底要怎麼做（網路上流傳最廣的那個寫法是不會動的）。



步驟 1：先找到你的感測器實體 ID

去設定 -> 工具 -> 狀態（2026.8 起「開發者工具」改名為「工具」並搬進「設定」底下），在篩選欄打 temperature，把你要用的那一行整串複製起來。

⚠ 實體 ID 一律是英文，不要自己拼。你在 HA 裡把感測器的名稱取成「客廳溫度」是可以的，但實體 ID 不會是中文 —— HA 會把中文音譯成拼音，變成類似 sensor.ke_ting_wen_du 的東西。

照著中文自己寫一個 sensor.客廳溫度 進卡片，結果是一個灰掉的空標籤，而且不會有任何錯誤訊息。這個錯誤在畫面上長得跟「感測器離線」一模一樣，很難聯想。

你會看到什麼：狀態頁上那一行會顯示實體 ID、目前數值（例如 26.5）和它的屬性。屬性裡的 unit_of_measurement 就是等一下會自動接在數字後面的單位。

步驟 2：放上去，然後馬上讓它看得清楚

最簡單的寫法：

1.   - type: state-label
2.     entity: sensor.living_room_temperature
3.     style: {top: 44%, left: 34%}

複製代碼

會顯示「26.5 °C」。單位是 HA 自己加的，不用你寫。

但預設的樣子在平面圖上幾乎看不清楚 —— 字小、沒有背景，跟底圖的線條混在一起。加上背景之後差很多：

1.   - type: state-label
2.     entity: sensor.living_room_temperature
3.     title: 客廳溫度
4.     style:
5.       top: 44%
6.       left: 34%
7.       font-size: 14px
8.       font-weight: 500
9.       color: "#2c3440"
10.       background-color: "rgba(255,255,255,0.88)"
11.       padding: 2px 7px
12.       border-radius: 9px
13.       box-shadow: 0 1px 3px rgba(0,0,0,0.15)

複製代碼

你會看到什麼：數值變成一顆白底圓角的小藥丸，不管底圖那一塊是什麼顏色都看得清楚。

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

登入繼續閱讀使用 Google 登入