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

charles

一張好的平面圖，平常應該很安靜。

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



核心觀念

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，也能做出脈動、閃爍、漸變的效果。