Car Card

A Custom Card for Home Assistant to display your different states of your car, for example its state of charge, range, and more at a glance

Install

HACS (recommended)

This card is not direclty available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box. Install HACS before trying to install this card To install this:

• Go to HACS
• Click on Frontend
• Click on the overflow Menu (three vertical dots)
• Click on Custom Repositories
• Type this URL https://github.com/flixlix/car-card
• In "Category", select lovelace
• Install via UI

Manual install

1. Download and copy car-card.js from the latest release into your config/www directory.

2. Add the resource reference as decribed below.

Add resource reference

If you configure Dashboards via YAML, add a reference to car-card.js inside your configuration.yaml:

resources:
  - url: /local/car-card.js
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Settings -> Dashboards
3. Click three dot icon
4. Select Resources
5. Hit (+ ADD RESOURCE) icon
6. Enter URL /local/car-card.js and select type "JavaScript Module". (Use /hacsfiles/car-card/car-card.js and select "JavaScript Module" for HACS install if HACS didn't do it already)

Usage

Card options

Name	Type	Default	Description
type	string	required	custom:car-card.
title	string		Shows a title at the top of the card in the Style of your Home Assistant Headers.
fields	object	required	One or more sensor entities, see fields object for additional entity options.
image	object		Check Image Configuration.

Fields Object

Name	Type	Description
main	object	Check Main Field Configuration.
battery	object	Check Battery Field Configuration.

Main Configuration

Name	Type	Description
heading	object	Check Entity Configuration.
subheading1	object	Check Entity Configuration.
subheading2	object	Check Entity Configuration.

Battery Configuration

Name	Type	Description
state_of_charge	object	An Entity whose state varies between 0-100. A state of 100 means the battery is full. Check Entity Configuration.
target_state_of_charge	object	An Entity whose state varies between 0-100. Check Entity Configuration.
recommended_target	number	A number between 0-100 as a threshold from which the progress bar turns red, signaling charging the car above this number might not be good for its health. A typical value here is 80.

Entity Configuration

Additional Configuration Options may follow

Name	Type	Description
entity	string	An Entity Id providing the state for the given property.

Image Configuration

Name	Type	Default	Description
src	string	required	The Source URL of your an image of your car. Can also be a /local/... path if you have a local image.
max_height	number	200	Maximum Height of the Image in pixels.

Example Configuration

type: custom:car-card
title: Car Card
image:
  src: /local/vw_id3.png
  max_height: 150
fields:
  main:
    heading:
      entity: sensor.car_range
  battery:
    state_of_charge:
      entity: sensor.state_of_charge
    target_state_of_charge:
      entity: sensor.target_state_of_charge
    recommended_target: 80