Generic 'Vehicle' Card

Bellardita · October 31, 2023, 3:12pm

Thanks for the inspiration in this thread!

I just build my first dash for my Cupra Leon ST Hybrid.
The first picture card has just a few information and will show if the lights are on (first picture).
The second picture card could show all open doors and trunk and hood. And there are four buttons for the main features i use.

Not completely ready yet. I’am going to add a card for charging and i am having problems getting the GPS-Data and Device Tracker.
But i am happy for the moment.

If needed i’ll share my configuration and files.

DanMa · November 17, 2023, 4:37pm

Is it possible to make it look like real 3D?

For instance, the normal mode and view are like this:

But when someone opens a door, the car view smoothly transitions to that perspective:

I found the 3D Model of that car here:
Volkswagen ID.4 X 3D Model (2021) - 3DCADBrowser

DanMa · November 17, 2023, 4:38pm

If you can share it, this would be awesome.

thanks in advance.

Princessalbert · November 20, 2023, 12:53pm

I would love to check your configuration
I have Cupre Leon “no hybrid” and would love something like this. However i dont understand how to get the data from the car. Tried using the sensors android auto has, but they give me no values…
Is there another way? And becuase mine is’t electric i guess i wont get data if the car is not on. But as long as it grabs data from last trip that should be fine for my usecase.

Benny1907 · November 23, 2023, 7:02pm

Hey, this looks really nice. Can you share your code?.Thank you

RD2 · November 25, 2023, 2:00pm

Hi,

I would love to adapt one of these card to my EV MG4. I am hesitating beteween @Bellardita card and @tmack8001 card.

First, I think I need to make image / svg files. Is there is a tutoriel which shows how to do that ?

@Bellardita , what is your last configuration ? Are you agree to share your code ?

Thanks

tvdsluijs · November 27, 2023, 12:03pm

Anyone knows where I can find that background underneath the cars?

gsparber · December 9, 2023, 3:07am

Hello Bellardita, I have a SEAT Leon ST Hybrid. Is it possible for you to share the configuration and files with me?

briadelour · December 21, 2023, 11:38am

Using the integration for Hyundai and Kia I created two different vehicle cards.
Here’s the integration I’m using: GitHub - Hyundai-Kia-Connect/kia_uvo: A Home Assistant HACS integration that supports Kia Connect(Uvo) and Hyundai Bluelink. The integration supports the EU, Canada and the USA.

The first is for a Hyundai EV with the full BlueLink subscription. If you are an Ioniq 5 or 6 driver you may notice the morse code SoC indicator and it’s coded to match what is on the charge port of the vehicle using the charge percentages in the owners manual.

This image is from my phone. The icon and text positioning looks slightly different from web browser but I’m configured the picture elements card to work best from a phone.

This second example is for a Kia ICE vehicle that has the free tier Kia Connect (formerly UVO).

Since getting updates too frequently will drain the 12v battery and may flag an timeout for API calls with both Hyundai Bluelink and Kia Connect, I have a manual update button. I also have the integration set to a scan interval of 240 min and forced refresh of 240 min with the no update time set to 10pm - 6am as the default.

This is the lovelace code for the BlueLink full subscription card using an EV:

type: picture-elements
style: |
  ha-card {
    --charge-ev-optimal-range: {% if states('sensor.2023_ioniq_6_ev_battery_level')|float > 20 %} green {% else %} red {% endif %};
    --charge-12v-optimal-range: {% if states('sensor.2023_ioniq_6_car_battery_level')|float > 65 %} green {% else %} red {% endif %};
    --charge-1: {% if states('sensor.2023_ioniq_6_ev_battery_level')|float > 1 %} white {% else %} grey {% endif %};
    --charge-2: {% if states('sensor.2023_ioniq_6_ev_battery_level')|float > 24 %} white {% else %} grey {% endif %};
    --charge-3: {% if states('sensor.2023_ioniq_6_ev_battery_level')|float > 49 %} white {% else %} grey {% endif %};
    --charge-4: {% if states('sensor.2023_ioniq_6_ev_battery_level')|float > 74 %} white {% else %} grey {% endif %};
  }
image: /local/images/ioniq6.png
elements:
  - type: state-label
    entity: sensor.2023_ioniq_6_ev_range
    prefix: 'Range: '
    style:
      color: grey
      top: 21%
      left: 19%
  - type: state-icon
    entity: sensor.2023_ioniq_6_ev_battery_level
    state_color: false
    style:
      top: 6%
      left: 11%
      '--paper-item-icon-color': var(--charge-ev-optimal-range)
  - type: state-label
    entity: sensor.2023_ioniq_6_ev_battery_level
    style:
      color: grey
      top: 14%
      left: 12%
  - type: state-icon
    entity: sensor.2023_ioniq_6_car_battery_level
    title: 12v
    state_color: false
    style:
      top: 0%
      left: 18%
      transform: scale(1.1, 1.1)
      '--paper-item-icon-color': var(--charge-12v-optimal-range)
  - type: state-label
    entity: sensor.2023_ioniq_6_car_battery_level
    style:
      color: grey
      top: 14%
      left: 25%
  - type: state-icon
    entity: binary_sensor.2023_ioniq_6_air_conditioner
    icon: mdi:air-conditioner
    title: null
    state_color: true
    style:
      top: 1%
      left: 35%
      transform: scale(1.1, 1.1)
  - type: state-icon
    entity: binary_sensor.2023_ioniq_6_tire_pressure_all
    style:
      top: 7%
      left: 49%
  - type: state-icon
    entity: binary_sensor.2023_ioniq_6_ev_battery_plug
    state_color: true
    style:
      top: 7%
      left: 58%
  - type: state-label
    entity: sensor.2023_ioniq_6_estimated_charge_duration
    show_name: false
    style:
      color: grey
      top: 13%
      left: 58%
  - type: state-icon
    entity: binary_sensor.2023_ioniq_6_engine
    icon: mdi:power
    state_color: true
    style:
      top: 7%
      left: 67%
  - type: state-label
    entity: sensor.2023_ioniq_6_odometer
    prefix: 'odo: '
    style:
      color: grey
      top: 8%
      left: 85%
  - type: state-label
    entity: device_tracker.2023_ioniq_6_location
    style:
      color: grey
      top: 20%
      left: 92%
  - type: service-button
    title: Lock
    service: kia_uvo.lock
    service_data:
      device_id: [enter_your_device_id_here]
    target: {}
    style:
      color: grey
      top: 70%
      left: 86%
  - type: service-button
    title: Unlock
    service: kia_uvo.unlock
    service_data:
      device_id: [enter_your_device_id_here]
    target: {}
    style:
      color: grey
      top: 77%
      left: 86%
  - type: state-icon
    entity: lock.2023_ioniq_6_door_lock
    state_color: true
    style:
      top: 70%
      left: 67%
      transform: scale(1.1, 1.1)
  - type: service-button
    title: Start AC
    service: kia_uvo.start_climate
    service_data:
      device_id: [enter_your_device_id_here]
    target: {}
    style:
      color: grey
      top: 88%
      left: 86%
  - type: service-button
    title: Stop AC
    service: kia_uvo.stop_climate
    service_data:
      device_id: [enter_your_device_id_here]
    target: {}
    style:
      color: grey
      top: 95%
      left: 86%
  - type: state-label
    entity: sensor.2023_ioniq_6_set_temperature
    style:
      color: grey
      top: 92%
      left: 70%
  - type: state-icon
    icon: mdi:square
    entity: sensor.2023_ioniq_6_ev_battery_level
    state_color: false
    style:
      top: 75%
      left: 30%
      width: 40px
      height: 40px
      transform: scale(.5,.5)
      '--paper-item-icon-color': var(--charge-1)
  - type: state-icon
    icon: mdi:square
    entity: sensor.2023_ioniq_6_ev_battery_level
    state_color: false
    style:
      top: 75%
      left: 35%
      width: 40px
      height: 40px
      transform: scale(.5,.5)
      '--paper-item-icon-color': var(--charge-2)
  - type: state-icon
    icon: mdi:square
    entity: sensor.2023_ioniq_6_ev_battery_level
    state_color: false
    style:
      top: 75%
      left: 40%
      width: 40px
      height: 40px
      transform: scale(.5,.5)
      '--paper-item-icon-color': var(--charge-3)
  - type: state-icon
    icon: mdi:square
    entity: sensor.2023_ioniq_6_ev_battery_level
    state_color: false
    style:
      top: 75%
      left: 45%
      width: 40px
      height: 40px
      transform: scale(.5,.5)
      '--paper-item-icon-color': var(--charge-4)
  - type: service-button
    title: Update
    service: kia_uvo.update
    service_data:
      device_id: [enter_your_device_id_here]
    target: {}
    style:
      color: grey
      top: 85%
      left: 15%
  - type: state-label
    entity: sensor.2023_ioniq_6_last_updated_at
    show_last_changed: true
    style:
      top: 95%
      left: 32%
      color: grey

This is the lovelace code for the Kia Connect free tier subscription card using an ICE vehicle:

type: picture-elements
style: |
  ha-card {
    --charge-12v-optimal-range: {% if states('sensor.tride_car_battery_level')|float > 50 %} green {% else %} red {% endif %};
  }
