Generic 'Vehicle' Card

[Xelinor]

There are quite a few integrations that provide entities for vehicles today, but not a good way to visualize those entities in relation to the others. It’s fine to see a long list of entites, but the reality is that it takes up a lot of space when a simple picture gives you same information in FAR less space and with greater cognitive understanding, and it’s already a solved problem: It’s in every car’s dashboard.

So why not take that, and bring it to your home assistant dashboard?

• A few generic outlines based on the various models of cars, selected from a dropdown.
• Boolean for optional features like moon roof, remote start, remote lock/unlock
• Input entities for the locked/unlocked status, as well as open/closed of the doors/hood/trunk/hatch/etc
• Input entities for tire PSI
• Battery state for electric vehicles, remaining fuel for non-EV
• Device tracker input for detection like with people

I’ve implemented something similar with buttons in a grid today, and it looks okay, but still takes up a lot more space then I think a properly implemented card should.

My existing solution:

It works fine for me, but it’s not cohesive, and definitely not in the spirit of ‘make it streamlined’. I KNOW someone out there can do it better then I did. Just a simple car diagram where you draw/hide lines to indicate different entities open/closed, and some pointers to the car for locked/unlocked/psi/etc.

Some examples of other car ‘status cards’ in other contexts:

[scriven (Mike)]

You mean like this one?

You can use the picture elements card, if you have access to photo editing software and have many hours to spare messing around with placement of images, icons and text.

[bboti86 (Botond Barabas)]

It looks amazing!
Even if I would have the knowledge I would definitely not have the time to make something like this, so I would be happy to see something made by the community.

How can I help?
B

[DLHN (Michal Dlouhý)]

Hi, I’m just looking for something exactly like this. For showing opened doors / windows.

[genosonic (R)]

Hello!

I did this to display the telemetry I get from Mazda Connected Services for my CX-9:

Default view

Driver door open

Driver door and trunk open

Trunk open

Vehicle unlocked, all doors closed

I was inspired by the MyMazda app for the overall look and feel.

For the most part, it’s a picture elements card with transparent overlaying images that are displayed based on the state of the doors, hood, trunk and lock.

If anyone is interested to look at the code, you can get it here.

If you want to grab the Figma file I used to edit/export the images, click here.

I’d be happy to help anyone set this up.

[cloudbr34k (Apples)]

thats awesome!

[Xelinor]

That’s EXACTLY the sort of thing I’m talking about. It would be nice if there were a card that just supplied that exact functionality, with selections for generic cars/trucks/SUVs/etc.

[sigura]

My doors are set by Attributes and not States, on my bmw. Did you make your Attributes in to entitys some how? (entity: binary_sensor.cx_9_passenger_door)

[crankycowboy]

@sigura did you get this sorted? I just went through this and you have to create template sensors. then, they will show up as normal entities that can be placed where you’d like them.

[crankycowboy]

@genosonic I know it’s been a while since you posted this example. It’s amazing. I stole a lot of your ideas due to your kind efforts in providing your code (thank you)! can you tell me how you were able to get the four buttons at the bottom in your example? I have my picture elements working great…I just can’t get the buttons at the bottom to work properly on the screen. Currently I’m using a picture elements card in panel mode so that it takes up the entire screen. any help is appreciated.

[sigura]

Ok thank you, do you know any guide/documentation?

[4331525 (300tang)]

add sensor， like this

  - sensor:
      - name: sensor2me leftfront
        unique_id: "sensor2me_leftfront"
        state: "{{ state_attr('binary_sensor.430i_lids', 'leftfront') }}"

[genosonic (R)]

Hey @crankycowboy , I just used the grid element with a few mushroom cards in it, here’s the code:

square: false
columns: 4
type: grid
cards:
  - type: custom:mushroom-lock-card
    entity: lock.cx_9_lock
    layout: vertical
    secondary_info: none
    primary_info: name
    icon_type: none
    name: Lock
  - type: custom:mushroom-entity-card
    entity: button.cx_9_start_engine
    tap_action:
      action: none
    layout: vertical
    primary_info: name
    secondary_info: none
    double_tap_action:
      action: none
    name: Start
  - type: custom:mushroom-entity-card
    entity: button.cx_9_turn_on_hazard_lights
    tap_action:
      action: none
    double_tap_action:
      action: none
    primary_info: name
    secondary_info: none
    layout: vertical
    name: Hazards
  - type: custom:mushroom-alarm-control-panel-card
    entity: alarm_control_panel.cx9
    states:
      - armed_home
    layout: vertical
    primary_info: name
    secondary_info: none
    icon_type: none
    name: Alarm
    show_keypad: false
    tap_action:
      action: more-info
    hold_action:
      action: none

I actually ended up removing the last card for the alarm and changed the grid to 3 columns.

[kylerw]

Do you have the images shared somewhere? Would love to save myself sometime if you are willing to share.

[dotdust (Alessandro)]

I have been working on my card in the last few days.
It is based on the MercedesMe 2020 Integration.
This is what I have so far:

Still tweaking the UI a little bit to make it feel nice on different devices.

[kylerw]

Willing to share? This looks great.

[alexbeatle]

Here’s my Tesla card…

[kylerw]

I got this version setup and it looks nice! Do you know where or who may be able to create a Figma file for a different vehicle?

[genosonic (R)]

What year, make, model, trim do you want to make a dashboard for? The biggest hurdle is finding a top-down view blueprint of the vehicle. If we find that, I would trace the vectors for you.

[kylerw]

Rivian R1T- the owners manual has all angles:

r1t-owners-guide-en-us-20221114.pdf