# Neato Vaccum Card

{% hint style="info" %}
This requires you to have the following component setup

* [Neato Botvac](https://www.home-assistant.io/components/neato/)
  {% endhint %}

![](/files/-LJDCe1ZmlO_-q_0JtFv)

```yaml
- 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

{% hint style="warning" %}
Change neato on the states for your robots name in the template sensors
{% endhint %}

```yaml
  - 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

{% file src="/files/-LJ9x6etAcZ7j02b9BYf" %}
Placeholder image
{% endfile %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sharethelove.io/picture-elements-cards/neato-vaccum-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.