image: /local/images/2020_kia_telluride.png
elements:
  - type: state-icon
    entity: binary_sensor.tride_engine
    state_color: true
    style:
      top: 28%
      left: 21%
  - type: state-label
    entity: device_tracker.tride_location
    style:
      color: grey
      top: 30%
      left: 12%
  - type: state-label
    entity: sensor.tride_fuel_driving_range
    style:
      color: grey
      top: 5%
      left: 8%
  - type: state-icon
    entity: binary_sensor.tride_fuel_low_level
    style:
      top: 12%
      left: 9%
  - type: state-label
    entity: sensor.tride_car_battery_level
    state_color: false
    style:
      color: grey
      top: 5%
      left: 20%
  - type: state-icon
    entity: sensor.tride_car_battery_level
    title: 12v
    state_color: false
    style:
      top: 12%
      left: 19%
      '--paper-item-icon-color': var(--charge-12v-optimal-range)
  - type: state-icon
    entity: sensor.tride_next_service
    style:
      color: grey
      top: 5%
      left: 29%
  - type: state-label
    entity: sensor.tride_next_service
    prefix: 'in:'
    style:
      color: grey
      top: 5%
      left: 41%
  - type: state-label
    entity: sensor.tride_odometer
    prefix: 'odometer: '
    style:
      color: grey
      top: 5%
      left: 80%
  - type: state-icon
    entity: binary_sensor.tride_air_conditioner
    icon: mdi:air-conditioner
    title: null
    state_color: true
    style:
      top: 85%
      left: 94%
  - type: state-icon
    entity: binary_sensor.tride_tire_pressure_all
    state_color: true
    style:
      top: 85%
      left: 85%
  - type: state-label
    entity: sensor.tride_set_temperature
    style:
      color: grey
      top: 96%
      left: 94%
  - type: state-icon
    entity: lock.tride_door_lock
    state_color: true
    style:
      top: 85%
      left: 75%
  - type: service-button
    title: Update
    service: kia_uvo.update
    service_data:
      device_id: [enter_your_device_id_here]
    target: {}
    style:
      color: grey
      top: 94%
      left: 75%
  - type: state-label
    entity: sensor.tride_last_updated_at
    show_last_changed: true
    style:
      top: 96%
      left: 32%
      color: grey

This is another card I made for the Hyundai EV based on information I found on this and other posts in the community.

Here is the lovelace code for that card:

type: custom:stack-in-card
mode: vertical
keep:
  background: false
  border_radius: false
  box_shadow: false
  margin: false
  outer_padding: false
cards:
  - type: glance
    entities:
      - entity: binary_sensor.2023_ioniq_6_ev_battery_plug
        name: Charger
      - entity: sensor.2023_ioniq_6_estimated_charge_duration
        name: Time Left
        icon: mdi:timer
      - entity: binary_sensor.2023_ioniq_6_fuel_low_level
        name: EV Battery
        icon: mdi:power
      - entity: sensor.2023_ioniq_6_ev_range
        name: Range
    show_state: true
    show_name: true
    state_color: true
  - type: custom:bar-card
    icon: mdi:battery-charging
    entities:
      - entity: sensor.2023_ioniq_6_ev_battery_level
    columns: '0'
    entity_row: false
    direction: right
    positions:
      icon: outside
      indicator: 'off'
      name: 'off'
      minmax: 'off'
      value: inside
    severity:
      - color: '#FFC107'
        from: '81'
        to: '100'
      - color: '#4CAF50'
        from: '20'
        to: '80'
      - color: '#FF5722'
        from: '0'
        to: '19'
  - type: custom:bar-card
    entities:
      - entity: sensor.2023_ioniq_6_ev_range
        max: 240
        min: 0
        severity:
          - color: Red
            from: 0
            to: 48
          - color: Orange
            from: 49
            to: 191
          - color: Green
            from: 192
            to: 240
  - type: glance
    entities:
      - entity: binary_sensor.2023_ioniq_6_tire_pressure_all
        name: Tire Pressure
      - entity: sensor.2023_ioniq_6_car_battery_level
        name: 12v Battery
      - entity: sensor.2023_ioniq_6_odometer
        name: Odometer
    show_state: true
    show_name: true
    state_color: true
  - type: custom:button-card
    entity: sensor.2023_ioniq_6_last_updated_at
    show_last_changed: true
    styles:
      grid:
        - grid-template-areas: '"i n l"'
        - grid-template-rows: 100%
        - grid-template-columns: 25% 45% 30%
      label:
        - justify-self: start
      name:
        - justify-self: end
        - margin-right: 10%
    name: 'Last Manual Attempt:'
    aspect_ratio: 7/1
  - type: custom:mushroom-entity-card
    entity: sensor.2023_ioniq_6_last_updated_at
    tap_action:
      action: call-service
      service: kia_uvo.update
      data:
        device_id: [enter_your_device_id_here]
      target: {}
    hold_action:
      action: call-service
      service: kia_uvo.force_update
      data:
        device_id: [enter_your_device_id_here]
      target: {}
  - type: gauge
    entity: sensor.2023_ioniq_6_ev_battery_level
    severity:
      green: 20
      yellow: 80
      red: 0
    needle: true
    unit: '%'

