639
Даже просто подбор, перевод и оформление статей требуют времени. А самостоятельный обзор устройств требует еще и финансовых вложений. Если Вы хотите больше обзоров, Вы можете помочь автору.
Содержание
Краткое описание
Bubble Card — это универсальный инструмент для создания интерактивных и стильных интерфейсов в Home Assistant. Он позволяет группировать устройства по комнатам, типам или сценариям, а также предоставляет гибкие возможности для кастомизации через YAML и CSS. В этой статье мы рассмотрим несколько сценариев использования Bubble Card с различными типами устройств.
Установка
Минимальная поддерживаемая версия Home Assistant: 2023.9.0
Без HACS
- Скачайте файл
bubble-card.jsиз репозитория. - Поместите его в папку
wwwвашего Home Assistant. - Добавьте путь к файлу в
configuration.yaml:123<span class="token key atrule">frontend</span><span class="token punctuation">:</span><span class="token key atrule">extra_module_url</span><span class="token punctuation">:</span><span class="token punctuation">-</span> /local/bubble<span class="token punctuation">-</span>card.js
С HACS (рекомендуется)
- Откройте HACS в Home Assistant.
- Найдите «Bubble Card» в разделе «Frontend».
- Установите и перезагрузите Home Assistant.
Сценарии использования
1. Разделение кнопок по комнатам
Создадим интерфейс, где кнопки сгруппированы по комнатам: гостиная, кухня, спальня и ванная.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> vertical<span class="token punctuation">-</span>stack <span class="token key atrule">cards</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#living_room'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Гостиная <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>sofa <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#kitchen'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Кухня <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>silverware<span class="token punctuation">-</span>fork<span class="token punctuation">-</span>knife <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#bedroom'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Спальня <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>bed <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#bathroom'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Ванная <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>shower |
Комментарии:
- Каждая кнопка открывает всплывающее окно для управления устройствами в соответствующей комнате.
- Иконки и названия кнопок соответствуют комнатам.
2. Управление освещением и подсветкой
Добавим управление основным освещением и подсветкой в гостиной.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> vertical<span class="token punctuation">-</span>stack <span class="token key atrule">cards</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> light.living_room_main <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>lightbulb <span class="token key atrule">name</span><span class="token punctuation">:</span> Основной свет <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> light.living_room_ambient <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>led<span class="token punctuation">-</span>strip <span class="token key atrule">name</span><span class="token punctuation">:</span> Подсветка |
Комментарии:
- Первая кнопка управляет основным светом, вторая — подсветкой.
- Иконки помогают быстро идентифицировать тип освещения.
3. Управление вытяжкой и датчиками
Добавим управление вытяжкой на кухне и отображение состояния датчиков.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> vertical<span class="token punctuation">-</span>stack <span class="token key atrule">cards</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> fan.kitchen_hood <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>fan <span class="token key atrule">name</span><span class="token punctuation">:</span> Вытяжка <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> binary_sensor.kitchen_smoke <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>smoke<span class="token punctuation">-</span>detector <span class="token key atrule">name</span><span class="token punctuation">:</span> Датчик дыма <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> binary_sensor.kitchen_leak <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>water <span class="token key atrule">name</span><span class="token punctuation">:</span> Датчик протечки |
Комментарии:
- Кнопка вытяжки позволяет включать и выключать устройство.
- Датчики дыма и протечки отображают текущее состояние (включен/выключен).
4. Управление камерами и сигнализацией
Создадим интерфейс для управления камерами и сигнализацией.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> vertical<span class="token punctuation">-</span>stack <span class="token key atrule">cards</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> camera.front_door <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>cctv <span class="token key atrule">name</span><span class="token punctuation">:</span> Камера у двери <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> alarm_control_panel.house <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>security <span class="token key atrule">name</span><span class="token punctuation">:</span> Сигнализация |
Комментарии:
- Кнопка камеры открывает видеопоток.
- Кнопка сигнализации позволяет управлять состоянием системы (включить/выключить).
5. Управление телевизором и умной колонкой
Добавим управление телевизором и умной колонкой в гостиной.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> vertical<span class="token punctuation">-</span>stack <span class="token key atrule">cards</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> media<span class="token punctuation">-</span>player <span class="token key atrule">entity</span><span class="token punctuation">:</span> media_player.living_room_tv <span class="token key atrule">name</span><span class="token punctuation">:</span> Телевизор <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> media<span class="token punctuation">-</span>player <span class="token key atrule">entity</span><span class="token punctuation">:</span> media_player.yandex_station <span class="token key atrule">name</span><span class="token punctuation">:</span> Умная колонка |
Комментарии:
- Карточка медиаплеера позволяет управлять громкостью, воспроизведением и другими функциями.
- Названия устройств помогают быстро идентифицировать их.
6. Группировка по типам устройств
Создадим интерфейс, где устройства сгруппированы по типам: освещение, безопасность, медиа.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> vertical<span class="token punctuation">-</span>stack <span class="token key atrule">cards</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#lights'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Освещение <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>lightbulb <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#security'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Безопасность <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>security <span class="token punctuation">-</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> pop<span class="token punctuation">-</span>up <span class="token key atrule">hash</span><span class="token punctuation">:</span> <span class="token string">'#media'</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Медиа <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>television |
Комментарии:
- Каждая кнопка открывает всплывающее окно с устройствами соответствующего типа.
- Иконки помогают быстро идентифицировать категорию.
7. Кастомизация стилей
Добавим кастомные стили для кнопок.
Пример конфигурации:
|
1 2 3 4 5 6 7 8 9 10 |
<span class="token key atrule">type</span><span class="token punctuation">:</span> custom<span class="token punctuation">:</span>bubble<span class="token punctuation">-</span>card <span class="token key atrule">card_type</span><span class="token punctuation">:</span> button <span class="token key atrule">entity</span><span class="token punctuation">:</span> light.living_room_main <span class="token key atrule">icon</span><span class="token punctuation">:</span> mdi<span class="token punctuation">:</span>lightbulb <span class="token key atrule">name</span><span class="token punctuation">:</span> Основной свет <span class="token key atrule">styles</span><span class="token punctuation">:</span> <span class="token punctuation">|</span><span class="token scalar string"> .bubble-card { background-color: #ffcc00 !important; border-radius: 15px !important; }</span> |
Комментарии:
- Используется кастомный CSS для изменения фона и скругления углов кнопки.
Заключение
Bubble Card — это мощный инструмент для создания интерактивных и стильных интерфейсов в Home Assistant. С его помощью можно легко управлять устройствами, создавать всплывающие окна и кастомизировать внешний вид карточек. Интеграция поддерживает множество сущностей и предоставляет гибкие возможности для настройки через YAML и CSS. Используя предложенные сценарии, вы сможете создать удобный и функциональный интерфейс для управления вашим умным домом.
