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

Share your Projects! Dashboards & Frontend
1

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:

ezgif-7-2305778199fd
ezgif-7-2305778199fd800×502 2.47 MB

hass-lajv-lights
hass-lajv-lights2000×1250 387 KB

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 }'

ExplodedLights
ExplodedLights3000×1741 593 KB

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!

34 Likes
2

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
3

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
4

This is incredible beautiful :clap: Hope to see tour config soon

1 Like
5

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
6

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?

2 Likes
7

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

8

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

1 Like
9

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 ?

10

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.

11

Actually on second thought, it might be redrawing when I tap a light. Weird, will look into this.

2 Likes
12

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?

13

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!

14

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!

15

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.

16

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

Thanks for the help!

17

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
18

Hi Luke,

this looks amazing.
Mind telling what light pop-up card are you using?

thanks

19

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

20

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