[Перевод] Я заказал художнику рисунок своего дома, и теперь это мой дашборд Home Assistant

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

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

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

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

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

Я пересмотрел кучу чужих дашбордов и влюбился в идею плана этажа, то есть интерактивной карты, которая повторяет настоящий дом. Большинство из тех, что мне попадались, были трёхмерными, собранными либо на кастомных карточках Home Assistant, либо в сторонних программах для моделирования. А ещё нашлась одна статья про план этажа в пиксель-арте.

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

Как я искал художника

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

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

Для начала я собрал для художника пакет материалов:

• Простой архитектурный план дома. Мебели на нём не было, её я дорисовал сам.

• Фотографии комнат, чтобы было видно, что там на самом деле стоит.

• Картинки из интернета как референсы по стилю и цвету.

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

• Короткое техзадание с требованиями: какие файлы и в каких форматах мне нужны и зачем каждый из материалов выше.

• Коды красок с последнего ремонта. Это уже необязательно, цвета можно подобрать и по фотографиям.

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

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

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

Как это устроено

Когда иллюстрация готова, остаётся подключить её к дому. В Home Assistant для этого хватает одной стандартной карточки и пары трюков.

Карточка называется picture-elements. Иллюстрация служит ей фоном (image:), а всё, что меняется, то есть устройства и показания, кладётся поверх в elements:, каждый элемент на своё место. Из поддерживаемых типов элементов я в основном пользовался image для устройств, icon и state-label для показаний и conditional, чтобы показывать или прятать элементы в зависимости от состояния.

Первый трюк нужен, чтобы устройства оживали. Элемент image умеет менять картинку в зависимости от состояния устройства (state_image): пока кондиционер выключен, показывается статичный кадр, а как только его включат, картинка сменится на анимированный WebP. Анимацию проигрывает браузер, своего кода для этого писать не нужно.

type: picture-elements
image: /local/floorplan/ground/ground_day.webp
elements:
    - type: conditional
      conditions:
        - entity: input_boolean.dashboard_night
          state: 'on'
      elements:
        - type: image
          image: /local/floorplan/ground/ground_night.webp
    - type: conditional
      conditions:
        - entity: input_boolean.dashboard_night
          state: 'off'
      elements:
        - type: image
          entity: climate.main_room_ac
          image: /local/floorplan/ground/ac_living_off.webp
          state_image:
            cool: /local/floorplan/ground/ac_living_on.webp
            heat: /local/floorplan/ground/ac_living_on.webp
            heat_cool: /local/floorplan/ground/ac_living_on.webp
            auto: /local/floorplan/ground/ac_living_on.webp
            dry: /local/floorplan/ground/ac_living_on.webp
            fan_only: /local/floorplan/ground/ac_living_on.webp
          tap_action:
            action: more-info

Второй трюк отвечает за день и ночь. Я завёл вспомогательный переключатель (хелпер) для дневного и ночного режима и автоматизацию, которая щёлкает его на закате и на рассвете. Настраивается это просто, а возможность сменить режим вручную здорово выручает при отладке. Ночная иллюстрация лежит поверх дневной в элементе conditional, и у каждого устройства точно так же есть дневная и ночная версии.

Если нажать на интерактивное устройство вроде кондиционера, откроется стандартный диалог управления Home Assistant (tap_action со значением more-info). Это самый простой вариант, рисовать свои диалоги не пришлось. Исключением стал только полив сада. На дашборде у него один значок, но за ним стоят несколько независимых клапанов и таймеров, из которых и складывается умный полив. Общего экрана для всего этого нет, а значит, нет и стандартного диалога. Поэтому я сделал свой на Browser Mod, кастомной интеграции из HACS, которая среди прочего умеет открывать на странице Home Assistant собственные всплывающие окна.

Картинка в свойстве image задаётся URL или локальным путём, так что файлы нужно где-то хранить. Я положил их прямо на сервер Home Assistant, он их и раздаёт. Для этого создайте папку /config/www, если её ещё нет, и перезапустите Home Assistant. После этого файлы можно класть в /config/www, и путь /local/floorplan/ground/ac_living_off.webp будет указывать на /config/www/floorplan/ground/ac_living_off.webp.

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

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

Весь дом на одном экране

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

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

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

Есть и ещё одно ограничение: внутрь picture-elements нельзя положить другие карточки. Пришлось складывать карточки этажей на общей вкладке друг на друга через vertical-stack и расставлять по местам с помощью card-mod, популярного плагина из HACS, который позволяет стилизовать карточки через CSS.

Первое включение

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

Сейчас дашборд висит на экране по несколько часов утром и вечером. Телевизором можно управлять из Home Assistant, и в эти часы он по расписанию переключается на дашборд, если только никто ничего не смотрит. Чтобы на экране не было меню Home Assistant и остался чистый дашборд, я поставил из HACS Kiosk Mode.

Огорчило меня только то, что пульт телевизора через HDMI дашбордом управлять не может, и на телевизоре его можно только смотреть, а трогать нельзя. Как ни странно, это сыграло мне на руку. Ведь всё началось с того, что никто в семье не хотел пользоваться приложением Home Assistant. А когда дашборд появился на телевизоре, все поставили приложение на телефоны или добавили дашборд в закладки на компьютерах, чтобы и правда что-нибудь понажимать. Вкладки отдельных этажей хорошо смотрятся на телефоне, а для общей нужен экран хотя бы размером с ноутбук.

Пока меня всё устраивает: на телевизоре весь дом виден одним взглядом, а если нужно что-то поменять, есть приложение.

Иллюстрации для дашборда: Owen Yeconiel.

¹ Так обстояли дела с гайдами и статьями в мае 2026 года, когда я изучал тему. Впечатляющие дашборды на Reddit выкладывали уже тогда, а сейчас про сборку 3D-дашбордов и дашбордов «под 3D» написано гораздо больше, в том числе о том, как переложить большую часть работы на ИИ-инструменты.