Neato Vaccum Card

Here is a simple yet cool way to display your cleaning map as a card in homeassistant.

This requires you to have the following component setup

- type: picture-elements
  image: /local/banners/empty.png
  elements:
  - type: state-icon
    tap_action: toggle
    entity: vacuum.neato
    style:
      top: 5%
      left: 95%
      "--paper-item-icon-color": rgb(115, 122, 130)
      z-index: 1

  - type: state-icon
    tap_action: toggle
    entity: switch.neato_schedule
    style:
      top: 15%
      left: 95%
      "--paper-item-icon-color": rgb(115, 122, 130)
      z-index: 1

  - type: state-label
    entity: sensor.neato_battery
    style:
      top: 70%
      left: 0%
      color: rgb(115, 122, 130)
      transform: none
      pointer-events: none
      text-shadow: 1px 1px black
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      border-left-style: solid
      border-color: DeepSkyBlue
      background-color: rgb(54, 65, 78)
      z-index: 1

  - type: image
    entity: camera.neato_cleaning_map
    camera_image: camera.neato_cleaning_map
    tap_action: none
    style:
      transform: none
      top: 0%
      left: 0%
      width: 100%
      height: 100%
      z-index: 0

  - type: state-label
    entity: sensor.neato_status
    style:
      top: 80%
      left: 0%
      color: rgb(115, 122, 130)
      transform: none
      pointer-events: none
      text-shadow: 1px 1px black
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      border-left-style: solid
      border-color: Tomato
      background-color: rgb(54, 65, 78)
      z-index: 1

  - type: state-label
    entity: sensor.neato_area
    style:
      top: 90%
      left: 0%
      color: rgb(115, 122, 130)
      transform: none
      pointer-events: none
      text-shadow: 1px 1px black
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      border-left-style: solid
      border-color: GreenYellow
      background-color: rgb(54, 65, 78)
      z-index: 1

Here is the package for the sensors

Change neato on the states for your robots name in the template sensors

  - platform: template
    sensors:
      neato_area:
        friendly_name: "Neato: Area cleaned on last run"
        value_template: "Area Cleaned: {{ states.vacuum.neato.attributes.clean_area | round(1) }}"
        unit_of_measurement: 'm²'

  - platform: template
    sensors:
      neato_status:
        friendly_name: "Neato: Status"
        value_template: "Status: {{ states.vacuum.neato.attributes.status }}"

  - platform: template
    sensors:
      neato_battery:
        friendly_name: "Battery: neato"
        value_template: "{{ states.vacuum.neato.attributes.battery_level }}"
        unit_of_measurement: '%'

and here is the empty placeholder image

Last updated