tioan / vacuum-card

Vacuum cleaner card for Home Assistant Lovelace UI

Vacuum Card

Vacuum cleaner card for Home Assistant Lovelace UI

By default, Home Assistant does not provide any card for controlling vacuum cleaners. This card displays the state and allows to control your robot.

Installing

💡 Tip: If you like this project and want to get some stickers and postcards, consider becoming a patron:

or just buy me a cup of ☕️ or 🥤:

HACS

Not available yet.

Manual

1. Download vacuum-card.js file from the latest-release.
2. Put vacuum-card.js file into your config/www folder.
3. Add reference to vacuum-card.js in Lovelace. There's two way to do that:
   1. Using UI: Configuration → Lovelace Dashboards → Resources → Click Plus button → Set Url as /local/vacuum-cars.js → Set Resource type as JavaScript Module.
   2. Using YAML: Add following code to lovelace section.

      resources:
        - url: /local/vacuum-card.js
          type: module

4. Add custom:vacuum-card to Lovelace UI as any other card (using either editor or YAML configuration).

Using the card

This card can be configured using Lovelace UI editor.

1. In Lovelace UI, click 3 dots in top left corner.
2. Click Configure UI.
3. Click Plus button to add a new card.
4. Find Custom: Vacuum Card in the list.
5. Choose entity.
6. Now you should see the preview of the card!

Sorry, no support for actions in visual config yet.

Typical example of using this card in YAML config would look like this:

type: 'custom:vacuum-card'
entity: vacuum.vacuum_cleaner
actions:
  - name: Clean living room
    service: script.clean_living_room
    icon: 'mdi:sofa'
  - name: Clean bedroom
    service: script.clean_bedroom
    icon: 'mdi:bed-empty'
  - name: Clean kitchen
    service: script.clean_kitchen
    icon: 'mdi:silverware-fork-knife'

Here is what every option means:

Name	Type	Default	Description
type	string	Required	custom:vacuum-card
entity	string	Required	An entity_id within the vacuum domain.
map	string	Optional	An entity_id within the camera domain, for streaming live vacuum map.
image	string	default	Path to image of your vacuum cleaner. Better to have png or svg.
actions	object	Optional	Custom actions for your vacuum cleaner.

actions object

Name	Type	Default	Description
name	string	Optional	Friendly name of the action, i.e. Clean bedroom.
service	string	Optional	A service to call, i.e. script.clean_bedroom.
icon	string	Optional	Any icon for action button.

Animations

I've added some animations for this card to make it alive. Animations are applied only for image property. Here's how they look like:

Celaning	Docking

Supported models

This card relies on basic vacuum services, like pause, start, stop, return_to_base, etc. It should work with any robot vacuum, however I can physically test it only with my own robot vacuum.

If this card works with your vacuum cleaner, please open a PR and your model to the list.

• Roborock S5 Max
• Your vacuum?

Development

Want to contribute to the project?

First of all, thanks! Check contributing guideline for more information.

Inspiration

This project is heavily inspired by:

• MacBury Smart House — basically, this project is a refinement of MacBury's custom card.
• Benji vacuum card — this is where I noticed this vacuum card design for the first time.

Huge thanks for their ideas and efforts 👍

License

MIT © Denys Dovhan