Share the love
  • Welcome!
  • Picture-elements cards
    • 3D Floorplan Card
    • Fitbit Card
    • Greeter Card
    • Kodi Remote Card
    • Mi Flora Plant Card
    • Neato Vaccum Card
    • Temperature glance
    • Untappd Card
    • Xiaomi Vacuum Card
  • Glance cards
    • AV Remote Card
  • Custom Resources
    • Cards
    • Rows
    • Elements
    • Special
    • Styling
  • Tools
    • Jinja Magic Scripts
    • Externaly hosted tools
Powered by GitBook
On this page
  1. Picture-elements cards

Neato Vaccum Card

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

PreviousMi Flora Plant CardNextTemperature glance

Last updated 4 years ago

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

Neato Botvac
34KB
empty.png
image
Placeholder image