Дашборд Home Assistant: карточки, темы и панель на планшете

14 минчтения 17разделов Умный домрубрика

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

Дашборд Home Assistant: карточки, темы и панель на планшете
Фото: KK IN HK, CC BY-SA 4.0 / Wikimedia Commons

1Кратко

  • Дашборд состоит из представлений (вкладок) и карточек. В новых версиях по умолчанию предлагается тип «Разделы» с сеткой и перетаскиванием.
  • Для старта хватает стандартных карточек: плитка, список сущностей, кнопка, шкала, график, условная карточка и контейнеры stack и grid.
  • Главную панель «Обзор» нужно сначала «взять под управление», после чего новые устройства на ней сами не появляются.
  • Пользовательские карточки (например, Mushroom) и темы ставятся через HACS и подключаются как ресурсы интерфейса. Без них можно обойтись.
  • Для планшета заведите отдельного пользователя и отдельную панель, скройте боковое меню, а при необходимости воспользуйтесь расширением для режима киоска.

2Что такое дашборд и из чего он состоит

Дашборд (в интерфейсе также «панель управления») состоит из представлений (views), которые отображаются как вкладки. Каждое представление наполняется карточками — блоками, показывающими одну или несколько сущностей. Тип представления определяет, как карточки раскладываются на экране. В актуальных версиях это обычно:

  • Разделы (sections) — современный вариант с сеткой, где карточки группируются по разделам и перетаскиваются мышью. Именно он предлагается по умолчанию в новых версиях.
  • Каменная кладка (masonry) — прежний вариант: карточки подбираются по колонкам автоматически.
  • Панель (panel) — одна карточка на весь экран, например карта или большая картинка.
  • Боковая панель (sidebar) — основная область и узкая колонка сбоку.

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

Дашборд Home Assistant: карточки, темы и панель на планшете — иллюстрация
Фото: Bull-Doser at English Wikipedia, Public domain / Wikimedia Commons

3Что понадобится

  • Работающий Home Assistant с уже добавленными устройствами и сущностями. Без них дашборд будет пустым.
  • Доступ с правами администратора: редактировать панели могут только такие пользователи.
  • Для настенной панели — планшет или другое устройство с браузером и стабильным питанием, а также Wi-Fi в месте установки.
  • По желанию — HACS для дополнительных тем и карточек. Подключать его необязательно: стандартных карточек хватает на большинство задач.

4Как взять управление главной панелью «Обзор»

Пока вы ничего не меняли, главная панель «Обзор» формируется автоматически: система сама раскладывает устройства по областям. Чтобы редактировать её вручную:

  1. Откройте главную панель и нажмите значок карандаша в правом верхнем углу (в некоторых версиях сначала нужно открыть меню с тремя точками).
  2. Выберите вариант «Взять управление» (Take control) — название может звучать слегка иначе, ориентируйтесь по смыслу.
  3. Подтвердите действие. После этого автообновление панели прекращается: новые устройства сами на ней больше не появятся, их нужно добавлять вручную.

Если вы хотите сохранить автоматическую панель как есть, создайте отдельную новую: «Настройки > Панели управления > Добавить панель управления» (путь может немного отличаться в разных версиях). Так у вас будет и «живая» панель обзора, и собственная.

5Представления и добавление карточек

В режиме редактирования добавьте новое представление, выберите тип (например, разделы) и дайте ему название и значок. Затем нажмите «Добавить карточку» и выберите нужный тип из списка. Каждый блок можно настраивать через визуальный редактор или в режиме YAML. Полезно уметь и то и другое: визуальный редактор удобен для первых шагов, YAML — для точной настройки и копирования.

6Основные карточки для Home Assistant

Из десятков стандартных карточек для повседневной работы хватает нескольких.

Плитка (Tile)

Универсальная современная карточка: иконка, название, состояние и при необходимости дополнительные элементы управления.

type: tile
entity: light.living_room
name: Гостиная
features:
  - type: light-brightness

Компонент features добавляет ползунок яркости прямо в плитку. Для других устройств доступны другие дополнения, их список показывает редактор.

Сущности (Entities)

Список строк, каждая из которых соответствует одной сущности. Хорошо подходит для групп однотипных вещей.

type: entities
title: Кухня
entities:
  - entity: light.kitchen
  - entity: switch.kettle
    name: Чайник
  - entity: sensor.kitchen_temperature

Кнопка (Button)

Крупная кнопка для сущности или действия. Можно настроить, что произойдёт при нажатии и удержании.

type: button
entity: script.night_mode
name: Ночной режим
tap_action:
  action: toggle

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

Датчик (Sensor) и Шкала (Gauge)

Карточка датчика показывает значение с небольшим графиком, шкала — текущее значение в пределах диапазона:

type: gauge
entity: sensor.bathroom_humidity
min: 0
max: 100
name: Влажность

График истории (History graph) и Markdown

История изменений нескольких сущностей за выбранный период и произвольный текст с шаблонами:

type: markdown
content: >
  Температура на улице: {{ states('sensor.outdoor_temperature') }} °C

Карточки-контейнеры

Для компоновки есть карточки-«обёртки»: vertical-stack и horizontal-stack складывают несколько карточек в столбец или ряд, grid раскладывает в сетку, conditional показывает содержимое, только если выполняется условие. Например, показывать предупреждение о протечке лишь когда датчик сработал:

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.kitchen_leak
    state: "on"
card:
  type: markdown
  content: "Обнаружена протечка на кухне"

Обратите внимание на ключ entity в условиях карточки: он отличается от entity_id в автоматизациях. Это частый повод для ошибок.

Другие полезные карточки

  • Термостат (Thermostat) — управление климатом.
  • Медиаплеер (Media control) — управление воспроизведением.
  • Картинка и план дома (Picture elements) — иконки сущностей, расставленные на изображении плана.
  • Камера (Picture glance, Picture entity) — изображение с камеры и несколько кнопок.
  • Погода (Weather forecast) — прогноз от выбранной интеграции.
  • Область (Area) — карточка комнаты с основными сущностями.

Если стандартных возможностей не хватает, в HACS есть пользовательские карточки. Ставьте их осознанно: каждая — это код сообщества, который может перестать обновляться или конфликтовать с новой версией системы.

7Какую карточку выбрать: быстрая шпаргалка

Задача Подходящая карточка
Включать и выключать свет, розетку, видеть состояние Плитка (tile) с нужными дополнениями
Показать группу устройств компактным списком Сущности (entities)
Запустить сценарий или скрипт одним нажатием Кнопка (button)
Показать влажность, заряд, нагрузку в пределах диапазона Шкала (gauge)
Увидеть динамику температуры за сутки График истории (history-graph) или карточка датчика
Показывать предупреждение только при тревоге Условная карточка (conditional)
Расставить иконки по плану квартиры Элементы на картинке (picture-elements)
Показать камеру Картинка-сущность или Picture glance
Собрать карточки в ряд, столбец или сетку horizontal-stack, vertical-stack, grid

8Редактирование дашборда целиком в YAML

Весь дашборд можно увидеть и изменить как единый текст. В режиме редактирования откройте меню с тремя точками и выберите «Редактор необработанной конфигурации» (Raw configuration editor); название может немного отличаться. Фрагмент простого дашборда:

title: Дом
views:
  - title: Главная
    path: home
    icon: mdi:home
    type: sections
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Свет
          - type: tile
            entity: light.living_room
          - type: tile
            entity: light.kitchen

Карточка heading — это заголовок раздела в представлении типа «разделы». Если версия системы старая и такой карточки в ней нет, замените её на markdown или названия внутри entities. Перед массовыми правками скопируйте весь текст конфигурации в безопасное место: в случае ошибки вернуться будет легче.

9Mushroom и другие пользовательские карточки через HACS

Стандартных карточек хватает на большинство задач, но сообщество предлагает дополнения с иным оформлением. Самый популярный пример — Mushroom: набор аккуратных карточек для света, климата, штор, замков, пылесосов, медиаплееров, а также чипы, заголовки и шаблонные карточки. Его удобство в том, что настраивается он целиком через визуальный редактор, без YAML.

  1. Установите HACS, если он ещё не подключён (отдельная инструкция есть в серии).
  2. Откройте HACS, найдите раздел для интерфейса (в новых версиях он называется «Интерфейс» либо «Frontend») и выполните поиск по слову Mushroom.
  3. Скачайте дополнение, при предложении перезагрузите страницу или очистите кэш браузера.
  4. Откройте дашборд в режиме редактирования, нажмите «Добавить карточку» и найдите новые карточки в общем списке.

Файл дополнения регистрируется в системе как ресурс интерфейса. Если вы ставили его вручную, ресурс добавляется в «Настройки > Панели управления > Ресурсы» (раздел виден при включённом расширенном режиме в профиле) либо в блоке lovelace конфигурации. Если после обновления карточки отображаются старыми или не появляются, причина обычно в устаревшем кэше или в ресурсе, указывающем на старую версию: очистите кэш, а при необходимости удалите ресурс и поставьте заново.

Готовые наборы вроде Dwains Dashboard автоматически собирают панель по областям и устройствам. Это быстрый старт, но платой становится зависимость от стороннего кода и меньшая гибкость. Перед установкой проверьте, совместим ли проект с вашей версией Home Assistant. Подробности, конфигурация карточек вроде card-mod и параметры оформления описаны в репозиториях самих проектов.

10Темы для Home Assistant: выбор и создание

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

Выбор темы. Откройте свой профиль (нижний пункт боковой панели) и найдите блок «Тема» (Theme). Там можно выбрать вариант для светлого и тёмного режимов или оставить автоматическое переключение. Этот выбор сохраняется для устройства или пользователя в зависимости от версии, поэтому на планшете настраивайте его отдельно.

Собственные темы. Файлы тем лежат в каталоге конфигурации. Подключите папку в configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

Создайте в каталоге themes файл, например my_theme.yaml:

my_theme:
  primary-color: "#2a7de1"
  accent-color: "#ff9800"
  modes:
    light:
      primary-background-color: "#f4f6f8"
    dark:
      primary-background-color: "#101418"

Блок modes появился не во всех версиях; в старых темах переменные просто перечислялись под названием темы без разделения на светлый и тёмный режим. Применить изменения можно без перезапуска: в «Инструменты разработчика > Действия» выполните действие перезагрузки тем (frontend.reload_themes), после чего выберите тему в профиле. Список поддерживаемых переменных стоит смотреть в документации: выдумывать названия не нужно, непонятные переменные система просто проигнорирует.

Готовые темы сообщества доступны в HACS в разделе интерфейса. Устанавливайте одну-две и пробуйте: тема, ломающая читаемость на планшете, быстро надоедает.

11Планшет для Home Assistant: настенная панель и киоск

Настенная панель — один из самых популярных проектов вокруг Home Assistant, и «планшет для Home Assistant» ищут чаще, чем многие другие устройства. Принципиально вам нужен любой экран с современным браузером и Wi-Fi. Это может быть недорогой Android-планшет, бывший в употреблении iPad или специализированная панель. Вариантов много, и выбор зависит от бюджета и вкуса, но несколько практических соображений общие для всех.

  • Питание. Планшет, который постоянно работает от сети с включённым экраном, нагружает аккумулятор. Многие используют блок питания, спрятанный в стене, и по возможности настраивают ограничение заряда. Если устройство на постоянной зарядке заметно греется или аккумулятор вздулся, прекратите использование.
  • Экран. Яркость и таймаут желательно ограничить: ночью экран можно гасить автоматически.
  • Размер. На экране 8–10 дюймов помещается плотная панель, при меньшем размере лучше делать крупные плитки и минимум текста.

Способы вывести дашборд на экран

  1. Обычный браузер в полноэкранном режиме. Откройте адрес Home Assistant, войдите в систему и добавьте страницу на главный экран. Это самый простой вариант, но он может требовать ручных действий после перезагрузки.
  2. Мобильное приложение Home Assistant. Оно запоминает вход и открывает нужную панель, поддерживает передачу сенсоров планшета в систему (яркость, заряд). На Android-планшете это часто самый удобный выбор.
  3. Специальные киоск-браузеры. Для Android существуют приложения, которые держат экран включённым, запускаются при старте устройства и позволяют управлять экраном удалённо. Некоторые функции в них платные, поэтому условия смотрите на странице приложения.
Вариант Плюсы Минусы
Обычный браузер Ничего не нужно ставить Адресная строка и ручные действия после перезагрузки
Мобильное приложение Home Assistant Сохраняет вход, отдаёт в систему датчики планшета Возможностей по управлению экраном меньше, чем у специализированных программ
Киоск-браузер (например, Fully Kiosk Browser) Держит экран включённым, запускается при старте, управляется удалённо Часть функций платная; условия смотрите на странице приложения
Готовая настенная панель Продуманное крепление и питание Цена, меньше свободы в выборе экрана

Режим киоска: скрываем лишнее

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

  • В профиле пользователя включается скрытие боковой панели для текущего браузера (опция «Всегда скрывать боковую панель» или близкая по смыслу).
  • В профиле выбирается панель по умолчанию, которая открывается при входе.

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

Отдельный пользователь для планшета

Хорошая практика — завести для настенной панели отдельную учётную запись без прав администратора. В свойствах пользователя можно ограничить вход только локальной сетью (параметр «Только локально» либо с похожим названием). Тогда потеря или кража устройства не даст злоумышленнику доступ ко всей системе. Для такого пользователя можно подготовить отдельную панель, где нет настроек и опасных переключателей.

12Принципы удобной панели управления

Несколько принципов, которые экономят время и нервы.

  • Меньше — лучше. На главном экране оставьте то, чем вы пользуетесь ежедневно: свет, климат, замок, сценарии. Редкие вещи уберите на второстепенные вкладки.
  • Группируйте по комнатам или по назначению. Люди ищут «свет в спальне», а не «светильник номер 4».
  • Крупные цели для касаний. На стене пальцем сложно попасть в мелкие элементы.
  • Условные карточки. Показывайте предупреждения только тогда, когда они актуальны. Так важное не тонет в общем списке.
  • Единые имена и значки. Заведите привычку называть устройства понятно: сущность light.bedroom_ceiling лучше с названием «Спальня: потолок».

