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

Configuration Frontend
1

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
2

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

3

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…

4

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

5

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 .

6

Hey mate,

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

Im running several overlays with nil issues.

7

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

8

glad it worked mate :slight_smile: