3D Floorplan with Hue & Saturation mapped to individual, blended RGB Light Entities

Hey all! Given I couldn’t find a clear way to do this in the forums, I thought I would share a little css template I came up with to be able to render multiple lights on top of each other AND map their color and hue dynamically to a light entity - EG:

Individual Lights:
To have multiple lights overlayed ontop of each other, the solution is actually pretty simple. You render an image for each individual light and use the CSS property filter

mix-blend-mode: lighten 

This will make sure only the “light” part of the image is shown, and will blend together any amount of images on top.

Hue and Opacity
To map one of your light images to the actual live RGB color of the bulb, you can use the following CSS template style which will adjust the hue rotation to the hue of the bulb (in this case, light.table):

  filter: '${ "hue-rotate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[0] : 0) + "deg)"}'

OR, include saturation (I found it buggy):

  filter: '${ "hue-rotate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[0] : 0) + "deg) saturate(" + (states[''light.table''].attributes.hs_color ? states[''light.table''].attributes.hs_color[1] : 100)+ "%)"}'

To map opacity to the entity’s brightness, use this css template:

  opacity: '${ states[''light.table''].attributes.brightness / 255 }'

In my config, I also added an image for day and night and blended those together as well giving a different appearence of my home in the evening and daytime, for good measure. :slight_smile: Hopefully this helps some of you make even crazier floorplans! If you need a place to start, this is a brilliant overview of how to make your own floorplan:

You can check out my full config here:



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:

The weather is 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:


This is incredible beautiful :clap: 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 :wink:

Give it a shot and let me know?

1 Like

Hey guys! Added my config. Tried to document as much as possible, so let me know if you have any questions!

Heres a video of the UI! https://youtu.be/KcfZc1MXP_A

1 Like

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 :slight_smile:

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.

1 Like