Estimated reading time: 10 minutes
Do you use Home Assistant and want to integrate your car or vehicle directly into the dashboard? Then the Vehicle Status Card is exactly the right tool for you. With it, you can not only display the charge level, range and status, but also buttons, maps and much more. In this article, I'll show you how to install, configure and use it sensibly - with specific examples.
I'll also link you to the GitHub page of the project so that you always jump to the source.
For detailed instructions and an explanation of all configuration options, I recommend the YouTube video linked below. In this video, every single setting is explained in detail so that you receive comprehensive instructions for the exact setup. You can find any code from the video in this article so that you can use it directly without having to type it in.
What is the Vehicle Status Card?
The Vehicle Status Card is a Lovelace Custom Card for Home Assistant, with which you can clearly display vehicle data.
Functions at a glance
Here are the most important features that the card offers you:
- IndicatorsIndividual sensors such as door status, charge status, etc. can be displayed prominently.
- Range/energy barProgress bars for battery, fuel, remaining range.
- Pictures/Slideshows: Display vehicle images or maps as a slideshow.
- Mini cardThe vehicle can be tracked on an embedded map (device_tracker).
- ButtonsInteractive buttons for actions or to display further detailed maps.
- Flexible layoutsYou can influence which parts are visible, how they are arranged and how they adapt.
What is Home Assistant?
Home Assistant is an open source platform for home automation that aims to connect and centrally control all devices in the home. It is designed to provide a unified user interface and simple, flexible control for a variety of smart home devices from different ecosystems. Here are some points in favor of Home Assistant:
- CompatibilityHome Assistant supports thousands of devices and services from various manufacturers, including lighting, air conditioning, heating, cameras, weather sensors, voice assistants and more.
- Local controlUnlike many commercial smart home platforms that rely on cloud services, Home Assistant runs locally on your network. This means increased privacy and reliability, as your smart home devices work even without an active internet connection.
- Automation and scenesOne of the main features of Home Assistant is the ability to create complex automations and scenarios. For example, you can have lights switch on automatically when it gets dark or turn on the heating when the temperature falls below a certain level.
- Simple user interfaceHome Assistant offers a user-friendly interface that makes it easy to monitor and control devices. This interface is fully customizable.
- Integration with voice assistantsHome Assistant can be integrated with voice assistants such as Amazon Alexa or Google Assistant to enable voice-controlled control of your smart home devices.
- Open source and community-drivenSince Home Assistant is open source, it is supported by an active community that is constantly developing new integrations and improving existing ones.
- Data protection and securityAs a locally running platform, Home Assistant has the advantage that the data remains within its own network. This protects privacy and increases security compared to cloud-based solutions.
In summary, Home Assistant is a powerful and flexible solution for those who want to design their own smart home and control their devices centrally, regardless of the manufacturer or ecosystem.
Installation of HACS and integration of in Home Assistant
Step 1: Installing HACS in Home Assistant
Home Assistant Community Store (HACS) is a custom add-on for Home Assistant that provides access to a variety of custom integrations and plugins developed by the community. How to install HACS:
- Check requirements: Make sure that your Home Assistant is ideally up to date.
- Download Execute script: Open a terminal for the Docker container version or the core version.
- Docker: Dial into the container with:
docker exec -it homeassistant bashor (similar) - Core: Switch to the user who is running Home Assistant
- Execute the following command for both variants:
wget -O - https://get.hacs.xyz | bash -
- Docker: Dial into the container with:
- Restarting the Home Assistant: After the files have been copied, restart Home Assistant.
- Integrate HACS into Home AssistantGo to "Configuration" > "Integrations" > "Add" in the Home Assistant interface and search for HACS. Add it and enter your GitHub token if prompted.
For the supervised version, please refer to the Documentation of HACS itself to read about the installation.
Step 2: Add vehicle-status-card integration via HACS
Once HACS is installed, you can simply add vehicle-status-card:
- Open HACS: Go to HACS in the Home Assistant interface.
- Search for integrationClick on "Integrations" and use the search function to search for "vehicle-status-card".
- Install vehicle-status-cardFind vehicle-status-card in the list and click on "Install". This will add the integration to your Home Assistant.
- Restarting the Home Assistant: Start Home Assistant again to apply the changes.
- Configure vehicle-status-cardAfter restarting, you can set up and customize vehicle-status-card via "Configuration" > "Integrations" in Home Assistant.
Conclusion
With these steps, you have successfully installed HACS in your Home Assistant and added the vehicle-status-card integration. This powerful combination opens up a world of additional features and customizations that have been and are being developed by the Home Assistant community. More blog posts and videos on useful integrations to follow. If you don't want to miss out, subscribe to my YouTube channel!
Configuration & use in the dashboard
UI Editor & sample configuration
The UI editor provides you directly with a "Generate Example"-option, which automatically generates a start configuration for you - very helpful if you want to get started quickly.
Example (simplified, YAML-like):
type: 'custom:vehicle-status-card'
indicators:
row_items:
- type: entity
entity: sensor.car_battery_level
- type: group
name: Doors
items:
- entity: binary_sensor.front_left_door
- entity: binary_sensor.front_right_door
range_info:
- energy_level:
entity: sensor.car_battery_level
range_level:
entity: sensor.car_estimated_range
progress_color: "#4caf50"
mini_map:
- entity: device_tracker.my_car
buttons:
- icon: mdi:car-door
tap_action:
action: more-info
entity: lock.car_lockImportant configuration areas
Indicators
Use Indicator Rows (lines) instead of a flat list. There you can either combine individual entities or groups (e.g. all doors, tires).
Range / energy bar
Ideal for battery status or range. You can individually define which sensors are used for each line and how the progress bar is displayed (color, height, etc.).
Pictures / Slides
If you want to use vehicle images or map views, you can insert them and display them as a slideshow - including autoplay, effects and intervals.
Mini card
Perfect if your vehicle has device_tracker is integrated into Home Assistant. The map shows the current location directly on the card - with zoom and theming (light/dark).
Buttons
Buttons are interactive and can, for example, trigger actions (e.g. lock, unlock) or display further information. You can define different actions for tap, hold and double tap.
Concrete application examples
Example 1: Electric car in everyday life
You have an electric car with sensors for battery level, estimated remaining range and charging process. You also integrate the door and window statuses and track the vehicle via GPS.
- At the top of the map you can directly see the battery percentage and whether the car is being charged.
- Below this is a bar with the estimated range (e.g. 150 km of 200 km).
- A small integrated map shows where your car is currently parked (e.g. at work).
- Buttons allow you to directly open the loading profile, lock doors, etc.
Example 2: Vehicle fleet or several vehicles
If you look after several vehicles (e.g. in a household), you can use several instances of the map or group them in one tab.
- Each card shows the most important data of the respective vehicle.
- A button can lead to an overview page with all vehicles (via
navigate). - The cards remain consistently designed so that you can immediately grasp the most important information.
Tips & Tricks
- Color codingUse colors (green, yellow, red) for bars to quickly identify the status.
- Hide unnecessary sections: If you don't need buttons, you can hide them.
- Swipe and layoutSwipe gestures and the right number of columns in the layout help on mobile devices.
- Expand with custom cardsYou can embed other Lovelace Cards in the Vehicle Status Card (e.g. graphs, media, etc.).
- Choose a suitable card theme: Make sure that Mini cards match your Home Assistant theme (light/dark).
Possible challenges & solutions
- Missing sensors / entities: You need suitable sensors and
device_tracker-entities. You cannot use all functions without them. - Error in the configurationYAML errors, incorrect entity names or missing modules are typical pitfalls. Use the "Generate Example" function to get a clean basic configuration.
- Performance on older devices: Many cards with extensive configurations can slow down dashboards - test slowly and modularly.
- Map API & map quality: If you want better map tiles, you can include your own MapTiler API (if supported).
Code of the dashboard from the video
type: custom:vehicle-status-card
name: Mazda CX-5
button_card:
- button:
primary: Unlock
secondary:
- entity: ""
attribute: ""
state_template: ""
icon: mdi:lock-open
notify: ""
button_type: action
hide_button: false
card_type: default
default_card: []
custom_card: []
button_action:
entity: lock.0000_mazda_cx_5_locker
- button:
primary: hazard warning lights on
secondary:
- entity: ""
attribute: ""
state_template: ""
icon: mdi:hazard-lights
notify: ""
button_type: action
hide_button: false
card_type: default
default_card: []
custom_card: []
button_action:
entity: button.0000_mazda_cx_5_warnblinklicht_einschalten
- button:
primary: hazard warning lights off
secondary:
- entity: ""
attribute: ""
state_template: ""
icon: mdi:hazard-lights
notify: ""
button_type: action
hide_button: false
card_type: default
default_card: []
custom_card: []
button_action:
entity: button.0000_mazda_cx_5_warnblinklicht_ausschalten
- button:
primary: Sascha
secondary:
entity: person.cptdaydreamer
state_color: true
notify_color: >-
{{ iif (is_state('person.cptdaydreamer', 'home'),
'var(--state-person-home-color)', 'var(--state-person-active-color)') }}
notify_icon: >-
{{ iif (is_state('person.cptdaydreamer', 'home'), 'mdi:home',
'mdi:home-export-outline') }}
notify: "{{ true }}"
button_type: action
hide_button: false
card_type: default
default_card:
- title: Category default expanded
collapsed_items: false
items:
- entity: person.cptdaydreamer
- entity: device_tracker.sm_g990b
- entity: media_player.tv_samsung_ue40h6290
- entity: light.corridor_ceiling_lights
- entity: light.nightlight
- entity: binary_sensor.window_door_sensors
- entity: binary_sensor.car_wash
- title: Category collapsed
collapsed_items: true
items:
- entity: person.cptdaydreamer
- entity: device_tracker.sm_g990b
- entity: media_player.tv_samsung_ue40h6290
- entity: light.corridor_ceiling_lights
- entity: light.nightlight
- entity: binary_sensor.window_door_sensors
- entity: binary_sensor.car_wash
custom_card:
- type: entities
title: Custom Card
entities:
- entity: person.cptdaydreamer
- entity: device_tracker.sm_g990b
- entity: media_player.tv_samsung_ue40h6290
- entity: light.corridor_ceiling_lights
- entity: light.nightlight
- entity: binary_sensor.window_door_sensors
- entity: binary_sensor.car_wash
button_action:
entity: person.cptdaydreamer
tap_action:
action: more-info
- button:
primary: Car Wash
secondary:
entity: binary_sensor.car_wash
state_color: true
button_type: default
hide_button: false
card_type: default
default_card:
- title: Category default expanded
collapsed_items: false
items:
- entity: person.cptdaydreamer
- entity: device_tracker.sm_g990b
- entity: media_player.tv_samsung_ue40h6290
- entity: light.corridor_ceiling_lights
- entity: light.nightlight
- entity: binary_sensor.window_door_sensors
- entity: binary_sensor.car_wash
- title: Category collapsed
collapsed_items: true
items:
- entity: person.cptdaydreamer
- entity: device_tracker.sm_g990b
- entity: media_player.tv_samsung_ue40h6290
- entity: light.corridor_ceiling_lights
- entity: light.nightlight
- entity: binary_sensor.window_door_sensors
- entity: binary_sensor.car_wash
custom_card:
- type: entities
title: Custom Card
entities:
- entity: person.cptdaydreamer
- entity: device_tracker.sm_g990b
- entity: media_player.tv_samsung_ue40h6290
- entity: light.corridor_ceiling_lights
- entity: light.nightlight
- entity: binary_sensor.window_door_sensors
- entity: binary_sensor.car_wash
button_action: {}
images:
- url: /api/image/serve/f4196650e928ddb13bce2d959e87dbab/original
title: mazda-back.png
- title: sample-car-1.png
url: >-
https://raw.githubusercontent.com/ngocjohn/vehicle-status-card/refs/heads/main/assets/sample-images/sample-car-1.png
- title: sample-car-2.png
url: >-
https://raw.githubusercontent.com/ngocjohn/vehicle-status-card/refs/heads/main/assets/sample-images/sample-car-2.png
layout_config:
hide_card_name: false
section_order:
- indicators
- range_info
- images
- mini_map
- buttons
theme_config: {}
button_grid:
rows: 2
swipe: true
button_layout: horizontal
transparent: false
hide_notify_badge: false
columns: 2
mini_map:
device_tracker: device_tracker.0000_mazda_cx_5_auto_tracker
enable_popup: true
single_map_card: false
use_zone_name: false
maptiler_api_key:
hide_map_address: false
entities:
- entity: device_tracker.0000_mazda_cx_5_auto_tracker
indicator_rows:
- row_items:
- entity: binary_sensor.0000_mazda_cx_5_coffer_space
type: entity
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.0000_mazda_cx_5_hood
type: entity
show_name: true
show_state: true
show_icon: true
- type: group
show_name: true
show_icon: true
name: Doors
items:
- entity: binary_sensor.0000_mazda_cx_5_fahrertur
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.0000_mazda_cx_5_beifahrertur
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.0000_mazda_cx_5_left_behind_tur
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.0000_mazda_cx_5_right_backdoor
show_name: true
show_state: true
show_icon: true
icon: mdi:car-door
range_info:
- energy_level:
entity: sensor.0000_mazda_cx_5_tank_fullstand_in
tap_action:
action: more-info
value_alignment: start
value_position: outside
range_level:
entity: sensor.0000_mazda_cx_5_kilometer reading
value_position: outside
charging_entity: ""
progress_color: "#17307d"
color_blocks: false
color_thresholds:
- value: 0
color: "#ff0000"
- value: 25
color: "#0fd741"Buttons are created for actions such as unlocking, switching hazard warning lights on and off, car wash status or person status (e.g. "Sascha at home"). Some buttons also display status information about sensors or entities.
There is a Image areawhere vehicle images or sample images can be displayed, for example from the rear or from the inside.
The Mini card shows the current location of the vehicle via the device tracker. You can click on it to see details and it uses a map API for better tiles.
Indicators visualize the status of individual vehicle parts such as doors, hood or trunk. Groups of sensors, for example all doors, are summarized and displayed with icons.
The Range or energy bar indicates fuel level or battery status and can be color-coded to make low levels immediately visible, for example.
The Layout is divided into sections: first the status displays, then the range, images, mini-map and buttons. The buttons are arranged in a grid and can be navigated on mobile devices by swiping.
Overall, the dashboard is designed so that you can see all important vehicle information at a glanceboth visually and interactively, and perform actions directly via Home Assistant.
YouTube video implementation
Conclusion
The Vehicle Status Card is a powerful tool for integrating your vehicle directly into Home Assistant. It combines visuals and functionality: you receive centralized key information such as battery status, range or location - and can control actions directly.
The easiest way to get started is via HACS, but manual installation is also well documented. Thanks to flexible configuration options, you can adapt it to your needs - be it for one electric car, several vehicles or complex setups with buttons and maps.
If you are already familiar with Home Assistant and want to visualize vehicle or IoT data, this card is an absolute must-have. Take your time to set it up, start with a simple setup and expand step by step.
0 Comments