Приручи Home Assistant. Интерактивная карта помещения

22 июля 2021, 06:50

Интерактивная карта для добавления и управления объектами. Управляется кастом компонентом config-template-card.

Работает путем наложения нескольких картинок: Главный слой (День/Ночь) => Слой 1 => Слой 2 и т.д.:

1600x_image.png?1626857110

Главный слой. Две картинки (файла): 

1600x_image.png?1626857109

Реализация

Подготовка. 3D моделирование, рендер картинок:

- Моделировать советую в SketchUp. Простая в освоении, внутри пакета множество готовых 3D моделей.

- Для улучшения качества используйте плагин V-Ray для SketchUp.

- Делаем главный слой/картинку. Дополнительно для каждого объекта свою картинку, со своим источником света.

Настройка HA. 

Код урезан, пример представлен для одного объекта каждого типа.

card:
  elements:
#Добавляем отображение температуры
    - type: state-label
      entity: sensor.mi_climate_room_temperature
      style:
        top: 50%
        left: 40%
        color: '#000'
        border-radius: 70%
        text-align: center
        background-color: rgba(255, 255, 255, 0.9)
        font-size: 14px
        font-weight: bold
#Отображение главной картинки (День/Ночь) в зависимости от состояния солнца
    - action: none
      entity: sun.sun
      hold_action:
        action: none
      state_image:
        above_horizon: /local/floorplan/0_day1.png
        below_horizon: /local/transparent.png
      style:
        height: 100%
        left: 50%
        mix-blend-mode: lighten
        opacity: ${ states['sun.sun'].state }
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
#Настройка реакции картинки на параметры объекта: вкл./выкл., смена оттенка и т.д. Свет с доп.параметрами
    - action: none
      entity: light.eve
      hold_action:
        action: none
      image: /local/floorplan/eve1.png
      style:
        filter: >-
          ${ "hue-rotate("   (states['light.eve'].attributes.hs_color ?
          states['light.eve'].attributes.hs_color[0] : 0)   "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.eve'].state === 'on' ?
          (states['light.eve'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
#Настройка реакции картинки на параметры объекта: вкл./выкл. Телевизор
    - action: none
      entity: light.media_player.samsung_tv_remote
      hold_action:
        action: none
      image: /local/floorplan/tv.png
      style:
        filter: >-
          ${ "hue-rotate("  
          (states['media_player.samsung_tv_remote'].attributes.hs_color ?
          states['media_player.samsung_tv_remote'].attributes.hs_color[0] : 0)  
          "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['media_player.samsung_tv_remote'].state === 'on' ?
          (states['media_player.samsung_tv_remote'].attributes.brightness / 255)
          : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
#Настройка реакции картинки на параметры объекта: вкл./выкл. Свет
    - action: none
      entity: input_boolean.relay_room_big
      hold_action:
        action: none
      image: /local/floorplan/room.png
      style:
        filter: >-
          ${ "hue-rotate("  
          (states['input_boolean.relay_room_big'].attributes.hs_color ?
          states['input_boolean.relay_room_big'].attributes.hs_color[0] : 0)  
          "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['input_boolean.relay_room_big'].state === 'on' ?
          (states['input_boolean.relay_room_big'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
#Настройка кнопки на интерактивной карте. Свет с доп.параметрами
    - entity: light.walli
      hold_action:
        action: fire-dom-event
        browser_mod:
          command: popup
          card:
            cards:
              - entities:
                  - entity: light.walli
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: true
                        color_temp: true
                        entity: light.walli
                        full_width_sliders: true
                        hide_header: true
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        type: custom:light-entity-card
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                    column_height: 1
                    layout: vertical
                    type: custom:layout-card
                column_num: 2
                layout: horizontal
                max_width:
                  - 60%
                  - 40%
                type: custom:layout-card
            type: custom:vertical-stack-in-card
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Living Room
      icon: mdi:lamp
      style:
        '--iron-icon-height': 2vw
        '--iron-icon-width': 2vw
        '--paper-item-icon-active-color': '#000000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.39)
        display: flex
        height: 3vw
        justify-content: center
        left: 49%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 64%
        transform: scale(1)
        width: 3vw
      tap_action:
        action: toggle
      type: state-icon
#Настройка кнопки на интерактивной карте. ТВ
    - entity: media_player.samsung_tv_remote
      icon: mdi:television
      style:
        '--iron-icon-height': 2vw
        '--iron-icon-width': 2vw
        '--paper-item-icon-active-color': '#000000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.39)
        display: flex
        height: 3vw
        justify-content: center
        left: 51%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 40%
        transform: scale(1)
        width: 3vw
      tap_action:
        action: toggle
      type: state-icon
#Настройка кнопки на интерактивной карте. Свет без доп.параметров
    - entity: input_boolean.relay_room_big
      icon: mdi:lightbulb-group
      style:
        '--iron-icon-height': 2vw
        '--iron-icon-width': 2vw
        '--paper-item-icon-active-color': '#000000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.39)
        display: flex
        height: 3vw
        justify-content: center
        left: 57%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 30%
        transform: scale(1)
        width: 3vw
      tap_action:
        action: toggle
      type: state-icon
  type: picture-elements
entities:
  - light.eve
  - light.walli
  - media_player.samsung_tv_remote
  - input_boolean.relay_hall
  - input_boolean.relay_room_small
  - input_boolean.relay_room_big
  - light.gateway_light_04cf8cb88c95
type: custom:config-template-card

Обратите внимание на кастом элементы в коде. Если у вас они не установлены, установите.


Все новости мира умных домов - t.me/SprutAI_News или Instagram
Остались вопросы? Мы в Telegram - @SprutAI

Хочешь умный дом но нет времени разбираться?
Посмотри примеры работ и выбери себе интегратора.
К списку статей
Россия, г. Санкт-Петербург

Тематические чаты

Похожие статьи

17 декабря 2019, 17:49
Универсальный привод для автоматического удаленного открытия окон с простой интеграцией в умные дома.
25 сентября 2020, 11:49
Сенсорный монитор для управления умным домом. Настройка и использование.
20 октября 2018, 22:57
Теоретические основы протокола MQTT и описание того, как он работает и для чего используется
24 августа 2018, 12:18
Пошаговая установка HomeAssistant
15 ноября 2018, 09:42
Способы автоматизации механических ворот
27 августа 2018, 10:14
Интегрируем ХА в HomeKit
03 октября 2018, 22:03
Как собрать и настроить Hyperion Ambilight - адаптивную подсветку ТВ.
18 февраля 2020, 17:06
В данной статье описывается сборка слаботочного эл. щита на базе Wiren Board 6, а так же силового щита для небольшой квартиры.
29 октября 2019, 07:59
Умный домофон на базе nodeMCU с прошивкой ESPHome.
01 ноября 2018, 09:27
Настройка Deconz USB стика ConBee от Dresden Elektronik в Hass.io и некоторые особенности эксплуатации