Floorplan UI with Color synced lights

Share your Projects! Dashboards & Frontend
520

Very weird, because your config-template-card code is exactly like mine and it works for me… :thinking: :thinking:

Maybe try with only the opacity?

  - type: 'custom:config-template-card'
    entities: 
      - light.cuisine_deco
    element:              
      action: none
      entity: light.cuisine_deco
      hold_action:
        action: none
      image: /local/transparent.png
      state_image:
        'on': /local/ui/floorplan/lights/rez/Cuisine_deco.png
      tap_action:
        action: none
      type: image 
    style:
      left: 50%
      mix-blend-mode: lighten
      opacity: "${states['light.cuisine_deco'].state === 'on' ? (states['light.cuisine_deco'].attributes.brightness / 255) : '0'}"
      top: 50%
      width: 100%
521

Hmm that’s weird indeed, removing the color filter sadly makes no difference. Manually typing in a value of 0.5 works thought. So I think it has something to do with pulling the state information of the light.

What version of HA, and CTC are you currently running ? Maybe some update changes things up.

522

Have you tried only the color with fixed opacity?

I’m running HA 2023.01, CTC is 1.3.6

523

Hey community,

does anybode still have the „All Devices“ tab and is willing to share the code?

Would be relly appreciated. Thanks

524

I still have something of the sort, but heavily modified from Luke’s original. Feel free to have a look at the code in my Github (see signature). I haven’t had time to do a readme with screenshots yet, unfortunately.

1 Like
525

Thanks! Will have a look.

Maybe as starting example.
Without any hint it is hard to start from the scratch for a newbee.

I like this iOS style :grinning:

526

Well, I’d say this entire dashboard isn’t exactly newbie-friendly. There’s a lot of advanced stuff to understand in order to get it all to work, so you will need some time until you get to where you want.

If you’re looking for something a bit iOS-style without the floorplan, you might want to check out this thread.

1 Like
527

Hello everyone, Just working on getting this dashboard integrated on my setup. I keep running into the issue that everytime an entity updates, the screen kinda flashed for a second. Also with the time for example. the screen flashes every minute when it updates. It looks like a short refresh. Anyone who knows how to fix this?

528

Awesome dashboard. This combines the great efforts of Mattias Persson dashboard with a great sidebar. Unfortunately I am not able to use the Floorplans, as this would mean too much complications on my side.

However, I would like to use your sidebar and, as showcased in your animated picture, the “All Devices” view which links to the several button-cards from Mattias’ view, but uses a grid layout.

Unfortunately I can’t find this in your repo. Can anybody, or even you, @lukevink, point me the right direction, how I could overlay the button-cards onto the picture elements or use your sidebar with grid layouts in combination?

Thank you so much!

529

Thanks for that great tut on how to create a nice floorplan. I added all lights and tvs to my floorplan.
but i wonder if anyone has achieved to add windows/door openings.

i have some trouble to add an open window. mix-blend-mode: lighten makes the window semi transparent so its very hard to see (because it has no own light source i think).

is there an easy way to add windows/doors without adding hundreds of base images with window open/closed combinations? @lukevink you have an idea?

530

I need help with editing my floor plan in 3ds max. I have it done in 3D Sweet Home, but how do you render it to make it look bigger? Do you cut it by zone? Please give me some advice. I have done other renderings before, but this is driving me crazy.

531

Did you manage to get this working?

532

Hei is the coloring also broken for most of you guys? I cant get it to work, so the Light (when it is turned on) shines in the set color, this is my code:

    - action: none
      entity: light.couch
      hold_action:
        action: none
      image: /local/floorplans/haus/lights/couchLight.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.couch'].attributes.hs_color ?
          states['light.couch'].attributes.hs_color[0] : 0) + "deg)
          saturate(100%)"}
        mix-blend-mode: lighten
        top: 22.9%
        left: 45.6%
        opacity: >-
          ${states['light.couch'].state === 'on' ?
          (states['light.couch'].attributes.brightness / 255) : '0'}
        width: 22%
      tap_action:
        action: none
      type: image

Did I miss anything? This is what it looks when Pink:

grafik

Thanks for all the help!

533

No one got similar issues?

534

I’ve had an issue with lights not coloring properly, but not the complete absence of color. Did your code work at some point?

535

Yes, I had the same problem, but now I’m trying to fix my problems with the sweet home 3d plan, please someone help me.

536

Please, I need help with the floor plan in sweet home 3d, I have it done but I don’t see it the same as many of you, I don’t know which orientation to take to make it look like yours.

537

Hei Guys, I found the problem! I had to render the images in RED color! I could not find it here directly, but somewhere in comments:

grafik

That is how it should look at yours - mysterious but it is working now!

1 Like
538

Hello, this is my code, and the error I have is that it is not superimposing the image with the custom: config-template-card then I have the main image without interaction when i turn on the light.

type: picture-elements
image: /local/Floorplan/Casa Malí11.png
elements:
  - type: custom:config-template-card
    entities:
      - light.foco_rgb1
    element:
      action: none
      entity: light.foco_rgb1
      hold_action:
        action: none
        image: /local/Floorplan/Casa Malí ambastra.png
      state_image:
        'on': /local/Floorplan/Casa Malí der rojo.png
      tap_action:
        action: none
      type: image
    style:
      opacity: >-
        ${ ( states["light.foco_rgb1"].attributes.brightness ?
        states["light.foco_rgb1"].attributes.brightness / 255 : 0) -
        (states["light.foco_rgb1"].attributes.hs_color ?
        states["light.foco_rgb1"].attributes.hs_color[1]/90 : 0)}
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%
539

Without looking too far, it seems there’s a wrong indentation for the image line.