Show off your picture-elements uses

Started to fiddle around with lovelace and wanted to share an image on how versatile the picture-elements card is for putting in a lot of information on a small footprint.

Here is “state cards” for me and my wife.
It’s really nice to be able to have multiple “layers” of images to mimic diffrent states.

Lovelace code for one of the cards:

id: home
title: Home
cards:
  - type: picture-elements
    image: /local/ll_matte_home.png
    elements:
      - style:
          top: 50%
          left: 50%
          width: 100%
        type: image
        entity: input_select.matte_home_status
        state_image:
          "Home": /local/ll_matte_home.png
          "Just Arrived": /local/ll_matte_home.png
          "Away": /local/ll_matte_not_home.png
          "Just Left": /local/ll_matte_not_home.png
          "Extended Away": /local/ll_matte_not_home.png
      - style:
          top: 50%
          left: 50%
          width: 100%
        type: image
        entity: input_boolean.matte_charging
        state_image:
          "on": /local/ll_status_charging1.png
          "off": /local/ll_status_blank.png
      - style:
          color: white
          top: 9%
          left: 12%
        type: state-icon
        entity: sensor.matte_battery
      - style:
          color: white
          top: 92%
          left: 50%
        type: state-label
        entity: sensor.matte_presence
      - style:
          color: white
          top: 10%
          left: 89%
        type: state-label
        entity: sensor.matte_battery
      - style:
          color: white
          top: 73%
          left: 88%
        type: state-label
        entity: proximity.home_matte
      - style:
          color: white
          top: 73%
          left: 12%
        type: state-label
        entity: sensor.matte_hem
37 Likes