Strange, I just clicked on the same link and it works for me logged out of all accounts in chrome incognito mode. Here’s the original link, and I just made a clone:
you can share your project. thank you
Hi, I tried with copy and past all your files and after modify entites but I did a mess.
edit, I’m an idiot, after restore a snapshot I forget to install config-template-card add-on on hacs…
Thanks to all and sorry I’m newbie
Solve again, Now My title rows in all devices card still black. How can I change that?
Very nice! i am hard at work on this tutorial and have a question. I have dimmers that fade in and out when the light goes on / off. Does anyone know if a light photo layer photo can also fade in and out and set a fade duration as a bonus? My CSS knowledge is not that good
.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;
}
1 Like
Slowly but surely making the progress required to modify and use this awesome UI for our newly build home. I’m loving it!
Next up is adding the additional floors of the house and their capabilities as we have multpiple Roborocks for vacuming and ofcourse all lights on all floors are HA capable.
3 Likes
Hello @lukevink.
First of all, thank you for sharing your project. It’s really amazing!
I have a question for you. I’m using your great job as a base for my own UI.
Currently I don’t want to use floorplan UI, so I want to replace the first two tabs “Control Rooms” and “Clean UP” for other stuff.
Can you suggest me how to create buttons 100% indentical to yours but with a different label? (Example: Floor 1).
Do you have a file to share so I can do it by my own?
Thank you again!!
Hi Everyone,
@lukevink thank you for sharing this great code! I have got everything set up and working fine. However, I am running to two issues.
-
The colors on the floor plan are not very defined (especially when comparing to someones example like this Example.
As you can see from my shot, the colors hardly display on the floorplan. I rendered the entire floorplan from Home3D and have an image for each light on on top of the lights off master floor plan. Not sure what else i can adjust to get the colors more define. -
I am blending your floorplan code with another code on here as well to get the best home set up tablet and in using your light pop up card, for whatever reason the brightness slider works but the color in the slider does not appear on the tablets. On the computer, the slider color shows just fine. But on the tablets the slide color is blank.
So is your plan all done using Sweet Home 3D? I am just starting to attempt this project but mine doesn’t look anywhere near as crisp and nice as yours lol
Have you rendered the floor plan? It will look much better once you do that
Render the image to get a nice picture to use for your floorplan: https://www.youtube.com/watch?v=zt0sWxpU7oU&list=PLqazFFzUAPc6vIE_JM3Ysis39MrANKxx_&index=14&t=0s
Can I ask you how did you modified the buttons on the sidebar?
Thanks!
Also another question for you guys:
In the @lukevink example, inside the “Media” pannel, he has the poster really close together and on two rows.
This is what I actually have:
This is my code:
- entity: sensor.film_recenti
style:
left: 84%
top: 25%
width: 18%
date: ddmm
max: 4
image_style: poster
title: Film Recenti
type: 'custom:upcoming-media-card'
- entity: sensor.serie_tv_recenti
style:
left: 84%
top: 59.5%
width: 18%
date: ddmm
max: 3
image_style: poster
title: Serie TV Recenti
type: 'custom:upcoming-media-card'
Hello,
I just finished my floorplan and started with the first light and just trying to take a picture and see what the result. But the light is fine but the image is really blurry… someone knows why this is?
Hi! Amazing work king, looking so good. Ive been trying to integrate the sidebar into my lovelace and ive been able to get it working. Only thing is that it is covering my floorplan! Any chance you’d know how to fix this across every tab?
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