Hi All,
i’ve have recently moved from OpenHAB to Home Assistant and i am loving it so far!
After having played with the new Lovelace UI a bit i decided it was time to do so more complicated things in lovelace that require me to move to “yaml mode” .
All fine so far, i can get that up and running and most of the code seems to be working just fine.
I do run into a small problem though where i might need the help of the community.
when trying to setup interactive floorplan’s based on the examples of @lukevink and as shown in this youtube video and constantly run into the same problem of a specific view not showing anything but a empty white screen. nothing, not even errors.
In the case of @lukevink ‘s amazing lovelace setup all views appear to working just fine, with the exception of the "Control rooms’ view. if tried to narrow this down a bit and to me it seems the problem lies in the views using the HACS addon called " config-template-card". I’ve tried implementing the example a shown in the youtube video, but also there the config-template-card part does not appear to be working.
Who is willing to help me troubleshoot this so i can continue my journey in the lovely lovelace world?
Some information on my system:
HA version: v0.113.3
Platform: Supervised (ova install on esxi 6.7)
my ui-lovelace.yaml contents: (showing nothing but white space)
decluttering_templates:
floorplan_light_colour:
element:
entity: '[[entity]]'
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: entities
entities:
- entity: '[[entity]]'
secondary_info: last-changed
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:light-entity-card
entity: '[[entity]]'
color_temp: true
color_wheel: true
full_width_sliders: true
smooth_color_wheel: true
persist_features: true
header: false
effects_list: false
brightness: false
white_value: false
color_picker: false
style: |
ha-card {
box-shadow: none !important;
}
- type: custom:light-entity-card
entity: '[[entity]]'
color_wheel: true
color_picker: true
effects_list: true
full_width_sliders: true
smooth_color_wheel: true
persist_features: true
header: false
brightness: false
color_temp: false
white_value: false
style: |
ha-card {
box-shadow: none !important;
}
- type: 'custom:light-slider-card'
entity: '[[entity]]'
color_temp: true
header: false
persist_features: true
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: '[[name]]'
icon: 'checkbox-blank-circle'
style:
'--iron-icon-height': 2vw
'--iron-icon-width': 2vw
'--paper-item-icon-active-color': '#CCCCCC'
'--paper-item-icon-color': '#CCCCCC'
align-items: center
background-color: '#CCCCCC'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 2vw
justify-content: center
left: '[[left]]'
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: '[[top]]'
width: 2vw
tap_action:
action: toggle
type: state-icon
floorplan_media_player:
element:
entity: '[[entity]]'
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: '[[entity]]'
source: icon
artwork: none
hide:
power: true
icon: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: '[[group1]]'
name: '[[group1Name]]'
shortcuts: ### You can edit these to any playlist of source you wish
columns: 4 # Max buttons per row
buttons:
- icon: mdi:pine-tree
type: playlist
id: spotify:user:spotify:playlist:37i9dQZF1DX0Yxoavh5qJV
- icon: mdi:music-clef-treble
type: source
id: Classic FM
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: '[[name]]'
icon: mdi:speaker
style:
'--iron-icon-height': 2vw
'--iron-icon-width': 2vw
'--paper-item-icon-active-color': '#2b2b2b'
'--paper-item-icon-color': '#2b2b2b'
align-items: center
background-color: '#CCCCCC'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 2.5vw
justify-content: center
left: '[[left]]'
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: '[[top]]'
width: 2.5vw
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: '[[entity]]'
type: state-icon
floorplan_heating:
element:
type: image
action: none
entity: '[[sensor]]'
hold_action:
action: none
image: /local/images/FloorplanDemo/RadOff.png
state_image:
"heating": /local/images/FloorplanDemo/RadOn.png
style:
top: '[[top]]'
left: '[[left]]'
width: 5vw
height: 2vw
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: thermostat
entity: '[[climate]]'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: '[[name]]'
title: Floorplan
icon: mdi:floor-plan
path: floorplanDemo
panel: true
cards:
- type: "custom:config-template-card"
entities: ### List all the light entities here that you plan on using
- light.sitting_left_orb
- light.sitting_room_main
- light.bedroom_light
- light.bedside_right
- light.counter_led
card:
type: picture-elements
image: /local/images/FloorplanDemo/Night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
### Overlay day time image when the sun is up ###
- type: image
action: none
entity: sun.sun
state_image:
above_horizon: /local/images/FloorplanDemo/Day.png
below_horizon: /local/images/transparent.png
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
top: 50%
width: 100%
tap_action:
action: none
hold_action:
action: none
### Overlay light image when the light is on ###
- type: image
action: none
entity: light.sitting_left_orb
hold_action:
action: none
image: /local/images/FloorplanDemo/FloorLight.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_left_orb'].attributes.hs_color
? states['light.sitting_left_orb'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_left_orb'].state === 'on' ? (states['light.sitting_left_orb'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.bedroom_light
hold_action:
action: none
image: /local/images/FloorplanDemo/BedMain.png
style:
filter: >-
${ "hue-rotate(" + (states['light.bedroom_light'].attributes.hs_color
? states['light.bedroom_light'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.bedroom_light'].state === 'on' ? (states['light.bedroom_light'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.bedside_right
hold_action:
action: none
image: /local/images/FloorplanDemo/Bedside.png
style:
filter: >-
${ "hue-rotate(" + (states['light.bedside_right'].attributes.hs_color
? states['light.bedside_right'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.bedside_right'].state === 'on' ? (states['light.bedside_right'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.sitting_room_main
hold_action:
action: none
image: /local/images/FloorplanDemo/SittingMain.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_room_main'].attributes.hs_color
? states['light.sitting_room_main'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_room_main'].state === 'on' ? (states['light.sitting_room_main'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.counter_led
hold_action:
action: none
image: /local/images/FloorplanDemo/FluorescentTube.png
style:
filter: >-
${ "hue-rotate(" + (states['light.counter_led'].attributes.hs_color
? states['light.counter_led'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.counter_led'].state === 'on' ? (states['light.counter_led'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
####### ADD THE BUTTONS! ###
- type: custom:decluttering-card
template: floorplan_light_colour
variables:
- entity: light.sitting_left_orb
- left: 23%
- top: 28%
- type: state-icon
- name: Floor Light
- type: custom:decluttering-card
template: floorplan_light_colour
variables:
- entity: light.sitting_room_main
- left: 40%
- top: 50%
- type: state-icon
- name: Sitting Room Light
- type: custom:decluttering-card
template: floorplan_light_colour
variables:
- entity: light.counter_led
- left: 53%
- top: 80%
- type: state-icon
- name: Counter Light
- type: custom:decluttering-card
template: floorplan_light_colour
variables:
- entity: light.bedside_right
- left: 65%
- top: 80%
- type: state-icon
- name: Bedside Light
- type: custom:decluttering-card
template: floorplan_light_colour
variables:
- entity: light.bedroom_light
- left: 70%
- top: 50%
- type: state-icon
- name: Bedroom Light
- type: custom:decluttering-card
template: floorplan_media_player
variables:
- entity: media_player.bedroom
- left: 80%
- top: 30%
- type: state-icon
- name: Bedroom
- group1: media_player.kitchen
- group1Name: Kitchen
- type: custom:decluttering-card
template: floorplan_media_player
variables:
- entity: media_player.kitchen
- left: 50%
- top: 30%
- type: state-icon
- name: Kitchen
- group1: media_player.bedroom
- group1Name: Bedroom
- type: custom:decluttering-card
template: floorplan_heating
variables:
- sensor: sensor.bedroom_heat
- climate: climate.bedroom
- left: 73%
- top: 24%
- name: Bedroom
- type: custom:decluttering-card
template: floorplan_heating
variables:
- sensor: sensor.sitting_room_heat
- climate: climate.living_room
- left: 35%
- top: 24%
- name: Sitting Room
