Home Assistant с иллюстрацией: панель управления домом, которую использует вся семья

Интерактивная панель управления

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

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

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

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

Возникла идея: а что если создать панель управления, такую красивую, что все захотят её использовать?

Начались поиски вдохновения: рассматривались разные варианты панелей с интерактивной планировкой дома. Нашлось много 3D-решений — либо встроенные карточки Home Assistant, либо сделанные в сторонних программах моделирования. Попалась и статья про пиксель-арт план дома.

3D и пиксель-арт стили для плана дома (иллюстрации созданы для этой статьи)

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

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

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

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

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

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

Стоит подробнее рассказать о технической части брифа, так как весь остальной материал на ней построен. Просить 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

Второй трюк — день и ночь. Создал помощника для переключения между режимами дня и ночи, и автоматизацию, которая переключает его на закате и восходе. Легко настраивается, и возможность переключения вручную очень полезна при тестировании. Ночная иллюстрация лежит поверх дневной как элемент 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, поэтому расписание переключает его на панель в эти часы, если никто ничего не смотрит. Также добавил Kiosk Mode из HACS, чтобы избавиться от меню Home Assistant на телевизоре, делая его чистым опытом панели.

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

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

Иллюстрации панели созданы Owen Yeconiel.