No problem @OzGav , I will look further if there is a solution for fading in / out image elements.
Did you ever get this sorted out? I’ve got my media page wrapped up with this one exception
Hi,
Did you ever get this color issue sorted? I’m facing a similar issue with colors not showing up correctly and not being very saturated.
If possible, I’d like to avoid editing all the images. Thanks for any tips you could give me.
Hey,
Facing the same problem with the same code. Changing the values for left and top has no effect whatsoever. How did you manage to fix this?
I was playing around on the weekend and did the exact same thing with changing the weather state to rainy from pouring while it was raining this weekend. I too confirmed the state was indeed raining via developer tools. But yeah I didn’t have the raining effect either. I’m reasonably confident the config should be right for it to display.
P.S. How good is the attention to detail and using the sun’s brightness to change the opacity of the daytime image? @lukevink thanks so much for sharing this and inspiring us all!
oh and set mix-blend-mode: screen
This mostly works well for me except for white light where the image appears red and not white, other colours are fine.
So, it appears that installing the card-mod custom component would have been a good idea from the start. Those CSS styles only apply with card-mod installed. I do feel kinda dumb right now…
Ok, so here’s what I ended up doing:
${ "hue-rotate(" + 10 + (states['light.lit_parents_couleur'].attributes.hs_color ? states['light.lit_parents_couleur'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
Basically added 10 degrees to the hue rotation, so my colors on the UI are actually a closer reflection of what is happening in reality. Added the 100% saturation part, so the colors will be a bit punchier.
how i can do floorplan with the menu left side?
i have only 1 web for floorplan
if you can share your code please
how i can do floorplan with the menu left side?
i have only 1 web for floorplan
if you can share your code please
is it just pure white that is not working, or also the colors nearby? Because that used to be the case for me with mix-blend mode on ‘lighten’ . I am not an expert at all, but after trial-errorring many(!) settings this ‘screen’ setting for ‘mix blend mode’ finally solved it. But it could be that during the process I also did some other changes in configuration . Anyway this is what i have now, maybe it can help you:
- action: none
entity: light.keukenstrip
hold_action:
action: none
image: /local/ui/floorplan/lights/light-woonkamer-keuken-light-strip.png
style:
filter: '${ "hue-rotate(" + (states[''light.keukenstrip''].attributes.hs_color ? states[''light.keukenstrip''].attributes.hs_color[0] : 0) + "deg) saturate(" + (states[''light.keukenstrip''].attributes.hs_color ? states[''light.keukenstrip''].attributes.hs_color[1] : 100)+ "%)"}'
left: 50%
mix-blend-mode: screen
opacity: "${states['light.keukenstrip'].state === 'on' ? (states['light.keukenstrip'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
instead of an icon i use a transparent image for the overlay. And i’m using predefined colorpicker (rgb-light card) but it also works with the light entity card:
- entity: light.keukenstrip
double_tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: light.keukenstrip
secondary_info: last-changed
style:
z-index: 5
type: entities
- cards:
- cards:
- brightness: false
entity: light.keukenstrip
colors:
- rgb_color:
- 233
- 193
- 34
brightness: 220
transition: 1
- rgb_color:
- 255
- 255
- 255
brightness: 220
transition: 1
- rgb_color:
- 120
- 0
- 0
brightness: 220
transition: 1
- rgb_color:
- 18
- 0
- 255
brightness: 220
transition: 1
- rgb_color:
- 0
- 255
- 0
brightness: 220
transition: 1
type: "custom:rgb-light-card"
- brightness: false
entity: light.keukenstrip
type: "custom:slider-entity-row"
column_height: 1
layout: vertical
type: "custom:layout-card"
type: "custom:layout-card"
type: "custom:vertical-stack-in-card"
deviceID:
- this
style:
opacity: 1
title: Keukenstrip
image: /local/ui/floorplan/lights/blinkies/5050nix.png
style:
left: 32%
top: 23%
tap_action:
action: toggle
type: image
1 Like
Hi,
I’ve started implementing this, thanks for the detailed code! One of the modifications I would like to achieve is to declutter the lovelace-ui.yaml. I’ve managed this to some extent using
- type: 'custom:config-template-card'
entities:
- ...
card:
type: 'custom:state-switch'
entity: input_select.floorplan_floor
states:
Rez:
!include lights_rez.yaml
1er:
!include lights_1er.yaml
I’m using the state-switch to switch between ground floor and 1st floor on various views.
One further step I would like to take is to use - !include sidebar.yaml to have the sidebar for all views in a single file. However, I’ve not been able to manage this. I’m stuck with what I think is an indentation problem (not sure, I wouldn’t consider myself a yaml expert).
The code from ui-lovelace.yaml:
type: picture-elements
image: /local/ui/floorplan/Rez_nuit.png
elements:
- ...
- !include sidebar.yaml
sidebar.yaml:
action: none
hold_action:
action: none
image: /local/ui/sidebar/sidebarBG2.png
tap_action:
action: none
type: image
- entity: sensor.time
hold_action:
action: none
tap_action:
action: none
type: state-label
This gets me the following error: expected '<document start>', but found '<block sequence start>' in "/config/sidebar.yaml", line 18, column 3
Tried removing the - in front of entity: sensor.time the view works, but only the time shows up, the image is nowhere to be seen.
When adding - in front of action:none the view loads but I get a red box instead of the sidebar with no card type configured
If anyone has any ideas, tips or experience with this I’d be very grateful.
Hey Luke, thanks for one of the best Lovelace frontends I’ve ever seen.
Would you want to share the font you used?
Also, what’s your discord, I haven’t been able to find it.
I might pm you with a few questions regarding the image editor you used , if you don’t mind.
Hi thanks for your response. From memory it was just white. I’ll try again and then try your suggestions! 
Has anyone had issues with just the weather and temperature graphs flashing when other elements are used or changed? If I turn a light on or when my motion sensors change state and the icon changes the weather and temperature graphs in the side bar flash/refresh.
I’ve had a few issues along the way if I’ve not had the entities in the template card entity list so I have everything in there and have double checked. The weather and temperature sensors used in those two components in the sidebar have their entities in the top template card entity list.
Any pointers or help would be greatly appreciated as its really the last thing not quite right on my floorplan at the moment.
I think it’s to do with the UI refreshing. Seeing the similar behavior on my end, happening when other elements change and when I manually reload the UI.
Figured it out. I found a custom group element and used that as a container for the entire sidebar. Had to redo the positioning and sizing of the elements since those are now relative to the group and no longer the entire width of the UI.
Hi CDRX2,
So you just nested the current sidebar config under a custom group element?
I’ll have a look as I’m super keen to address this issue as its quite distracting seeing it refresh!
Cheers.
If you are able to share a bit of your code and or any styling to save time that would be really appreciated.