Лучшие HACS-карточки Lovelace: Mushroom, mini-graph-card и Bubble Card на практике

Признаюсь честно: когда я только начинал свой путь в Home Assistant, моя панель управления выглядела как винегрет из стандартных карточек. Серая, скучная, функциональная — но совершенно бездушная. Каждый раз, открывая дашборд, я ловил себя на мысли, что хочу большего. Хотелось, чтобы интерфейс был не просто набором переключателей, а настоящим пультом управления умным домом, которым приятно пользоваться.

И тут я открыл для себя HACS. Если вы ещё не знакомы с этим инструментом — обязательно прочитайте мою статью о HACS: лучшие сторонние интеграции для Home Assistant. Сегодня же я хочу рассказать о трёх карточках, которые кардинально изменили мой подход к оформлению Lovelace-интерфейса: Mushroom, mini-graph-card и Bubble Card.

Почему стандартные карточки — это скучно?

Стандартный набор карточек Home Assistant — это как мебель из Икеи: функционально, но безлико. Да, они работают, но выглядят одинаково у всех. А ведь умный дом — это отражение вашей индивидуальности! Плюс, стандартные карточки часто громоздкие: чтобы показать температуру, влажность и статус устройства, приходится лепить три отдельные карточки, которые занимают пол-экрана.

HACS-карточки решают эту проблему. Они компактнее, красивее и гораздо функциональнее. Но главное — они позволяют создать по-настоящему удобный интерфейс, где вся нужная информация доступна в пару тапов.

Установка HACS: с чего начать

Прежде чем переходить к карточкам, убедитесь, что у вас установлен HACS. Если нет — вот краткая инструкция:

# Заходим в контейнер Home Assistant (если используете Docker)
docker exec -it homeassistant bash

# Или подключаемся по SSH к вашему серверу с HA
ssh user@your-ha-server

Дальше — через терминал или SSH-аддон:

# Скачиваем установщик HACS
wget -O - https://get.hacs.xyz | bash -

После установки перезапустите Home Assistant:

# Если используете Docker
docker restart homeassistant

# Если Home Assistant OS или Supervised
ha core restart

Теперь HACS доступен в боковом меню. Добавляем репозитории карточек через интерфейс: HACS → Frontend → Искать репозитории.

Mushroom: минимализм, который работает

Mushroom Card — это, пожалуй, самая популярная карточка для Lovelace. И не зря. Она создана в стиле Material Design и выглядит просто потрясающе. Но главное её преимущество — компактность и информативность.

Первые шаги с Mushroom

Устанавливаем через HACS: Frontend → ищем "Mushroom" → Install. После установки перезагружаем страницу дашборда.

Базовая конфигурация карточки света:

type: custom:mushroom-light-card
entity: light.living_room
name: Гостиная
icon: mdi:sofa
tap_action:
  action: toggle
double_tap_action:
  action: more-info

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

Группировка элементов

Mushroom отлично работает в связке с horizontal-stack:

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room
    name: Люстра
  - type: custom:mushroom-light-card
    entity: light.floor_lamp
    name: Торшер
  - type: custom:mushroom-light-card
    entity: light.led_strip
    name: Подсветка

Такой блок занимает меньше места, чем три отдельные карточки, и выглядит гораздо аккуратнее.

Шаблоны в Mushroom

Ещё одна фишка Mushroom — шаблоны. Они позволяют создавать сложные сценарии отображения:

type: custom:mushroom-template-card
primary: >-
  {% if is_state('binary_sensor.front_door', 'on') %}
    Дверь открыта
  {% else %}
    Дверь закрыта
  {% endif %}
secondary: >-
  {% if is_state('binary_sensor.front_door', 'on') %}
    Открыта с {{ states('sensor.door_open_time') }} минут
  {% else %}
    Всё спокойно
  {% endif %}
icon: >-
  {% if is_state('binary_sensor.front_door', 'on') %}
    mdi:door-open
  {% else %}
    mdi:door-closed
  {% endif %}
icon_color: >-
  {% if is_state('binary_sensor.front_door', 'on') %}
    red
  {% else %}
    green
  {% endif %}

Видите, как элегантно можно отображать состояние датчиков? Никаких лишних карточек — вся информация в одном месте.

Типичные ошибки с Mushroom

