How to Display your Robot Vacuum in Home Assistant

In this tutorial, I will go through a few steps to create a dashboard card to display your robot vacuum in Home Assistant.

Home Assistant Robot Vacuum Cleaner Card

In a previous tutorial, I covered how to set up Roborock in Home Assistant. This tutorial explains how to display the robot on a dashboard, making it much easier to view statistics and send commands to it. You do not need a Roborock vacuum to complete this tutorial, as the frontend card supports many brands.

This tutorial uses a custom frontend card that you will need to install via the HACS store. If you are running a version of Home Assistant that does not support HACs, you will not be able to use this tutorial. I recommend checking out the HACS tutorial for more information.

We cover two topics in this tutorial. The first will take you through the installation process, and the second will take you through some basic configuration. The frontend card we install covers a wide range of robot vacuums, but I recommend checking the list before installing it.

Installing the Vacuum Custom Frontend Integration

Installing a custom vacuum card is relatively simple. However, you must ensure that your version of Home Assistant already has HACs installed.

I recommend checking out our tutorial on installing HACS if you do not already have it installed.

1. In the Home Assistant web UI, go to the HACS tab (1) and click Frontend (2).

Home Assistant Go to the HACs Page

2. On the frontend page, you should see highlighted new repositories, however, ignore these and click Explore & Download Repositories.

HACS Frontend

3. In the pop-up, search (1) for Vacuum, and a range of custom vacuum cards will appear. You can investigate these and choose the one that is best suited for you. However, for this tutorial, we will be installing the Vacuum Card (2).

Select Frontend Vacuum Card in HACS

4. You should now see a page explaining the card and its capabilities. Feel free to read through the documentation as you may find it useful. The page also details the different vacuums that it supports.

To download the frontend card, click on DOWNLOAD.

Custom Vacuum Card Information

5. A pop-up will ask which version of the card you would like to use. Leave it as the default and click DOWNLOAD.

Click on Download

6. Once the frontend card has been downloaded, you will be prompted to reload your browser. Click RELOAD.

Click reload

Basic Configuration

Now that the frontend card is installed, it is time to add it to a dashboard and do some simple configuration changes.

7. On the dashboard where you want to add the robot vacuum cleaner, click on the pencil icon in the top right corner.

On the Dashboard click on the pencil

8. You are now in edit mode for the dashboard. Click on ADD CARD in the bottom right corner.

Edit UI on Dashboard

9. In the pop-up screen, search for Vacuum in the search box (1) and click on Custom: Vacuum Card (2).

Search and Select the Vacuum Card

10. You will now see a screen with various basic settings. Toggle these on or off, depending on what you prefer. I briefly explain each setting below.

Entity: This is the entity of the robot vacuum cleaner. In our case, we have picked our downstairs robot.

Map Camera (1): You can change this to display the map from the robot vacuum cleaner. If one is available, you can set this to the camera instead. If neither a map nor a camera is picked, a cool animated graphic will display instead.

Compact View: If this setting is set, it will remove the graphic, camera, or map from the card.

Show Name (2): Allows you toggle the robot’s name on or off.

Show Status (3): Using this setting allows you to control whether the status will display or not.

Show Toolbar (4): Toggles the toolbar at the bottom of the card.

Settings for the Vacuum Frontend Card

Unfortunately, some of the GUI options did not work at the time of writing this tutorial. You can instead set them using YAML via the code editor. We will touch on using YAML further down the page.

type: custom:vacuum-card
entity: vacuum.robo_upstairs
show_name: false
compact_view: true
show_status: false
show_toolbar: false

11. Click SHOW CODE EDITOR within the configuration card to edit the YAML for the frontend card.

Vacuum Card Show Editor

12. You should now see a code editor that contains YAML with some basic configuration for the vacuum card.

Custom Vacuum Card Basic YAML

In the code editor, you can do much more in-depth customization than with the GUI (Graphical User Interface) version. However, you will need to do some research on the many different settings by visiting the project’s GitHub page.

In the example below, I have set the card to display some of the robots’ statistics. For example, it shows how long each item has before it should be checked or replaced. Also, while it is cleaning, it will tell me how large the cleaning area is and how long it has left to clean.

The config below uses entities from my Roborock vacuum cleaner. You will likely need to change each entity_id to reference the correct vacuum cleaner.

type: custom:vacuum-card
entity: vacuum.robo_downstairs
    - entity_id: sensor.robo_downstairs_filter_time_left
      value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      unit: hours
      subtitle: Filter
    - entity_id: sensor.robo_downstairs_side_brush_time_left
      value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      unit: hours
      subtitle: Side Brush
    - entity_id: sensor.robo_downstairs_main_brush_time_left
      value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      unit: hours
      subtitle: Main Brush
    - entity_id: sensor.robo_downstairs_sensor_time_left
      value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      unit: hours
      subtitle: Sensors
    - entity_id: sensor.robo_downstairs_cleaning_area
      subtitle: Cleaning Area
      unit: m²
    - entity_id: sensor.robo_downstairs_cleaning_time
      unit: minutes
      subtitle: Cleaning time

Below is an example of how the card will look using the configuration above.

Custom Vacuum Card Advanced YAML

13. Once you are done, click on SAVE in the bottom right of the pop-up.

Custom Vacuum Card - Click on Save

14. To exit editing the dashboard, click DONE at the top of the screen.

Click done once you have added your Vacuum


I hope you now have a decent way to display your robot vacuum cleaner in Home Assistant. If you do not like the frontend card we used in the tutorial, feel free to check out some of the others that are available.

There are numerous possibilities with Home Assistant. For more inspiration, check out our various Home Assistant projects and tutorials.

If you have some feedback or suggestions, please leave a comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *