Vehicle Status Custom Card

Share your Projects! Dashboards & Frontend
148

How do I get that background image, that’s behind the car and text, to appear like in the example below? I can’t find anywhere in the UI to populate that?

image
image281×177 45.3 KB

149

What’s Changed

This update introduces improved support for range calculations and enhances MapTiler popups with multi-entity support, making the Vehicle Status Card more flexible and informative.

:rocket: New Features

  • Enhanced MapTiler popups: Now supports displaying multiple entities in a single popup. #159

https://github.com/user-attachments/assets/bf2f2495-80ae-4670-8bd3-5d9611aeef7f(image larger than 3 MB)

  • max_value support for range items: Added max_value configuration for range-based items, improving precision in value calculations. #153

Full Changelog: v1.15.0…v1.15.1

2 Likes
150

Hi, I have an issue with the latesta 1.5.x releases. When I open the popup map I normally see an option to choose different type or map layers, like satellite etc.
But since this release I just see the standard map. I have a Maptiler api key added to the code. Any ideas?

      path_color: orange
      enable_popup: true
      device_tracker: device_tracker.vehicle_location
      history_period: yesterday
      hours_to_show: 24
      auto_fit: false
      map_zoom: 16
      map_height: 200
      use_zone_name: true
      maptiler_api_key: xxxxxxxxxxxx
      default_zoom: 16
      extra_entities:
        - entity: device_tracker.vehicle_location
          focus: true
      use_more_info: true
151

hello
I have a problem too
after I updated to v2025.7.1, I can’t find this module anymore.
I tried redownloading and installing manually but without success.

vehicle 1
vehicle 11648×213 11 KB

vehicle 2
vehicle 21004×805 61.7 KB

1 Like
152

Update to 1.15.2-beta.1 and the issue will be solved. Another issue then mine.

153

tks, now is working

154

Hi @lagge78, there was a configuration change in the latest version. Now for popup map you can change the styles in editor, for dark or light theme. :wink:

CleanShot 2025-07-14 at 18.06.18@2x
CleanShot 2025-07-14 at 18.06.18@2x1920×1683 87.5 KB

1 Like
155

This is amazing work, Thank you!
I tried to install it on my own HA instance and it keeps failing.
I am connected to the HA machine on my computer and I can add the card to the dashboard, customize it etc however when I save and refresh the dashboard on my tablet it gives me a “configuration error”. I can see it tho in my browser on the computer but not on the app on the tablet.
If I try to add it from the tablet directly I cannot even see the card.
I tried adding it as is without customizing anything and it still fails,
I tested with the latest beta release as well as with the latest stable.
If you have any idea why it fails and point me on the right direction I would really appreciate it. Thank you

1 Like
156

Amazing card.
Is it possible to have conditional visibility for the Range Progress Bar?
I tried adding the visibility: with template like for indicators but it does not do anything.

157

Is there a way to add 3 entities to a progress bar? For example, distance to empty, charging percentage and time left to charge?

image
image770×360 19.4 KB

158

Hi, Amazing work. Is it possible to change the style of the custom cards.

159

I use OnStar2MQTT to access my 2025 GMC Sierra HD and the Mini Map on your card doesn’t work for me. I have “device_tracker.2025_gmc_sierra_hd_crew_cab” selected for the entity, but it never moves from the location it was in when I set it up.

Should the Mini Map work with onstar/GM vehicles?

160

v1.16.0

What’s Changed

This release focuses on improving interaction and visual clarity across the card. It introduces a new action handler for more flexible button actions, sharper MiniMap rendering with retina support, and a new indicator rows system for better organization. Several bugs were also fixed, including progress bar limits and element layering issues.

:rocket: Features

  • Indicator Rows (#186)
    Introduced a new “indicator rows” system, allowing more organized layouts and better customization options.

2025-08-18 03 23 17

:bug: Bug Fixes

  • Progress Bar Maximum Value (#183)
    Fixed an issue where the progress bar could go beyond its defined maximum.

  • Z-Index Layering (#174, fixes #173)
    Adjusted the layering order (z-index) in the component so elements display correctly without overlapping.

:toolbox: Maintenance

  • Action Handler Directive (#180)
    Added a new directive to handle user actions more efficiently.

  • Update ha-button (#177)
    Improvements and adjustments to the ha-button component for better consistency.

  • MiniMap Retina Support (#172)
    The MiniMap now looks sharper on high-resolution (retina) screens and has improved tile layer settings for clearer map details.

  • Add custom icon size, custom templates options for indicator row items (#187)

  • Add new properties for row and column reversal in indicator components #188

3 Likes
161

Hi @huosresre The minimap on the card works with all entities that have lat lng in their attributes.

162

Hi @Hussamfhaily Yes, the custom card is just like all other Lovelace custom cards. You can use the card mod for customization.

163

Can somebody help me with a filled yaml example for the model 3?

164

v1.17.0

What’s Changed

This release introduces a revamped configuration experience for buttons, enhanced template flexibility, new interaction options, and a modernized UI editor for both button and image settings.

New Features :tada:

Fixes :bug:

:hammer_and_wrench: Maintenance

  • UI Editor: Button Section
    A new visual editor to configure the button section directly in the UI.

  • UI Editor: Image Configuration
    A dedicated editor for configuring image behavior and appearance with real-time preview.

Full Changelog: Comparing v1.16.1...v1.17.0 · ngocjohn/vehicle-status-card · GitHub

1 Like
165

hi,

is it possible to change the background of the mini_map?
I tried as follow:

type: custom:vehicle-status-card
card_mod:
  style: |
    ha-card {
      --ha-card-border-width: 1px;
      border-radius: 5px !important;
      border: 0.1px outset black !important;
      box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66) !important;
    }
    #mini_map {
      background: transparent !important;
    }
name: Audi Q7

but no success

166

@VietNgoc this is absolutely brilliant. Many thanks, I now have an amazing vehicle card that looks excellent.

1 Like
167

Hi,
This is perfect. Something I was thinking about.
Thanks a lot for your work and sharing it with us.
On the end… one small question:
Is it possible to adjust the blend between the image and map?
I think it would be a nice option (visually).

Thanks a lot!