Интерактивный 3D план дома для Home Assistant

Все вы наверно видели один из вариантов управлением дома в Home Assistant через интерактивную панель 3д плана. Ну что, попробуем сделать?

Софт

Лично я использовал приложение Sweet Home 3D, которое в первую очередь бесплатное, а во вторых очень простое в использовании. P.S Для Home Assistant даже есть специальный модуль который позволяет внедрить 3д модель, но мне не очень понравилось и я решил пойти своим путем.

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

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

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

Для начало нужно сделать фото, с везде выключенным светом и сохранить как основную картинку. Для этого нажмите на фотоаппарат в верхнем меню или нажмите на Вид 3D и Создать Фото

Нужно выставить параметры Ширина и Высота картинки, а так же время (Какое время суток нужно сымитировать) я выставил 23:00.

Сохраните картинку. Так же важно задать подходящее название, чтобы было проще при настройки Home Assistant. К примеру 3d-floor-main

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

Как вы могли заметить, сгенерировалась картинка, с включенным светом. Сохраните ее так же с подходящим названием, к примеру 3d-floor-bathroom. Так же нужно повторить для всех помещений где можно управлять освещением.

После того как все нарезки будут готовы Sweet Home 3D можно закрывать!

Фотошоп

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

Берем по одной картинки, где у нас включен свет и вырезаем по краям, куда лучи света у нас попадают. Учтите, что лучи света, могут пересекаться с другими помещениями, по этому вырезать надо так, чтобы они не пересекались, иначе визуально будет не красиво.

Получается что то на подобие такого:

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

Теперь, когда с картинками покончено, осталось дело за Home Assistant

3D модель дома в Home Assistant

Переносим все наши созданные картинки в HA. Для этого переходим в директорию

/config/www/images

и создаем папку images если такой еще не существует, для этого можно использовать дополнение File Editor. Если у вас еще не установлен, его можно установить в Настройки -> Дополнения

Загружаем туда все картинки

Создаем новую вкладку для Lovelace и называем План Дома. Нажимаем изменить и разбираемся в следующем коде:

type: picture-elements
image: local/images/plan-1-etaz-vikl-svet-vezde.png
elements:
  - type: image
    entity: switch.0x00158d0002ab683e_switch
    style:
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'off': local/images/transparent.png
      'on': local/images/plan-1-etaz-svet-prihozaja.png
	  
  - type: state-icon
    icon: mdi:ceiling-light
    entity: switch.0x00158d0002ab683e_switch
    style:
      left: calc(50% - 20px)
      top: calc(27% - 15px)
      background: rgba(255,255,255, 0.1)
      border-radius: 100%
      z-index: 5
      transform: scale(0.8)
      '--paper-item-icon-active-color': '#fff'
    tap_action:
      action: toggle
	  
  - type: state-label
    entity: sensor.datchik_temperatury_prikhozhaia_temperature
    style:
      left: calc(42% - 20px)
      top: calc(26% - 15px)
      font-weight: 200
      font-size: 1vw
      color: rgb(74 74 74)
      transform: rotateX(27deg)
	  
  - type: image
    entity: switch.0x00158d0002ebb346_switch_right
    style:
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'off': local/images/transparent.png
      'on': local/images/plan-1-etaz-svet-gostinnaja.png
	  
  - type: state-icon
    icon: mdi:ceiling-light
    entity: switch.0x00158d0002ebb346_switch_right
    style:
      left: calc(41% - 20px)
      top: calc(40% - 15px)
      background: rgba(255,255,255, 0.1)
      border-radius: 100%
      z-index: 5
      transform: scale(0.8)
      '--paper-item-icon-active-color': '#fff'
    tap_action:
      action: toggle

И так для начало создаем основной тип picture-elements и задаем путь к нашей основной картинки

type: picture-elements
image: local/images/plan-1-etaz-vikl-svet-vezde.png

Дальше расставляем наши интерактивные элементы:

1. Выключатель и в зависимости от состояния мы отображаем картинку с включенным светом, либо заглушку. Указываем нужную картинку нашего помещения. Обратите внимание на transparent.png, это то, о чем я говорил выше.

Так же обратите внимание на стиль pointer-events: none. Такой способ позволяет обойти кликабельность данного элемента.

  - type: image
    entity: switch.0x00158d0002ab683e_switch
    style:
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'off': local/images/transparent.png
      'on': local/images/plan-1-etaz-svet-prihozaja.png

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

  - type: state-icon
    icon: mdi:ceiling-light
    entity: switch.0x00158d0002ab683e_switch
    style:
      left: calc(50% - 20px)
      top: calc(27% - 15px)
      background: rgba(255,255,255, 0.1)
      border-radius: 100%
      z-index: 5
      transform: scale(0.8)
      '--paper-item-icon-active-color': '#fff'
    tap_action:
      action: toggle

3. Выводим значение температуры и так же с помощью стилей выставляем нужное положение.

  - type: state-label
    entity: sensor.datchik_temperatury_prikhozhaia_temperature
    style:
      left: calc(42% - 20px)
      top: calc(26% - 15px)
      font-weight: 200
      font-size: 1vw
      color: rgb(74 74 74)
      transform: rotateX(27deg)

Когда все элементы будут выставлены, вот так может выглядеть готовый результат:

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