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.
