Vehicle Status Custom Card

Share your Projects! Dashboards & Frontend
1

vehicle-status-header-opt

Vehicle Status Custom Card

The Vehicle Status Custom Card for Home Assistant enables users to easily track and manage their vehicle’s status, including battery levels, location, and other critical information. With customizable layouts, support for Lovelace custom cards, and a dynamic button grid, this card offers a user-friendly and comprehensive interface for vehicle monitoring and control.

Features

  • Indicators: Display individual or grouped entity states on the header of the card.
  • Range Indicators: Show progress bars for fuel, battery, or any entity with a range state.
  • Images: Upload or add images for a slideshow display with customizable intervals.
  • Mini Map: Track device_tracker entities using an integrated mini map.
  • Button Cards: Set up primary/secondary buttons, icons, notifications, and default/custom cards to interact with vehicle entities.
  • Layout Configuration: Customize the layout, theme, rows, and swipe functionality for button grids.

Visit the GitHub repository for more details. :pray: :pray:

9 Likes
2

Hey

Thanks for the share, will try it with the OBD device I’ll get soon for my non electrical card :wink:

Vincèn

3

Great, let me know the feedback then! :wink: :love_you_gesture:

4

leaving a comment to give this card a bit more popularity, nice card, and nice work :slight_smile: !

1 Like
5

I agree, very useful card!

6

just a ‘little’ question:

can we easily track and manage the status of KIA vehicule (SPORTAGE)

THANKS

8

No, No no, this is the new universal card for all cars :slight_smile: for MB is vehicle INFO card. I just kept the same design

9

You can track any car, just set up their sensors. More in github README :+1:

10

ah sorry, mixed up

11

I haven’t come up with a new name for the card, so it’s a bit confusing :smiley: IThis card offers the same functions, only now it is universal. :love_you_gesture:

12

Hi @VietNgoc thanks for the awesome work ! Happy user of vehicle INFO card.
Do you consider continuing to improve both card ? Or only this one ?

1 Like
13

Yes! there are some small bugs in mb :zipper_mouth_face:, I will improve both cards in parallel, in MB we have generated sensors automatically from component…

1 Like
14

where can i find the entities … can you explain me there in an integration for kya ??

15

Perfect! thanks for the clarification :handshake:

16

Oh, I don’t know where you get sensors for KIA. Check out github if you can find some integration for Kia… :no_mouth:

@Jcarlier I researched the forum, came across this integration for Kia. More info here…

17

I have a DOM navigation question.
I have no problem navigation into the different domains:

        card_mod:
          style: |
            ha-card {
              background: transparent !important; 
            }
            #main-wrapper > div.header-info-box {
              background: red;
            }
            #button_card > vehicle-buttons-grid {
              background: green;
            }
            #mini_map {
              background: yellow;
              padding-bottom: 2rem;
            }

But for e.g. #mini_map size attributes are not applied. I assume I would have to navigate to a child, but which one is it?

same for

 #button_card > vehicle-buttons-grid {
    background: green;
 }

Background is fine but I struggle to get into the button to modify it. Any advice?

18 
type: custom:vehicle-status-card
card_mod:
  style: |
    :host {
      --secondary-background-color: red; 
    }
    #mini_map {
      height: 250px !important;
    }

buttons are under swiper, but use ha css for this change… and mini map must have exact height. :wink:

1 Like
19

Wow this is beautiful card. What are you guys using to pull the vehicle data? I have a 2018 VW Tiguan mk2 I’m guessing my only option is a permanently connected OBD2 device which pulls data. Love to know how to have this happen automatically with having to open any apps etc

20

Hi @cp6969 Look for an integration that supports VW vehicles. For example this one, try it out to see if it works.

1 Like
21

v1.1.0

This update brings some exciting new features:

  1. Tire Pressures Card: Monitor your vehicle’s tire pressures with a fully customizable card. Upload a custom car image, assign tire pressure entities, and easily adjust the size, position, and layout to fit your needs.

  2. Image Slides with Swiper Config: Take image slides to the next level with new options like autoplay, loop, delay, speed, and transition effects (slide, fade, coverflow). Create dynamic and engaging slideshows to enhance your dashboard.

If these new features are useful, consider dropping a :star: on the repo to show your support! :rocket:

tire-card

Highlights :tada:

  • Tap Actions for Buttons Grid: Added tap actions for easier control. #2
  • Tire Pressure Card: A new card to display and manage tire pressures. #6
  • Visibility Template for Single Indicators: Customize indicator visibility with templates. #9
  • Swiper Config for Slideshows: Configure how image slides behave with more control. #10

Fixes :bug:

  • Improved Image URL Input & Add New Image Feature: Enhanced image URL input and added the ability to easily add new images. #8

Check out the full changelog: v1.0.0…v1.1.0

3 Likes