Picture Elements More Info

Configuration Frontend
1

Hello,

Hopefully simple question here but I can’t figure it out. I’m trying to use a picture elements card to display my camera with a few icons on top of it. The reason I’m using this instead of a picture glance is because I want to show temperature in the room as well, and I can’t do that without using the show_state option which I don’t like the look of. The problem I’m running into is that if I click on the camera, I want it to load up full screen like a picture glance card does, however I can’t seem to figure that out. If I try I get a “no entity provided for more info dialog picture elements” error and nothing happens. This is my config. Do I have to put a dummy object with 100% transparency over the top of the camera with the more info dialog box, or is there a way to have it use the background camera image and just click on that?

type: picture-elements
entity: camera.isabelas_room
camera_image: camera.isabelas_room
camera_view: live
elements:
  - type: image
    image: local/images/person_background.png
    style:
      top: 50%
      left: 50%
      width: 100%
      opacity: 0.5
  - type: image
    image: local/images/person_background.png
    style:
      top: '-95%'
      left: 50%
      width: 100%
      opacity: 0.5
  - type: custom:text-element
    text: Isabelas Room
    style:
      top: 6%
      left: 50%
      color: white
      font-size: 18px
  - type: state-icon
    entity: binary_sensor.isabelas_room_motion
    style:
      top: 92%
      left: 50%
      width: 100%
      '--paper-item-icon-color': white
  - type: state-icon
    entity: binary_sensor.isabelas_closet_door_sensor
    style:
      top: 92%
      left: 60%
      width: 100%
      '--paper-item-icon-color': white
  - type: state-icon
    entity: light.isabelas_closet_light
    tap_action:
      action: toggle
    style:
      top: 92%
      left: 70%
      width: 100%
      '--paper-item-icon-color': white
  - type: state-label
    entity: sensor.isabelas_room_temp_sensor_temperature_sensor
    style:
      top: 92%
      left: 80%
      width: 100%
      color: white
2

Anybody know how to do this?

3

Bueller? Does anyone know how to do this?

4

Your configuration doesn’t follow the docs. You’re missing the required field image and you added an extra field that’s not present in the documentation entity.

5

Thanks, but even with that correct it still doesn’t work.

type: picture-elements
camera_image: camera.charlottes_room
camera_view: auto
image: /local/floorplan.png
elements:
  - type: image
    image: local/images/person_background.png
    style:
      top: 50%
      left: 50%
      width: 100%
      opacity: 0.5
  - type: image
    image: local/images/person_background.png
    style:
      top: '-95%'
      left: 50%
      width: 100%
      opacity: 0.5
  - type: custom:text-element
    text: Charlottes Room
    style:
      top: 6%
      left: 50%
      color: white
      font-size: 18px
  - type: state-icon
    entity: binary_sensor.charlottes_room_motion
    style:
      top: 92%
      left: 50%
      width: 100%
      '--paper-item-icon-color': white
  - type: state-icon
    entity: binary_sensor.charlottes_closet_door_sensor
    style:
      top: 92%
      left: 60%
      width: 100%
      '--paper-item-icon-color': white
  - type: state-icon
    entity: light.charlottes_closet_light
    tap_action:
      action: toggle
    style:
      top: 92%
      left: 70%
      width: 100%
      '--paper-item-icon-color': white
  - type: state-label
    entity: sensor.charlottes_room_temp_sensor_temperature_sensor
    style:
      top: 92%
      left: 80%
      width: 100%
      color: white
6

same problem here… Did you find any solution?

7

I’ve just tried this and works fine:

are you missing a / before local ?

  - type: picture-elements
    image: /local/images/BG_BINStrans.png
    camera_image: camera.drive_camera
    camera_view: live
    elements:
      - type: image
        entity: sensor.green_bin_days
        image: /local/images/green_bin2.png
        title: null
        state_filter:
          "unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
          "Today": drop-shadow(0px 0px 3px Green) saturate(200%)
          "Tomorrow": drop-shadow(0px 0px 3px Green) saturate(150%)
        style:
          top: 65%
          left: 15%
          width: 15%
      - type: state-label
        entity: sensor.green_bin_days
        tap_action:
          action: none
        hold_action:
          action: none
        style:
          top: 35%
          left: 15%
8

You click it and it opens the camera?

9

Ah ok I see, try this. You’ll need the attached 16x9.png image below as it sets the card the correct ratio for the camera. Make sure the camera image is first so its at the back of the other entities. When you click on the camera image it pops up the camera, and when you click on the entity it shows the more-info dialog box for that entity

  - type: picture-elements
    image: /local/images/16x9.png
    elements:
      - type: image
        entity: camera.drive_camera
        camera_image: camera.drive_camera
        camera_view: live
        style:
          top: 50%
          left: 50%
          width: 100%

      - type: image
        entity: sensor.green_bin_days
        image: /local/images/green_bin2.png
        title: null
        state_filter:
          "unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
          "Today": drop-shadow(0px 0px 3px Green) saturate(200%)
          "Tomorrow": drop-shadow(0px 0px 3px Green) saturate(150%)
        style:
          top: 65%
          left: 15%
          width: 15%

      - type: state-label
        entity: sensor.green_bin_days
        tap_action:
          action: none
        hold_action:
          action: none
        style:
          top: 35%
          left: 15%

16x9

1 Like
10

Thanks for trying but nope, still “no entity provided for more info dialog”

edit: figured it out. The issue was the

  - type: image
    image: local/images/person_background.png
    style:
      top: 50%
      left: 50%
      width: 100%
      opacity: 0.5

Since it covered the whole screen I had to add the entity to that line, now it works great!