Карта дома в Home Assistant

Вот и пришло время создать карту дома, добавить ее в 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%

Ссылки на другие уроки по настройке Home Assistant.

У этой записи 67 комментариев

  1. Михаил 13.11.2022 Ответить

    У меня, почему-то не появляются картинки в разделе state_image. Причем, в пробном варианте все работало, а когда я уже аккуратно все нарезал и загрузил, то раздел state_image перестал работать. ВЕрнулся к старому варианту и все равно не работает. Уже второй день бьюсь. Впечатление, будто какая-то компонента НА отвалилась. Нет ли идей?

    1. Admin 13.11.2022 Ответить

      Проверил у себя на нескольких картинках — все работает.
      1. Почистить кеш страницы.
      2. Проверить правильность написания имен картинок (насколько помню, регистр имеет значение).
      3. Если адрес прописан /local/***.jpg, то заменить на ‘http://homeassistant.local:8123/local/***.jpg’ (с апострофами). По факту вроде без разницы как писать, но вдруг поможет.
      4. Попробовать заново, с нуля, создав новую вкладку в интерфейсе все написать. Соблюдая все отступы.

      1. Михаил 14.11.2022 Ответить

        В том-то и дело — все это перепробовал и не раз. Если картинку неправильно вписывать, то будет крутиться стрелка и не сохраниться. У меня все сохраняется и стрелка не крутится — даже если неправильно название вписать. С адресом — попробую

  2. Михаил 14.11.2022 Ответить

    Да нет — формат адреса тут не причем, картинки пишу правильно: если картинку из ON вставить вместо image, то она появляется вместо основного фона. А в качестве ON или OFF — не появляется. Причем — работало же… И вдруг внезапно перестала. Насколько помню, обновление НА приходило между этими двумя событиями — наверное в этом дело

  3. Михаил 14.11.2022 Ответить

    type: picture-elements
    image: /local/plan/Suz_all_off.png
    elements:
    — type: image
    entity: switch.okno_kukhnia_switch_1
    — state_image:
    ‘on’: /local/plan/Suz_kh3onr.png
    ‘off’: /local/plan/Suz_kh3onr.png
    style:
    top: 50%
    left: 50%
    with: 100%

    Если я ставлю «-» перед state_image, то у меня появлятся на основном фоне оранжевый прямоугольник вместо подменной картинки. Но это же неправльно…

  4. Михаил 14.11.2022 Ответить

    Все, получилось. Спасибо. Просто сдвигал строчки с операторами и все встало.

    1. Admin 14.11.2022 Ответить

      Отлично. Я даже у себя Home Assistant с июльской на актуальную версию обновил чтобы проверить.

  5. Михаил 16.11.2022 Ответить

    Здравствуйте! Поторопился я написать, что все работает. И ещё раз спасибо вам за уделённое время моей проблеме.
    Я до этого много писал в чистом yaml и структура синтаксиса уже четко сидела в голове. Но именно этот раздел с 3Д планом работает совсем не так. Удивлением было то, что вдруг я получил в карточке подменную картинку, когда я отошёл от уже усвоенной структуры написания yaml. Как оказалось, я рано обрадовался. Да, картинка при активации выключателя менялась, но не так. Она просто менялась на другую, а не накладывалась. В том, что я правильно создал нужные слои- я уверен. В графическом редакторе прозрачность присутствует, но я все равно все переделал ещё раз. Уверен, что дело не в этом. И второе: невозможно вставить следующую картинку. По аналогии с первой — получаю ошибки синтаксиса. Продолжаю возиться, сижу на форумах, пытаюсь по разному «впихнуть» код. Если у вас возникнут какие идеи, то буду весьма признателен.

  6. Михаил 17.11.2022 Ответить

    Радостная новость: сегодня прилетело обновление НА и все заработало! Ура!

  7. Вячеслав 08.12.2022 Ответить

    Всем привет! Подскажите, пожалуйста, как изменить размер карточки Picture Elements, чтобы она была во весь экран?

    1. Александр 19.02.2024 Ответить

      Настройки вкладки —
      Панель (одна карточка на весь экран)

    1. Александр 19.02.2024 Ответить

      Настройки вкладки —
      Панель (одна карточка на весь экран)

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