Vehicle Status Custom Card

VietNgoc · June 2, 2025, 7:48pm

Vehicle Status Card v1.12.0

What’s Changed

This release introduces several highly requested features, UI enhancements, and internal improvements for a better user experience and customization flexibility.

New Features

Vertical Button Layout
Easily switch the button grid layout to vertical orientation for compact UIs. #125
Customizable Notification Badges
Buttons now support customizable notification badge styles, letting you highlight states more effectively. #126
Color Template for Indicator Groups Item
Indicator group items can now use color templates for enhanced visual clarity. #127
Tap Action for Range Info Entities
You can now define a tap action on range info entities for better interactivity.

Other Improvements

Map Marker now updates automatically when entity location changes.
Refactored action handler events and polished UI components for better responsiveness. #128

Full Changelog: v1.11.3…v1.12.0

VietNgoc · June 2, 2025, 8:38pm

Hi, fixed in the relese v1.12.0

Holdestmade · June 3, 2025, 6:24pm

Is there something I am doing wrong to get this result ? The card is in a section and 3 columns wide:

If I pan right I get this:

If I resize the browser window, even slightly, it fills the card

Then back to the first image if I refresh the page or ~~navigate away and back~~

Thanks

sandrinoz600 · June 4, 2025, 7:05am

Hello, sorry but I’m a newbie I can’t get the application to work. (version 1.12.0)
When I insert the various indicators they don’t appear on the dashboard
Furthermore in the layout configuration if I flag indicators or range info I see the preview but if I remove the flag the visualization disappears. (It seems to me that it should be the other way around)
Could someone post the yaml code of a working visualization to get some ideas?

Holdestmade · June 4, 2025, 7:08am

There seems to be an issue with v1.12.0:

github.com/ngocjohn/vehicle-status-card

[Bug] TypeError: Cannot read properties of undefined (reading 'length')

opened 03:41PM - 03 Jun 25 UTC

PurelyNicole

bug

