riduci la risoluzione della foto.
Not sure how you have set this up but possibly if you increase the width of the image in Inkscape (So you have an empty area on the left) this will push it across. It will also make it smaller in height as well unfortunately.
Thanks! for this one @OzGav.
.room-light-fadein {
visibility: visible;
opacity: 0.65;
transition: opacity 0.5s linear;
}
.room-light-fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
I just have no idea how to implement this in the code I have now. do you have any suggestions?
- action: none
entity: light.shelly_shdm_1_keuken
hold_action:
action: none
image: /local/ui/floorplan/lights/bg_donker_keuken_lights.png
style:
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.shelly_shdm_1_keuken'].state === 'on' ? (states['light.shelly_shdm_1_keuken'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
Try replacing everything you have with:(The name can be whatever you want or nothing)
- action:
service: light.toggle
entities:
- light.shelly_shdm_1_keuken
name: Lights
states:
- class: room-light-fadeout
state: 'off'
- class: room-light-fadein
state: 'on'
Hm, can we start from the beginning? 
Where i put these?
.room-light-fadein {
visibility: visible;
opacity: 0.65;
transition: opacity 0.5s linear;
}
.room-light-fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
When is replace my code
- action: none
entity: light.shelly_shdm_1_keuken
hold_action:
action: none
image: /local/ui/floorplan/lights/bg_donker_keuken_lights.png
style:
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.shelly_shdm_1_keuken'].state === 'on' ? (states['light.shelly_shdm_1_keuken'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
tap_action:
action: none
type: image
With this below, the image and blend will disappear right? That is not the intention
- action:
service: light.toggle
entities:
- light.shelly_shdm_1_keuken
name: Lights
states:
- class: room-light-fadeout
state: 'off'
- class: room-light-fadein
state: 'on'
OK hang on. This looks like my mistake I thought you were using Floorplan now available as a Lovelace card which is a custom component but I now think you are using a picture elements card? I won’t be much help then. Perhaps see the OP yaml which is here: https://github.com/lukevink/hass-config-lajv/blob/2543d441fa2b5a448d794a83d58d348b5acf9421/ui-lovelace.yaml
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.