Home Assistant dashboard: как собрать удобный интерфейс дашборда из карточек

Введение

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

Эта статья даёт общее представление о дашбордах Home Assistant и принципах их построения. Если вам интересны более узкие темы — такие как работа с конкретными карточками, продвинутые UX-подходы или разработка собственных элементов интерфейса — обратите внимание на раздел «Углубление в дашборды Home Assistant» в конце статьи.

Требования к дашборду

• Простота интерфейса — ключевые элементы должны быть доступны в один клик, без вложенных меню
• Группировка по смыслу — устройства одной категории должны находиться рядом
• Responsive-дизайн — дашборд должен одинаково удобно выглядеть и на телефоне, и на планшете, и на компьютере
• Масштабируемость — возможность добавлять новые устройства и сценарии без полной переделки структуры
• Минимум кастомов — приоритет стандартным карточкам, кастомные использовать только там, где они действительно улучшают пользовательский опыт

Что такое Lovelace UI

Lovelace UI — это система пользовательского интерфейса Home Assistant, которая с версии 0.86 стала интерфейсом по умолчанию. Он отделяет визуальную часть от конфигурации системы и позволяет управлять интерфейсом без перезапуска Home Assistant.

Ключевые возможности Lovelace UI:

• более 20 стандартных карточек для отображения данных и управления
• визуальный UI-редактор с живым предпросмотром
• высокая производительность за счёт статической конфигурации
• гибкая кастомизация (темы, иконки, названия сущностей, отображение данных)
• полная поддержка кастомных карточек сообщества

Именно через Lovelace описываются структура дашборда, представления и карточки, поэтому дальнейшие разделы статьи опираются на эту модель.

Элементы дашборда Home Assistant

Дашборд Home Assistant состоит из набора взаимосвязанных интерфейсных элементов. Ниже перечислены наиболее часто используемые из них — на практике их может быть больше, в зависимости от сложности системы и сценариев использования.

Дашборды (Dashboards)

Дашборды (dashboards) — это верхний уровень интерфейса. Помимо пользовательских дашбордов Home Assistant предоставляет и встроенные дашборды. Часть из них по умолчанию не показывается в боковом меню, но доступна в списке дашбордов в Настройки → Панели:

• Обзор — базовый обзор ключевых сущностей на главном экране
• Активность — экран активности и событий, помогает быстро понять «что происходило»
• Энергия — потребление и производство энергии (если настроены соответствующие сущности)
• История — история состояний и событий по выбранным сущностям
• Список дел — списки задач и управление ими

Также в системе присутствуют и другие встроенные или специализированные дашборды — их набор зависит от версии Home Assistant и установленных интеграций.

Представления (Views)

Home Assistant поддерживает структуру через представления (views) — вкладки дашборда. Они позволяют разделять интерфейс на логические части: «Квартира», «Климат», «Сервер» и другие. Ниже приведён пример простого ui-lovelace.yaml с несколькими вкладками:

title: Моя квартира
views:
  - title: Обзор
    cards:
      - type: markdown
        content: Главная вкладка с быстрыми действиями и общим обзором квартиры
  - title: Климат
    cards:
      - type: markdown
        content: Здесь можно разместить управление отоплением, кондиционерами и тёплыми полами
  - title: Сервер
    cards:
      - type: markdown
        content: Вкладка для отображения состояния системы и статистики сервера

У представлений есть разные режимы (типы) отображения:

• Masonry view — карточки автоматически раскладываются по колонкам, учитывая их размер
• Panel view — представление должно содержать ровно одну карточку, которая рендерится на всю ширину
• Sidebar view — представление имеет две колонки: широкую основную и более узкую справа
• Sections view (по умолчанию) — представление позволяет организовывать карточки в секции на сетке и группировать их без использования horizontal/vertical stack

Бейджи (Badges)

Бейджи (badges) — компактные индикаторы состояния, которые обычно размещаются в верхней части представления и дают быстрый контекст без перегрузки интерфейса.

Ниже приведён пример использования бейджа:

title: Мой дом
views:
  - path: default_view
    title: Обзор
    type: sections
    badges:
      - type: entity
        entity: sensor.temperature

Карточки (Cards)

Карточки (cards) — основные строительные блоки дашборда. Наиболее часто используются следующие стандартные карточки:

• alarm-panel — охранные системы
• button — кнопки управления
• entities / entity — отображение состояний и атрибутов устройств
• gauge — уровни и пороговые значения
• history-graph / statistics-graph — история и статистика
• media-control — мультимедиа
• thermostat — управление климатом

Отдельно стоит выделить карточку Tile (tile card) — универсальную стандартную карточку, которая используется по умолчанию в большинстве встроенных дашбордов Home Assistant. Карточка Tile отображает состояние сущности и автоматически подбирает набор доступных действий — включение, регулировку и дополнительные параметры — в зависимости от типа устройства. Она хорошо подходит для освещения, климата, розеток и других типовых устройств и часто используется как базовый элемент дашборда без необходимости кастомизации.

