GithubHelp home page GithubHelp logo

borski / charger-card Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tmjo/charger-card

0.0 1.0 0.0 2.5 MB

A lovelace card for electrical vehicle (EV) home chargers and charging robots.

License: MIT License

JavaScript 100.00%

charger-card's Introduction

EV Charger Card

hacs Buy Me A Coffee

EV Charger card for Home Assistant Lovelace UI

By default, Home Assistant does not provide any card for controlling chargers for electrical vehicles (EVs). This card displays the state and allows to control your charger.

Preview of charger-card

Installing

๐Ÿ’ก Tip: If you like this project consider buying me a cup of โ˜•๏ธ:

Buy Me A Coffee

HACS

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

Just search for Charger Card under Frontend.

Manual

  1. Download charger-card.js file from the latest-release.
  2. Put charger-card.js file into your config/www folder.
  3. Add reference to charger-card.js in Lovelace. There are two ways to do that:
    1. Using UI: Configuration โ†’ Lovelace Dashboards โ†’ Resources โ†’ Click Plus button โ†’ Set Url as /local/charger-card.js โ†’ Set Resource type as JavaScript Module.
    2. Using YAML: Add following code to lovelace section.
      resources:
        - url: /local/charger-card.js
          type: module
  4. Add custom:charger-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: Charger Card in the list.
  5. Choose entity and select the main status sensor of your charger.
  6. Now you should see the preview of the card!
  7. Do your customizations in UI editor or manually in code editor.

Sorry, there is no support for actions and stats in visual UI editor yet.

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

type: 'custom:charger-card'
entity: sensor.easee_status

Here is what every option means:

Name Type Default Description
type string Required custom:charger-card
entity string Required An entity_id within the sensor domain. Must be the main status of your charger.
customCardTheme string Optional Select a custom theme of colors, or use "theme_custom" to apply the theme you use in HA
chargerImage string Anthracite Select a charger image from defaults
customImage string Optional Path to custom image of your charger. Better to have png or svg. This will override the chargerImage selection.
compact_view boolean false Show compact view of the card.
show_name boolean true Show friendly name of the charger.
show_leds boolean true Show status leds for the charger, fits best with Easee chargers.
show_status boolean true Show status of the charger.
show_collapsibles boolean true Show collapsible menu buttons
show_toolbar boolean true Show toolbar with actions.
show_stats boolean true Show data table (stats). If not modified in stats, default values are shown.
stats object Optional Custom per state stats for your charger or something else, leave empty for default data fields
actions object Optional Custom actions for your charger.

stats object

In addition to the charger info, you can use any sensor or sensor attribute of your choosing to be shown in the stats data table section:

Name Type Default Description
entity_id string Optional An entity_id with state, i.e. easee_status.
attribute string Optional Attribute name of the stat, i.e. circuit_ratedCurrent.
unit string Optional Unit of measure, i.e. A.
subtitle string Optional Friendly name of the stat, i.e. Rated Current.

actions object

You can define custom scripts or use services for custom actions and add them to this card with actions option.

Name Type Default Description
name string Optional Friendly name of the action, i.e. Update FW.
service string Optional A service to call, i.e. easee.update_firmware.
icon string Optional Any icon for action button.
service_data object service_data for service call Verify necessary data in HA Developer Tools -> Services

Features

  • Animations: If choosing the default images of Easee chargers in any color, you can also choose to show leds which will behave according to charger status. This is identical to how the charger looks physically and similar to the Easee app and web site. Two leds for standby, all leds when connected, flashing while charging and so on. If SmartCharging is enabled, leds will be blue.
  • Collapsible menu buttons: Click on one of the menu buttons (if you enabled them) to get more info, config or limit settings.
  • Possibility to set current limits from UI
  • Stats items (data table) will depend on charger status and show most relevant information unless you choose to customize it
  • Action items on toolbar will depend on charger status and show most relevant actions. Custom actions are added in addition to defaults.

Supported languages

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

Supported models

This card currently supports charging robots from Easee. It could be modified to support basically any charger, but adoptions of the code will be necessary since there is no platform in Home Assistant for chargers making the interface identical.

Supported chargers:

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 the ideas and efforts ๐Ÿ‘

License

MIT ยฉ Tor Magne Johannessen

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.