Picture Elements card configuration issues

Configuration Frontend
1

Hi All, here is my first post.
I am struggling for some time to get the lights going in my house. When configuring the first light all was working correct, continued wit the next light and tested ok however noticed the first light is not working anymore. Added a third light and now the first two lights are not working. When I reduced the width from 100% to 20% all the lights are working however the picture becomes very small. Added state icons (width set to 1%) and disabled tap action however still no succes. Is there anyone who can assist with this problem??

Please find configuration below.

type: picture-elements
image: /local/images/3D_floorplan/Alles_uit.png
elements:
  - type: image
    tap_action:
      action: none
    state_image:
      "on": /local/images/3D_floorplan/Dartbord_Verlichting_aan.png
      "off": /local/images/3D_floorplan/Transparant.png
    style:
      left: 50%
      top: 50%
      width: 20%
    entity: light.dartbord_verlichting_394
    hold_action:
      action: none
  - type: state-icon
    tap_action:
      action: toggle
    icon: mdi:spotlight
    entity: light.dartbord_verlichting_394
    style:
      left: 45%
      top: 23%
      with: 1%
  - type: image
    tap_action:
      action: none
    state_image:
      "on": /local/images/3D_floorplan/Eetkamer_aan.png
      "off": /local/images/3D_floorplan/Transparant.png
    style:
      left: 50%
      top: 50%
      width: 20%
    entity: light.keuken_hue_lampen_keuken_14
    hold_action:
      action: none
  - type: state-icon
    tap_action:
      action: toggle
    icon: mdi:ceiling-light-multiple
    entity: light.keuken_hue_lampen_keuken_14
    style:
      left: 62%
      top: 39%
      with: 1%
    hold_action:
      action: none
  - type: image
    tap_action:
      action: none
    state_image:
      "on": /local/images/3D_floorplan/Tuindeur_Verlichting_aan.png
      "off": /local/images/3D_floorplan/Transparant.png
    style:
      left: 50%
      top: 50%
      width: 20%
    entity: light.deur_spots
    hold_action:
      action: none
  - type: state-icon
    tap_action:
      action: toggle
    icon: mdi:lightbulb-spot
    entity: light.deur_spots
    style:
      left: 40%
      top: 41%
      with: 1%
2

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371#oneone-format-it-properly-16

3

This is wrong, this kind of templating you took somewhere from custom:button-card, the Picture-elements card does not support templates. You will have to use card-mod - google for “picture elements small tutorial”, find there “conditional styles” in the 1st post.
(of course your code here still should be formatted properly. I wonder can’t you see yourself that your posted code is something which cannot be analysed???)

4

Thanks for your reply, hopefully this will do the trick!