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

charles

平面圖不只能控制，也能一眼看完家裡的狀態。

這篇講怎麼把數值放上去，而且不會讓整張圖變得很亂。



最簡單：state-label

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

複製代碼

會顯示「26.5 °C」。

但預設的樣子通常不好看 —— 字太小、跟底圖混在一起看不清楚。

加上背景讓它清楚

1.   - type: state-label
2.     entity: sensor.living_room_temperature
3.     style:
4.       top: 44%
5.       left: 34%
6.       font-size: 15px
7.       font-weight: bold
8.       color: "#333"
9.       background-color: "rgba(255, 255, 255, 0.85)"
10.       padding: 3px 8px
11.       border-radius: 10px

複製代碼

這五行讓數值從「看不清楚」變成「一眼就看到」。

我的標準寫法（可以直接複製）：

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

複製代碼

加上前綴和後綴

1.   - type: state-label
2.     entity: sensor.bedroom_temperature
3.     prefix: "臥室 "
4.     suffix: " 度"
5.     style: {top: 92%, left: 25%}

複製代碼

顯示成「臥室 26.5 度」。

但單位通常已經在實體裡了，加 suffix 會變成「26.5 °C 度」。

比較好的做法：把單位拿掉，自己加

1.   - type: state-label
2.     entity: sensor.bedroom_temperature
3.     attribute: null
4.     suffix: "°"
5.     style: {top: 92%, left: 25%}

複製代碼

或者直接用範本（下面說明）。

用範本顯示更聰明的內容

state-label 的 prefix / suffix 支援範本，
但整個內容要自訂的話，比較好的做法是用一個 template sensor。

不過有一個偷吃步：用 custom:button-card 或 markdown 卡片元素。

最簡單的方式是把邏輯放在 HA 裡：

1. # configuration.yaml
2. template:
3.   - sensor:
4.       - name: 客廳環境摘要
5.         unique_id: living_env_summary
6.         state: >
7.           {{ states('sensor.living_room_temperature') | round(0) }}° /
8.           {{ states('sensor.living_room_humidity') | round(0) }}%

複製代碼

然後平面圖上只放一個：

1.   - type: state-label
2.     entity: sensor.客廳環境摘要
3.     style: {top: 44%, left: 34%}

複製代碼

顯示「26° / 58%」，一個元素抵兩個。



門窗狀態：用 state-icon 比文字好

1.   - type: state-icon
2.     entity: binary_sensor.front_door
3.     style:
4.       top: 92%
5.       left: 9%
6.       "--mdc-icon-size": 28px
7.       "--paper-item-icon-color": "#8a8a8a"
8.       "--paper-item-icon-active-color": "#e53935"
9.     tap_action:
10.       action: more-info

複製代碼

關著是灰色、開著是紅色，不用看文字就知道。

device_class 決定圖示會不會變

這點很重要：

• device_class: door → 圖示會在「門關」和「門開」之間變化
  
• device_class: window → 同上，但是窗戶的圖示
  
• 沒有 device_class → 圖示不會變，只會變色
  

所以如果你的門磁圖示不會變，去實體設定裡把 device_class 設成 door。

只在「異常」時才顯示（推薦）

門窗全關的時候，那些圖示只是雜訊。

用 conditional 元素讓它只在開著的時候才出現：

1.   - type: conditional
2.     conditions:
3.       - entity: binary_sensor.front_door
4.         state: "on"
5.     elements:
6.       - type: icon
7.         icon: mdi:door-open
8.         title: 大門開著
9.         style:
10.           top: 92%
11.           left: 9%
12.           color: "#e53935"
13.           "--mdc-icon-size": 32px

複製代碼

門關著的時候這個圖示完全不存在，開了才跳出來。

這是讓平面圖保持乾淨的關鍵技巧，下一篇會專門講。



版面配置的五個建議

一、數值放在房間的「空白處」

不要跟燈的圖示疊在一起。

我的習慣：燈放房間上半部，數值放下半部。

二、同類型的用同樣的樣式

所有溫度用同一組 style、所有門窗用同一組。

YAML 沒有內建的「樣式繼承」，所以會重複寫很多次 ——
這是正常的，複製貼上就好。

（真的很在意的話可以用 YAML 的錨點，但可讀性會變差。）

三、字不要太小

• 電腦上看：14px 以上
  
• 平板或電視上看：16-18px
  
• 手機：其實看不太清楚，考慮不要放太多數值
  

四、顏色跟底圖要有對比

底圖是淺色 → 文字用深色 + 白底
底圖是深色 → 文字用淺色 + 深底

半透明背景是最保險的做法。

五、決定「哪些真的要放」

我的原則：

• 每個有人活動的房間放一個溫度
  
• 濕度只放浴室和最容易發霉的地方
  
• 門窗只放大門和對外窗
  
• 用電、訊號品質、電池電量一律不放
  

最後一條最重要。
那些東西你不會在平面圖上看，放了只是讓圖變亂。

進階：用顏色表達數值

溫度太高就變紅色：

1.   - type: state-label
2.     entity: sensor.living_room_temperature
3.     style:
4.       top: 44%
5.       left: 34%
6.       font-size: 15px
7.       font-weight: bold
8.       padding: 2px 7px
9.       border-radius: 9px
10.       background-color: "rgba(255,255,255,0.88)"
11.       color: >
12.         {% set t = states('sensor.living_room_temperature') | float(25) %}
13.         {% if t > 29 %}#e53935
14.         {% elif t > 27 %}#fb8c00
15.         {% elif t < 20 %}#1e88e5
16.         {% else %}#2c3440
17.         {% endif %}

複製代碼

style 裡面可以寫範本，這是 Picture Elements 很強但很少人知道的功能。

注意：

• 範本要用 > （摺疊區塊），不要用引號包一行
  
• float() 的預設值不能省，感測器不可用時會整個元素壞掉
  
• 顏色的 # 開頭在 YAML 裡沒問題（因為在範本輸出裡），
    但直接寫死的話要加引號：color: "#e53935"
  

---

下一篇：只在需要時才出現的元素。

這是讓平面圖「平常很乾淨、有事才跳出來」的關鍵。