Floorplan Picture Entity - Only works with 3 elements?!?!

Good morning!

I have been playing around with creating my 3D floor plan, and thought I had it working. When I was finished loading up my main floor with about say 20 image overlays for my lights, I noticed that the overlays would stop loading.

I deleted it all and started adding them one by one, the first three worked well, click on the icon, the image overlay of the light would work. But, when I added a fourth image overly it would stop working. Only the last one would work, all others would control the lights, but not update the overly.

Any thoughts?

Here is a snippet…

type: picture-elements
image: local/images/firstfloor/MainFloor-dark.png
elements:
  - type: image
    entity: switch.mudroom_lights
    image: local/images/firstfloor/mudroom.png
    state_image:
      'off': local/images/firstfloor/MainFloor-dark.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: switch.garage_lights
    image: local/images/firstfloor/garage.png
    state_image:
      'off': local/images/firstfloor/MainFloor-dark.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: switch.kitchen_cabinet_lights
    image: local/images/firstfloor/kitchen-cabinet.png
    state_image:
      'off': local/images/firstfloor/MainFloor-dark.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: switch.kitchen_pot_lights
    image: local/images/firstfloor/kitchen-pot.png
    state_image:
      'off': local/images/firstfloor/MainFloor-dark.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.family_room_lights
    image: local/images/firstfloor/family-room-pot-inside.png
    state_image:
      'off': local/images/firstfloor/MainFloor-dark.png
    style:
      top: 50%
      left: 50%
      width: 100%type or paste code here

I have tried using this structure for each element as well, but same results…

  - type: image
    entity: light.dining_room_lights
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/images/firstfloor/dining-room.png
      'off': local/images/firstfloor/MainFloor-dark-transparent.png

Aren’t they all located on top of each other ?

they are transparent pngs, so yes they will be on top of each, but each area shows the lights appropriately if there is only 3…

Ah right, gotcha, Couldn’t you use conditional instead to only show the on image when its on ?

I guess I could do that, but it doesn’t make sense how mine isn’t working when others do. Unless they all do conditional, but all of the examples I have seen use this technique .

Hey mate,

I have a playlist from start to end how to configure with picture element.

Im running several overlays with nil issues.

Thank you! I changed my “off” image to a transparent image like yours and it now works!

glad it worked mate :slight_smile: