EV Charger Card

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.

Installing

💡 Tip: If you like this project consider buying me a cup of ☕️:

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:

• English
• Norsk bokmål (Norwegian)
• Svenska (by jockesoft)
• German (by DeerMaximum)
• Danish (by dykandDK)
• Catalan (by gerardag)
• Your language?

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:

• Easee
• Your charger?

Development

Want to contribute to the project?

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

Inspiration

This project is heavily inspired by:

• denysdovhan for inspiration to this card, the ideas are taken from his vacuum card. Make sure to buy him a coffee too!

Huge thanks for the ideas and efforts 👍

License

MIT © Tor Magne Johannessen