Самая частая ошибка — забыть указать type: custom:mushroom-*. Если карточка не отображается, первым делом проверьте, что вы используете правильный префикс. Вторая по популярности проблема — конфликт с другими темами. Если цвета карточки не совпадают с вашей темой, проверьте настройки card_mod (о нём расскажу чуть позже).

mini-graph-card: графики, которые хочется рассматривать

Графики — это отдельная боль. Стандартная карточка истории в Home Assistant громоздкая и негибкая. mini-graph-card решает эту проблему раз и навсегда.

Настраиваем график температуры

Устанавливаем через HACS и создаём компактный график:

type: custom:mini-graph-card
entities:
  - entity: sensor.living_room_temperature
    name: Гостиная
  - entity: sensor.bedroom_temperature
    name: Спальня
hours_to_show: 24
points_per_hour: 4
line_width: 3
show:
  points: false
  labels: true
  legend: true
color_thresholds:
  - value: 18
    color: blue
  - value: 22
    color: green
  - value: 26
    color: red

Здесь я показываю температуру в двух комнатах за сутки. Цвета линий меняются в зависимости от значения — сразу видно, когда температура вышла из комфортной зоны.

Множественные графики и агрегация

mini-graph-card умеет агрегировать данные:

type: custom:mini-graph-card
entities:
  - entity: sensor.energy_usage
    name: Потребление
aggregate_func: sum
hours_to_show: 168  # неделя
show:
  graph: bar
  labels: true

Этот график показывает суммарное потребление энергии за неделю в виде столбчатой диаграммы. Очень наглядно!

Интеграция с Mushroom

Лучший способ использовать mini-graph-card — встроить его в Mushroom-карточку:

