Floorplan UI with Color synced lights

Share your Projects! Dashboards & Frontend
805

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%);
            }
          }
806

that worked for me, so much thanks! :slight_smile:

1 Like
807

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

808

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

809

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.

810

No worries, thanks for the answer :slight_smile:

811

bild
bild1339×742 55.5 KB

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

2 Likes
812

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%
813

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

5 Likes
814

We are eagerly awaiting.

815

daj zemo pomagaj, daj discord ako imas