### Short summary 📝 Vehicle card no longer shows in version 1.12.0 ### Detaile…d description 📋 My vehicle card is configured as follows on Home Assistant 2025.5.3: ```yaml type: custom:vehicle-status-card button_card: - button: primary: Remote Start secondary: - entity: "" attribute: "" state_template: "" icon: mdi:car-wireless notify: "" button_type: action hide_button: false card_type: default default_card: [] custom_card: [] button_action: entity: button.cooper_se_activate_air_conditioning tap_action: action: perform-action perform_action: button.press target: entity_id: button.cooper_se_activate_air_conditioning hold_action: action: none double_tap_action: action: none - button: icon: mdi:lock primary: Lock Car secondary: entity: "" attribute: "" state_template: "" button_type: action hide_button: false card_type: default default_card: [] custom_card: [] button_action: entity: lock.cooper_se_lock tap_action: action: perform-action perform_action: button.press target: entity_id: button.cooper_se_activate_air_conditioning hold_action: action: none double_tap_action: action: none layout_config: button_grid: rows: 2 columns: 2 swipe: true hide: button_notify: false buttons: false images: false indicators: false mini_map: false range_info: false map_address: false theme_config: mode: auto theme: default section_order: - header_info - images - mini_map - buttons name: Mini SE mini_map: device_tracker: device_tracker.cooper_se enable_popup: true us_format: true indicators: single: - entity: binary_sensor.cooper_se_check_control_messages icon: "" attribute: "" action_config: entity: binary_sensor.cooper_se_check_control_messages tap_action: action: more-info hold_action: action: none double_tap_action: action: none - entity: binary_sensor.cooper_se_connection_status icon: "" attribute: "" action_config: entity: binary_sensor.cooper_se_connection_status tap_action: action: more-info hold_action: action: none double_tap_action: action: none - entity: lock.cooper_se_lock icon: "" attribute: "" action_config: entity: lock.cooper_se_lock tap_action: action: more-info hold_action: action: none double_tap_action: action: none - entity: binary_sensor.cooper_se_windows icon: "" attribute: "" action_config: entity: binary_sensor.cooper_se_windows tap_action: action: more-info hold_action: action: none double_tap_action: action: none - entity: sensor.cooper_se_mileage icon: "" attribute: "" action_config: entity: sensor.cooper_se_mileage tap_action: action: more-info hold_action: action: none double_tap_action: action: none range_info: - energy_level: entity: sensor.cooper_se_charging_level_hv attribute: "" icon: "" range_level: entity: sensor.cooper_se_remaining_range_electric attribute: "" progress_color: "#004225" charging_entity: sensor.cooper_se_charging_status images: - url: /api/image/serve/8ff59364976234fdf98ce0ef19547e89/original title: MINI_SE.PNG ``` This configuration works in 1.11.3, in version 1.12.0 the card does not display. Also, if trying to add a new Vehicle Status Card, visual editor goes blank upon adding an indicator. ### Version 📦 v1.12.0 ### Environment 🌐 Chrome Windows 11, Edge Windows 11, Firefox Windows 11, Offical App on iOS ### Logs and screenshots 📂 This is the error displayed in the Chrome developer console: ``` vehicle-status-card.js?hacstag=8593716631120:4294 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at Rz._renderIndicators (vehicle-status-card.js?hacstag=8593716631120:4294:97) at vehicle-status-card.js?hacstag=8593716631120:4292:22 at Array.map (<anonymous>) at Rz._renderMainCard (vehicle-status-card.js?hacstag=8593716631120:4291:11) at Rz.render (vehicle-status-card.js?hacstag=8593716631120:4288:45) at Rz.update (vehicle-status-card.js?hacstag=8593716631120:22:256) at Rz.performUpdate (vehicle-status-card.js?hacstag=8593716631120:11:4621) at Rz.scheduleUpdate (vehicle-status-card.js?hacstag=8593716631120:11:4139) at Rz._$EP (vehicle-status-card.js?hacstag=8593716631120:11:4047) _renderIndicators @ vehicle-status-card.js?hacstag=8593716631120:4294 (anonymous) @ vehicle-status-card.js?hacstag=8593716631120:4292 _renderMainCard @ vehicle-status-card.js?hacstag=8593716631120:4291 render @ vehicle-status-card.js?hacstag=8593716631120:4288 update @ vehicle-status-card.js?hacstag=8593716631120:22 performUpdate @ vehicle-status-card.js?hacstag=8593716631120:11 scheduleUpdate @ vehicle-status-card.js?hacstag=8593716631120:11 _$EP @ vehicle-status-card.js?hacstag=8593716631120:11 await in _$EP requestUpdate @ vehicle-status-card.js?hacstag=8593716631120:11 set @ vehicle-status-card.js?hacstag=8593716631120:11 set hass @ vehicle-status-card.js?hacstag=8593716631120:4283 update @ hui-card.ts:191 performUpdate @ reactive-element.ts:1503 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 (anonymous) @ hui-section.ts:132 update @ hui-section.ts:131 performUpdate @ reactive-element.ts:1503 t.performUpdate @ storage.ts:172 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 (anonymous) @ hui-view.ts:266 update @ hui-view.ts:264 performUpdate @ reactive-element.ts:1503 t.performUpdate @ storage.ts:172 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 updated @ hui-root.ts:524 _$AE @ reactive-element.ts:1552 performUpdate @ reactive-element.ts:1517 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 j @ lit-html.ts:1983 _$AI @ lit-html.ts:1923 p @ lit-html.ts:1282 $ @ lit-html.ts:1636 _$AI @ lit-html.ts:1475 j @ lit-html.ts:2274 update @ lit-element.ts:171 performUpdate @ reactive-element.ts:1503 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 updatePageEl @ partial-panel-resolver.ts:97 update @ hass-router-page.ts:89 performUpdate @ reactive-element.ts:1503 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 j @ lit-html.ts:1983 _$AI @ lit-html.ts:1923 p @ lit-html.ts:1282 $ @ lit-html.ts:1636 _$AI @ lit-html.ts:1475 j @ lit-html.ts:2274 update @ lit-element.ts:171 performUpdate @ reactive-element.ts:1503 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 j @ lit-html.ts:1983 _$AI @ lit-html.ts:1923 p @ lit-html.ts:1282 $ @ lit-html.ts:1636 _$AI @ lit-html.ts:1475 j @ lit-html.ts:2274 update @ lit-element.ts:171 performUpdate @ reactive-element.ts:1503 t.performUpdate @ storage.ts:172 scheduleUpdate @ reactive-element.ts:1399 _$EP @ reactive-element.ts:1371 await in _$EP requestUpdate @ reactive-element.ts:1310 set @ reactive-element.ts:789 _updateHass @ hass-base-mixin.ts:50 _updateHass @ context-mixin.ts:107 (anonymous) @ connection-mixin.ts:235 n @ store.js:19 (anonymous) @ entities.js:74 (anonymous) @ entities.js:76 (anonymous) @ connection.js:23 _handleMessage @ connection.js:15 ```

VietNgoc · June 4, 2025, 7:26pm

Hi, it’s a common bug for leaflet maps when the element is not displayed yet. I’ve added a minor fix for this bug in the latest release,

fixed

VietNgoc · June 9, 2025, 8:21pm

v1.13.0

What’s Changed

This release adds new layout and configuration features for range info and buttons, along with important display fixes and improvements for optional config handling.

New Features

Charging Template & Target Support
Add charging template and charge target support in the range info progress bar. #133
Range Info Layout Options
Add layout configuration for range info bars.#140
Transparent Button Background & State Colors
Support transparent background and state-specific color styling for buttons. Enhances visual customization for dynamic or themed designs. #142

Fixes

Fix: Adjust energy item display to include charging icon inside #139
Update tireConfig handling to support optional properties #143

Full Changelog: Comparing v1.12.1...v1.13.0 · ngocjohn/vehicle-status-card · GitHub

chintito4ever · June 10, 2025, 6:03pm

Can’t thank you enough for what you are doing! One of my all time favorite cards!!