Picture Elements Card, is tap action on full card possible?

Configuration
1

I have setup this picture elements card:

PictureElementsCard

It’ basically the same as the nice sensor card without the graph, but with a larger font for the value and 2 lines of info.
i get the more-info popup when i tap on the value, but i’d like to get it when tapping anywhee on the card, just as in the sensor card.
is that possible?

here’s the yaml code:
empty.png is an 100% background image, 704x396 pixels, and so bigger than the card.

type: picture-elements
image: /local/empty.png
elements:
  - type: state-label
    entity: sensor.humidity_aussen_round
    style:
      top: 65%
      left: 21%
      font-size: 38px
  - type: custom:text-element
    text: '%'
    style:
      top: 68.5%
      left: 40%
      color: rgb(140,140,140)
      font-size: 28px
  - type: icon
    icon: mdi:water-percent
    entity: sensor.humidity_aussen_round
    style:
      top: 19%
      left: 85%
      color: rgb(72, 113, 155)
  - type: custom:text-element
    text: Luftfeuchtigkeit
    style:
      top: 17%
      left: 38%
      color: rgb(150, 150, 150)
      font-size: 16px
  - type: custom:text-element
    text: Außen
    style:
      top: 34%
      left: 22%
      color: rgb(150,150,150)
      font-size: 16px
2

No, but what you’re trying to do is create a button. You should move to the custom button card, which can do everything you want.

3

If you add the empty.png as a element image then you can add a tap action to it.
Just make sure you add it at the top of the yaml

4

Something like this I think.

type: picture-elements
image: /local/empty.png
elements:
  - type: image
    entity: sensor.humidity_aussen_round
    tap_action:
      action: more-info
    image: /local/empty.png.png
    style:
      top: 0%
      left: 0%
  - type: state-label
    entity: sensor.humidity_aussen_round
    style:
      top: 65%
      left: 21%
      font-size: 38px
  - type: custom:text-element
    text: '%'
    style:
      top: 68.5%
      left: 40%
      color: rgb(140,140,140)
      font-size: 28px
  - type: icon
    icon: mdi:water-percent
    entity: sensor.humidity_aussen_round
    style:
      top: 19%
      left: 85%
      color: rgb(72, 113, 155)
  - type: custom:text-element
    text: Luftfeuchtigkeit
    style:
      top: 17%
      left: 38%
      color: rgb(150, 150, 150)
      font-size: 16px
  - type: custom:text-element
    text: Außen
    style:
      top: 34%
      left: 22%
      color: rgb(150,150,150)
      font-size: 16px
5

i testedt it, and corrected the typo (double .png), but it doesn’t work anyway.
tap_action seems to work only with the value and the icon, not with the text or the image.

6

If you’re going to go with hellis81s method, you’d need to put the image at the bottom of the list so that it’s the top most object. You’ll also have to style it so that it fills the entire frame. You can also set the z order using css as well.

7

i wanna give the hellis81s method another try, because it’s less work to just add it to the otherwise working picture elements card.
now i moved the -type: image block to the end, but still not working.
but i don’t know how too style it so that it fits the whole frame.
can you give me advice?

do i still need css z-order when i put the image in yaml last?

Blockquote

8

i think this is the right way now

9

It works fine on my floorplan.
The only difference here is that I use a condition to set the floor level to render.
But if you look at the comment below you see that I use the exact same set up and it has to be the first to not be placed above the other icons and such (unless the image is transparent)

image: local/Groundfloor_crop.png
panel: true
type: picture-elements
elements:
  - conditions:
      - entity: input_boolean.floor
        state: 'on'
    elements:
    # Here is another image that is overlayed the original image with tap action none and it works fine.
      - entity: input_boolean.floor
        image: /local/living_room.png
        state_image:
          'off': /local/1Floor-crop.png
          'on': /local/Groundfloor_crop.png
        style:
          left: 0%
          top: 0%
          transform: scale(1,1)
        tap_action:
          action: none
        type: image
      - entity: input_boolean.floor
        style:
          left: 89%
          top: 2%
          transform: scale(2,2)
        tap_action:
          action: toggle
        type: state-icon
