Расширенный обзор интеграции Bubble Card для Home Assistant

Краткое описание

Bubble Card — это универсальный инструмент для создания интерактивных и стильных интерфейсов в Home Assistant. Он позволяет группировать устройства по комнатам, типам или сценариям, а также предоставляет гибкие возможности для кастомизации через YAML и CSS. В этой статье мы рассмотрим несколько сценариев использования Bubble Card с различными типами устройств.

Установка

Минимальная поддерживаемая версия Home Assistant: 2023.9.0

Без HACS

1. Скачайте файл bubble-card.js из репозитория.
2. Поместите его в папку www вашего Home Assistant.
3. Добавьте путь к файлу в configuration.yaml:

   frontend:
     extra_module_url:
       - /local/bubble-card.js

С HACS (рекомендуется)

1. Откройте HACS в Home Assistant.
2. Найдите «Bubble Card» в разделе «Frontend».
3. Установите и перезагрузите Home Assistant.

Сценарии использования

1. Разделение кнопок по комнатам

Создадим интерфейс, где кнопки сгруппированы по комнатам: гостиная, кухня, спальня и ванная.

Пример конфигурации:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#living_room'
    name: Гостиная
    icon: mdi:sofa
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Кухня
    icon: mdi:silverware-fork-knife
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#bedroom'
    name: Спальня
    icon: mdi:bed
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#bathroom'
    name: Ванная
    icon: mdi:shower

Комментарии:

• Каждая кнопка открывает всплывающее окно для управления устройствами в соответствующей комнате.
• Иконки и названия кнопок соответствуют комнатам.

2. Управление освещением и подсветкой

Добавим управление основным освещением и подсветкой в гостиной.

Пример конфигурации:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    entity: light.living_room_main
    icon: mdi:lightbulb
    name: Основной свет
  - type: custom:bubble-card
    card_type: button
    entity: light.living_room_ambient
    icon: mdi:led-strip
    name: Подсветка

Комментарии:

• Первая кнопка управляет основным светом, вторая — подсветкой.
• Иконки помогают быстро идентифицировать тип освещения.

3. Управление вытяжкой и датчиками

Добавим управление вытяжкой на кухне и отображение состояния датчиков.

Пример конфигурации:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    entity: fan.kitchen_hood
    icon: mdi:fan
    name: Вытяжка
  - type: custom:bubble-card
    card_type: button
    entity: binary_sensor.kitchen_smoke
    icon: mdi:smoke-detector
    name: Датчик дыма
  - type: custom:bubble-card
    card_type: button
    entity: binary_sensor.kitchen_leak
    icon: mdi:water
    name: Датчик протечки

Комментарии:

• Кнопка вытяжки позволяет включать и выключать устройство.
• Датчики дыма и протечки отображают текущее состояние (включен/выключен).

4. Управление камерами и сигнализацией

Создадим интерфейс для управления камерами и сигнализацией.

Пример конфигурации:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    entity: camera.front_door
    icon: mdi:cctv
    name: Камера у двери
  - type: custom:bubble-card
    card_type: button
    entity: alarm_control_panel.house
    icon: mdi:security
    name: Сигнализация

Комментарии:

• Кнопка камеры открывает видеопоток.
• Кнопка сигнализации позволяет управлять состоянием системы (включить/выключить).

5. Управление телевизором и умной колонкой

Добавим управление телевизором и умной колонкой в гостиной.

Пример конфигурации:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.living_room_tv
    name: Телевизор
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.yandex_station
    name: Умная колонка

Комментарии:

• Карточка медиаплеера позволяет управлять громкостью, воспроизведением и другими функциями.
• Названия устройств помогают быстро идентифицировать их.

6. Группировка по типам устройств

Создадим интерфейс, где устройства сгруппированы по типам: освещение, безопасность, медиа.

Пример конфигурации:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#lights'
    name: Освещение
    icon: mdi:lightbulb
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#security'
    name: Безопасность
    icon: mdi:security
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#media'
    name: Медиа
    icon: mdi:television

Комментарии:

• Каждая кнопка открывает всплывающее окно с устройствами соответствующего типа.
• Иконки помогают быстро идентифицировать категорию.

7. Кастомизация стилей

Добавим кастомные стили для кнопок.

Пример конфигурации:

type: custom:bubble-card
card_type: button
entity: light.living_room_main
icon: mdi:lightbulb
name: Основной свет
styles: |
  .bubble-card {
    background-color: #ffcc00 !important;
    border-radius: 15px !important;
  }

Комментарии:

• Используется кастомный CSS для изменения фона и скругления углов кнопки.

Заключение

Bubble Card — это мощный инструмент для создания интерактивных и стильных интерфейсов в Home Assistant. С его помощью можно легко управлять устройствами, создавать всплывающие окна и кастомизировать внешний вид карточек. Интеграция поддерживает множество сущностей и предоставляет гибкие возможности для настройки через YAML и CSS. Используя предложенные сценарии, вы сможете создать удобный и функциональный интерфейс для управления вашим умным домом.