Floorplan UI with Color synced lights

CDRX2 · January 17, 2025, 12:32pm

Hmmm sorry, my bad, I’ve made a wrong assumption here. You won’t need card-mod for what you’re trying to achieve, but the extra-styles property of button-card. See here. Works a charm like this for me. An example for a scrolling marquee in my button-card:

        extra_styles: |
          .marquee {
            animation: marquee 20s linear infinite;
          }
          @keyframes marquee {
            from {
              transform: translateX(0%);
            }
            to {
              transform: translateX(-50%);
            }
          }

AlbyQuaia · January 29, 2025, 5:29pm

that worked for me, so much thanks!

Anoxym1 · February 2, 2025, 5:56pm

Hi @CDRX2

Did you have a video of your Dashboard ? I hesitate to use your code to upgrade mine, it would be cool to have a look at it

Guinius · February 10, 2025, 7:44pm

did you ever get this working well with your RGBW lights? I have the same issue

CDRX2 · February 24, 2025, 7:19pm

Apologies for the late reply, a bit hectic lately…

As a matter of fact, I do not have a video of my dashboard. But it is very similar to Luke’s with regard to lights.

Anoxym1 · February 25, 2025, 9:01pm

No worries, thanks for the answer

envispojke · March 28, 2025, 2:37pm

This is my implementation so far! I went to great lengths to find light fixture 3D models, so I just couldn’t cover them up with buttons. Instead I made smaller indicator buttons for individual lights and added lines to connect them with objects. This also helps keeping things separated around my desk area, while buttons are still large enough on my tablet. Also tweaked the room buttons and added a toggle for my PC.

Still would want to tweak the lighting visuals and UI functionality (just using the standard more-info view for now) but this’ll have to do for now

Sekonicpr · May 28, 2025, 4:23pm

I’m using a Galaxy Tab A8 (via Fully Kiosk Browser) to display my new floorplan dashboard using this forum as reference. The floorplan uses picture-elements as the main card, with multiple custom:config-template-card elements.

Everything works perfectly on iPhone and desktop browsers — light states and overlays update smoothly. But on the Tab A8, do not refresh unless the entire page is reloaded. This leads to stale visual states (e.g., lights appearing off when they’re on).

What I’ve tried:

Initially had config-template-card as the main card (this did refresh, but caused a full redraw with a flash effect)
Switched to picture-elements as the base, using config-template-card only for the overlays (to avoid flashing) — but now the overlays don’t refresh at all
Adjusted all relevant Fully Kiosk settings (reloads, cache, GPU acceleration, etc.)
Verified that other browsers and devices don’t have this issue
Also tested with simpler elements — same problem

Has anyone experienced similar issues on the Galaxy Tab A8 or Fully Kiosk? Is this a rendering or caching issue specific to this tablet? Any tips?

Thanks in advance!
Sk

type: picture-elements
image: /local/floorplan/tablet/floorplan_base_night_0645pm_away.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    entities:
      - sun.sun
    element:
      action: none
      entity: sun.sun
      hold_action:
        action: none
      image: /local/floorplan/tablet/transparent.png
      state_image:
        above_horizon: /local/floorplan/tablet/floorplan_base_0615pm_away.png
      tap_action:
        action: none
      type: image
    style:
      left: 50%
      mix-blend-mode: lighten
      opacity: ${ states['sensor.floorplan_sunlight_opacity'].state }
      top: 50%
      width: 100%
  - type: custom:config-template-card
    entities:
      - light.dining
    element:
      type: image
      action: none
      entity: light.dining
      tap_action:
        action: none
      hold_action:
        action: none
      image: /local/floorplan/tablet/transparent.png
      state_image:
        "on": /local/floorplan/tablet/floorplan_dining_light_on_gradient.png
    style:
      filter: >-
        ${ "hue-rotate(" + (states['light.dining'].attributes.hs_color ?
        states['light.dining'].attributes.hs_color[0] : 0) + "deg) saturate(" +
        (states['light.dining'].attributes.hs_color ?
        states['light.dining'].attributes.hs_color[1] : 100)+ "%)"}
      opacity: ${ states['light.dining'].attributes.brightness / 255 }
      mix-blend-mode: screen
      left: 50%
      top: 50%
      width: 100%
  - type: custom:config-template-card
    entities:
      - binary_sensor.garage_doors
    element:
      type: image
      action: none
      entity: binary_sensor.garage_doors
      tap_action:
        action: none
      hold_action:
        action: none
      image: /local/floorplan/tablet/transparent.png
      state_image:
        "on": /local/floorplan/tablet/floorplan_garage_light_on_both_away.png
    style:
      opacity: 0.5
      mix-blend-mode: normal
      left: 50%
      top: 50%
      width: 100%
  - type: conditional
    conditions:
      - entity: person.person1
        state: home
      - entity: binary_sensor.garage_doors
        state: "on"
    elements:
      - type: custom:config-template-card
        entities:
          - person.jesusmr
          - binary_sensor.garage_doors
        element:
          type: image
          entity: person.person1
          action: none
          tap_action:
            action: none
          hold_action:
            action: none
          image: /local/floorplan/tablet/transparent.png
          state_image:
            home: /local/floorplan/tablet/floorplan_garage_light_on_jr_car.png
        style:
          mix-blend-mode: normal
          left: 50%
          top: 50%
          width: 100%

