Floorplan UI with Color synced lights

Do you use Sweet home 3d?
Make the render at time 00:00. So you get just the light.

Yeah I do. Will do that now!

EDIT: Rendered that using the red light source in the same place as my white light source.

You have to change only the light color. I know there are a lot of lights in sweet home which could not change color. But it looks like yours can and keep me updated if the render is done ( and with time 00:00 it renders even faster because everything else is black ).


This is now what I have after render

Thats wired. Maybe because you use the hole image. I dont know. Maybe it will be better to use just the area that is affected by the light source. Here a e.g. image of one of my rooms in red and kinda white :wink:

Not the hole house just one room. You have to adjust this with top, left and width to be accordingly over the exact area.

White:
roof_white

Red:
roof_red

EDIT ok this is a bad example. For better understanding take a look at these images in white and red:


This is what you have to look for:

EDIT: Do you got your base images right? It seems like your lights are on?
Day time image should be at a “summer” day at a quite late time, so that the lights should be visible ( for my instance it is the 8th of may at 18:30 )
The night time image is at the same day at time 20:15.
On both images no lights on!
All light images should be at time 00:00.

EDIT EDIT: and do yourself a favorite: Save the camera position inside sweet home to get the same image viewing angle all the time.

My two cents here: I actually have only two hue bulbs in my setup, the rest is all LED strips with Zigbee compatible controllers. What do you guys use?

I have my base images which are all rendered at 13:30 on a summers day. I like the bright vibe. With my lights I’ve got them set to 65% brightness so it shows on the image.

Where does it state a day/night image? The only thing I can see in code is this -

image

My light images are only the area of light, not the whole image. For example this is what they look like -

image

Main lights around the house are all hue bulbs. I have a few WLED custom strips on a few ESP32s but they’re more accent lighting

Hue bulbs in different variations, hue lightstrips / grandient and hue lamps wich are all based on lightstrips.

Like I said with hue lightstrips your code does not work correctly. Don’t have any zigbee light to test. All hue lights are connected via hue bridge (HomeKit devices) to HA.

At the beginning of each “floor dashboard” you should have the night/day image as a base image (for night as a base image and day image overlay as day/night change).


- title: Controll Lights
  icon: "mdi:lightbulb-group-outline"
  panel: true
  path: lightcontrol

  cards:
    ###################   PICTURE ELEMENT CARD    #####################

    - type: picture-elements
      image: /local/ui/floorplan/floorplan_night.png
      card_mod:
        style: |
          ha-card {
            background: rgba(42, 46, 48, 1)
          }
      elements:
        #########################    DAY BASE FLOORPLAN OVERLAY    #########################

        - type: "custom:config-template-card"
          entities:
            - sun.sun
          element:
            type: image
            action: none
            entity: sun.sun
            hold_action:
              action: none
            image: /local/transparent.png
            state_image:
              above_horizon: /local/ui/floorplan/floorplan_day.png
              below_horizon: /local/transparent.png
            tap_action:
              action: none
          style:
            height: 100%
            left: 50%
            mix-blend-mode: lighten
            opacity: "${ states['sensor.sunlight_opacity'].state }"
            top: 50%
            width: 100%

It looks like you room images (home_afternoon_livingroomlamp_on.png and bedroom…png) are grayscale images? I guess this is what causes this issue.

  • floorplan_night.png as a base image rendered at night time lights off
  • floorplan_day.png as an overlay (day night change) rendered at day time lights off
  • each lightsource separatly, lightsource white and red also separatly rendered at time 00:00 to show only the light itself. So only the environment that’s affected by the lightsource should be visible everything else should be black.

And use the same “cutout” for every light in one room. Your desklight image should have the same dimension as your bedroomlights_on.png. Do not cut it like you did already. The bedrromlights image should be the whole room with the desk. See my marking above.

Very weird! The code should take the lightstrips reported rgb attribute and transpose it to CSS… Besides, the hue light strips are also Zigbee, to my knowledge :thinking:

Yes, hue lights are zigbee. But in my case not directly embeded to HA via zha or z2m.
To show you what I mean is this. my config red light and yours. Its the hue floor gradient stand.

Red light with my code:
Bildschirmfoto 2024-02-25 um 09.17.03

The same red light with your code:
Bildschirmfoto 2024-02-25 um 09.18.03

Thank you for this. Just redoing my images now so hopefully using your code & having the correct images it’ll work!

1 Like

How do these look?

1 Like

Much better!
The home_night is too dark and the home_day too bright in my opinion but its ok. Give it a try!

Working on the brightness/darkness. Just want to get the coloured lights working as they should then will fix that. It is way too dark haha.

So using this code


  - type: custom:config-template-card
    entities:
      - light.desk
    element:
      type: image
      image: /local/ui/floorplan/lights/rez/home_night_desklights_on_white.png
      entity: light.desk
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      opacity: >-
        ${ ( states["light.desk"].attributes.brightness ?
        states["light.desk"].attributes.brightness / 255 : 0) -
        (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[1]/255 : 0)}
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%
      transform: none

  - type: custom:config-template-card
    entities:
      - light.desk
    element:
      type: image
      image: /local/ui/floorplan/lights/rez/home_night_desklights_on_red.png
      entity: light.desk
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      filter: >-
        ${ "hue-rotate(" + (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[0] : "0") + "deg)
        saturate(" + (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[1] : 255)+ "%)" }
      opacity: >-
        ${ (states["light.desk"].attributes.brightness ?
        states["light.desk"].attributes.brightness / 100 : 0) *
        (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[1]/90 : 0) }
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%
      transform: none

And this top code -

Whenever I turn on the entity light.desk, no overlay image shows. Not the white or red one

On another note, it is still showing my night image, does this change at a certain time of the day to my day image?

The day image changes at sun rise. “above_horizon”.
For testing lights in night time change the image home_day_lights_off.png from above_horizon to below_horizon. U will see your night image.

If I understand you correctly, the light if you switch it on it does not show up? This is maybe because of your day image is too bright or the light amount of your desklamp is too low. You have to play a bit around.

Ahh gotcha, I’m guessing I can configure when sun rise is etc. Will look into that as it’s currently night and bright here so would like my dash to reflect that.

Here is what is mean. When I turn on my light.desk entity, in person they are white and full brightness. In the dashboard they are white and full brightness but the overlay image doesn’t show they are on.

opera_yLG5PfO9Bz

Oh, you have to edit the tab_action. In my case there was none :smiley:
For e.g.

tap_action:
  action: call-service
  service: homeassistant.toggle
  service_data:
    entity_id: [your_light]