Estimated reading time: 10 minutes
Du nutzt Home Assistant und möchtest dein Auto oder Fahrzeug direkt im Dashboard einbinden? Dann ist die Vehicle Status Card genau das richtige Tool für dich. Mit ihr kannst du nicht nur Ladezustand, Reichweite und Status anzeigen, sondern auch Buttons, Karten und vieles mehr. In diesem Artikel zeige ich dir, wie du sie installierst, konfigurierst und sinnvoll nutzt – mit konkreten Beispielen.
Ich verlinke dir auch die GitHub page des Projekts, damit du immer zur Quelle springst.
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.
Was ist die Vehicle Status Card?
Die Vehicle Status Card ist eine Lovelace Custom Card für Home Assistant, mit der du Fahrzeugdaten übersichtlich darstellen kannst.
Functions at a glance
Hier sind die wichtigsten Features, die dir die Card bietet:
- Indikatoren: Einzelne Sensoren wie z. B. Türzustand, Ladezustand etc. können prominent angezeigt werden.
- Range-/Energiebalken: Fortschrittsleisten für Akku, Treibstoff, verbleibende Reichweite.
- Bilder/Slideshows: Fahrzeugbilder oder Karten als Slideshow anzeigen.
- Mini-Karte: das Fahrzeug kann auf einer eingebetteten Karte (device_tracker) verfolgt werden.
- Buttons: Interaktive Buttons für Aktionen oder zur Anzeige weiterer Detailkarten.
- Flexible Layouts: Du kannst beeinflussen, welche Teile sichtbar sind, wie sie angeordnet werden und wie sie sich anpassen.
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.
Schritt 2: vehicle-status-card-Integration über HACS hinzufügen
Nachdem HACS installiert ist, kann man vehicle-status-card einfach hinzufügen:
- Open HACS: Go to HACS in the Home Assistant interface.
- Search for integration: Klicke auf „Integrationen“ und verwenden die Suchfunktion, um nach „vehicle-status-card“ zu suchen.
- vehicle-status-card installieren: Finde vehicle-status-card in der Liste und klicke auf „Installieren“. Dadurch wird die Integration zu deinem Home Assistant hinzugefügt.
- Restarting the Home Assistant: Start Home Assistant again to apply the changes.
- vehicle-status-card konfigurieren: Nach dem Neustart kannst du vehicle-status-card über „Konfiguration“ > „Integrationen“ in Home Assistant einrichten und anpassen.
Conclusion
Mit diesen Schritten hast du HACS erfolgreich in deinem Home Assistant installiert und die vehicle-status-card-Integration hinzugefügt. Diese leistungsstarke Kombination eröffnet eine Welt voller zusätzlicher Funktionen und Anpassungen, die von der Home Assistant-Community entwickelt wurden und werden. Es folgen weitere Blogbeiträge und Videos zu nützlichen Integrationen. Wenn du das nicht verpassen möchtest, subscribe to my YouTube channel!
Konfiguration & Einsatz im Dashboard
UI Editor & Beispiel-Konfiguration
Der UI-Editor liefert dir direkt eine „Generate Example“-Option, die dir automatisch eine Startkonfiguration generiert – sehr hilfreich, wenn du schnell loslegen willst.
Beispiel (vereinfacht, YAML-artig):
type: 'custom:vehicle-status-card'
indicators:
row_items:
- type: entity
entity: sensor.car_battery_level
- type: group
name: Türen
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_lockWichtige Konfigurationsbereiche
Indikatoren
Use Indicator Rows (Zeilen) statt einer flachen Liste. Dort kannst du entweder einzelne Entitäten oder Gruppen zusammenfassen (z. B. alle Türen, Reifen).
Range / Energiebalken
Ideal für Akkustand oder Reichweite. Du kannst für jede Zeile individuell definieren, welche Sensoren genutzt werden und wie der Fortschrittsbalken dargestellt wird (Farbe, Höhe etc.).
Bilder / Slides
Wenn du Fahrzeugbilder oder Kartenansichten verwenden willst, kannst du sie einfügen und als Slideshow anzeigen lassen – inkl. Autoplay, Effekten und Intervallen.
Mini-Karte
Perfekt, wenn dein Fahrzeug über device_tracker in Home Assistant eingebunden ist. Die Karte zeigt den aktuellen Standort direkt auf der Card – mit Zoom und Thematisierung (hell/dunkel).
Buttons
Buttons sind interaktiv und können z. B. Aktionen auslösen (z. B. Verriegeln, Entsperren) oder weitere Infos anzeigen. Du kannst für Tap, Hold, Double-Tap unterschiedliche Aktionen definieren.
Konkrete Anwendungsbeispiele
Beispiel 1: Elektroauto im Alltag
Du hast ein Elektroauto mit Sensoren für Batterielevel, geschätzte Restreichweite und Ladevorgang. Du bindest außerdem die Tür- und Fensterzustände ein und trackst das Fahrzeug via GPS.
- Oben in der Karte siehst du direkt die Batterieprozentzahl und ob das Auto geladen wird.
- Darunter ein Balken mit der geschätzten Reichweite (z. B. 150 km von 200 km).
- Eine kleine integrierte Karte zeigt, wo dein Auto gerade steht (z. B. am Arbeitsplatz).
- Buttons erlauben dir, direkt das Ladeprofil zu öffnen, Türen zu verriegeln usw.
Beispiel 2: Fahrzeugflotte oder mehrere Fahrzeuge
Wenn du mehrere Fahrzeuge betreust (z. B. in einem Haushalt), kannst du mehrere Instanzen der Karte nutzen oder sie in einem Tab gruppieren.
- Jede Karte zeigt die wichtigsten Daten des jeweiligen Fahrzeugs.
- Ein Button kann zu einer Übersichtsseite mit allen Fahrzeugen führen (via
navigate). - Die Karten bleiben konsistent gestaltet, sodass du sofort die wichtigsten Infos erfassen kannst.
Tips & Tricks
- Farbcodierung: Nutze Farben (grün, gelb, rot) bei Balken, um schnell den Zustand zu erkennen.
- Verstecke unnötige Abschnitte: Wenn du keine Buttons brauchst, kannst du sie ausblenden.
- Swipe und Layout: Auf Mobilgeräten helfen Swipe-Gesten und passende Spaltenanzahl im Layout.
- Erweitere mit Custom Cards: Du kannst andere Lovelace-Cards in die Vehicle Status Card einbetten (z. B. Graphen, Media, etc.).
- Karten-Theme passend wählen: Achte darauf, dass Mini-Karten zu deinem Home Assistant Theme (hell/dunkel) passen.
Mögliche Herausforderungen & Lösungen
- Fehlende Sensoren / Entitäten: Du brauchst passende Sensoren und
device_tracker-Entitäten. Ohne sie kannst du nicht alle Funktionen nutzen. - Fehler in der Konfiguration: YAML-Fehler, falsche Entität-Namen oder fehlende Module sind typische Stolperfallen. Verwende die „Generate Example“-Funktion, um dir eine saubere Grundkonfiguration zu holen.
- Performance auf älteren Geräten: Viele Karten mit umfangreichen Konfigurationen können Dashboards verlangsamen – teste langsam und modular.
- Map-API & Kartenqualität: Wenn du bessere Kartenkacheln willst, kannst du eine eigene MapTiler-API einbinden (falls unterstützt).
Code des Dashboards aus dem Video
type: custom:vehicle-status-card
name: Mazda CX-5
button_card:
- button:
primary: Aufschließen
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_schlosser
- button:
primary: Warnblink ein
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: Warnblink aus
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.flur_deckenlichter
- entity: light.nachtlicht
- entity: binary_sensor.fenster_tursensoren
- 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.flur_deckenlichter
- entity: light.nachtlicht
- entity: binary_sensor.fenster_tursensoren
- 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.flur_deckenlichter
- entity: light.nachtlicht
- entity: binary_sensor.fenster_tursensoren
- 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.flur_deckenlichter
- entity: light.nachtlicht
- entity: binary_sensor.fenster_tursensoren
- 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.flur_deckenlichter
- entity: light.nachtlicht
- entity: binary_sensor.fenster_tursensoren
- 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.flur_deckenlichter
- entity: light.nachtlicht
- entity: binary_sensor.fenster_tursensoren
- 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: <hierDeinAPIKey>
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_kofferraum
type: entity
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.0000_mazda_cx_5_motorhaube
type: entity
show_name: true
show_state: true
show_icon: true
- type: group
show_name: true
show_icon: true
name: Türen
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_linke_hintertur
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.0000_mazda_cx_5_rechte_hintertur
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_kilometerstand
value_position: outside
charging_entity: ""
progress_color: "#17307d"
color_blocks: false
color_thresholds:
- value: 0
color: "#ff0000"
- value: 25
color: "#0fd741"Buttons sind für Aktionen wie Aufschließen, Warnblinklicht ein- und ausschalten, Car Wash Status oder Personenstatus (z. B. „Sascha zu Hause“) angelegt. Manche Buttons zeigen zusätzlich Statusinformationen über Sensoren oder Entitäten an.
Es gibt einen Bilderbereich, in dem Fahrzeugbilder oder Beispielbilder angezeigt werden können, zum Beispiel von der Rückseite oder von innen.
The Mini-Karte zeigt den aktuellen Standort des Fahrzeugs über den Device Tracker an. Man kann sie anklicken, um Details zu sehen, und sie nutzt eine Karten-API für bessere Kacheln.
Indikatoren visualisieren den Status einzelner Fahrzeugteile wie Türen, Motorhaube oder Kofferraum. Gruppen von Sensoren, zum Beispiel alle Türen, werden zusammengefasst und mit Icons dargestellt.
The Reichweiten- oder Energiebalken zeigt Tankfüllung oder Akkustand an und kann farblich angepasst werden, um z. B. niedrigen Stand sofort sichtbar zu machen.
The Layout ist in Abschnitte unterteilt: zuerst die Statusanzeigen, dann Reichweite, Bilder, Mini-Karte und Buttons. Die Buttons sind in einem Grid angeordnet und können auf Mobilgeräten durch Wischen navigiert werden.
Insgesamt ist das Dashboard so gestaltet, dass du alle wichtigen Fahrzeuginformationen auf einen Blick siehst, sowohl visuell als auch interaktiv, und direkt über Home Assistant Aktionen ausführen kannst.
YouTube video implementation
Conclusion
The Vehicle Status Card ist ein mächtiges Werkzeug, um dein Fahrzeug direkt in Home Assistant einzubinden. Sie kombiniert Optik und Funktionalität: Du erhältst zentral Schwerpunktinformationen wie Batteriestatus, Reichweite oder Standort – und kannst direkt Aktionen steuern.
Der Einstieg gelingt am einfachsten via HACS, doch auch die manuelle Installation ist gut dokumentiert. Dank flexibler Konfigurationsmöglichkeiten kannst du sie an deine Bedürfnisse anpassen – sei es für ein Elektroauto, mehrere Fahrzeuge oder komplexe Setups mit Buttons und Karten.
Wenn du mit Home Assistant schon vertraut bist und Fahrzeug- oder IoT-Daten visualisieren willst, ist diese Karte ein absolutes Must-Have. Nimm dir Zeit für den Aufbau, beginne mit einem einfachen Setup und erweitere Schritt für Schritt.
0 Comments