Вот и пришло время создать карту дома, добавить ее в Home Assistant и расположить на ней все добавленные элементы.

Для составления карты я использовал программку Planoplan Editor. Она довольно простая в освоении и обладает широким функционалом. После – немного подкорректировал некоторые элементы в фотошопе и загрузил ее в созданную папку www в Home Assistant. Далее добавляем карту в Home Assistant:

    cards:    
    - type: picture-elements
      image: /local/имя_картинки.jpg
      elements:

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

    style:
      top: 10%
      left: 10%

Они позволяют сделать нужный отступ сверху и слева.

Из типов элементов доступны следующие:

state-badge – выводит значок с текущим статусом сущности. Вот так это выглядит на примере датчика давления и розетки:

Датчик давленияРозетка

state-icon – выводит иконку сущности. Отлично подойдет для освещения, датчика движения, протечки, розеток.

        - type: state-icon
          tap_action:
            action: toggle
          entity: light.yeelight_650
          style:
            top: 60%
            left: 18%

Лампочка
state-label – выводит текущее состояние сущности в виде текста. Отлично подойдет для вывода температуры, влажности и давления. Помимо значений можно добавить и текст до или после. Код ниже выводит температуру с датчика Aqara, а строчка prefix добавляет текст перед выводимым значением.

        - type: state-label
          entity: sensor.temperature_158d00047e0285
          prefix: 'Температура '
          style:
            top: 90%
            left: 90%

service-button – создает кнопку, нажатие на которую будет запускать выбранную службу. Например, можно вызвать light.turn_on (включение света) для выбранных объектов (светильников) и, при желании, прописать им определенные параметры включения (яркость, цветовую температуру, цвет). Найти все службы можно по пути “Панель разработчика” -> “Службы”.

        - type: service-button
          title: Включить свет в зале, яркость 70%
          service: light.turn_on
          service_data:
            entity_id: light.yeelight_650
            brightness_pct: 70
          style:
            top: 90%
            left: 90%

Выключатель света
icon – выводит на экран статическую иконку, к которой можно привязать любую сущность. В отличие от state-icon тут иконка не изменяет цвет в зависимости от состояния сущности и по умолчанию ей задано только одно действие – на короткое или длинное нажатие выводить карточку сущности.

image – выводит на карту выбранное изображение. Можно настроить изменение картинки при одинарном или двойном нажатии, а также при удержании. Из вариантов применения – графическое отображение включенного и выключенного света, например, путем затемнения комнаты, когда светильник выключен.

        - type: image
          tap_action:
            action: toggle
          entity: light.yeelight_650
          image: /local/имя_картинки.jpg
          state_filter:
            "off": opacity(50%)
            "on": opacity(0%)
          style:
            top: 90%
            left: 90%

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

        - type: conditional
          conditions:
          - entity: сущность 1
            state: "on"
          - entity: сущность 2
            state: "off"
          elements:
          - type: state-icon
            entity: сущность 3, выводится при выполнении условий выше
            tap_action:
              action: toggle
            style:
              top: 90%
              left: 90%

У себя на карту я добавил светильники, датчик движения, протечки, розетку и информацию о температуре и влажности. Возможно позже добавлю и другие устройства, а пока получилось так:

Итоговая карта дома в Home Assistant

Полный код карты
  - title: Карта квартиры  #Название четвертой вкладки
    icon: mdi:floor-plan  #Иконка вкладки
    panel: true

    cards:    
    - type: picture-elements
      image: /local/map.jpg
      elements:
        - type: state-icon
          tap_action:
            action: toggle
          entity: light.yeelight_650
          style:
            top: 60%
            left: 18%
        - type: state-icon
          tap_action:
            action: toggle
          entity: light.yeelight_480_spalnya
          style:
            top: 73%
            left: 33%
        - type: state-icon
          tap_action:
            action: toggle
          entity: light.yeelight_480_dver
          style:
            top: 18%
            left: 50%
        - type: state-icon
          tap_action:
            action: toggle
          entity: light.yeelight_480_kuhnya
          style:
            top: 21%
            left: 17%
        - type: state-icon
          tap_action:
            action: toggle
          entity: light.yeelight_480_koridor
          style:
            top: 39%
            left: 34%
        - type: state-icon
          entity: binary_sensor.water_leak_sensor_158d00047ea7a7
          style:
            top: 20%
            left: 41%
        - type: state-icon
          entity: binary_sensor.motion_sensor_158d00048497ca
          style:
            top: 25%
            left: 53%
        - type: state-icon
          entity: switch.wifi_xiaomi_socket
          style:
            top: 45%
            left: 16%
        - type: state-label
          entity: sensor.temperature_158d00047e0285
          prefix: 'Температура '
          style:
            top: 44%
            left: 47%
        - type: state-label
          entity: sensor.humidity_158d00047e0285
          prefix: 'Влажность '
          style:
            top: 48%
            left: 47%

Добавить комментарий