Полный и актуальный список стандартных карточек Home Assistant с примерами конфигурации доступен в официальной документации.

Функции карточек (Features)

Функции карточек (features) — это встроенные элементы управления, которые добавляются внутрь карточек и расширяют их функциональность без необходимости использовать кастомные карточки. С помощью функций карточек можно управлять устройствами прямо внутри карточек: включать и выключать свет, регулировать яркость, температуру, скорость вентилятора и другие параметры.

Набор доступных функций карточек зависит от типа сущности и версии Home Assistant. Их использование позволяет сохранить дашборд компактным и уменьшить количество кастомных решений. Полный список доступных функций карточек и поддерживаемых типов карточек приведён в официальной документации.

Расширение дашборда Home Assistant

Кастомные карточки

Кастомные карточки устанавливаются через HACS и используются там, где стандартных возможностей недостаточно. На практике часто применяются следующие карточки:

• custom:apexcharts-card — продвинутая визуализация графиков
• custom:button-card — универсальные кнопки и мастер-сценарии
• custom:gauge-card-pro — расширенные индикаторы уровней
• custom:multiple-entity-row — отображение несколько сущностей или атрибутов в одной строке
• custom:mushroom-*-card — семейство карточек Mushroom (их много: климат, свет, числа, заголовки и другие варианты)
• custom:stack-in-card — группировка нескольких карточек в одну

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

Установка и базовая настройка HACS подробно разобраны в статье: Как установить HACS

Реализация дашборда Home Assistant

Способы работы с дашбордом

В Home Assistant есть два способа настройки дашборда:

• GUI (storage mode) — редактирование интерфейса прямо из браузера; изменения хранятся во внутреннем хранилище Home Assistant
• YAML (yaml mode) — описание дашборда в файле ui-lovelace.yaml; подходит для версионирования, переноса и сложных конфигураций

Подробнее сравнение двух подходов разобрано в статье:
Home Assistant: config YAML vs storage

Навигация: пункты меню или представления

Для планшетов и настенных экранов удобно использовать навигацию через представления внутри одного дашборда. Если представлений становится много или их названия слишком длинные, переключение в один клик становится затруднительным. Поэтому на мобильных телефонах чаще удобнее вынести ключевые экраны в отдельные пункты бокового меню (sidebar).

Организация быстрых кнопок

Быстрые кнопки предназначены для выполнения наиболее частых и важных действий, к которым пользователь обращается ежедневно. Чаще всего это так называемые мастер-кнопки: режимы «Дома», «Ушёл», управление освещением, комфортом и безопасностью.

Такие кнопки могут управлять как отдельными сущностями, так и сложными сценариями. Например, режим «Ушёл» может одновременно выключать свет, переводить климат в экономичный режим и ставить систему на охрану. Режим «Дома» — выполнять обратный набор действий.

Хорошей практикой является размещение быстрых кнопок на главном экране дашборда и проектирование их с учётом адаптивности, чтобы они одинаково удобно работали на планшетах, настенных экранах и мобильных устройствах.

Ниже приведён пример набора быстрых кнопок, реализованных с помощью custom:button-card. Кнопки адаптируются под ширину экрана, поддерживают различные состояния и подходят для использования в качестве мастер-кнопок режимов и управления ключевыми функциями дома.

title: Мой дом
views:
  - path: default_view
    title: Обзор
    type: sections
    max_columns: 3
    sections:
      - type: grid
        column_span: 3
        cards:
          - type: custom:button-card
            name: Дома
            entity: input_boolean.home_mode
            icon: mdi:home-account
            grid_options: {columns: 3}
            tap_action: {action: toggle}
            hold_action: {action: more-info}
            show_state: false
            state:
              - value: 'on'
                icon: mdi:home-account
              - value: 'off'
                icon: mdi:home-outline
          - type: custom:button-card
            name: Комфорт
            entity: input_boolean.comfort_mode
            icon: mdi:radiator
            grid_options: {columns: 3}
            tap_action: {action: toggle}
            hold_action: {action: more-info}
            show_state: false
            state:
              - value: 'on'
                icon: mdi:radiator
              - value: 'off'
                icon: mdi:radiator-off

Углубление в дашборды Home Assistant

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

Дополнительные статьи:

• Ограничение карточки number в Mushroom для Home Assistant: разбор issue и патч

Итог

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

Полезные ссылки

• Документация по разработке фронтенда Home Assistant — справочник по устройству фронтенда и созданию собственных карточек
• Home Assistant Demo — официальный демо-интерфейс для изучения возможностей Lovelace и карточек
• Список стандартных карточек Home Assistant — официальная документация со всеми типами карточек и примерами использования
• Функции карточек (features) — официальная документация со всеми функциями карточек и примерами использования