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

 找回密碼
 立即註冊
惟家LINE群QRCODE
    惟家的智能論壇»論壇 › 惟家智能生活討論區 › Home Assistant 討論 › 在平面圖上顯示溫度、濕度、門窗狀態（而且要好看） ...
    返回列表 發新帖
    查看: 4|回覆: 0

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

    [複製鏈接]
    charles

    !lvup!   100%

    363

    主題

    27

    回帖

    2200萬

    積分

    管理員

    積分
    22005764
    發表於 3 天前 | 顯示全部樓層 |閱讀模式
    平面圖不只能控制，也能一眼看完家裡的狀態。

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



    最簡單：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"


    ---

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

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

    使用道具 舉報

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

    本版積分規則

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

    GMT+8, 2026-9-24 13:20 , Processed in 0.083673 second(s), 24 queries .

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