Hey all. Just wanted to share the work I was comissioned by @smithtec for a Hyundai Santa Fe and Hyundai Kona, the result of which he wanted to be shared with the community.
Hyundai Santa Fe
Hyundai Kona
You’ll notice I added progress bars for the fuel and battery level.
In the case of the Kona, I merged the “Plugged / Not charging / Charging” sensor with the battery level and added an animation to the icon to “pulsate” when it is charging.
Keep in mind you’ll need to install card_mod and Bar Card from HACS if you want these features (or remove that part of the code).
I also added overlays to highlight when the tire pressure is not optimal.
You can export the corresponding images from the Figma files here:
Hyundai Santa Fe | Figma Community
Hyundai Kona | Figma Community
Here’s the code for each vehicle:
Hyundai Santa Fe
square: false
columns: 1
type: grid
cards:
- type: picture-elements
elements:
- type: conditional
conditions:
- entity: binary_sensor.cx_9_hood
state: 'on'
elements:
- type: image
entity: binary_sensor.cx_9_hood
image: /local/img/hyundai/top.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_hood
image: /local/img/hyundai/hyundai-santa-fe-hood.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_driver_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-santa-fe-driver-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_front_left
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-santa-fe-front-left-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_front_right
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-santa-fe-front-right-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_rear_left
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-santa-fe-rear-left-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_rear_right
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-santa-fe-rear-right-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_passenger_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_passenger_door
image: /local/img/hyundai/hyundai-santa-fe-passenger-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_rear_left_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_rear_left_door
image: /local/img/hyundai/hyundai-santa-fe-rear-left-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_rear_right_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_rear_right_door
image: /local/img/hyundai/hyundai-santa-fe-rear-right-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_trunk
state: 'on'
elements:
- type: image
image: /local/img/hyundai/bottom.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_trunk
image: /local/img/hyundai/hyundai-santa-fe-trunk.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: lock.cx_9_lock
state: unlocked
- entity: binary_sensor.cx_9_driver_door
state: 'off'
- entity: binary_sensor.cx_9_passenger_door
state: 'off'
- entity: binary_sensor.cx_9_rear_left_door
state: 'off'
- entity: binary_sensor.cx_9_rear_right_door
state: 'off'
- entity: binary_sensor.cx_9_hood
state: 'off'
- entity: binary_sensor.cx_9_trunk
state: 'off'
elements:
- type: image
image: /local/img/hyundai/all.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-santa-fe-lock.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: state-icon
entity: lock.cx_9_lock
state_color: false
style:
top: 18%
left: 25%
- type: state-label
entity: lock.cx_9_lock
style:
top: 23.5%
left: 25%
- type: state-icon
entity: device_tracker.cx_9_device_tracker
state_color: false
style:
top: 18%
left: 77%
- type: state-label
entity: device_tracker.cx_9_device_tracker
style:
top: 23.5%
left: 77%
- type: conditional
conditions:
- entity: input_select.power_source
state: Charging
elements:
- type: state-icon
icon: mdi:ev-station
entity: input_select.power_source
style:
top: 46%
left: 89%
- type: conditional
conditions:
- entity: input_select.power_source
state: Plugged
elements:
- type: state-icon
icon: mdi:power-plug
entity: input_select.power_source
style:
top: 46%
left: 89%
- type: conditional
conditions:
- entity: input_select.power_source
state: Unplugged
elements:
- type: state-icon
icon: mdi:ev-plug-ccs1
entity: input_select.power_source
style:
top: 46%
left: 89%
- type: state-label
entity: input_select.power_source
style:
top: 51.5%
left: 89%
- type: state-icon
entity: sensor.cx_9_fuel_remaining_percentage
icon: mdi:fuel-cell
style:
top: 75%
left: 77%
- type: state-label
entity: sensor.cx_9_fuel_remaining_percentage
style:
top: 81%
left: 77%
- type: custom:bar-card
entity: sensor.cx_9_fuel_remaining_percentage
positions:
icon: 'off'
minmax: 'off'
value: 'off'
name: 'off'
from: left
min: 0
max: 100
width: 70px
height: 8px
style: |
.card-content {
padding:0 !important;
background-color: transparent
border: 0px solid transparent;
border-color: transparent;
}
bar-card-card {
border-radius: 4px;
height:8px;
overflow: hidden;
}
:host {
top: 85%;
left: 76.5%;
}
- type: state-icon
entity: sensor.cx_9_odometer
style:
top: 46%
left: 11.5%
- type: state-label
entity: sensor.cx_9_odometer
style:
top: 51.5%
left: 11.5%
- type: state-icon
entity: sensor.cx_9_fuel_remaining_percentage
style:
top: 75%
left: 25%
- type: state-label
entity: sensor.cx_9_fuel_remaining_percentage
style:
top: 81%
left: 25%
tap_action: none
- type: custom:bar-card
entity: sensor.cx_9_fuel_remaining_percentage
positions:
icon: 'off'
minmax: 'off'
value: 'off'
name: 'off'
from: left
min: 0
max: 100
width: 70px
height: 8px
style: |
.card-content {
padding:0 !important;
background-color: transparent
border: 0px solid transparent;
border-color: transparent;
}
bar-card-card {
border-radius: 4px;
height:8px;
overflow: hidden;
}
:host {
top: 85%;
left: 24%;
}
image: /local/img/hyundai/hyundai-santa-fe.png
- square: false
columns: 3
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
Hyundai Kona
square: false
columns: 1
type: grid
cards:
- type: picture-elements
elements:
- type: conditional
conditions:
- entity: binary_sensor.cx_9_hood
state: 'on'
elements:
- type: image
entity: binary_sensor.cx_9_hood
image: /local/img/hyundai/top.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_hood
image: /local/img/hyundai/hyundai-kona-hood.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_driver_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-kona-driver-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_front_left
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-kona-front-left-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_front_right
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-kona-front-right-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_rear_left
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-kona-rear-left-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: input_boolean.tire_rear_right
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-kona-rear-right-tire.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_passenger_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_passenger_door
image: /local/img/hyundai/hyundai-kona-passenger-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_rear_left_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_rear_left_door
image: /local/img/hyundai/hyundai-kona-rear-left-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_rear_right_door
state: 'on'
elements:
- type: image
image: /local/img/hyundai/right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_rear_right_door
image: /local/img/hyundai/hyundai-kona-rear-right-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: binary_sensor.cx_9_trunk
state: 'on'
elements:
- type: image
image: /local/img/hyundai/bottom.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: binary_sensor.cx_9_trunk
image: /local/img/hyundai/hyundai-kona-trunk.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: lock.cx_9_lock
state: unlocked
- entity: binary_sensor.cx_9_driver_door
state: 'off'
- entity: binary_sensor.cx_9_passenger_door
state: 'off'
- entity: binary_sensor.cx_9_rear_left_door
state: 'off'
- entity: binary_sensor.cx_9_rear_right_door
state: 'off'
- entity: binary_sensor.cx_9_hood
state: 'off'
- entity: binary_sensor.cx_9_trunk
state: 'off'
elements:
- type: image
image: /local/img/hyundai/all.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/hyundai/hyundai-kona-lock.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: state-icon
entity: lock.cx_9_lock
state_color: false
style:
top: 18%
left: 25%
- type: state-label
entity: lock.cx_9_lock
style:
top: 23.5%
left: 25%
- type: state-icon
entity: device_tracker.cx_9_device_tracker
state_color: false
style:
top: 18%
left: 77%
- type: state-label
entity: device_tracker.cx_9_device_tracker
style:
top: 23.5%
left: 77%
- type: conditional
conditions:
- entity: input_select.power_source
state: Charging
elements:
- type: icon
icon: mdi:lightning-bolt
style:
top: 75%
left: 77%
card_mod:
style:
hui-icon-element:
$: |
:host {
color: var(--paper-item-icon-color);
border-radius: 16px;
box-shadow: 0px 0px 2px #88F1FF;
padding: 2px;
border: 2px solid transparent;
animation: pulsate 2s linear infinite;
}
@keyframes pulsate {
0% {
color: var(--paper-item-icon-color);
box-shadow: 0 0 0 transparent;
border: 2px solid transparent;
}
50% {
color: #88F1FF;
box-shadow: 0px 0px 8px #88F1FF;
border: 2px solid #88F1FF;
}
100% {
color: var(--paper-item-icon-color);
box-shadow: 0 0 0 transparent;
border: 2px solid transparent;
}
}
- type: conditional
conditions:
- entity: input_select.power_source
state: Plugged
elements:
- type: icon
icon: mdi:power-plug
style:
top: 75%
left: 77%
card_mod:
style:
hui-icon-element:
$: |
:host {
color: var(--paper-item-icon-color);
}
- type: conditional
conditions:
- entity: input_select.power_source
state: Unplugged
elements:
- type: icon
icon: mdi:fuel-cell
style:
top: 75%
left: 77%
card_mod:
style:
hui-icon-element:
$: |
:host {
color: var(--paper-item-icon-color);
}
- type: state-label
entity: sensor.cx_9_fuel_remaining_percentage
style:
top: 81%
left: 77%
- type: custom:bar-card
entity: sensor.cx_9_fuel_remaining_percentage
positions:
icon: 'off'
minmax: 'off'
value: 'off'
name: 'off'
from: left
min: 0
max: 100
width: 70px
height: 8px
style: |
.card-content {
padding:0 !important;
background-color: transparent
border: 0px solid transparent;
border-color: transparent;
}
bar-card-card {
border-radius: 4px;
height:8px;
overflow: hidden;
}
:host {
top: 85%;
left: 76.5%;
}
- type: state-icon
entity: sensor.cx_9_odometer
style:
top: 75%
left: 25%
- type: state-label
entity: sensor.cx_9_odometer
style:
top: 81%
left: 25%
image: /local/img/hyundai/hyundai-kona.png
- square: false
columns: 2
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
If you want to change the color of the “pulsating” animation, simply change the hex value of #88F1FF to one of your liking.
I think the bar and charging animation would be a nice addition for those with electric vehicles such as the R1T/R1S. CC: @kylerw @CChris @tmack8001