Home Assistant Dashboard: Создаём красивый и функциональный пульт управления домом

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

Зачем это нужно? От утилитарности к удовольствию

Изначальный интерфейс Home Assistant — это инструмент для настройки. Но умный дом должен приносить радость, а не напоминать о работе системного администратора. Красивый дашборд решает несколько ключевых задач: * Удобство: Все важные элементы управления — свет, климат, безопасность — под рукой на одном экране. * Наглядность: Графики потребления энергии, состояние всех датчиков, камеры наблюдения — всё видно с первого взгляда. * Доступность: Создаём интерфейсы для разных членов семьи (простой для детей и родителей, расширенный для себя). * Эстетика: Интеграция в интерьер планшета на стене или красивый экран на телевизоре.

В этой статье я поделюсь своим опытом создания такого дашборда, от базовых карточек до продвинутых трюков с CSS. Мы будем использовать встроенный Lovelace UI — невероятно гибкий инструмент, который уже есть в вашем Home Assistant.

Подготовка: Включаем расширенный режим

По умолчанию интерфейс находится в режиме "профиля по умолчанию" (YAML-конфигурация управляется через ui-lovelace.yaml). Для гибкости мы переключимся на управление через интерфейс.

1. Перейдите в свой профиль (правый нижний угол).
2. Включите опцию «Расширенный режим».
3. Теперь в настройках Lovelace (три точки в правом верхнем углу -> «Настроить панель управления») появится кнопка «Редактор Raw-конфигурации». Это наш главный инструмент.

Совет: Перед любыми экспериментами создайте резервную копию конфигурации! В редакторе Raw-конфигурации можно скопировать весь YAML-код в текстовый файл.

Основы: Создаём первую вкладку и добавляем карточки

Дашборд в Lovelace состоит из вкладок (views) и карточек (cards) на них. Давайте создадим новую вкладку «Главная».

1. В настройках Lovelace нажмите «+» для добавления вкладки.
2. Выберите «Заголовок вкладки» и «Значок». Например, «Главная» и mdi:home.
3. Нажмите «+ Добавить карточку» на пустой вкладке.

Начнём с простых и полезных карточек.

Карточка «Свет» (entities card)

Идеальна для группировки выключателей света в одной комнате.

type: entities
title: Гостиная
show_header_toggle: false
entities:
  - entity: light.ceiling_light
    name: Основной свет
    icon: mdi:ceiling-light
  - entity: light.tv_backlight
    name: Подсветка ТВ
    icon: mdi:television-ambient-light
  - type: divider
  - entity: scene.living_room_cozy
    icon: mdi:sofa
    name: Уютный вечер

• show_header_toggle: false — убирает общий выключатель для всех сущностей в карточке (частая ошибка, которая приводит к путанице).
• type: divider — добавляет горизонтальную разделительную линию.
• Сцены (scenes) — отличный способ управлять группой устройств одной кнопкой.

Карточка «Климат» (thermostat card)

Если у вас есть климат-контроль или умный кондиционер.

type: thermostat
entity: climate.living_room_ac
name: Кондиционер в гостиной

Карточка «Камера» (picture-entity card)

Для вывода изображения с камеры. Например, с самодельной камеры на ESP32-CAM, о создании которой я писал в статье ESP32-CAM: Веб-камера и распознавание лиц своими руками.

type: picture-entity
entity: camera.front_door
camera_view: live
tap_action:
  action: more-info

Переходим на новый уровень: Планировщик и Mushroom Cards

Стандартные карточки — это хорошо, но для красоты и компактности я рекомендую установить два дополнения через HACS (Home Assistant Community Store).

1. Установите HACS, если ещё не сделали этого. Это магазин дополнений, тем и интеграций.
2. В HACS найдите и установите:
   • «Layout Card» — для создания сложных сеток (гридов).
   • «Mushroom Cards» — набор невероятно стильных и минималистичных карточек.

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

Создаём сетку с Layout Card

Допустим, мы хотим разместить в одной строке состояние погоды, температуру в комнате и уровень CO2. Стандартные карточки растянутся на весь экран. Layout Card решает эту проблему.

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-entity-card
    entity: weather.home
    icon: mdi:weather-partly-cloudy
    layout: vertical
    primary_info: state
    secondary_info: attribute.temperature
  - type: custom:mushroom-entity-card
    entity: sensor.living_room_temperature
    icon: mdi:thermometer
    layout: vertical
    primary_info: state
    secondary_info: "Температура"
  - type: custom:mushroom-entity-card
    entity: sensor.living_room_co2
    icon: mdi:molecule-co2
    layout: vertical
    primary_info: state
    secondary_info: "CO2"