The one thing I can’t figure out is that sometimes the entity sensor.VEHICLE_next_service, which represents the miles left before service, displays as a whole number in miles and other times it shows up with 4 decimals places in the state-label. I know I can fix it by created a template sensor, but I’d like to figure out if I can do rounding right from the card perhaps using card_mod or something else. Searching it looks like this is a very old issue.

Thank you to everyone who posted on this topic and shared! It was a huge help to see what everyone else did.

mathewtaylor2007 · December 31, 2023, 9:16pm

These car cards are amazing!
Has anyone done one for an MG5 yet? If so I’d love to borrow the code for it. Thanks!

mathewtaylor2007 · January 1, 2024, 8:57am

Would love to use this configuration if you’re ready to share? Thanks
Mat.

Mattia2399 · January 9, 2024, 9:02pm

Hi, could you share your code? Thank you

orakelet · January 11, 2024, 9:13am

CChris:

title: Battery information
            entities:
              - type: custom:slider-entity-row
                entity: number.vehicle_identifier_charge_limitation
                name: charge-limitation

This was a very nice customization, suited my needs to the spot. I have a question though:
The entity number.vehicle_identifier_charge_limitation; is this a helper? I cannot find the entity. If it is a helper, how did you set it up?

CChris · January 11, 2024, 9:30am

let me check, It’s probably a template sensor, since the skoda integration does not provide this as a number entity by default…

# Set Charge_Limitation
- number:
    - name: xyz_charge_limitation
      unique_id: "xyz_charge_limitation"
      state: "{{ states('sensor.xyz_minimum_charge_level') | int(0) }}"
      set_value:
        - service: skodaconnect.set_charge_limit
          data:
            limit: "{{ value | int(0) }}"
            device_id: abcd**
      step: "10"
      min: "10"
      max: "100"

you need to take the device_id (here abcd**) from the information when you call the service “skodaconnect.set_charge_limit”

Just select the vehicle in the service call, and then switch to the yaml mode… and you should see what you need.

orakelet · January 11, 2024, 9:48am

This question might just show how little I have worked with this type of customisation, but what should I put for “value”? Template editor says “UndefinedError: ‘value’ is undefined”

CChris · January 12, 2024, 9:20am

ok, this won’t work in the template editor

you would need to do this within your yaml configuration files - either within the configuration directly, or in a separated file (which is recommended)

here’s an example from my installation:

in the configuration.yaml - I’m including a lot of customized yaml files - for our case, the template: !include template_sensors.yaml is the relevant one.

# Inlcudes
automation: !include automations.yaml         # automations
script: !include scripts.yaml                 # scripts
scene: !include scenes.yaml                   # scenes

sensor: !include sensors.yaml                 # sensors (legacy template format and from custom integrations)...
# utility_meter: !include utility_meters.yaml   # utility meters (not created as helpers)
template: !include template_sensors.yaml      # template sensors - template platform (new template format)
binary_sensor: !include binary_sensors.yaml   # binary sensors - template platform (new template format)
# switch: !include switches.yaml                # switch - template platform (new template format)

waste_collection_schedule: !include waste_collection_scheduler.yaml   # Abfallkalender lrbb
home_connect_alt: !include homeconnect_alternate.yaml                 # HomeConnect Alt
# plant: !include plants.yaml                                           # Pflanzen Info
media_player: !include media_players.yaml                             # Yamaha AV Receiver, emby, ...
recorder: !include recorder.yaml              # recorder db
modbus: !include modbus.yaml                  # modbus-configuration

The template_sensors.yaml then contains the configuration I shared above.

# Set Charge_Limitation
- number:
    - name: xyz_charge_limitation
      unique_id: "xyz_charge_limitation"
      state: "{{ states('sensor.xyz_minimum_charge_level') | int(0) }}"
      set_value:
        - service: skodaconnect.set_charge_limit
          data:
            limit: "{{ value | int(0) }}"
            device_id: abcd123
      step: "10"
      min: "10"
      max: "100"

tomas0620 · January 18, 2024, 12:44pm

Hi all,
awesome stuff. Is there any Hyundai Tucson owner willing to share the template?
or @genosonic could you please create one for Tucson 2023 with Silky Bronze color?

THX

Jose_I_Juarros · January 23, 2024, 1:22pm

Great work, please, can you share? Thanks

michaelkrtikos · January 24, 2024, 10:19am

Hello, i shared the code via message

Th_User · January 24, 2024, 11:11am

you’re car layouts look fantastic,

do you have a ioniq 5 in ecotronic grey maybe?
I can’t find anything for this car