Found out it was the opacity causing my problems as I don’t have installed the sensor it’s using.
1 Like
Hey there yes indeed, it’s usually a rouge sensor that causes this.
Hi again @lukevink, now everything is set up with my own Floorplan and entities. The look is really great but the “Control Rooms” with the Floorplan is slow (usually takes 3-5 sec to respond). I have tried to reduce the filesize of my png’s so they are about 500kb. I’m running Hassio on a Raspberry Pi 4, 4GB. How is your setup running? Is it fast and responsive? 
Hmm that is quite weird, mine works pretty good. however, with all the images and filters it might kill a slow processor/ram. I run the actual website on a tablet with 3gb of ram and a reasonable processor. What device are you running the actual website on?
Yeah I find it weird too! I run the actual website on a MacBook Pro 2019 with 8gb ram. Also tried it on my iPad which is the same. But is only the Control Rooms that is laggy - the rest is all good!
So strange… same setup . How many entities do you have or are you just running mine?
And also - what kind of laggy?
I just discovered a performance boost option, which I am doing to my whole config aswell to speed things up.From each light, if you remove:
state_filter:
'off': opacity(0%)
'on': opacity(100%)
And then change the code inside the opacity style to:
opacity: "${states['light.table'].state === 'on' ? (states['light.table'].attributes.brightness / 255) : '0'}"
This stops UILovelace from trying to “fade on” and off the opacity. Fading on and off while css filters are applied can take alot of processing. By removing the filter and just changing opacity, you should save a bunch of resources. The state === ‘on’ is important, otherwise the opacity wont go to zero when the light is off.
3 Likes
I applied your suggestion above - it was a huge improvement. Before when I pushed a button the light would come on instantly but the render would take up to 3-5 sec. especially with light groups - some times everything except the sidebar would turn white like its starts render frem scratch. Now it takes around 1 sek to render. Much better. I can see that the temperature graph goes off the view and comes back when the renders completes. so it looks like that is updated every time you interact with the Floorplan. Let me know if you find other improvements! Thank you very much for your work!!
1 Like
Very slick design! I’m experimenting with picture elements and a sidebar as well. Is it me or is it not possible to use a markdown card as an element for picture-element?
I have markdown card that states how many lights are on via template and sensor. I want to implement that into this, but the card isn’t supported. The custom:text-card doesn’t support templating (only a static text).
Do you know of a good solution, without having to create 12 images with text and the light counts?
1 Like
Hey glad it improved! And yea not sure how to sort that one out yet it. Will look into it in the next few weeks.
this looks slick! thanks for sharing, i may try to replicate if its not too difficult
1 Like
Cheers! Let me know if you run into any issues. It’s a bit more work than your average config… 
I still end up on this post because it just wow!
So I finally decided to download the software so I could make a Floorplan.
But now questions starts to arise. I am already using lovelace today using the web part to manage it. How can I move on when I have done all the picture work?
Will this be running as another service so I still keep my web ui as it is today or will I have to switch back and forth until I have a lovely functional interface like yours?
1 Like
Unfortunately, if you start going into this custom stuff, you can no longer edit lovelace via the UI.
You can edit in the “Configure UI” from the . . . menu, top right of your UI. However, in my config I just have this as a UI-lovalace.yaml file so I can have comments, etc etc.
Fair warning, the learning curve in editing your lovelace in YAML might be quite steep if you have very little experience with this sort of stuff. This config is also a bit heavy on both YAML and CSS.
Check out this:
Hmmm. I havent tried this, but the markdown card should be supported! Check out this config (which inspired mine originally). He uses markdown inside the picture-elements card:
Hi, thanks for your reply! I have managed to get it to work using custom:hui-markdown-card instead of mardown. Then I followed a deep rabbit hole into CSS and figured how to align the text. I use variable text templates (like how many lights are on, welcome messages etc) and the sizing was centered nomather the align-text options I used.
But I got it all to work. Thanks for your input though, I am interested in CSS and scripts so definitely gonna comb through your post!
Fair enough.
I was actually using the manual process before I did a reinstall action and started over. I think I have a fairly good understanding and by looking at examples it normally enda up making sense to me 
.
Is it possible to describe how you made that sidebar?
I know you just hide away the default menu with compact header, but is your menu just a custom card with designes icons and styled together?
1 Like
any chance you could make this an empty skin? like what we would need for just the side bar?
2 Likes
Thanks for your public config btw, it helped me a great deal understanding how to use picture-elements. I’ve been using HA for little over 3 months now, and have never worked with CSS or scripting, so it’s very welcome to look into what others have done. Used that together with Mattias_Persson’s config as prime examples.
I created a tablet version of my smartphone setup: (work in progress):
3 Likes
The renderings with the sun position would be interest to see the shadows inside the house.
I also thinking the effect of the clouds and sun over PV panels.
Congrats for the amazing work.
1 Like