🏎️ Ultra Vehicle Card - A simple and clean way to show your vehicle's information!

WJD · August 1, 2024, 8:26pm

Hi everyone,

I’d like to introduce my first Home Assistant project, the Ultra Vehicle Card! This is a custom card designed to display information about both Electric Vehicles (EVs) and Fuel Vehicles in a clean and modern way. I couldn’t find a card that allowed me to quickly have a vehicle view that was clean and modern while using a simple interface to edit, so I made one !

The card offers the following features:

Support for both EVs and Fuel Vehicles and now Hybrids!
Configurable title and image
Display charging status for EVs (requires a compatible integration)
Display remaining range or fuel level
Modern and clean design

I’m really happy with how this card turned out and I hope you find it useful as well. I’m always open to feedback and suggestions, so please let me know what you think!

I look forward to hearing your thoughts!

Future Idea:
Showing icons for entities that are open/closed or on/off as icons that light up in a grid view.

WJD Designs

https://github.com/WJDDesigns/Ultra-Vehicle-Card

VietNgoc · August 2, 2024, 4:45am

Hi, I am working on a similar project, but specifically for mercedes cars with mercedes integration. I will be releasing a new version with translations into other languages… Check out my github for inspiration

WJD · August 2, 2024, 12:32pm

Very nice! My config is GUI though which will be the best part and of course not as extensive as yours since I am dealing with multiple models/brands. I wanted a simple way to display where people didn’t need to use code. Your implementation looks awesome congrats!

Jarek_Szkiela · August 2, 2024, 1:02pm

Very nice. Too bad it’s only for Mercedes.

VietNgoc · August 2, 2024, 1:06pm

Yeah, the exception for me is that all entities are from one component/device. So you only need one single sensor and the others are automatically generated into a pre-selected card. Or the user can customize his own lovelace card for each sub card… Everything is set via the UI editor.

I worked with the available data I have, surely if someone has another component, it can be easily modified for their needs. The vehicle data is generally similar…

mirekmal · August 2, 2024, 1:28pm

What is the structure of vehicle sensor (sensor.licence_plate) from mercedes integration? Perhaps it would be possible to create custom sensor and put state and attributes from outher integrations to mimic one and use the card this way?

VietNgoc · August 2, 2024, 1:49pm

This is the way I used to automatically get the entities associated with a vehicle.

Start by defining the filters for different types of sensors and devices. These filters will include prefix and suffix patterns that match the entity IDs you’re interested in.
vehicle-info-card/src/const.ts at e06f76fc0ebafe8a71b8636e83fb979fa2725502 · ngocjohn/vehicle-info-card · GitHub
Fetch All Entities using the Home Assistant WebSocket API to fetch a list of all registered entities. This provides a comprehensive view of all entities currently available in the Home Assistant setup.
Identify the specific device id from config entity, that single sensor…
Once the specific device is identified, filter out the entities associated with the device using its device_id. This narrows down the list to only those entities that belong to the device of interest.
Match Entities Using Filters - Iterate over the predefined filters and match the filtered device entities based on the prefix and suffix patterns.
Store the matched entity IDs along with their original names in a structured object. This object can then be returned or used for further processing, ensuring that all relevant entity IDs are easily accessible.

github.com

