[Перевод] Как я превратил свой нарисованный дом в живой дашборд Home Assistant

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

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

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

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

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

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

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

Поиск художника

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

К счастью, мне порекомендовали замечательного художника по окружению (environment artist), в портфолио которого уже было множество прекрасно проработанных пространств и интерьеров. Мне сразу понравился его стиль, а после непродолжительного общения стало понятно, что мы одинаково представляем себе конечный результат. Идея с пиксель-артом отпала сама собой: я нашёл человека, чей стиль нравился мне ещё больше и который уже умел рисовать интерьеры.

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

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

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

• Иллюстрации из интернета в качестве референсов по стилю и цветовой гамме.

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

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

• Коды цветов краски, оставшиеся после последнего ремонта. Это было скорее дополнительной информацией, чем необходимостью: оттенки можно было подобрать и по фотографиям.

На технической части задания хочу остановиться подробнее, поскольку на ней строится всё дальнейшее повествование. Попросите художника подготовить PNG-файлы с прозрачностью (для анимаций – WebP), дневную и ночную версии каждого этажа, а также вынести каждое устройство на отдельный слой. Для выключенного состояния понадобится статичное изображение, а для включённого – короткая зацикленная последовательность кадров (мне вполне хватило восьми). И всё это нужно подготовить как для дневного, так и для ночного освещения.

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

Ещё пара замечаний по итогам моей работы. Для сада в итоге понадобились три версии: дневная, ночная и ночная с включённым освещением. Кроме того, изначально я попросил подготовить анимации в виде PNG-спрайт-листов, но потом самостоятельно конвертировал кадры в анимированные WebP. Поэтому лучше сразу попросить художника подготовить анимации в формате 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

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

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

Если нажать на интерактивное устройство, например кондиционер, откроется стандартное окно управления Home Assistant (tap_action со значением more-info). Это оказалось самым простым решением, поскольку не пришлось разрабатывать собственный интерфейс управления. Единственное исключение – система полива сада.

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

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

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

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

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

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

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

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

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

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

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

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

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

Собираем всё вместе

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

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

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

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

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

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