I just added the card-mod. unfortunately, this did not make any difference.
Maybe there is something missing in my code? The code I uploaded was the whole code from a single YALM lovelace file
Ok, I think I figured out what you’re missing. Basically, you have the following:
type: 'custom:config-template-card'
element:
type: image
image: path/to/your/image
And what you need is:
type: 'custom:config-template-card'
element:
type: image
image: path/to/transparent/image
state_image:
'on': path/to/your/image
Basically set your “lights on” images to be the state image and then apply the filters for opacity and color in the style section. My version:
- type: 'custom:config-template-card'
entities:
- light.bar
element:
action: none
entity: light.bar
hold_action:
action: none
image: /local/transparent.png
state_image:
'on': /local/ui/floorplan/lights/rez/Bar.png
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
width: 100%
filter: >-
${ "hue-rotate(" + (states['light.bar'].attributes.hs_color ? states['light.bar'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
mix-blend-mode: lighten
opacity: "${states['light.bar'].state === 'on' ? (states['light.bar'].attributes.brightness / 255) : '0'}"
Small note: card-mod is needed for the following
There was an update to the card a ways back, the code should now have an extra card_mod keyword in it:
card_mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
CDRX2! thank you so much 
At first i could not make the code work, but then I noticed i had this command:
transform: none
After I removed this your example code worked perfectly! Thank you so much.
My code as it is now:
views:
- title: Floorplan
# path:
panel: true
badges: []
cards:
- type: picture-elements
image: /local/images/3d_floorplan/color/home_off.png
card_mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: 'custom:config-template-card'
entities:
- light.spisestue
element:
action: none
entity: light.spisestue
hold_action:
action: none
image: /local/images/3d_floorplan/color/home_transparent.png
state_image:
'on': /local/images/3d_floorplan/color/home_white.png
tap_action:
action: none
type: image
style:
opacity: >-
${ ( states["light.spisestue"].attributes.brightness ?
states["light.spisestue"].attributes.brightness / 255 : 0) -
(states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[1]/90 : 0)}
mix-blend-mode: lighten
left: 50%
top: 50%
width: 100%
# transform: none
- type: 'custom:config-template-card'
entities:
- light.spisestue
element:
action: none
entity: light.spisestue
hold_action:
action: none
image: /local/images/3d_floorplan/color/home_transparent.png
state_image:
'on': /local/images/3d_floorplan/color/home_red.png
tap_action:
action: none
type: image
style:
filter: >-
${ "hue-rotate(" + (states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[0] : "0") + "deg)
saturate(" + (states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[1] : 100)+ "%)" }
opacity: >-
${ (states["light.spisestue"].attributes.brightness ?
states["light.spisestue"].attributes.brightness / 255 : 0) *
(states["light.spisestue"].attributes.hs_color ?
states["light.spisestue"].attributes.hs_color[1]/90 : 0) }
mix-blend-mode: lighten
left: 50%
top: 50%
width: 100%
# transform: none
1 Like
You’re welcome! I missed that transform keyword when I checked your code…
Awesome work. Thanks! Has anyone else had issues with the color sync? I have downloaded the repo and added my own entites. The overlay works, brightness even works and shows on the floorplan but the color does not. The actual entity button for the lights does show the correct color but the actual image does not update. Including two relevant code snippets, maybe someone else can see something I’ve missed?
- type: 'custom:config-template-card'
entities:
- light.bedroom_light
- light.yeelink_bslamp2_b81a_light_2
- light.luis_bed_light
- light.luz_de_david
- light.comedor1
- light.comedor2
- light.entrada_exterior
- light.entrada_interior
- light.hexglow
- light.sala1
- light.sala2
- light.oficina1
- light.theater_bulb
- light.kitchen_light
- action: none
entity: light.theater_bulb
hold_action:
action: none
image: /local/ui/floorplan/lights/cine-new.png
style:
filter: '${ "hue-rotate(" + (states[''light.theater_bulb''].attributes.hs_color ? states[''light.theater_bulb''].attributes.hs_color[0] : 0) + "deg) saturate(" + (states[''light.theater_bulb''].attributes.hs_color ? states[''light.theater_bulb''].attributes.hs_color[1] : 100)+ "%)"}'
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.theater_bulb'].state === 'on' ? (states['light.theater_bulb'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
Hello,
Has anyone experienced this issue before, or have a fix ? Every time a device or entity updates, the whole floorplan flashes white.
video: Floorplan flashing issue - YouTube
button_card_templates: !include button_card_templates.yaml
kiosk_mode:
hide_header: true
title: floorplan
views:
#############################################################################################################################################
# #
# Floorplan View #
# #
#############################################################################################################################################
- title: Floor_plan
icon: 'mdi:floor-plan'
panel: true
badges: []
cards:
################### config-template-card #####################
######################### IMPORTANT! #########################
# To use the styling templates for individual lights, I have used
# Config Template Card. Config template card passes the entities it
# uses into the card. Make sure you change these entities below to
# your own and include any light entities you use above.
# To understand why, check: https://github.com/iantrich/config-template-card
- type: 'custom:config-template-card'
entities:
- light.plafond_hobbykamer
- light.toilet_lamp
- light.gang_lamp
- light.kast
- light.bed
- light.plafond_slaapkamer
- light.spots
- light.tafel
- light.hoeklamp
card:
################### Picture Elements Card #####################
type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
- action: none
entity: light.plafond_hobbykamer
hold_action:
action: none
image: /local/images/3d_floorplan/Hobbykamer.png
style:
# filter: >-
# ${ "hue-rotate(" + (states['light.plafond_hobbykamer'].attributes.hs_color
# ? states['light.plafond_hobbykamer'].attributes.hs_color[0] : 0) + "deg)"}
filter: >-
${ "sepia(100%) hue-rotate(calc(" +
(states['light.plafond_hobbykamer'].attributes.hs_color ?
states['light.plafond_hobbykamer'].attributes.hs_color[0] : 0)
+ "deg - 55deg)) saturate(calc(" +
(states['light.plafond_hobbykamer'].attributes.hs_color ?
states['light.plafond_hobbykamer'].attributes.hs_color[1] :
100)+"% *2))"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.plafond_hobbykamer'].state === 'on' ? (states['light.plafond_hobbykamer'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
It is the best to use config-template-card INSIDE picture-elements. Think you have it the other way
1 Like
Thank u for the quick response! I beleve I’ve done it the correct way. Could you check out my attached code which I just added to my main question above ?
Nope, you’re using picture-elements within config-template-card. What @DNWY90 meant was something like this:
type: picture-elements
elements:
type: 'custom:config-template-card '
1 Like
Yes what @CDRX2 says is correct. The floorplan in this topic is not up to date. This worked untill some months ago. If you google on config template card flickering you find more examples on github.
1 Like
Thanks guys! Your comments lead me to this github: https://github.com/iantrich/config-template-card/issues/78 which has a nice example
1 Like
Happy coding! Feel free to ask if you’re stuck, I rely on this very heavily in my setup.
Hello,
So far I got my floorplan updated and the flashing on updates disappeared
The only problem I’m encountering right now is the opacity and the color of the lights not working.
I simply copied the color and opacity functions from the previous picture-elements code, which worked before, however this doesn’t seem to work with the config-template-card.
inserting a hard coded value between 0-1 in the opacity field works.
- type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: custom:config-template-card
entities:
- light.gang_lamp
element:
type: image
entity: light.gang_lamp
image: /local/transparent.png
state_image:
'on': /local/ui/floorplan/lights/gang.png
tap_action:
action: none
style:
left: 50%
style:
mix-blend-mode: lighten
filter: >-
${ "sepia(100%) hue-rotate(calc(" +
(states['light.gang_lamp'].attributes.hs_color ?
states['light.gang_lamp'].attributes.hs_color[0] : 0)
+ "deg - 55deg)) saturate(calc(" +
(states['light.gang_lamp'].attributes.hs_color ?
states['light.gang_lamp'].attributes.hs_color[1] :
100)+"% *2))"}
opacity: >-
${states['light.gang_lamp'].state === 'on' ?
(states['light.gang_lamp'].attributes.brightness / 255) :'0'}
top: 50%
left: 50%
width: 100%
Hmmm somehow don’t see your code for the filter working. Don’t know where you got the sepia keyword from, for instance.
Here’s what works for me (with the caveat that, in order to get nice saturated colors, the actual images with color are using red light sources):
- type: 'custom:config-template-card'
entities:
- light.bar
element:
action: none
entity: light.bar
hold_action:
action: none
image: /local/transparent.png
state_image:
'on': /local/ui/floorplan/lights/rez/Bar.png
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
width: 100%
filter: >-
${ "hue-rotate(" + (states['light.bar'].attributes.hs_color ? states['light.bar'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
mix-blend-mode: lighten
opacity: "${states['light.bar'].state === 'on' ? (states['light.bar'].attributes.brightness / 255) : '0'}"
1 Like
That filter code worked somewhat correctly with white light sources, but I could easaly change that up to red.
When using your code I get the following error:
This is the complete lovelace yaml I’m currently testing with
views:
- title: Floorplan
panel: true
badges: []
cards:
- type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: 'custom:config-template-card'
entities:
- light.plafond_hobbykamer
element:
action: none
entity: light.plafond_hobbykamer
hold_action:
action: none
image: /local/transparent.png
state_image:
'on': light.plafond_hobbykamer
tap_action:
action: none
type: image
style:
left: 50%
top: 50%
width: 100%
filter: >-
${ "hue-rotate(" + (states['light.plafond_hobbykamer'].attributes.hs_color ? states['light.plafond_hobbykamer'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
mix-blend-mode: lighten
opacity: "${states['light.plafond_hobbykamer'].state === 'on' ? (states['light.plafond_hobbykamer'].attributes.brightness / 255) : '0'}"
Well, for starters, under state_image you should have a path to an image defined, not an entity name.
my bad, changed that afterwards, If I change the state image to the correct path, I still get the same error.
I think you’re missing a keyword at the top level picture-elements.
views:
- title: Floorplan
panel: true
badges: []
cards:
- type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
card_mod: */<---- here /*
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
Combined both of your examples like this:
views:
- title: Floorplan
panel: true
badges: []
cards:
- type: picture-elements
image: /local/ui/floorplan/floorplan_night.png
card_mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: 'custom:config-template-card'
entities:
- light.plafond_hobbykamer
element:
action: none
entity: light.plafond_hobbykamer
hold_action:
action: none
image: /local/transparent.png
state_image:
'on': /local/ui/floorplan/lights/hobbykamer.png
tap_action:
action: none
type: image
# style: none
style:
left: 50%
top: 50%
width: 100%
filter: >-
${ "hue-rotate(" + (states['light.plafond_hobbykamer'].attributes.hs_color ? states['light.plafond_hobbykamer'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
mix-blend-mode: lighten
opacity: "${states['light.plafond_hobbykamer'].state === 'on' ? (states['light.plafond_hobbykamer'].attributes.brightness / 255) : '0'}"
I still get the same No style defined for element error 
When I add the style: none inside of the element: This error disappears , but neither the color filter or the opacity are working then.