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

 找回密碼
 立即註冊
惟家LINE群QRCODE
    惟家的智能論壇»論壇 › 惟家智能生活討論區 › Home Assistant 討論 › conditional 元素：讓平面圖平常很乾淨、有事才跳出來 ...
    返回列表 發新帖
    查看: 3|回覆: 0

    conditional 元素：讓平面圖平常很乾淨、有事才跳出來

    [複製鏈接]
    charles

    !lvup!   100%

    363

    主題

    27

    回帖

    2200萬

    積分

    管理員

    積分
    22005752
    發表於 3 天前 | 顯示全部樓層 |閱讀模式
    一張好的平面圖，平常應該很安靜。

    門都關著、沒有漏水、沒有異常 —— 那些圖示根本不該出現。



    核心觀念

    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.         style: {top: 92%, left: 9%, color: "#e53935"}
    複製代碼

    門開著 → 圖示出現。門關著 → 圖示完全不存在。

    注意 elements 是複數 —— 一個 conditional 裡面可以放好幾個元素，
    它們會一起出現、一起消失。

    條件的四種寫法



    一、狀態等於某個值
    1.     conditions:
    2.       - entity: binary_sensor.front_door
    3.         state: "on"
    複製代碼

    二、狀態「不等於」某個值
    1.     conditions:
    2.       - entity: alarm_control_panel.home
    3.         state_not: disarmed
    複製代碼

    三、狀態是「其中之一」
    1.     conditions:
    2.       - condition: state
    3.         entity: input_select.house_mode
    4.         state:
    5.           - 外出
    6.           - 度假
    複製代碼

    四、數值比較
    1.     conditions:
    2.       - condition: numeric_state
    3.         entity: sensor.living_room_temperature
    4.         above: 29
    複製代碼

    多個條件的話是「而且」
    1.     conditions:
    2.       - entity: binary_sensor.front_door
    3.         state: "on"
    4.       - entity: input_select.house_mode
    5.         state: 外出
    複製代碼

    門開著「而且」在外出模式 → 才顯示。

    要「或」的話，寫兩個 conditional 就好（各自獨立判斷）。

    五個實用的應用



    應用一：門窗異常才顯示
    1.   # 大門
    2.   - type: conditional
    3.     conditions:
    4.       - entity: binary_sensor.front_door
    5.         state: "on"
    6.     elements:
    7.       - type: icon
    8.         icon: mdi:door-open
    9.         title: 大門開著
    10.         style:
    11.           top: 92%
    12.           left: 9%
    13.           color: "#e53935"
    14.           "--mdc-icon-size": 30px
    16.   # 陽台門
    17.   - type: conditional
    18.     conditions:
    19.       - entity: binary_sensor.balcony_door
    20.         state: "on"
    21.     elements:
    22.       - type: icon
    23.         icon: mdi:door-sliding-open
    24.         title: 陽台門開著
    25.         style:
    26.           top: 12%
    27.           left: 3%
    28.           color: "#e53935"
    29.           "--mdc-icon-size": 30px
    複製代碼

    平常這兩個圖示都不在，一開門就跳出紅色的。

    應用二：漏水、瓦斯警報（大字提醒）
    1.   - type: conditional
    2.     conditions:
    3.       - condition: or
    4.         conditions:
    5.           - entity: binary_sensor.kitchen_leak
    6.             state: "on"
    7.           - entity: binary_sensor.bathroom_leak
    8.             state: "on"
    9.     elements:
    10.       - type: image
    11.         image: /local/floorplan/alert_overlay.png
    12.         style: {top: 50%, left: 50%, width: 100%}
    13.       - type: state-label
    14.         entity: binary_sensor.kitchen_leak
    15.         prefix: "⚠ 偵測到漏水"
    16.         style:
    17.           top: 50%
    18.           left: 50%
    19.           font-size: 26px
    20.           font-weight: bold
    21.           color: white
    22.           background-color: "rgba(211,47,47,0.92)"
    23.           padding: 10px 22px
    24.           border-radius: 12px
    複製代碼

    平常完全看不到，出事的時候整張圖會蓋一層紅色 + 一行大字。

    這個做出來真的很有感。

    應用三：只在夜間顯示的元素
    1.   - type: conditional
    2.     conditions:
    3.       - condition: state
    4.         entity: sun.sun
    5.         state: below_horizon
    6.     elements:
    7.       - type: state-icon
    8.         entity: light.night_light
    9.         style: {top: 78%, left: 50%}
    複製代碼

    夜燈的圖示只在天黑之後才出現。

    應用四：冷氣開著才顯示溫度設定
    1.   - type: conditional
    2.     conditions:
    3.       - entity: climate.living_room
    4.         state_not: "off"
    5.     elements:
    6.       - type: state-label
    7.         entity: climate.living_room
    8.         attribute: temperature
    9.         prefix: "❄ "
    10.         suffix: "°"
    11.         style:
    12.           top: 10%
    13.           left: 34%
    14.           font-size: 15px
    15.           color: "#1e88e5"
    16.           background-color: "rgba(255,255,255,0.9)"
    17.           padding: 2px 8px
    18.           border-radius: 9px
    複製代碼

    attribute 可以取屬性（這裡是冷氣的設定溫度，不是室溫）。

    應用五：有人在家 / 沒人在家的整體氛圍
    1.   - type: conditional
    2.     conditions:
    3.       - entity: binary_sensor.someone_home
    4.         state: "off"
    5.     elements:
    6.       - type: image
    7.         image: /local/floorplan/dim_overlay.png
    8.         style: {top: 50%, left: 50%, width: 100%}
    複製代碼

    沒人在家的時候整張圖蓋一層半透明的灰色，
    一眼就知道「家裡現在是空的」。



    「乾淨」的設計原則

    我整理平面圖的原則是：

    常態 = 什麼都不顯示。異常 = 跳出來。

    具體來說：


    • 門窗 → 只在開著時顯示
    • 漏水、瓦斯、煙霧 → 只在觸發時顯示（而且要很顯眼）
    • 電池電量 → 只在低於 20% 時顯示
    • 裝置離線 → 只在 unavailable 時顯示
    • 溫度 → 一直顯示（這個是常態資訊）
    • 燈 → 一直顯示（這個要能操作）


    電池和離線的寫法：
    1.   - type: conditional
    2.     conditions:
    3.       - condition: numeric_state
    4.         entity: sensor.bedroom_sensor_battery
    5.         below: 20
    6.     elements:
    7.       - type: icon
    8.         icon: mdi:battery-alert
    9.         title: 臥室感應器電量低
    10.         style:
    11.           top: 88%
    12.           left: 44%
    13.           color: "#fb8c00"
    14.           "--mdc-icon-size": 22px
    複製代碼

    一個綜合的「異常總覽」做法

    與其在每個位置放一個條件元素，
    不如做一個總的異常指示放在角落：
    1. # configuration.yaml
    2. template:
    3.   - binary_sensor:
    4.       - name: 家裡有異常
    5.         unique_id: home_has_problem
    6.         device_class: problem
    7.         state: >
    8.           {{ is_state('binary_sensor.all_doors','on')
    9.              or is_state('binary_sensor.any_leak','on')
    10.              or states('sensor.low_battery_count') | int(0) > 0
    11.              or states('sensor.unavailable_entities') | int(0) > 0 }}
    12.         attributes:
    13.           細節: >
    14.             {% set p = [] %}
    15.             {% if is_state('binary_sensor.all_doors','on') %}
    16.               {% set p = p + ['有門窗開著'] %}
    17.             {% endif %}
    18.             {% if is_state('binary_sensor.any_leak','on') %}
    19.               {% set p = p + ['偵測到漏水'] %}
    20.             {% endif %}
    21.             {{ p | join('、') if p else '正常' }}
    複製代碼

    平面圖上：
    1.   - type: conditional
    2.     conditions:
    3.       - entity: binary_sensor.家裡有異常
    4.         state: "on"
    5.     elements:
    6.       - type: state-label
    7.         entity: binary_sensor.家裡有異常
    8.         attribute: 細節
    9.         prefix: "⚠ "
    10.         style:
    11.           top: 4%
    12.           left: 50%
    13.           font-size: 15px
    14.           color: white
    15.           background-color: "rgba(230,81,0,0.92)"
    16.           padding: 4px 14px
    17.           border-radius: 14px
    18.         tap_action:
    19.           action: navigate
    20.           navigation_path: /lovelace/status
    複製代碼

    平常什麼都沒有，有事的時候頂端跳出一條橘色的提示，點下去跳到詳細頁。

    兩個注意事項

    一、conditional 裡面的元素還是要有自己的 style

    conditional 本身不佔位置，它只是一個容器。
    裡面每個元素都要自己寫 top / left。

    二、條件切換的瞬間會「跳」出來

    沒有淡入淡出效果。

    想要漸變的話，不要用 conditional，
    改用 opacity 加範本（配下一篇的 CSS 動畫）：
    1.   - type: icon
    2.     icon: mdi:door-open
    3.     style:
    4.       top: 92%
    5.       left: 9%
    6.       color: "#e53935"
    7.       transition: opacity 0.4s
    8.       opacity: >
    9.         {{ 1 if is_state('binary_sensor.front_door','on') else 0 }}
    複製代碼

    這樣門開的時候圖示會慢慢淡入，關的時候慢慢淡出。

    ---

    下一篇：用 card-mod 幫平面圖加動畫。

    不用換成 SVG，也能做出脈動、閃爍、漸變的效果。
    回覆

    使用道具 舉報

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

    本版積分規則

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

    GMT+8, 2026-9-24 12:21 , Processed in 0.076956 second(s), 24 queries .

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