npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bhuebschen/lawn-mower-card

v1.0.0

Published

Lawn Mower cleaner card for Home Assistant Lovelace UI

Downloads

8

Readme

Lawn Mower Card

Based on https://github.com/denysdovhan/vacuum-card

npm version hacs GitHub Sponsors Patreon Buy Me A Coffee Twitter

Lawn Mower cleaner card for Home Assistant Lovelace UI

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

![Preview of lawn-mower-card][preview-image]

Installing

HACS

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

Just search for Lawn Mower Card in plugins tab.

Manual

  1. Download lawn-mower-card.js file from the latest-release.

  2. Put lawn-mower-card.js file into your config/www folder.

  3. Add reference to lawn-mower-card.js in Lovelace. There's two way to do that:

    1. Using UI: ConfigurationLovelace DashboardsResources Tab → Click Plus button → Set Url as /local/lawn-mower-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/lawn-mower-card.js
          type: module
  4. Add custom:lawn-mower-card to Lovelace UI as any other card (using either editor or YAML configuration).

Usage

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: Lawn Mower Card in the list.
  5. Choose entity.
  6. 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:lawn-mower-card
entity: lawn_mower.lawn_mower
battery: sensor.lawn_mower_battery
actions:
  start:
    service: lawn_mower.start_mowing
    service_data:
      entity_id: lawn_mover.sedat
stats:
  default:
    - entity_id: sensor.lawn_mower_bladeslifetime
      unit: '%'
      subtitle: Blades
    - entity_id: sensor.lawn_mower_lensbruh
      unit: '%'
      subtitle: Lens brush
  mowing:
    - entity_id: sensor.lawn_mower_area_mowed
      subtitle: Area mowed
      unit: m²
    - entity_id: sensor.lawn_mower_mwingtime
      unit: minutes
      subtitle: Mowing time
shortcuts:
  - name: Mow backyard
    service: script.startmow_backyard
    icon: mdi:mower-on
  - name: Mow frontyard
    service: script.startmow_frontyard
    icon: mdi:mower-on

Here is what every option means:

| Name | Type | Default | Description | | -------------- | :-------: | ------------ | ----------------------------------------------------------------------------------------------------- | | type | string | Required | custom:lawn-mower-card | | entity | string | Required | An entity_id within the lawn-mover domain. | | map | string | Optional | An entity_id within the camera domain, for streaming live lawn mower map. | | map_refresh | integer | 5 | Update interval for map camera in seconds | | image | string | default | Path to image of your lawn mower. Better to have png or svg. | | battery | string | default | An entity_id within the battery of your lawn mower | | show_name | boolean | true | Show friendly name of the lawn mower. | | show_status | boolean | true | Show status of the lawn mower. | | 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 lawn mower | | actions | object | Optional | Override default actions behavior with service invocations. | | shortcuts | array | Optional | List of shortcuts shown at the right bottom part of the card with custom actions for your lawn mower. |

stats object

You can use any attribute of lawn mower or even any entity by entity_id to display by stats section. You can also combine attribute with entity_id to extract an attribute value of specific entity:

| Name | Type | Default | Description | | ---------------- | :------: | -------- | ---------------------------------------------------------------------------------------------------- | | entity_id | string | Optional | An entity_id with state, i.e. sensor.lawn-mower. | | 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) | Lawn Mower 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:lawn-mower-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 | | :-------------------------: | :-------------------------------: | | Mowing animation | Returning animation |

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)
  • 日本語 (Japanese)
  • Your language?

Supported models

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

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

Development

Want to contribute to the project?

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

Inspiration

This project is heavily inspired by:

  • Denys Dovhan — basically, this project is a modified vacuum-card.

Huge thanks for their ideas and efforts 👍

License

MIT © [Benedikt Hübschen][bhuebschen]