type: custom:mushroom-template-card
primary: Температура в гостиной
secondary: 22.5°C
icon: mdi:thermometer
card_mod:
  style:
    mushroom-state-info$: |
      .secondary {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

Но для полноценной интеграции графиков я рекомендую использовать card_mod для встраивания mini-graph-card в Mushroom:

type: custom:mushroom-template-card
primary: Климат в доме
secondary: |
  {% set temp = states('sensor.living_room_temperature') %}
  {{ temp }}°C
icon: mdi:home-thermometer
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
      }
    mushroom-state-info$: |
      .secondary {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

Ошибки при работе с mini-graph-card

Частая проблема — график не отображается или показывает пустоту. Причины обычно две:

1. Неверный entity_id — проверьте, что сущность существует в Home Assistant
2. Нет данных за выбранный период — увеличьте hours_to_show или проверьте, что данные записываются в базу

Ещё одна распространённая ошибка — слишком много точек на графике. Если у вас points_per_hour: 60 за месяц, браузер может подвиснуть. Оптимально — 4-6 точек в час для долгосрочных графиков.

Bubble Card: карточки-пузыри для управления

Bubble Card — это относительно новый игрок на рынке HACS-карточек, но он уже успел завоевать моё сердце. Это карточки-пузыри, которые можно использовать как элементы управления, попапы и даже как целые вкладки.

Основы Bubble Card

Устанавливаем через HACS и создаём простую карточку:

type: custom:bubble-card
card_type: button
entity: light.living_room
name: Свет
icon: mdi:lightbulb
tap_action:
  action: toggle

Выглядит просто, но сила Bubble Card — в его универсальности.

Попапы с Bubble Card

Самая крутая фишка — попапы. Вместо того чтобы открывать стандартное диалоговое окно, Bubble Card создаёт красивое всплывающее меню:

type: custom:bubble-card
card_type: pop-up
entity: light.living_room
name: Управление светом
icon: mdi:lightbulb-group
tap_action:
  action: navigate
  navigation_path: lights
pop_up_cards:
  - type: custom:mushroom-light-card
    entity: light.living_room
    name: Люстра
  - type: custom:mushroom-light-card
    entity: light.floor_lamp
    name: Торшер
  - type: custom:mushroom-light-card
    entity: light.led_strip
    name: Подсветка

Теперь при тапе на карточку открывается попап со всеми светильниками. Удобно и красиво!

Bubble Card как вкладка

Bubble Card может работать как полноценная вкладка:

type: custom:bubble-card
card_type: tab
tab_icon: mdi:home
tab_name: Главная
tab_style:
  - background: '#1a1a2e'
  - color: '#e0e0e0'

Это позволяет создавать многоуровневые интерфейсы без лишнего кода.

Комбинируем Bubble Card с Mushroom

Вот тут начинается магия. Bubble Card отлично работает вместе с Mushroom:

type: custom:bubble-card
card_type: button
entity: climate.living_room
name: Климат
icon: mdi:thermostat
button_type: switch
sub_button:
  - entity: sensor.living_room_temperature
    name: Температура
    show_icon: false
    show_name: false
    show_state: true
    state_color: false

В итоге получаем компактный переключатель климата с отображением текущей температуры.

Распространённые ошибки

Bubble Card требователен к версии Home Assistant. Если что-то не работает, проверьте:

1. Версия HA — нужна 2023.7 или новее
2. Наличие card_mod — Bubble Card использует его для стилизации
3. Правильные типы карточек — card_type должен быть одним из: button, pop-up, tab, slider

Card Mod: вишенка на торте

Без card_mod эти карточки не были бы такими гибкими. Card Mod позволяет добавлять произвольный CSS к любой карточке:

type: custom:mushroom-light-card
entity: light.living_room
card_mod:
  style: |
    :host {
      --mushroom-icon-background-color: rgba(255, 255, 255, 0.1);
      --mushroom-control-border-radius: 20px;
    }

Устанавливается через HACS: Frontend → "card-mod". Обязательно к установке, если хотите по-настоящему кастомизировать интерфейс.

Практический пример: создаём дашборд для гостиной

Теперь соберём всё вместе. Вот как выглядит мой дашборд для гостиной:

type: vertical-stack
cards:
  # Блок освещения
  - type: custom:bubble-card
    card_type: pop-up
    entity: light.living_room_group
    name: Освещение
    icon: mdi:lightbulb-group
    tap_action:
      action: toggle
    pop_up_cards:
      - type: custom:mushroom-light-card
        entity: light.living_room
        name: Люстра
      - type: custom:mushroom-light-card
        entity: light.floor_lamp
        name: Торшер
      - type: custom:mushroom-light-card
        entity: light.led_strip
        name: Подсветка

  # Блок климата
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Температура
        secondary: |
          {{ states('sensor.living_room_temperature') }}°C
        icon: mdi:thermometer
        icon_color: blue
        card_mod:
          style: |
            :host {
              --mushroom-icon-background-color: rgba(33, 150, 243, 0.2);
            }
      - type: custom:mushroom-template-card
        primary: Влажность
        secondary: |
          {{ states('sensor.living_room_humidity') }}%
        icon: mdi:water-percent
        icon_color: teal
        card_mod:
          style: |
            :host {
              --mushroom-icon-background-color: rgba(0, 150, 136, 0.2);
            }

  # График температуры за сутки
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.living_room_temperature
        name: Температура
    hours_to_show: 24
    points_per_hour: 4
    line_width: 3
    show:
      points: false
      labels: true
    color_thresholds:
      - value: 18
        color: blue
      - value: 22
        color: green
      - value: 26
        color: red

Проверка результата

После настройки карточек обязательно проверьте:

1. Отображение на мобильном — откройте дашборд на телефоне. Карточки должны быть адаптивными
2. Скорость загрузки — если дашборд грузится дольше 3-4 секунд, возможно, слишком много графиков
3. Работу тапов — проверьте одиночный, двойной тап и долгое нажатие
4. Консоль браузера — откройте F12 и проверьте ошибки jаvascript

# Если используете Home Assistant в Docker, проверьте логи
docker logs homeassistant --tail 50

Заключение

Эти три карточки — настоящий прорыв в оформлении Home Assistant. Mushroom даёт минимализм и элегантность, mini-graph-card — наглядную визуализацию данных, а Bubble Card — интерактивность и глубину интерфейса.

Конечно, это далеко не все HACS-карточки. Но именно с них стоит начать, если вы хотите превратить свой дашборд из скучного набора переключателей в произведение искусства. А если захотите пойти дальше — обратите внимание на такие инструменты, как Node-RED для автоматизации или Grafana для мониторинга.

Помните: умный дом — это не только автоматизация, но и удовольствие от использования. А красивый интерфейс — половина удовольствия. Удачи в настройке!