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

style:
  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):

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

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

Cheers!

21 Likes

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 :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 ?
image

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

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!