Lovelace Card - Ecovacs Vacuum

ecovacs-card.yaml

# In this example, Deedee is the name of my Ecovacs vacuum.
# We use a placeholder image for the background
- type: picture-elements
    image: /local/pics/devices/deedee_card_unknown.png
    elements:

# This will be the background we actually see.
# The sensor is a template pulling the status attribute of the vacuum.
# These pictures are of the vacuum all in the same place. 
# The images all have a dark overlay on the bottom.
# - Unknown is the vac photoshopped to be semi-transparent.
# - Charging is the vac on the base.
# - Auto is the vac not on the base.
# - Returning is a gif of the vac going towards the base.
    - type: image
      entity: sensor.deedee_status
      image: /local/pics/devices/deedee_card_unknown.png
      tap_action: none
      state_image:
        'Unknown': /local/pics/devices/deedee_card_unknown.png
        'charging': /local/pics/devices/deedee_card_home.png
        'auto': /local/pics/devices/deedee_card_away.png
        'returning': /local/pics/devices/deedee_card_returning.gif
      style:
        transform: none
        top: 0%
        left: 0%
        width: 100%
        height: 100%

# Upper-right battery stuff
    - type: state-label
      entity: sensor.deedee_battery
      style:
        top: 10.5%
        left: 90%
        color: rgb(255, 255, 255)
        font-weight: bold

    - type: icon
      icon: mdi:battery
      style:
        top: 10%
        left: 96%
        color: rgb(255, 255, 255)

# Bottom Left Status
    - type: state-icon
      entity: vacuum.deedee
      tap_action: toggle
      style:
        top: 91%
        left: 5%
        "--paper-item-icon-color": rgb(255, 255, 255)
  
    - type: state-label
      entity: sensor.deedee_status
      style:
        top: 92%
        left: 15%
        color: rgb(255, 255, 255)
        font-weight: bold
        text-transform: capitalize

# Bottom Right Icons
    - type: icon
      tap_action: call-service
      icon: mdi:refresh
      entity: vacuum.deedee
      service: vacuum.clean_spot
      style:
        top: 91%
        left: 64%
        color: white
  
    - type: icon
      tap_action: call-service
      icon: mdi:home-map-marker
      entity: vacuum.deedee
      service: vacuum.return_to_base
      style:
        top: 91%
        left: 74%
        color: white

    - type: icon
      tap_action: call-service
      icon: mdi:pause-octagon
      entity: vacuum.deedee
      service: vacuum.stop
      style:
        top: 91%
        left: 84%
        color: white
 
    - type: icon
      tap_action: call-service
      icon: mdi:map-marker
      entity: vacuum.deedee
      service: vacuum.locate
      style:
        top: 91%
        left: 94%
        color: white

# State badge of a history-stats sensor.
    - type: state-badge
      entity: sensor.deedee_today
      style:
        top: 68.5%
        left: 93.5%
        color: white
        scale: (0.5,0.5)
        --ha-label-badge-font-size: 1em
        --ha-label-badge-title-font-size: 0%