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

This card is available in HACS (Home Assistant Community Store).

Just search for Vacuum Card in plugins tab.

Manual

Download vacuum-card.js file from the latest-release.
Put vacuum-card.js file into your config/www folder.
Add reference to vacuum-card.js in Lovelace. There's two way to do that:
1. Using UI: Configuration → Lovelace Dashboards → Resources Tab → Click Plus button → Set Url as /local/vacuum-card.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile
2. Using YAML: Add following code to lovelace section.
```
resources:
  - url: /local/vacuum-card.js
    type: module
```
Add custom:vacuum-card to Lovelace UI as any other card (using either editor or YAML configuration).

Usage

This card can be configured using Lovelace UI editor.

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

Sorry, no support for actions, shortcuts and stats 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:
  start:
    service: xiaomi_miio.vacuum_clean_segment
    service_data:
      entity_id: vacuum.vacuum_cleaner
      segments: [16, 20]
stats:
  default:
    - attribute: filter_left
      unit: hours
      subtitle: Filter
    - attribute: side_brush_left
      unit: hours
      subtitle: Side brush
    - attribute: main_brush_left
      unit: hours
      subtitle: Main brush
    - attribute: sensor_dirty_left
      unit: hours
      subtitle: Sensors
  cleaning:
    - entity_id: sensor.vacuum_main_brush_left
      value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      subtitle: Main brush
      unit: hours
    - attribute: cleaning_time
      unit: minutes
      subtitle: Cleaning time
shortcuts:
  - 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.
`map_refresh`	`integer`	`5`	Update interval for map camera in seconds
`image`	`string`	`default`	Path to image of your vacuum cleaner. Better to have `png` or `svg`.
`show_name`	`boolean`	`true`	Show friendly name of the vacuum.
`show_status`	`boolean`	`true`	Show status of the vacuum.
`show_toolbar`	`boolean`	`true`	Show toolbar with actions.
`compact_view`	`boolean`	`false`	Compact view without image.
`stats`	`object`	Optional	Custom per state stats for your vacuum cleaner
`actions`	`object`	Optional	Override default actions behavior with service invocations.
`shortcuts`	`object`	Optional	List of shortcuts shown at the right bottom part of the card with custom actions for your vacuum cleaner.

`stats` object

You can use any attribute of vacuum or even any entity by entity_id to display by stats section:

Name	Type	Default	Description
`entity_id`	`string`	Optional	An entity_id with state, i.e. `sensor.vacuum`.
`attribute`	`string`	Optional	Attribute name of the stat, i.e. `filter_left`.
`value_template`	`string`	Optional	Jinja2 template returning a value. `value` variable represents the `entity_id` or `attribute` state.
`unit`	`string`	Optional	Unit of measure, i.e. `hours`.
`subtitle`	`string`	Optional	Friendly name of the stat, i.e. `Filter`.

`actions` object

You can defined service invocations to override default actions behavior. Available actions to override are start, pause, resume, stop, locate and return_to_base.

Name	Type	Default	Description
`service`	`string`	Optional	A service to call, i.e. `script.clean_bedroom`.
`service_data`	`object`	`service_data` for `service` call

`shortcuts` object

You can defined custom scripts for custom actions i.e cleaning specific room and add them to this card with shortcuts option.

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.
`service_data`	`object`	`service_data` for `service` call

Theming

This card can be styled by changing the values of these CSS properties (globally or per-card via card-mod):

Variable	Default value	Description
`--vc-background`	`var(--ha-card-background, var(--card-background-color, white))`	Background of the card
`--vc-primary-text-color`	`var(--primary-text-color)`	Vacuum name, stats values, etc
`--vc-secondary-text-color`	`var(--secondary-text-color)`	Status, stats units and titles, etc
`--vc-icon-color`	`var(--secondary-text-color)`	Colors of icons
`--vc-toolbar-background`	`var(--vc-background)`	Background of the toolbar
`--vc-toolbar-text-color`	`var(--secondary-text-color)`	Color of the toolbar texts
`--vc-toolbar-icon-color`	`var(--secondary-text-color)`	Color of the toolbar icons
`--vc-divider-color`	`var(--entities-divider-color, var(--divider-color))`	Color of dividers
`--vc-spacing`	`10px`	Paddings and margins inside the card

Styling via theme

Here is an example of customization via theme. Read more in the Frontend documentation.

my-custom-theme:
  vc-background: '#17A8F4'
  vc-spacing: 5px

Styling via card-mod

You can use card-mod to customize the card on per-card basis, like this:

type: 'custom:vacuum-card'
style: |
  ha-card {
    --vc-background: #17A8F4;
    --vc-spacing: 5px;
  }
  ...

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:

Cleaning	Docking

Supported languages

This card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:

English
Українська (Ukrainian)
Deutsch (German)
Français (French)
Italiano (Italian)
Nederlands (Dutch)
Polski (Polish)
Русский (Russian)
Español (Spanish)
Čeština (Czech)
Magyar (Hungarian)
עִבְרִית (Hebrew)
Português (Portuguese)
Português Brasileiro (Brazilian Portuguese)
Svenska (Swedish)
Norsk bokmål (Norwegian)
Norsk nynorsk (Norwegian)
Dansk (Danish)
한국어 (Korean)
Suomi (Finnish)
Català (Catalan)
正體中文 (Traditional Chinese)
Việt Nam (Vietnamese)
Lietuvių (Lithuanian)
Română (Romanian)
简体中文 (Simplified Chinese)
Your language?

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 S7, S6 (MaxV, Pure), S5 (Max), S50, S4 (Max), E25, E4
Mijia Robot Vacuum Cleaner 1C (STYTJ01ZHM)
Xiaomi Mi Robot (STYJ02YM), Mi Robot 1S, Mi Roborock V1 (SDJQR02RR), Mijia 1C, Mi Robot Vacuum-Mop P
Roomba 670, 675, 676, 960980, 981, i3, i7+, e5, S9, s9+, j7
Braava M6
Dyson 360 Eye
Neato D7, D6, D4
Shark IQ
Ecovacs Deebot 950, Deebot OZMO T8 AIVI, Deebot N79, Deebot N8, Deebot N8+, T9 AIVI
Eufy Robovac 30c, Robovac 15C Max
EcoVacs T9 AIVI
Dreame Z10 Pro, L10 Pro, D9, F9
360 S7 Pro
KaBum! Smart 500
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 👍

Name		Name	Last commit message	Last commit date
Latest commit History 493 Commits
.github		.github
.husky		.husky
src		src
.babelrc		.babelrc
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE.md		LICENSE.md
README.md		README.md
hacs.json		hacs.json
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Vacuum Card

Installing

HACS

Manual

Usage

`stats` object

`actions` object

`shortcuts` object

Theming

Styling via theme

Styling via card-mod

Animations

Supported languages

Supported models

Development

Inspiration

License

About

Releases

Packages

Languages

License

Wascheck86/vacuum-card

Folders and files

Latest commit

History

Repository files navigation

Vacuum Card

Installing

HACS

Manual

Usage

stats object

actions object

shortcuts object

Theming

Styling via theme

Styling via card-mod

Animations

Supported languages

Supported models

Development

Inspiration

License

About

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

Packages 0

Languages

`stats` object

`actions` object

`shortcuts` object

Packages