Оглавление
Визуальная частьКлиматБудильникСигнализация
Интерактивная карта для добавления и управления объектами. Управляется кастом компонентом config-template-card.
Работает путем наложения нескольких картинок: Главный слой (День/Ночь) => Слой 1 => Слой 2 и т.д.:
Главный слой. Две картинки (файла):
Реализация
Подготовка. 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: >- $ 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: >- $ 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: >- $ 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
Обратите внимание на кастом элементы в коде. Если у вас они не установлены, установите.