# and many more lines below here...
10

TBH, it’s much easier than the picture-elements card once you understand the grid and css styles. It’s also way less yaml.

Yes, you’d want to move it to the end if you want the entire card, regardless of click, to bring up more info.

    style:
      top: 0%
      left: 0%
      height: 100%
      width: 100%

    style:
      top: 0%
      left: 0%
      height: 100%
      width: 100%
      z-index: 9999
11

fyi, this should be close to the look you’re going for with the custom button card:

type: custom:button-card
entity: sensor.humidity_aussen_round
icon: mdi:water-percent
show_name: true
show_label: true
show_icon: true
show_units: true
name: Luftfeuchtigkeit
label: Außen
units: %
color: rgb(72, 113, 155)
state_display: |
   [[[
      return `<span style="color: white; font-size: 38px;">${entity.state}</span><span style="color: rgb(150, 150, 150); font-size: 28px;">%</span>`;
   ]]]
styles:
  grid:
  - grid-template-areas: '"n i" "l i" "s s" "s s"'
  - grid-template-columns: 1fr 1fr 1fr 1fr
  - grid-template-rows: 3fr 1fr
  name:
  - text-align: start
  - font-size: 16px
  - color: rgb(150, 150, 150)
  label:
  - text-align: start
  - font-size: 16px
  - color: rgb(150, 150, 150)
12

thank you petro, for the nice example, i already started to port to custom button card, comes in handy!

btw, the picture elements cards now works.
what i found out: the order of elements doesn’t matter. important is the z-index, and the scaling.
See my working code:

type: picture-elements
image: /local/empty.png
elements:
  - type: image
    entity: sensor.humidity_aussen_round
    image: /local/empty.png
    tap_action:
      action: more-info
    style:
      top: 0%
      left: 0%
      width: 300%
      height: 300%
      z-index: 9999
  - type: state-label
    entity: sensor.humidity_aussen_round
    style:
      top: 65%
      left: 21%
      font-size: 38px
  - type: custom:text-element
    text: '%'
    style:
      top: 68.5%
      left: 40%
      color: rgb(140,140,140)
      font-size: 28px
  - type: icon
    icon: mdi:water-percent
    style:
      top: 19%
      left: 85%
      color: rgb(72, 113, 155)
  - type: custom:text-element
    text: Luftfeuchtigkeit
    style:
      top: 17%
      left: 38%
      color: rgb(150, 150, 150)
      font-size: 16px
  - type: custom:text-element
    text: Außen
    style:
      top: 34%
      left: 22%
      color: rgb(150,150,150)
      font-size: 16px

nonetheless i will continue porting to custom button card, just to see which way is better or more elegant.

13

So, here is the working version based on a custom button card.
petro, from your exmaple i used the fomatting of the state display in one line.
pls note that i don’t use the normal state display, the state is shown as a custom field. this enables consistent positioning values.

type: custom:button-card
entity: sensor.humidity_aussen_round
show_state: false
show_name: false
icon: mdi:thermometer
aspect_ratio: 3.2/1
styles:
  grid:
    - position: relative
  icon:
    - color: var(--state-icon-color)
    - height: 30%
    - margin-top: '-4%'
    - margin-left: 73%
  custom_fields:
    label1:
      - color: grey
      - position: absolute
      - left: 13%
      - top: 10%
      - font-size: 18px
    label2:
      - color: grey
      - position: absolute
      - left: 13%
      - top: 30%
      - font-size: 18px
    state:
      - position: absolute
      - left: 13%
      - top: 60%
      - font-size: 18px
custom_fields:
  label1: Luftfeuchtigkeit
  label2: Außen
  state: |
    [[[
      return `<span style="color: white; font-size: 38px;">${entity.state}</span><span style="color: rgb(150, 150, 150); font-size: 28px;"> %</span>`;
    ]]]

now, what do you think, which version is more elegant:
Custom button card or picture elements card ?