Git Product home page Git Product logo

vacuum-card's Introduction

Vacuum Card

npm version hacs Patreon Buy Me A Coffee Twitter

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.

Preview of vacuum-card

Installing

๐Ÿ’ก Tip: If you like this project and want to get some stickers and postcards, consider becoming a patron:

Become a patron

or just buy me a cup of โ˜•๏ธ or ๐Ÿฅค:

Buy Me A Coffee

HACS

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

Just search for Vacuum Card in plugins tab.

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-card.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.
show_name boolean true Show friendly name of the vacuum.
show_toolbar boolean true Show toolbar with actions.
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.
service_data object service_data for service call

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
Cleaning anumation Returning anumation

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 S6
  • Roborock S5
  • Roborock S5 Max
  • Roborock S4
  • Xiaomi Mi Robot Vacuum (STYJ02YM)
  • Roomba 675
  • Dyson 360 Eye (brush and filter hours are not supported)
  • Neato D7
  • 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

vacuum-card's People

Contributors

adriancampos avatar barrycraig avatar cubandanger05 avatar darylosu avatar denysdovhan avatar jhesketh avatar krystiancharubin avatar tioan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.