GithubHelp home page GithubHelp logo

fpetrovski / purifier-card Goto Github PK

View Code? Open in Web Editor NEW

This project forked from denysdovhan/purifier-card

0.0 0.0 0.0 4.64 MB

Air Purifier card for Home Assistant Lovelace UI

License: MIT License

JavaScript 100.00%

purifier-card's Introduction

Purifier Card

npm version hacs Patreon Buy Me A Coffee Twitter

Air Purifier card for Home Assistant Lovelace UI

By default, the Home Assistant does not provide any card for controlling air purifiers. This card displays the state and allows to control your air purifier.

Preview of purifier-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 Purifier Card in the plugins tab.

Manual

  1. Download purifier-card.js file from the latest-release.
  2. Put purifier-card.js file into your config/www folder.
  3. Add a reference to purifier-card.js in Lovelace. There's two way to do that:
    1. Using UI: ConfigurationLovelace DashboardsResources → Click Plus button → Set Url as /local/purifier-card.js → Set Resource type as JavaScript Module.
    2. Using YAML: Add the following code to lovelace section.
      resources:
        - url: /local/purifier-card.js
          type: module
  4. Add custom:purifier-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: Purifier Card in the list.
  5. Choose entity.
  6. Now you should see the preview of the card!

Sorry, no support for actions and stats in visual config yet.

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

type: 'custom:purifier-card'
entity: fan.purifier
stats:
  - attribute: filter_life_remaining
    unit: '%'
    subtitle: Filter Remaining
  - attribute: motor_speed
    unit: RPS
    subtitle: Motor Speed
actions:
  - name: Silent
    icon: 'mdi:weather-night'
    speed: Silent
  - name: 25%
    icon: 'mdi:circle-slice-2'
    speed: Favorite
    xiaomi_miio_favorite_level: 3
  - name: 50%
    icon: 'mdi:circle-slice-4'
    speed: Favorite
    xiaomi_miio_favorite_level: 7
  - name: 75%
    icon: 'mdi:circle-slice-6'
    speed: Favorite
    xiaomi_miio_favorite_level: 10
  - name: 100%
    icon: 'mdi:circle-slice-8'
    speed: Favorite
    xiaomi_miio_favorite_level: 14
  - name: Auto
    icon: 'mdi:brightness-auto'
    speed: Auto
show_name: true
show_state: true
show_toolbar: true
compact_view: false

Here is what every option means:

Name Type Default Description
type string Required custom:purifier-card
entity string Required An entity_id within the fan domain.
show_name boolean true Show friendly name of the purifier.
show_status boolean true Show status of the purifier.
show_toolbar boolean true Show toolbar with actions.
compact_view boolean false Compact view without image.
aqi object Optional Custom entity or attribute for AQI value.
stats object Optional Custom per state stats for your purifier cleaner
actions object Optional Custom actions for your purifier cleaner.

aqi object

Name Type Default Description
entity_id string Optional An entity_id with state, i.e. sensor.current_aqi.
attribute string Optional An attribute which should be used to get AQI value.
unit string Optional An unit of measurement to display.

stats object

You can use any attribute of purifier 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.purifier_aqi.
attribute string Optional Attribute name of the stat, i.e. filter_left.
unit string Optional Unit of measure, i.e. hours.
subtitle string Optional Friendly name of the stat, i.e. Filter.

actions object

You can define custom scripts for custom actions or add shortcuts for switching modes and speeds via actions option.

Name Type Default Description
name string Optional Friendly name of the action, i.e. Switch to Auto.
icon string Optional Any icon for action button.
service string Optional A service to call, i.e. script.clean_air.
service_data object Optional service_data for service call
speed object Optional A speed to switch to, i.e. Auto, etc
xiaomi_miio_favorite_level object Optional A favorite level of the operation mode Favorite for Xioami Air Purifiers. speed is required with this option

The card will automatically try to figure out which one of actions is currently active. The action will be highlighted when:

  1. It's a service.
  2. entity's speed attribute is equal to action's speed.
  3. entity's speed attribute and favorite_level is equal to action's speed and xiaomi_miio_favorite_level correspondingly.

Animations

I've added an animation for this card to make it alive:

How did I make this animation? It's a long story…

  1. I took original gif file from here.
  2. Then I tweaked image levels to make the background black and purifier white.
  3. Then I inverted colors on the gif.
  4. Then I've split the gif by frame.
  5. Then I removed the background of the image frame by frame using remove.bg.
  6. Then I upscaled each of those images using icons8.com/upscaler.
  7. Then I put up all of those images back in a single gif.
  8. Profit!

Archive with images from all of these steps can be found here.

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)
  • Türkçe (Turkish)
  • Français (French)
  • Norsk (Norwegian)
  • Polski (Polish)
  • Български (Bulgarian)
  • 简体中文 (Simplified Chinese)
  • Deutsch (German)
  • Català (Catalan)
  • Русский (Russian)
  • Italiano (Italian)
  • Your language?

Supported models

This card relies on basic fan services, like toggle, turn_on, turn_off, etc. It should work with any air purifier, however I can physically test it only with my own purifier.

If this card works with your air purifier, 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:

Huge thanks for their ideas and efforts 👍

License

MIT © Denys Dovhan

purifier-card's People

Contributors

denysdovhan avatar andriej avatar dependabot[bot] avatar semantic-release-bot avatar ericreiche avatar hwikene avatar akinomeroglu avatar thebalkanfella avatar sdjnmxd avatar adrinkbeer avatar alokeen avatar zsiti avatar deltaangle avatar elax46 avatar houssamotarid avatar fenikso avatar seperis avatar liudger avatar betaboon avatar eksploit avatar muchar 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.