Picture Elements Card Help

Configuration Frontend
1

I am having the same problem and can’t find my mistake. The button does not trigger.
Any ideas?

          - type: image
            image: /local/floorplan/leer.png
            entity: input_button.apple_tv
            tap_action:
              action: call-service
              service: input_button.press
              service_data:
                entity_id: input_button.apple_tv
            hold_action: none
            style:
              top: 32%
              left: 0%
              height: 25%
              width: 11%
              border: 4px solid red
              rotate: '-38deg'
              transform: skew(-40deg)
2

Can you post your entire card code?

3

Sure

# Wohnzimmer
  - type: panel
    title: Wohnzimmer
    icon: mdi:sofa
    path: wohnzimmer
    subview: true
    cards:
  # Hintergrundbild
      - type: picture-elements
        image: /local/floorplan/ipad_wohnzimmer.png
        elements:
  # TV
    # Bild je nach Status aktualisieren
          - type: conditional
            conditions:
              - entity: media_player.apple_tv
                state: standby
            elements:
              - type: image
                action: none
                tap_action: none
                hold_action: none
                image: /local/floorplan/tv_aus.png
                style:
                  top: 50%
                  left: 50%
                  width: 100%

          - type: conditional
            conditions:
              - entity: media_player.apple_tv
                state: unavailable
            elements:
              - type: image
                action: none
                tap_action: none
                hold_action: none
                image: /local/floorplan/tv_aus.png
                style:
                  top: 50%
                  left: 50%
                  width: 100%
    # Aktion bei Klick
          - type: image
            image: /local/floorplan/leer.png
            entity: input_button.apple_tv
            tap_action:
              action: call-service
              service: input_button.press
              service_data:
                entity_id: input_button.apple_tv            
            style:
              top: 32%
              left: 0%
              height: 25%
              width: 11%
              border: 4px solid red
              rotate: '-38deg'
              transform: skew(-40deg)
4

This thread was for custom:button-card not the picture element card.

With this thread already solved, I’d suggest opening a new thread. I’ll still take a look, but you’ll it will reach more folks if your inquiry is list correctly.

1 Like
5 
    tap_action:
      action: call-service
      service: input_button.press
      target:
        entity_id: input_button.apple_tv

This should work.

1 Like
6

Thanks, but this does not work :slightly_frowning_face:

7

Is the button associated to a script or automation? I tested it before posting.

When I tap the image the light turns on and off

chrome-capture-2024-5-3

8

It should trigger a Node Red Automation. I will have a look at it again.

9

I got it to work, too. I don’t know why but there seem to be overlapping pictures in my code which cover the clickable picture. I try to find out what’s going on here. When I try it on a different side everything’s works fine. Thank you! :blush:

10

Try adding z-index: 1

style:
      top: 32%
      left: 10%
      height: 25%
      width: 11%
      border: 4px solid red
      rotate: '-38deg'
      transform: skew(-40deg)
      z-index: 1

That controls how the image is stacked and will eliminate the overlap.

11

I just changed the order. This makes it more easy for me to handle. Everything’s works fine now. I thought the area of a png file where the picture is empty is not just invisible but also clickable through. This is apparently not possible.

1 Like