• layout_type: custom:grid-layout — располагает карточки в сетке.
• layout: vertical в Mushroom Card — размещает иконку и текст друг под другом.

Стильная кнопка с Mushroom

Mushroom Cards идеальны для быстрых действий.

type: custom:mushroom-template-card
icon: mdi:movie-play
icon_color: amber
primary: Кино режим
secondary: Приглушить свет, включить ТВ
tap_action:
  action: call-service
  service: scene.turn_on
  target:
    entity_id: scene.movie_time
hold_action:
  action: more-info

• tap_action — основное действие при тапе (включаем сцену).
• hold_action — дополнительное действие при долгом нажатии (показывает меню с дополнительной информацией).

Организация: Группы, секции и вертикальный стек

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

Vertical Stack (вертикальный стек)

Объединяет несколько карточек в одну колонку.

type: vertical-stack
cards:
  - type: markdown
    content: "### 🛋️ Гостиная"
  - type: horizontal-stack
    cards:
      - type: button
        entity: light.living_room_main
      - type: button
        entity: light.living_room_ambient
  - type: entities
    entities:
      - sensor.living_room_temperature
      - sensor.living_room_humidity

Секции (Section Card)

Введённые относительно недавно, они создают визуальные блоки с заголовком.

type: section
label: Безопасность
cards:
  - type: glance
    entities:
      - binary_sensor.front_door
      - alarm_control_panel.house

Кастомизация: CSS-тюнинг и темы

Если вам мало возможностей карточек, можно добавить свои стили.

1. В настройках Lovelace нажмите на три точки, выберите «Настроить панель управления».
2. Перейдите на вкладку «Панели управления».
3. Нажмите на значок шестерёнки у нужной панели и выберите «Тема». Можно выбрать одну из установленных через HACS тем или создать свою.

Чтобы добавить локальный CSS-тюнинг, в Raw-редакторе конфигурации вкладки добавьте блок styles:

# Пример для raw-конфигурации вкладки
title: Главная
path: main
badges: []
cards: []
# Блок со стилями
styles:
  card:
    --ha-card-border-radius: 20px
    --mdc-icon-size: 24px
  mushroom-shape-icon:
    --icon-border-radius: 15px
  mushroom-state-item:
    --text-color: var(--primary-text-color)

Типичная ошибка: CSS-стили применяются ко всей вкладке. Будьте осторожны, чтобы не сломать отображение всех карточек. Тестируйте понемногу.

Проверка результата: Тестируем на разных устройствах

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

1. Планшет/Смартфон: Откройте интерфейс в мобильном браузере. Убедитесь, что кнопки достаточно велики для нажатия пальцем, а текст читаем. Используйте layout: vertical и horizontal-stack для адаптивности.
2. Десктоп: Проверьте, нет ли пустых мест или, наоборот, скученности элементов на широком экране.
3. Функциональность: Протестируйте каждое действие (тап, долгое нажатие). Убедитесь, что срабатывают все автоматизации и сцены.
4. Производительность: Если вы встроили много камер с высоким разрешением (например, с тех же ESP32-CAM), это может нагружать интерфейс. Рассмотрите вариант отображения статичного снимка (camera_view: auto) вместо постоянного потока.

Заключение: Дашборд как живой организм

Создание идеального дашборда — это не разовая задача, а непрерывный процесс. Ваши потребности будут меняться, появятся новые устройства (например, датчик температуры/влажности/давления на одной плате, о котором я рассказывал в статье ESP32 и три в одном: измеряем температуру, влажность и давление на одной плате), новые идеи для автоматизаций.

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

Главное — ваш пульт управления должен быть удобным именно для вас и вашей семьи. Удачного творчества, и да пребудет с вами умный и красивый дом!

P.S. Если вы только выбираете платформу для своего хаба, возможно, вам будет полезна моя статья-сравнение Orange Pi vs Raspberry Pi: Что выбрать для DIY-проектов в 2024 году?. А для действительно бюджетного, но мощного решения присмотритесь к Orange Pi Zero 3.