lukevink · July 28, 2025, 8:21pm

Hi everyone! Sorry I have been really MIA. I bought a new house and have been stuck in 2 years of renovation. When I’m done with all the install and Reno, I will make a new version of this dashboard. With all the updates maybe I can even make it easier etc. Will keep you all posted. Thanks for all of the love across the internet! Awesome to see you all having fun with this

IndioVelho · September 15, 2025, 12:25pm

We are eagerly awaiting.

alexandar · November 2, 2025, 11:08pm

daj zemo pomagaj, daj discord ako imas

asmaticobr · January 13, 2026, 3:02pm

Happy New Year, any news about new version of this amazing dashboard?

stingone · February 8, 2026, 11:24am

Any idea when a update will be released? I had to change the code to fit it to the latest card mod.

fourdogslong · March 28, 2026, 7:04pm

Thanks for this, I am trying to follow these instruction. The floorplan images are done. Now I am trying to make one dimmable light react dynamically and it does not work. I can see the base floorplan but the room “Bureau” is always lit even if I dim or turn off completely light.dimmer_bureau

Here’s what I got so far, shouldn’t this work?

type: picture-elements
image: /local/floorplan/images/RDC.png
elements:
  - type: image
    image: /local/floorplan/images/RDC_Bureau_Plafonnier.png
    tap_action:
      action: none
    hold_action:
      action: none
    style:
      transform: inherit
      top: 0%
      width: 100%
      mix-blend-mode: lighten
    card_mod:
      style: |
        {% set light = 'light.dimmer_bureau' %}
        hui-image {
          opacity: {{ state_attr(light, 'brightness') / 255 if states(light) == 'on' else '0' }};
        }       
grid_options:
  columns: full

jan-tdy · April 29, 2026, 8:14pm

any progress?

stingone · May 14, 2026, 9:39pm

Hi all,

Big thanks to @lukevink for the original concept and to @NdR91 for his NdR-FloorplanUI build on top of it — both repos have been dormant for a while but the concept is still very much alive.

I've taken their work as a basis and done a significant update and simplification:

All card_mod styling updated to current HA standards
Reusable button_card_templates for the sidebar — navigation, weather card and people presence are defined once and reused across all views instead of being duplicated per page
Navigation buttons are now defined in YAML with icons and styles instead of custom PNG images, making them much easier to customise
The sidebar blends into the floorplan instead of having a hard edge — the gradient fade gives a more integrated look
Custom weather icons in the sidebar and defined as buttoncard template
8 views: Home (animated floorplan with light overlays), Devices (HomeKit-style tiles, 2 swipe pages), Media (Spotify + Sonos), Climate, Energy, Buienradar, Camera, Calendar
Optimised for 1280×800 tablet (16:10)

https://raw.githubusercontent.com/stingone/ha-floorplan-tablet/main/assets/preview.gif(image larger than 3 MB)

A special mention for the floorplan images — my wife is an interior stylist and modelled our home in SketchUp and rendered it in V-Ray. The day/night cycle and dynamic light overlays really come to life with proper architectural renders.

This is my first public repo so I hope someone finds it useful. Feel free to use it and make it even better!

Repo: GitHub - stingone/ha-floorplan-tablet: A full-screen Home Assistant tablet dashboard with animated floorplan, blended sidebar and swipeable views. Based on the original concept by lukevink, built upon by NdR91. · GitHub

edi023 · May 18, 2026, 6:20pm

Thanks for bringing this project back to my attention
I got almost everything configured but my floorplan doesn’t look as good as yours, big compliments to your wife.iam gonne take a look at vray and sketch up to level up my floorplan game

I noticed that my floorplan doesnt update when a light turns on, only after a refresh of the page.is this something you also experience or do i have to dig a bit deeper.

zididadaday · May 19, 2026, 5:59am

So cool! Really well done. Tried to set it up in the weekend, to be continued the upcoming weekend.

stingone · May 19, 2026, 1:33pm

Hi,

No works fine here, I see I made a type in de code below:

                - action: none
                  entity: light.dimmer_keuken
                  image: /local/ndr_floorplan/floorplan/interior-night.png <- needs to be kitchen_on.png
                  style:
                    filter: >-
                      ${ "hue-rotate(" + (states['light.dimmer_keuken'].attributes.hs_color
                      ? states['light.dimmer_keuken'].attributes.hs_color[0] : 0) + "deg)"}
                    left: 50%
                    mix-blend-mode: lighten
                    opacity: "${states['light.dimmer_keuken'].state === 'on' ? (states['light.dimmer_keuken'].attributes.brightness / 255) : '0'}"
                    top: 50%

Interior-night.png needs to be kitchen_on.png. I just made an update on github.

I just corrected it should work fine.

edi023 · May 26, 2026, 7:33pm

Does anybody have an idea wha could be wrong.
I used the setup provided by stingone, but when I turn a lamp on I don't see the change on the floorplan (if this makes sense). it does't represent the status of that light, after a reload it does, It looks like it doesn't refresh automatically.

I see this behavior om my Mac mini and my Lenovo p12 tablet.