Adding Buttons / Toggle Switch to Picture Card

Configuration Frontend
1

Hey guys,

I want to add some buttons / toogle switches to my floor plan picture card. They should turn on/off visibility of the different icons on the picture card because it gets really cluttered on mobile devices (espacially when I will later on add heating control an the cameras.
I assume I am just missing the keyword to google for because I could not find a suitable guide for this.

The final result should look something like that (picture made with my paint skills!)

image

I’ve provided my YAML as well but as for no it does not have any integration of the buttons because I am just not finding the right “start point”.

type: picture-elements
image: /local/Grundriss_EG.png
elements:
  - type: state-icon
    entity: light.duftlampe
    style:
      top: 28%
      left: 44%
      transform: scale(1,1)
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.lampe
    style:
      top: 53%
      left: 59%
      transform: scale(1,1)
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.lichterkette
    style:
      top: 38%
      left: 65%
      transform: scale(1,1)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.indirekte_beleuchtung
    icon: mdi:lightbulb
    style:
      top: 38%
      left: 59%
      transform: scale(1,1)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.stehlampe_socket_1
    icon: mdi:floor-lamp-torchiere-variant
    style:
      top: 6%
      left: 43%
      transform: scale(1,1)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.smart_socket_2_socket_1
    icon: mdi:floor-lamp-outline
    style:
      top: 9%
      left: 32%
      transform: scale(1,1)
    tap_action:
      action: toggle
  - type: state-icon
    entity: cover.rollo_bad_curtain
    style:
      top: 90%
      left: 66%
    tap_action:
      action: more-info
  - type: state-icon
    entity: cover.rollo_schlafzimmer_curtain
    style:
      top: 87%
      left: 76%
    tap_action:
      action: more-info
  - type: state-icon
    entity: cover.rollo_kinderzimmer_curtain
    style:
      top: 36%
      left: 68%
    tap_action:
      action: more-info
  - type: state-icon
    entity: cover.rollo_kuche_curtain
    style:
      top: 38%
      left: 59%
    tap_action:
      action: more-info
  - type: state-icon
    entity: cover.rollo_terasse_curtain
    style:
      top: 38%
      left: 53%
    tap_action:
      action: more-info
  - type: state-icon
    entity: cover.rollo_strasse_curtain
    style:
      top: 59%
      left: 39%
    tap_action:
      action: more-info
  - type: state-icon
    entity: cover.wohnzimmer_curtain
    style:
      top: 22%
      left: 51%
    tap_action:
      action: more-info
  - type: state-icon
    entity: camera.haustr
    icon: mdi:doorbell-video
    style:
      top: 87%
      left: 58%
  - type: state-icon
    entity: switch.garagentor
    icon: mdi:garage
    style:
      top: 62%
      left: 33.5%
    tap_action:
      action: more-info

Thanks for your help,
Max

2

Update:
So I got to add a service-button to the picture card using this code. Although I’d really like to change the font-size and font-color but that does not seem to work.

  - type: service-button
    title: Lampen
    style:
      text-align: center
      top: 10%
      left: 10%
      background-color: rgba(0, 0, 0, 0.3)
    service: dummy.service
    service_data:
      entity_id: group.all_lights

Additionally I’d need the button to change some variable to set the visibility of the different icons but I do not know how to facilitate this.

image

1 Like