Please do share your config. I’m blown away by this. Incredible.
Aside: Which lovelace cards are you using to build your left sidebar menu?
1 Like
Hey Xeo! Thanks very much! Will share the config soon, just need to package it.
The photos on the left are just picture-element entities. The menu is as well - I designed my whole UI and then exported images to use as buttons.
The graph at the bottom left is a mini-graph-card showing temperature of my house vs outside:
https://community.home-assistant.io/t/lovelace-mini-graph-card
The weather is simple-weather-card:
https://community.home-assistant.io/t/lovelace-simple-weather-card
Note: pretty much everything in my UI I have added custom styles to tweak it to be exactly how I wanted it to look, so the cards just worked as a foundation. I use card-mod to achieve more complex styling:
https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card
2 Likes
This is incredible beautiful 
Hope to see tour config soon
1 Like
Looks very good ! One question if I may, related to performances : with so many layers displayed at the same time, does the UI remains smooth ? I’ve just about the same amount of lights as you do, and I’m a bit worried that it’ll cause lag and perf issues.
Again, very well done !
1 Like
So there are some caveats indeed. Even on my Mac the fade on/off transition was buggy, it sort of flickers.
So by adjusting opacity you turn off the fade on and offeffect from state transitions. I’m thinking of removing state images entirely though.
That being said, so far I haven’t had any issues in this implementation. I’ll post an actual video along with my config very soon so you can see how it runs. I’m yet to try it on a cheap AliExpress Android tablet though. Waiting another 10 years for it to arrive 
Give it a shot and let me know?
2 Likes
Hey guys! Added my config. Tried to document as much as possible, so let me know if you have any questions!
All right, sold ! Now I know what’s going to be my weekend project this time ^^.
There seem to be some flickering on the bottom left side, is it because the card is re-drawn after each action on the picture ?
Otherwise, it looks very professionnal ! Hope you’re into UI design or something like that 
Side question: What are you using to generate your lovelace ui ?
Yep that’s the minigraph card redrawing when the view changes - it looks like the same view but it’s not.
The UI wasn’t generated so much as ‘designed’ the whole UI is a picture elements card. I did this as my UI is floorplan based, so I decided to do it all in one picture-elements card.
To avoid redraws, you could have everything in the same view (one sidebar instead of repeated like I did) and just conditionally show or hide picture-elements cards based on an input text.
If you go this route, I recommend planning out your UI in sketch, Pixelmator or photoshop beforehand so you know what it’s going to look like. Helps a lot ;). I made my UI, put that as the background image and then positioned every individual element over the top so it matched.
Actually on second thought, it might be redrawing when I tap a light. Weird, will look into this.
2 Likes
Hi Lukevink
your project is fantastic and starting on it i have done one similar.
I want ask you if you can help me on this. In some rooms i have 2 different lights in the same point. One is more Yellow and one is more white, how can i modify the mix-blend-mode to understand wich light is on?
i show you an example
- action: none
entity: light.faretti_1_studio
hold_action:
action: none
image: /local/casa/final/studio.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.faretti_1_studio'].attributes.hs_color ?
states['light.faretti_1_studio'].attributes.hs_color[0] : 0) +
"deg)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.faretti_1_studio'].state === 'on' ?
(states['light.faretti_1_studio'].attributes.brightness / 255)
: '0'}
top: 50%
width: 100%
tap_action:
action: none
type: image
- action: none
entity: light.faretti_2_studio
hold_action:
action: none
image: /local/casa/final/studio.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.faretti_2_studio'].attributes.hs_color ?
states['light.faretti_2_studio'].attributes.hs_color[0] : 0) +
"deg)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.faretti_2_studio'].state === 'on' ?
(states['light.faretti_2_studio'].attributes.brightness / 255)
: '0'}
top: 50%
width: 100%
tap_action:
action: none
type: image
2° question in homekit card that i have infull screen how can i set a red button to go to the home page?
Thanks for sharing your wonderful project! I am a beginner and I am using it to learn how to improve my HA. I am replicate your configuration, change the entities and i was able to run successfully it.
I have basically to problem, that maybe you can help me:
- First i am getting a message error at first opening, that gone if i switch to another card and get back.
QUOTE
Custom element doesn’t exist: hui-picture-elements-card.
type: ‘custom:hui-picture-elements-card’
image: /local/ui/floorplan/floorplan_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
UNQUOTE
- Second are the mini flow in the bottom which for some reasons are not there.
Thanks in advance for your help!
Hey all! so sorry for the late update here. Finally uploaded my code to the latest version (111.3)!
I will go through all comments here tomorrow and see if theres anything I can help out with. Cheers everyone!
Hi Luke,
First of all, love your dashboard and I will be using it in my home automation project.
I noticed that when I updated hass and the modules, the time in the sidepanel is not updated anymore.
I found out that this is due to the custom config-template-card. I fixed it by adding the entities for eg. time and sun to the entities list of the card.
- type: 'custom:config-template-card'
entities:
- sun.sun
- sensor.time
- .......
I was wondering you have the same experience when you upgraded.
Hi Luke, is this repo still your live setup?
Your last post was in 2020 and I would love to reuse your config for our floorplan tablet 
Thanks for the help!
it stopped working for a while. no shades. only white light
- type: image
action: none
entity: light.zesp_bulb_00158d00031e6dcb
hold_action:
action: none
image: /local/FloorplanDemo/Bedroom_hub.png
style:
filter: >-
${ "hue-rotate(" +
(states['light.zesp_bulb_00158d00031e6dcb'].attributes.hs_color ?
states['light.zesp_bulb_00158d00031e6dcb'].attributes.hs_color[0] : 0)
+ "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: >-
${states['light.zesp_bulb_00158d00031e6dcb'].state === 'on' ?
(states['light.zesp_bulb_00158d00031e6dcb'].attributes.brightness /
255) : '0'}
top: 50%
width: 100%
height: 100%
tap_action:
action: none
Hi Luke,
this looks amazing.
Mind telling what light pop-up card are you using?
thanks
Hi guys,
i’ve been trying to get this to work, but I seem to run into a problem. Hopefully someone can help me out.
I have one big room with multiple lights. There are no walls between our living room, dining room and kitchen. However, I want to control them seperately. So what I did was render images from sweet home 3d and I tried to edit them so that I only take the light rays of that part of the room. I did this for all three parts of the room and I set them to 60% transparancy. So far, so good and it looks real cool when I only turn on one part of the room. But when I start turning on multiple parts (eg kitchen and dining room) the lights (and dark spots) of the various rooms clash and form artifacts I don’t want or the light casts shadows which in turn makes the other “room” darker even though the lights there are on.
I’m not sure if this makes any sense to you, I don’t really know how to explain other than this.
Thanks in advance!
edit: I just realised this may not be the right place to post this, in which case I’m sorry 
Sorry for the bump, I am having the same exact issue. I would suppose this can be fixed by using the CSS style code that has been included. I am still struggling to get it to work. Did you find a resolution?
1 Like
Did you use CSS mix-blend-mode: lighten?
style:
mix-blend-mode: lighten
1 Like