Floorplan Picture Entity - Only working with last added element

Configuration Frontend
1

Wondered if anyone could please help. New to HA, I have created and setup my floorplans and used a sensor to change the main floor plan at different times of the day.

I have created images as icons for the lights, after setting up no matter where I click it will only turn on and off the last entity in the code. I can’t re size the state image as the image goes well off any ideas?

Also have this annoying loading icon that just randomly shows?

Appreciate anyones help!

type: picture-elements
panel: true
entity: sensor.time_of_day
state_image:
  Morning: local/ground8am.png
  Afternoon: local/ground12pm.png
  Evening: local/ground7pm.png
  Night: /local/ground7pm.png
elements:
  - type: image
    entity: light.downstairs_hallway
    state_image:
      "on": /local/groundhallway.png
    style:
      left: 50%
      top: 50%
      width: 100%
      mix-blend-mode: lighten
      filter: >-
        ${ "hue-rotate(" +
        (states['light.downstairs_hallway'].attributes.hs_color ?
        states['light.downstairs_hallway'].attributes.hs_color[0] : 0) + "deg)"}
      opacity: >-
        ${states['light.downstairs_hallway'].state === 'on' ?
        (states['light.downstairs_hallway'].attributes.brightness / 255) : '0'}
    tap_action:
      action: none
  - type: image
    tap_action:
      action: toggle
    title: Hallway
    entity: light.downstairs_hallway
    image: local/mainlight1.png
    style:
      top: 58%
      left: 26%
      border: null
  - type: image
    entity: light.living_room_tv
    state_image:
      "on": /local/groundtvled.png
    style:
      left: 50%
      top: 50%
      width: 100%
      mix-blend-mode: lighten
      filter: >-
        ${ "hue-rotate(" + (states['light.living_room_tv'].attributes.hs_color ?
        states['light.living_room'].attributes.hs_color[0] : 0) + "deg)"}
      opacity: >-
        ${states['light.living_room'].state === 'on' ?
        (states['light.living_room'].attributes.brightness / 255) : '0'}
    tap_action:
      action: none
  - type: image
    title: TV Light
    entity: light.living_room_tv
    image: local/mainlight1.png
    style:
      top: 75%
      left: 70%
      border: null
    tap_action:
      action: toggle

Screenshot 2024-10-24 at 14.40.47
Screenshot 2024-10-24 at 14.40.471920×732 90.3 KB

2

Where are you getting this syntax from? I don’t believe these kinds of template expressions are valid for picture-elements card, I believe you would need some kind of custom card to parse these.

3

I have seen this used by others online, potentially can be removed.

4

You are not the 1st person here trying to use picture-elements (PE) with templates taken from config-template-card (CTC). There is some article in Internet about creating floorplans - and an author posted similar wrong code there, and users copy-paste this code thoughtlessly with no success.
Seems that initially someone created a code where PE was placed inside CTC - but later that “CTC part” disappeared and only templates (obviously non-functional) left.
Not to mention that placing a whole PE inside CTC is a bad approach causing flickering; separate elements should be placed inside CTC instead.
A better way is to use card-mod if you need dynamic css properties for elements.