13Навигация и разные экраны для телефона и планшета

Одна и та же панель выглядит по-разному на телефоне и на 10-дюймовом экране. Две возможности помогают не плодить копии дашборда.

Во-первых, любая карточка умеет переходить на другую вкладку по нажатию. Так строятся «главная» с крупными кнопками комнат и подробные вкладки за ними:

type: tile
entity: light.living_room
name: Гостиная
tap_action:
  action: navigate
  navigation_path: /lovelace/living-room

Путь зависит от пути вашего дашборда и представления (параметр path), поэтому проверьте его в адресной строке.

Во-вторых, в актуальных версиях у карточек есть блок visibility: он скрывает карточку, если условие не выполняется. Условием может быть размер экрана, пользователь или состояние сущности.

type: tile
entity: climate.living_room
visibility:
  - condition: screen
    media_query: "(min-width: 768px)"

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

14Типичные ошибки и решения

Проблема Причина Решение
Новые устройства не появляются на панели Вы взяли управление, автообновление отключено Добавьте карточки вручную; для автоматического размещения создайте отдельную новую панель
Карточка показывает «Сущность недоступна» Опечатка в идентификаторе или устройство офлайн Сверьте идентификатор в списке сущностей, проверьте связь с устройством
Тема не применяется Не подключена папка тем или файл не перезагружен Проверьте блок frontend, выполните перезагрузку тем, выберите тему в профиле
Ошибка при сохранении YAML карточки Отступы и кавычки Не используйте табуляцию, значения вроде "on" берите в кавычки
Планшет разлогинился Истёк сеанс или очищены данные браузера Используйте мобильное приложение или киоск-браузер с сохранением входа
Панель медленно открывается на планшете Слишком много тяжёлых карточек (графики, камеры) на одной вкладке Разнесите их по вкладкам, уменьшите период истории
Пользовательская карточка перестала работать после обновления Расширение не совместимо с новой версией Обновите её в HACS, очистите кэш браузера или временно отключите
Карточки Mushroom или других дополнений не появились Не добавлен ресурс или в браузере старый кэш Проверьте список ресурсов, очистите кэш, при необходимости удалите ресурс и поставьте заново
Карточка не скрывается по условию visibility Версия системы не поддерживает блок либо неверно записано условие Сверьтесь с подсказкой визуального редактора, используйте conditional

15Пример: готовая вкладка для планшета

Соберём простую вкладку для настенной панели: сверху заголовок, ниже крупные плитки для самого частого.

type: grid
columns: 2
square: false
cards:
  - type: tile
    entity: light.living_room
    name: Гостиная
    tap_action:
      action: toggle
  - type: tile
    entity: light.kitchen
    name: Кухня
    tap_action:
      action: toggle
  - type: tile
    entity: climate.living_room
    name: Климат
  - type: tile
    entity: lock.front_door
    name: Входная дверь

Карточка grid раскладывает содержимое в заданное число колонок. Две колонки на планшете дают крупные цели для касания, а название можно переопределить параметром name. Дальше добавляйте карточки по мере появления потребностей, а редко используемые элементы убирайте на другую вкладку.

16Как переключаться между несколькими панелями

В Home Assistant может быть несколько панелей: например, общая для семьи, для планшета и техническая для администратора. В боковой панели отображаются те из них, которые вы не скрыли. Видимость каждой настраивается в «Настройки > Панели управления», а доступ только администраторам можно включить прямо в свойствах панели. Так вы не позволите посторонним случайно нажать лишнее, а у настенного планшета будет только то, что нужно.

17Итог

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

Вопросы и ответы

Как начать редактировать главную панель Обзор?

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

Какие карточки стоит освоить в первую очередь?

Плитку, список сущностей, кнопку, шкалу, график истории и условную карточку. Для компоновки пригодятся stack и grid.

Как применить собственную тему оформления?

Подключите каталог тем в блоке frontend файла configuration.yaml, положите туда файл темы, выполните перезагрузку тем и выберите тему в профиле пользователя.

Какой планшет подойдёт для настенной панели?

Подойдёт любой с современным браузером и Wi-Fi. Важнее продумать питание, яркость экрана и отдельную учётную запись для панели.

Как убрать боковую панель и шапку на планшете?

Боковую панель можно скрыть в настройках профиля. Для полного скрытия шапки используют стороннее расширение интерфейса из HACS, например kiosk-mode.

Нужно ли устанавливать Mushroom, чтобы дашборд выглядел современно?

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

Остались вопросы?

Задайте свой — после модерации он появится на форуме, ответить сможет редакция и другие читатели.

Войдите, чтобы задать вопрос или ответить другим.