У Home Assistant спадаючий список (select) з’являється в інтерфейсі досить часто. Цей елемент управління зручний з точки зору логіки платформи, але з погляду інтерфейсу – не завжди найкраще рішення. Особливо тоді, коли йдеться не про налаштування, а про щоденне керування режимами: підсвітка, потужність, швидкість, рівні яскравості. У таких випадках спадаючий список виглядає зайвим, адже користувачу доводиться відкривати список, шукати потрібний пункт і лише тоді змінювати стан. На дашборді це сприймається важче, ніж могло б, особливо якщо керування відбувається з телефону, а не мишею.
Набагато зручніше, коли кожен режим представлений окремою кнопкою, а активний стан одразу видно візуально. Розглянемо, як перетворити спадаючий список зі станами на набір інтерактивних кнопок.
Передумови
У прикладі нижче використовується custom:button-card, тому він має бути встановлений в вашому Home Assistant, щоб наведений код працював. Також у вас уже повинна існувати сутність типу select з фіксованими значеннями.
Приклад: спадаючий список станів LED-підсвітки EcoFlow River 3 Plus
В моєму випадку я покращувала інтерфейс керування LED-підсвіткою зарядної станції EcoFlow River 3 Plus. Після інтеграції EcoFlow у Home Assistant з’являється сутність select.
Вона має кілька режимів роботи підсвітки, зокрема off, dim,bright, та sos. За замовчуванням Home Assistant показує їх як спадаючий список:
Ми ж замінимо його чотирма кнопками, кожна з яких відповідатиме одному режиму. Логіка проста: кнопка при натисканні викликає сервіс select.select_option і передає потрібне значення. Додатково можна описатистиль для стану, коли цей режим активний – таким чином кнопка підсвічується.
Короткий розбір конфігурації
Поле name визначає текст, який ви бачите на кнопці. Саме тут варто писати коротку й зрозумілу назву режиму – Off, Dim, Bright або SOS. Це не технічне поле, а частина інтерфейсу, тому воно напряму впливає на читабельність дашборду.
Поле icon відповідає за іконку кнопки. Іконки беруться з бібліотеки Material Design Icons, яку Home Assistant використовує за замовчуванням, тому вони не потребують додаткового підключення.
Поле tap_action визначає, що при натисканні викликається сервіс select.select_option, а в option передається конкретне значення, яке прив’язано до поточної кнопки.
Блок state відповідає за підсвічування активної кнопки. Коли значення select.river_3_plus_led дорівнює, наприклад, dim, Home Assistant застосовує стилі, описані для цього стану. Завдяки цьому користувач одразу бачить, який режим увімкнений, без додаткових індикаторів чи тексту.
Блок styles задає базовий вигляд кнопки. Тут можна контролювати форму, відступи, рамку, радіус заокруглення. Важливий момент: фоновий колір у звичайному стані залишається прозорим, а активний колір з’являється лише через state. Це створює чітку різницю між «вибрано» і «не вибрано» без перевантаження інтерфейсу.
YAML коди кнопок
Кнопка для режиму Off
type: custom:button-card
entity: select.river_3_plus_led
name: "Off"
icon: mdi:lightbulb-off-outline
show_state: false
tap_action:
action: call-service
service: select.select_option
target:
entity_id: select.river_3_plus_led
data:
option: "off"
state:
- value: "off"
styles:
card:
- background-color: "#009ac7"
name:
- color: white
icon:
- color: white
styles:
card:
- background-color: rgba(0,0,0,0%)
- border: 1px solid rgba(0,0,0,0.15)
- border-radius: 14px
- padding: 30px 10px
name:
- font-weight: 400
- padding-top: 8px
icon:
- width: 28px
- height: 28px
grid_options:
columns: 3
rows: 2
Кнопка для режиму Dim
type: custom:button-card
entity: select.river_3_plus_led
name: Dim
icon: mdi:lightbulb-on-10
show_state: false
tap_action:
action: call-service
service: select.select_option
target:
entity_id: select.river_3_plus_led
data:
option: dim
state:
- value: dim
styles:
card:
- background-color: "#009ac7"
name:
- color: white
icon:
- color: white
styles:
card:
- background-color: rgba(0,0,0,0%)
- border: 1px solid rgba(0,0,0,0.15)
- border-radius: 14px
- padding: 30px 10px
name:
- font-weight: 400
- padding-top: 8px
icon:
- width: 28px
- height: 28px
grid_options:
columns: 3
rows: 2
Кнопка для режиму Bright
type: custom:button-card
entity: select.river_3_plus_led
name: Bright
icon: mdi:lightbulb-on
show_state: false
tap_action:
action: call-service
service: select.select_option
target:
entity_id: select.river_3_plus_led
data:
option: bright
state:
- value: bright
styles:
card:
- background-color: "#009ac7"
name:
- color: white
icon:
- color: white
styles:
card:
- background-color: rgba(0,0,0,0%)
- border: 1px solid rgba(0,0,0,0.15)
- border-radius: 14px
- padding: 30px 10px
name:
- font-weight: 400
- padding-top: 8px
icon:
- width: 28px
- height: 28px
grid_options:
columns: 3
rows: 2
Кнопка для режиму SOS
type: custom:button-card
entity: select.river_3_plus_led
name: SOS
icon: mdi:alert
show_state: false
tap_action:
action: call-service
service: select.select_option
target:
entity_id: select.river_3_plus_led
data:
option: sos
state:
- value: sos
styles:
card:
- background-color: "#009ac7"
name:
- color: white
icon:
- color: white
styles:
card:
- background-color: rgba(0,0,0,0%)
- border: 1px solid rgba(0,0,0,0.15)
- border-radius: 14px
- padding: 30px 10px
name:
- font-weight: 400
- padding-top: 8px
icon:
- width: 28px
- height: 28px
grid_options:
columns: 3
rows: 2
Як це працює на практиці
У цьому прикладі кнопки існують як елементи секції на дашборді Lovelace, й працюють як єдиний елемент керування. Якщо ви використовуєте не секції, а розкладку, grid_options усередині кожної кнопки вже не потрібні, бо розмірами та позиціонуванням керує контейнер, а не окрема картка. В такому випадку grid_options можна прибрати і огорнути всі чотири кнопки в горизонтальний стек, який буде поводитись як сегментований контрол.
Кожна кнопка завжди прив’язана до тієї ж сутності select.river_3_plus_led. При натисканні вона змінює значення select через стандартний сервіс Home Assistant. Блок state відстежує поточний стан сутності й застосовує стилі, якщо значення збігається.
У результаті ви отримуєте повноцінний сегментований контрол. Активний режим видно одразу, без відкриття списків і додаткових кліків.
Підсумок
Стандартний select добре підходить для налаштувань, але для частого керування режимами він швидко починає заважати. Перетворення його на набір кнопок робить дашборд зрозумілішим і візуально акуратнішим. Цей підхід однаково добре працює для підсвітки, режимів потужності, швидкостей вентиляторів або будь-яких інших станів з фіксованим набором значень.
Джерело: community.home-assistant.io