ngocjohn/vehicle-info-card/blob/e06f76fc0ebafe8a71b8636e83fb979fa2725502/src/utils/get-device-entities.ts#L11-L53


      
          export async function getVehicleEntities(hass: HomeAssistant, config: { entity?: string }): Promise<VehicleEntities> {
            const allEntities = await hass.callWS<Required<VehicleEntity>[]>({
              type: 'config/entity_registry/list',
            });
            const carEntity = allEntities.find((e) => e.entity_id === config.entity);
            if (!carEntity) {
              return {};
            }
            const deviceEntities = allEntities.filter((e) => e.device_id === carEntity.device_id);
          
            const entityIds: VehicleEntities = {};
          
            for (const entityName of Object.keys(combinedFilters)) {
              const { prefix, suffix } = combinedFilters[entityName];
          
              if (entityName === 'soc' || entityName === 'maxSoc') {
                const specialName = entityName === 'soc' ? 'State of Charge' : 'Max State of Charge';
                const entity = deviceEntities.find((e) => e.original_name === specialName);
                if (entity) {
                  entityIds[entityName] = {

This file has been truncated. show original

TinoLuca · August 5, 2024, 8:24am

@WJD very nice project, I very like it!
Suggestions:

introduce a Lock/Unlock button
introduce a Opened/Closed indication for doors
introduce a Warning for flat tyres, or an indication of them all

WJD · August 5, 2024, 6:53pm

HUGE update just posted adding Hybrid vehicles to the card as well as charge limit and vehicle status areas. Lots more goodies too!

Ultra Vehicle Card

WJD · August 5, 2024, 6:59pm

I will be adding a link function to those icons soon as well as a Open/Close or On/Off state to select unique icons for. Since UI and ease of use is concerned this will take me a second to follow good design. Right now you can add icons using the icon grid and it will light up your primary HA color if open/on state.

rubin110 · August 8, 2024, 1:27am

Here’s my variations on the card. I’ve implemented my own set of buttons on the bottom through a vertical layout card, the reason being that I wanted some of the tap actions to require a confirmation (like unlocking the doors). There are two versions, one for my “Garage” page, and a smaller one for the main dashboard. The margin and padding gets rendered different on mobile, I don’t know why but I’ve left it alone.

type: custom:stack-in-card
mode: vertical
cards:
  - title: Setareh
    image_url: /local/teslamodel3transparent.png
    vehicle_type: EV
    unit_type: mi
    level_entity: sensor.tesla_battery_level
    range_entity: sensor.tesla_real_world_expected_battery_range_mi
    charging_status_entity: binary_sensor.setareh_charging
    location_entity: device_tracker.setareh_location_tracker
    mileage_entity: sensor.tesla_odometer_mi
    show_level: true
    show_range: true
    show_location: true
    show_mileage: true
    show_car_state: true
    show_charge_limit: true
    icon_grid_entities: []
    custom_icons: {}
    hybrid_display_order: fuel_first
    car_state_entity: sensor.tesla_state
    charge_limit_entity: sensor.tesla_charge_limit_soc
    type: custom:ultra-vehicle-card
    battery_level_entity: sensor.tesla_battery_level
    battery_range_entity: sensor.tesla_real_world_expected_battery_range_mi
    fuel_level_entity: ''
    fuel_range_entity: ''
    show_battery: true
    show_battery_range: true
    show_fuel: true
    show_fuel_range: true
    cardBackgroundColor: ''
    barBackgroundColor: '#000000'
    barFillColor: '#7F000B'
    limitIndicatorColor: '#c2c2c2'
    iconActiveColor: ''
    iconInactiveColor: ''
    show_charging: true
    barBorderColor: '#2e2e2e'
    card_mod:
      style: |
        ha-card {
          border-width: 0px;
          border-radius: 5px;
          height: 100%;
        }
        .vehicle-name {
          font-size: 1.2em !important;
          font-weight: bold;
          padding-top: 0px !important;
          margin-top: 8px !important;
          margin-bottom: 8px !important;
        }
        .vehicle-card-content {
          padding: 1px 16px 8px 16px !important;
        }
        .vehicle-image-container {
          margin: 10px 0px -100px 0px !important;
        }
        .vehicle-image {
          height: 50% !important;
        }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: lock.setareh_doors
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
          confirm: ' '
        fill_container: false
        icon_color: green
        card_mod:
          style: |
            :host {
              --mush-badge-size: 1.2em;
              --mush-badge-icon-size: 1.7em;
              {% if is_state('lock.setareh_doors','locked') %}
              --card-mod-icon: mdi:car-door-lock;
              {% else %}
              --card-mod-icon: mdi:car-door-lock-open;
              /* --card-mod-icon-color: orange; */
              {% endif %}
            }
            ha-card {
              border-width: 0px;
            }
      - type: custom:mushroom-entity-card
        entity: cover.setareh_windows
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
          confirm: ' '
        fill_container: false
        card_mod:
          style: |
            :host {
              --mush-badge-size: 1.82m;
              --mush-badge-icon-size: 1.7em;
              {% if is_state('cover.setareh_windows','closed') %}
              --card-mod-icon: mdi:window-closed;
              {% else %}
              --card-mod-icon: mdi:window-open;
              /* --card-mod-icon-color: orange; */
              {% endif %}
            }
            ha-card {
              border-width: 0px;
            }
      - type: custom:mushroom-entity-card
        entity: switch.setareh_sentry_mode
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        fill_container: false
        icon_color: red
        card_mod:
          style: |
            :host {
              --mush-badge-size: 1.2em;
              --mush-badge-icon-size: 1.7em;
            }
            ha-card {
              border-width: 0px;
            }
      - type: custom:mushroom-template-card
        icon: mdi:ev-station
        icon_color: '{{ ''green'' if states(''sensor.openevse_station_status'') == ''active'' }}'
        layout: vertical
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.openevse_sleep_mode_new
        card_mod:
          style: |
            :host {
              --mush-badge-size: 1.82m;
              --mush-badge-icon-size: 1.7em;
            }
            ha-card {
              border-width: 0px;
            }
    card_mod:
      style: |
        ha-card {
          padding: 0px 4px 4px 4px;
        }
card_mod:
  style: |
    ha-card {
      border-width: 0px;
      height: 100%;
    }

type: custom:stack-in-card
mode: vertical
cards:
  - title: Setareh
    image_url: /local/teslamodel3transparent.png
    vehicle_type: EV
    unit_type: mi
    level_entity: sensor.tesla_battery_level
    range_entity: sensor.tesla_real_world_expected_battery_range_mi
    charging_status_entity: binary_sensor.setareh_charging
    location_entity: device_tracker.setareh_location_tracker
    mileage_entity: sensor.tesla_odometer_mi
    show_level: true
    show_range: true
    show_location: true
    show_mileage: false
    show_car_state: false
    show_charge_limit: true
    icon_grid_entities: []
    custom_icons: {}
    hybrid_display_order: fuel_first
    car_state_entity: sensor.tesla_state
    charge_limit_entity: sensor.tesla_charge_limit_soc
    type: custom:ultra-vehicle-card
    battery_level_entity: sensor.tesla_battery_level
    battery_range_entity: sensor.tesla_real_world_expected_battery_range_mi
    fuel_level_entity: ''
    fuel_range_entity: ''
    show_battery: true
    show_battery_range: true
    show_fuel: true
    show_fuel_range: true
    cardBackgroundColor: ''
    barBackgroundColor: '#000000'
    barFillColor: '#7F000B'
    limitIndicatorColor: '#c2c2c2'
    iconActiveColor: ''
    iconInactiveColor: ''
    show_charging: true
    barBorderColor: '#2e2e2e'
    card_mod:
      style: |
        ha-card {
          border-width: 0px;
          height: 100%;
        }
        .vehicle-card-content {
          padding: 0px 16px 0px 16px !important;
        }
        .vehicle-name {
          font-size: 1.2em !important;
          font-weight: normal;
          padding-top: 0px !important;
          margin-top: 8px !important;
          margin-bottom: 8px !important;
        }
        .vehicle-image-container {
          /* margin: 0px 0px 0px 0px !important; */
          margin-bottom: 0px !important;
        }
        .vehicle-image {
          /* height: 60% !important; */
        }
        .level-text {
          font-size: 0.8em !important;
          font-weight: normal !important;
        }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: lock.setareh_doors
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
          confirm: ' '
        fill_container: false
        card_mod:
          style: |
            :host {
              --mush-icon-size: 1.5em;
              --mush-icon-symbol-size: 1em;
              --mush-badge-size: 1.2em;
              --mush-badge-icon-size: 1.7em;
              {% if is_state('lock.setareh_doors','locked') %}
              --card-mod-icon: mdi:car-door-lock;
              {% else %}
              --card-mod-icon: mdi:car-door-lock-open;
              /* --card-mod-icon-color: orange; */
              {% endif %}
            }
            ha-card {
              border-width: 0px;
            }
      - type: custom:mushroom-entity-card
        entity: climate.setareh_hvac_climate_system
        layout: vertical
        primary_info: none
        secondary_info: none
        tap_action:
          action: toggle
        fill_container: false
        card_mod:
          style: |
            :host {
              --mush-icon-size: 1.5em;
              --mush-icon-symbol-size: 1em;
              --mush-badge-size: 1.82m;
              --mush-badge-icon-size: 1.7em;
            }
            ha-card {
              border-width: 0px;
            }
      - type: custom:mushroom-entity-card
        entity: switch.setareh_sentry_mode
        layout: vertical
        primary_info: none
        secondary_info: none
        icon_color: red
        tap_action:
          action: toggle
        fill_container: false
        card_mod:
          style: |
            :host {
              --mush-icon-size: 1.5em;
              --mush-icon-symbol-size: 1em;
              --mush-badge-size: 1.2em;
              --mush-badge-icon-size: 1.7em;
              {% if is_state('switch.setareh_sentry_mode','on') %}

              {% endif %}
            }
            ha-card {
              border-width: 0px;
            }
      - type: custom:mushroom-template-card
        icon: mdi:ev-station
        icon_color: '{{ ''green'' if states(''sensor.openevse_station_status'') == ''active'' }}'
        layout: vertical
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.openevse_sleep_mode_new
        card_mod:
          style: |
            :host {
              --mush-icon-size: 1.5em;
              --mush-icon-symbol-size: 1em;
              --mush-badge-size: 1.82m;
              --mush-badge-icon-size: 1.7em;
            }
            ha-card {
              border-width: 0px;
            }
    card_mod:
      style: |
        ha-card {
          margin: -8px 4px 0px 4px;
          padding: 0px 4px 0px 4px;
        }
card_mod:
  style: |
    ha-card {
      border-width: 0px;
      height: 100%;
    }
layout_options:
  grid_columns: 2
  grid_rows: 4

c1c3r0 · August 8, 2024, 4:50am

@WJD thanks from my side for this project too. I’ve migrated from my custom picture entity card to yours.

I browsed a little and don’t know if anybody mentioned this already: I am missing an option to display another numeric/state entity, like service interval of the car (20000km or 400 days to go for an instance).

So, in my picture entity card I had it like this:

It would be nice if I could add another entity like Location or Mileage Entity - maybe below or beside them.

Funkybeatz15 · August 8, 2024, 12:15pm

Thank you very much, its amazing and the setup workflow is outstanding! Great Work !

Here are some wishes / ideas for features:

AdBlue Level
Buttons to Control Car (Lock/Unlock Car / Start Flashing & Honking)
Inspection Dates (Oil) in Kilometers and Days
Service Dates in Kilometers and Days
Outside Temperature
Refuel Distance
Vehicle Moving check (binary_sensor (on/off))

Maybe you can also create some placeholder Fields where we can just put any entity we want to be displayed
And it would be cool if we can change the Icons and Icons color based on entity status <3

maisoncets · August 12, 2024, 2:34pm

Very nice. Where do you found the picture. I have a white model 3 highland

oconnesj · August 12, 2024, 3:09pm

This is great! Its a fantastic way of showing car information. My only request would be mapping the door status to a graphic such as the example below. If the door is opened either change that door to a different color or show it as opened.

daxdavis · August 12, 2024, 5:45pm

Very nice. Thank you for the card. It let’s me show things off for my wife a little bit.

amstermk · August 12, 2024, 7:46pm

Hi, very nice card.

One question:
I‘d like to change the border-radius of the card so that it better fits the look of my other cards on my dashboard. Card.mod doesn‘t seem to work… is there another way to do so?

Edit: mistake at my side. Card mod is just working

huehlene · August 14, 2024, 2:00am

Awesome card. I hate to ask a dumb question but how do you gather all the sensor data from the car and put into HA? I have a Honda and don’t know how to communicate with it.

Thanks for your help,

rubin110 · August 15, 2024, 5:03pm

Log into your Tesla account via the desktop website. One of the images there on the dashboard is pretty high resolution and provides transparency. I had to fiddle with it (for me using GIMP) to get the transparency to work correctly after I resized and cropped it.

mountainbikert · August 20, 2024, 1:55pm

My odometer is at 20300 km, but the card says it’s 20.3 k km, how can I change that?