What about the image line? I haven’t had a problem with that, when i use the picture-elements only
oh I saw it, but without superimposing anything
Ok, so next up: the image should be a transparent image (for all the cards of this type you have), and only show state-image when on.
Then, you should revise the code under opacity. The code you have is for an rgb light, but it being in opacity suggests you only want the brightness attribute to be modified.
You can check the frontend\lights_rez.yaml in my config (signature) there are plenty of examples for rgb lights as well as dimmable lights there.
1 Like
Thanks bro, I finally could, the support is appreciated
You’re welcome, glad I was able to help 
1 Like
Hello, first of all thank you for sharing your code.
I’m setting up this Floorplan UI for the second time, the previous une had the “flashing bug” due to my wrong use of the “config-template-card” custom component.
Now, I fixed my code but if I turn on my lights, the floorplan isn’t changing anything.
Here is my code:
title: Floorplan
views:
- title: Floorplan
icon: "mdi:floor-plan"
panel: true
path: floorplan
cards:
################### Picture Elements Card #####################
- type: picture-elements
image: /local/floorplan/notte.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
######################### DAY BASE FLOORPLAN OVERLAY #########################
- type: "custom:config-template-card"
variables:
- states['sensor.sunlight_opacity'].state
entities:
- sun.sun
- sensor.sunlight_opacity
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: "${ states['sensor.sunlight_opacity'].state }"
top: 50%
width: 100%
element:
type: image
action: none
entity: sun.sun
image: /local/floorplan/transparent.png
hold_action:
action: none
state_image:
above_horizon: /local/floorplan/giorno.png
below_horizon: /local/floorplan/notte.png
tap_action:
action: none
######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
####################################################
# #
# SALA + CUCINA #
# #
####################################################
- type: "custom:config-template-card"
entities:
- light.ingresso
style:
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.ingresso'].state === 'on' ? (states['light.ingresso'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
element:
type: image
action: none
entity: light.ingresso
image: /local/floorplan/transparent.png
state_image:
"on": /local/floorplan/ingresso.png
hold_action:
action: none
tap_action:
action: none
Can you help me?
Thanks 
Sorry for the delay, I was away for a bit.
Two things I would try:
- reorder your code so the
stylesection is at the end (as you can see in my code) - Try the image without the mix-blend and without the config-template card, just to see if your image will show when the light is on
Hi all,
I am trying to set a hue-rotate in picture-element card, I have been trying for a few hours, but couldn’t work it out. Would anyone give me some hints, my codes are as below, thank you very much!
- type: image
entity: light.wled
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/small_on_1.png
'off': local/floorplan/all_transparant.png
unavailable: local/floorplan/all_transparant.png
state_filter:
'on': >-
${ "hue-rotate(calc(" + (states['light.wled'].attributes.hs_color ?
states['light.wled'].attributes.hs_color[0]) + "deg + 140deg))" }
use the custom config template card. For example here is my living room setup. In order to get accurate colours I have two different overlays depending on what mode the bulbs are operating in:
- type: "custom:config-template-card"
entities:
- light.all_living_room_spots
element:
type: image
action: none
entity: light.all_living_room_spots
tap_action:
action: none
hold_action:
action: none
image: /local/ui/floorplan/lights/night/livingroom.png
style:
filter: >-
${ "sepia(100%) hue-rotate(calc(" +
(states['light.all_living_room_spots'].attributes.hs_color ?
states['light.all_living_room_spots'].attributes.hs_color[0] : 0)
+ "deg - 55deg)) saturate(calc(" +
(states['light.all_living_room_spots'].attributes.hs_color ?
states['light.all_living_room_spots'].attributes.hs_color[1] :
100)+"% *2))"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.all_living_room_spots'].attributes.color_mode === 'rgb' ? (states['light.all_living_room_spots'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
- type: "custom:config-template-card"
entities:
- light.all_living_room_spots
element:
type: image
action: none
entity: light.all_living_room_spots
tap_action:
action: none
hold_action:
action: none
image: /local/ui/floorplan/lights/night/livingroom.png
style:
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.all_living_room_spots'].attributes.color_mode === 'color_temp' ? (states['light.all_living_room_spots'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
1 Like
Hi all,
I’m desperately trying to get my floorplan on my iPad Pro 2, but unfortunately I’m not getting the size I want.
Below is a picture of my dashboard currently, looks awfull and have no idea how to fill the screen in a good way
I’m using picture element card in panel mode, but still have issues. There is also no way of changing the picture to fit the screen (just as the background of the sidebar)
Is there anyone who can point me in the right direction ?
Kr,
Bart
Looks like you created the size for the full size of the iPad, you will need to reduce the sizing to take into account the menu, I did the same thing so if the Menu is 20% then you need to reduce the pic of your floor plan
And what pixel size are you using for your iPad, minus the 20% ? Do you know that by heard ?
I don’t use an iPad, I went to the website https://whatismyscreenresolution.net/ to find the resolution, also add it into an iframe card to get a more acurate reading
I have the same issue… anyone know the remedy?
Okay so I said I wasn’t going to do this, but I have come to realize I am lost in the sauce here with this and have been trying to get it to work for the better part of a week.
For some reason, I cannot get any color elements to work. I have a simple config that I found online with using only the picture card and got it to work with just white lights, I tried various other ones including the OPs, but cannot get the RGB to show at all. I have tried with the config card as well with the photo card nested inside, but they result in 2 different issues:
-
It says the card type is not specified (config card - yes it’s installed and everything correctly, it just seems to be picky with syntax), in which I have played around with it a bit and got the syntax error to go away which then leads to:
-
A blank page where the card would be. It’s not an issue of my images not being mapped correctly, it’s literally just a clear space that shows an empty card.
Is anyone willing to assist me or post a bit of code? I’ll treat someone to a coffee to sooth my desire to bash my head into a wall 
I invite you to check my github repo (see my signature), that config is up to date and working very well for me.
1 Like
Hi,
I have managed to get this dashboard to works but I get some problem to get ride of, every time the clock changes, the page refresh.
-
Is it possible to get this smoothed and don’t blink?
-
For the Spotify integration, I have Sonos speakers and I’ve tried to had these in the selection but that doesn’t work :
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.sonos_1
name: Sonos-1
- entity_id: media_player.sonos_2
name: Sonos-2
Does anyone have an idea?
- When I choose a song from spotify in the media view, it changes directly but if I go in the control room tab, the menu in the sidebar refresh only when the clock changes…
Thanks!
Hey together,
is there somebody who has the same issue like mentioned here?
Thanks.
Have you seen that the issue you mention has been closed? The solution is there, just check again 