12 окт. 2026

Как превратить рисунок дома в дашборд Home Assistant, которым пользуется вся семья

Автор этого проекта автоматизирует дом на платформе Home Assistant уже год. Он настроил выключение кондиционеров, когда все уходят, и полив в саду, который подстраивается под погоду. Но для управления садовыми фонарями всё равно приходилось лезть в приложение, а кроме него самого, делать это никто не хотел.

Тогда он решил создать дашборд, который понравится всей семье. Идея заключалась в интерактивной карте дома, нарисованной от руки. На ней камин мерцает, в саду загораются фонари, а в спальне дует кондиционер - всё как в реальном доме.

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

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

Ключевой частью стало техническое задание. Художника попросили отрисовать каждый этаж в дневной и ночной версиях в формате PNG с прозрачностью. Каждое устройство должно быть на отдельном слое: статичная картинка для выключенного состояния и цикл из восьми кадров для включённого, тоже в двух вариантах освещения.

Самым важным правилом было использовать общий холст одного размера для всех фрагментов. Каждый кусок должен лежать ровно на том месте, где он находится в доме, а не быть обрезанным по краям. Это впоследствии сэкономило дни на подгонке элементов.

Анимации изначально заказывались как PNG-спрайтшиты, но автор всё равно перегонял их в WebP. Он советует сразу просить у художника готовые анимированные WebP-файлы. Сад дополнительно получил три версии: день, ночь и ночь с включёнными фонарями.

Для подключения иллюстрации к Home Assistant хватило стандартной карточки «изображение с элементами». Рисунок служит ей фоном, а все меняющиеся устройства и показания датчиков накладываются поверх. Каждый элемент позиционируется на своём месте.

Чтобы устройства оживали, использовали свойство «изображение по состоянию». Пока кондиционер выключен, отображается статичный кадр, а при включении он сменяется на анимированный WebP. Анимацию проигрывает сам браузер, без дополнительного кода.

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

При нажатии на интерактивное устройство открывается стандартный диалог управления Home Assistant. Исключением стал только полив сада: за одним значком скрываются несколько независимых клапанов и таймеров. Для него сделали собственное всплывающее окно через интеграцию Browser Mod.

Все файлы иллюстраций автор разместил прямо на сервере Home Assistant в папке с веб-ресурсами. Дашборд изначально задумывался для телевизора. Опасения насчёт того, что браузер webOS на LG не поддерживает WebP, не подтвердились - анимация заработала.

Настоящей проблемой оказалась невозможность настроить быстрый доступ к дашборду с пульта телевизора. Тогда автор установил на сервер Home Assistant дополнение HAOS Kiosk Display и подключил его к HDMI-входу. Теперь у дашборда есть собственный вход, где всегда открыта нужная страница.

На телевизоре хотелось видеть весь дом сразу: оба этажа и сад на одном экране. Для этого сделали несколько вкладок: по одной на каждый этаж и на сад, а также общую вкладку «Весь дом». Все вкладки вырезаны из одного исходного холста, поэтому на общей они идеально совпадают.

Чтобы не настраивать каждое устройство дважды, дашборд перевели в режим YAML. Конфигурация лежит в файлах, у каждого этажа свой набор элементов. Правишь комнату в одном месте - она меняется везде, а после правок достаточно просто обновить страницу в браузере.

Карточки этажей на общей вкладке сложили друг на друга через вертикальный стек и расставили по местам с помощью плагина card-mod. Он позволяет стилизовать элементы через CSS. Плагин Kiosk Mode из каталога HACS скрыл меню Home Assistant, оставив на экране только чистый дашборд.

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

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

Как превратить рисунок дома в дашборд Home Assistant, которым пользуется вся семья

Читайте также