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

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

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

Шаг 1: Подготовка ТЗ для иллюстратора и экспорт ассетов

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

Мы разделили графику на следующие компоненты:

  • Базовый фон (Base Layer): Пустой интерьер со стенами, мебелью и полом в выключенном состоянии.
  • Световые зоны (Light Overlays): Полупрозрачные маски для каждого помещения, которые подсвечиваются при активации освещения.
  • Динамические элементы (Entities): Иконки статусов окон, дверей, климатической техники и датчиков протечки.

Важнейшее требование к иллюстратору — работа в векторном редакторе (Figma или Adobe Illustrator) и экспорт строго в формате SVG с единым размерным контейнером (`viewBox`). Если размеры холста у слоев будут отличаться хотя бы на один пиксель, при наложении в Home Assistant начнется смещение сетки.

Когда графика готова, самое время заставить её работать в связке с вашими реальными датчиками движения и реле.

Шаг 2: Настройка Picture Elements Card и кастомных плагинов

Для базовой сборки используется стандартная карточка picture-elements, но для полноценной анимации и работы со сложными SVG-масками понадобятся инструменты из HACS (Home Assistant Community Store). Нам не обойтись без:

  • card-mod: для динамического изменения стилей CSS (прозрачность, свечение, цвета) прямо из конфигурации карточки.
  • Browser Mod: если планируется привязка дашборда к конкретным планшетам на стенах.

Пример базовой конфигурации карточки для наложения фонового изображения и интерактивной зоны света:

type: picture-elements
image: /local/blueprint/base_house.svg
elements:
  - type: image
    entity: light.living_room
    image: /local/blueprint/living_room_light.svg
    style:
      top: 50%
      left: 50%
      width: 100%
    tap_action:
      action: toggle
    hold_action:
      action: more-info

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

Шаг 3: Оживление интерфейса и CSS-анимация

Самая магия начинается, когда мы заставляем элементы реагировать на состояния да