Hi Everyone - me again.
Created a custom Tesla dashboard card and of course a tutorial video to go along with it. Let me know what you think, and if you would like to see more tutorials like this.
6 Likes
whouaaaaahhhh!!! very beautiful card!
it is possible to share the code?
1 Like
it is possible to share the code?
1 Like
You need to pay subscription on youtube. Itās like using free home assistant and addons from community and try to earn money. Well done.
I found Discord for this card, downloaded the code but even following the Youtube video (which isnāt clear) Iām still struggling to get this card working.
So after some more tinkering with the card I have managed to get somewhere, lol. However due to my lack of HA knowledge and coding knowledge I am stuck as to why each entity has a border and isnāt transparentā¦
I was hoping someone would look at the code and tell what I have done wrong and how to fix it so I can learn and get it working, lolā¦
type: custom:button-card
show_state: true
tap_action:
action: none
custom_fields:
tesla_image1:
card:
type: picture
image: /api/image/serve/57c9bbea6bb306cc1674f2ab92686565/512x512
card_mod:
style: |
ha-card {
background-color: transparent;
border: none;
}
tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tesla_card_height
data:
value: 500
tesla_doors:
card:
type: custom:mushroom-template-card
primary: "Doors: {{states('lock.kaylee_doors')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_trunk:
card:
type: custom:mushroom-template-card
primary: "Boot: {{states('cover.kaylee_trunk_2')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_frunk:
card:
type: custom:mushroom-template-card
primary: "Frunk: {{states('cover.kaylee_frunk_2')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_windows:
card:
type: custom:mushroom-template-card
primary: "Windows: {{states('cover.kaylee_windows')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_chargerdoor:
card:
type: custom:mushroom-template-card
primary: "Charge Door: {{states('cover.kaylee_charger_door')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_battery_percent:
card:
type: custom:mushroom-template-card
primary: "Battery Charge: {{states('sensor.kaylee_battery')}}%"
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 45px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: black;
border: none;
z-index: 100;
}
tesla_battery_graph:
card:
type: gauge
name: ""
entity: sensor.kaylee_battery
needle: true
severity:
green: 30
yellow: 10
red: 0
min: 0
max: 100
card_mod:
style: |
ha-card {
border: none;
background-color: transparent;
}
.name {
font-size: 14px !important;
font-weight: 900;
font-style:italicl;
position: absolute;
bottom: 85px;
}
tesla_range:
card:
type: custom:mushroom-template-card
primary: Range
secondary: "{{states('sensor.kaylee_range')}}km"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_odo:
card:
type: custom:mushroom-template-card
primary: Odometer
secondary: "{{states('sensor.kaylee_odometer_2')}}km"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 10px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 10px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
styles:
card:
- align-self: start
- width: 500px
- height: 900px
- opacity: 1
- background-color: transparent
- border: none
custom_fields:
tesla_image1:
- position: absolute
- top: 1px
- left: 0px
- width: 500px
tesla_doors:
- position: absolute
- top: 175px
- left: 5px
- width: 150px
tesla_trunk:
- position: absolute
- top: 215px
- left: 5px
- width: 150px
tesla_frunk:
- position: absolute
- top: 255px
- left: 5px
- width: 150px
tesla_windows:
- position: absolute
- top: 295px
- left: 5px
- width: 150px
tesla_chargerdoor:
- position: absolute
- top: 335px
- left: 5px
- width: 150px
tesla_battery_percent:
- position: absolute
- top: 295px
- left: 320px
- width: 190px
tesla_battery_graph:
- position: absolute
- top: 175px
- left: 320px
- width: 190px
tesla_range:
- position: absolute
- top: 175px
- left: 165px
- width: 150px
tesla_odo:
- position: absolute
- top: 230px
- left: 165px
- width: 150px
Thank you
Iām in the same situation, have you managed to solve this?
you can try this ive also added km to miles conversion for my card and works great
type: custom:button-card
show_state: true
tap_action:
action: none
custom_fields:
tesla_image1:
card:
type: picture
image: local/2.png
card_mod:
style: |
ha-card {
background-color: transparent;
border: none;
}
tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tesla_card_height
data:
value: 500
tesla_image2:
card:
type: picture
image: /local/teslaTopDown.png
card_mod:
style: |
ha-card {
background-color: transparent;
border: none;
}
tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tesla_card_height
data:
value: 260
tesla_battery_image:
card:
type: picture
image: local/UMDPhoneBattery2.gif
card_mod:
style: |
ha-card {
background-color: black;
border: none;
}
tesla_doors:
card:
type: custom:mushroom-template-card
primary: "doors: {{states('lock.boomer_doors')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_trunk:
card:
type: custom:mushroom-template-card
primary: "truck: {{states('cover.boomer_frunk')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_frunk:
card:
type: custom:mushroom-template-card
primary: "frunk: {{states('cover.boomer_frunk')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_windows:
card:
type: custom:mushroom-template-card
primary: "windows: {{states('cover.boomer_windows')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_chargerdoor:
card:
type: custom:mushroom-template-card
primary: "charger: {{states('cover.boomer_charger_door')}}"
secondary: ""
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_battery_percent:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.boomer_battery')}}%"
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 45px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: black;
border: none;
z-index: 100;
}
tesla_battery_graph:
card:
type: gauge
name: ""
entity: sensor.boomer_battery
needle: true
severity:
green: 70
yellow: 25
red: 0
min: 0
max: 100
card_mod:
style: |
ha-card {
border: thin;
background-color: transparent;
}
.name {
font-size: 14px !important;
font-weight: 900;
font-style:italicl;
position: absolute;
bottom: 85px;
}
tesla_range:
card:
type: custom:mushroom-template-card
primary: estimated range
secondary: "{{ (states('sensor.boomer_range') | float * 0.621371) | round(2) }}mi"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: hidden !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_odo:
card:
type: custom:mushroom-template-card
primary: odometer
secondary: "{{ (states('sensor.boomer_odometer') | float * 0.621371) | round(0) }}mi"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
divider1:
card:
type: custom:text-divider-row
text: information
align: center
text-divider-color: white
tesla_front_right_tire:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.boomer_tpms_front_left') | round}}"
secondary: PSI
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_front_left_tire:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.boomer_tpms_front_left') | round}}"
secondary: PSI
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_rear_left_tire:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.boomer_tpms_rear_left') | round}}"
secondary: PSI
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_rear_right_tire:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.boomer_tpms_rear_right') | round}}"
secondary: PSI
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align: left;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_charging_rate:
card:
type: custom:mushroom-template-card
primary: charging rate
secondary: >-
{{ (states('sensor.boomer_charging_rate') | float * 0.621371) | round(2)
}} mi/h
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_charging_power:
card:
type: custom:mushroom-template-card
primary: charging power
secondary: "{{states('sensor.boomer_charger_power')}} amps"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_outdoor_temp:
card:
type: custom:mushroom-template-card
primary: outdoor temp
secondary: "{{states('sensor.boomer_temperature_outside')}}Ā°c"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_inside_temp:
card:
type: custom:mushroom-template-card
primary: cabin temp
secondary: "{{states('sensor.boomer_temperature_inside')}}Ā°c"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_cabin_temp:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{states('sensor.boomer_temperature_inside')|round}}Ā°c"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 16px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_last_charge_stats_box:
card:
type: custom:mushroom-template-card
primary: last charge session
secondary: null
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: absolute;
overflow: visible !important;
text-align:center;
top: -10px;
left: 15px;
background: black;
width: 120px;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border-color: grey;
border: 2.5px thin;
height: 500px;
width: 150px;
height: 80px !important;
}
tesla_energy_added:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{states('sensor.boomer_energy_added')}} Kwh"
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_range_added:
card:
type: custom:mushroom-template-card
primary: null
secondary: >-
{{ (state_attr('sensor.boomer_energy_added', 'added_range') | float *
0.621371) | round(2) }} mi
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
text-align:center;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
tesla_last_update:
card:
type: custom:mushroom-template-card
primary: null
secondary: "{{ relative_time(sensor.boomer_data_last_update_time) }}"
icon: mdi:home
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-card {
--icon-size: 4px;
/* Remove default card styling */
--ha-card-box-shadow: none;
--ha-card-background: none;
--ha-card-border-width: 0;
user-select: none;
width: 120px;
border: none;
background: transparent;
padding: 0px;
text-align:left;
}
:host {
/* Match styling to Mushroom Title */
--mush-card-primary-font-size: 10px;
--mush-card-primary-font-weight: normal;
--mush-card-primary-line-height: 10px;
--mush-card-secondary-font-size: 10px;
--mush-card-secondary-font-weight: normal;
--mush-card-secondary-line-height: 10px;
--mush-card-secondary-color: silver;
}
tesla_status:
card:
type: custom:mushroom-template-card
primary: null
secondary: |
{% if is_state('sensor.boomer_shift_state','P') %}
PARKED
{% elif is_state('sensor.boomer_shift_state','D') %}
DRIVING
{% elif is_state('sensor.boomer_shift_state','R') %}
REVERSE
{% elif is_state('sensor.boomer_shift_state','N') %}
NEUTRAL
{% endif %}
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
text-align:left;
}
.secondary {
font-size: 10px !important;
position: relative;
overflow: visible !important;
text-align:right;
}
.: |
ha-card {
background-color: transparent;
border: none;
}
styles:
card:
- align-self: start
- width: 410px
- height: |
[[[ return states['input_number.tesla_card_height'].state + 'px'; ]]]
- opacity: 1
- background-color: black
- border: none
custom_fields:
tesla_image1:
- position: absolute
- top: 10px
- left: 10px
- width: 395px
tesla_battery_image:
- position: absolute
- top: 226px
- left: 355px
- width: 65px
- visibility: >-
[[[ if (states["binary_sensor.boomer_charging"].state == "off") return
"hidden"; ]]]
tesla_doors:
- position: absolute
- top: 145px
- left: 10px
- width: 100px
tesla_trunk:
- position: absolute
- top: 161px
- left: 10px
- width: 100px
tesla_frunk:
- position: absolute
- top: 177px
- left: 10px
- width: 100px
tesla_windows:
- position: absolute
- top: 193px
- left: 10px
- width: 100px
tesla_chargerdoor:
- position: absolute
- top: 209px
- left: 10px
- width: 100px
tesla_battery_percent:
- position: absolute
- top: 210px
- left: 275px
- width: 90px
tesla_battery_graph:
- position: absolute
- top: 140px
- left: 230px
- width: 190px
tesla_range:
- position: absolute
- top: 145px
- left: 125px
- width: 130px
tesla_odo:
- position: absolute
- top: 189px
- left: 125px
- width: 130px
divider1:
- position: absolute
- top: 250px
- left: 5px
- width: 400px
tesla_image2:
- position: absolute
- top: 275px
- left: 250px
- width: 150px
tesla_front_right_tire:
- position: absolute
- top: 295px
- left: 365px
- width: 30px
tesla_front_left_tire:
- position: absolute
- top: 295px
- left: 240px
- width: 30px
tesla_rear_left_tire:
- position: absolute
- top: 430px
- left: 240px
- width: 30px
tesla_rear_right_tire:
- position: absolute
- top: 430px
- left: 365px
- width: 30px
tesla_charging_rate:
- position: absolute
- top: 280px
- left: 0px
- width: 120px
tesla_charging_power:
- position: absolute
- top: 330px
- left: 0px
- width: 120px
tesla_outdoor_temp:
- position: absolute
- top: 280px
- left: 120px
- width: 120px
tesla_inside_temp:
- position: absolute
- top: 330px
- left: 120px
- width: 120px
tesla_cabin_temp:
- position: absolute
- top: 365px
- left: 300px
tesla_last_charge_stats_box:
- position: absolute
- top: 405px
- left: 50px
tesla_energy_added:
- position: absolute
- top: 413px
- left: 64px
- width: 120px
tesla_range_added:
- position: absolute
- top: 438px
- left: 64px
- width: 120px
tesla_last_update:
- position: absolute
- top: "-5px"
- left: 0px
- width: 250px
tesla_status:
- position: absolute
- top: "-5px"
- left: 0px
- width: 412px
name:
- justify-self: start
- align-self: start
- font-size: 24px
- font-weight: 500
- color: white
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 18px
- opacity: "0.7"
Ive setup the dashboard according Khiles. Thanks for sharing it. Values are displayed. I donāt have images, so it doesnāt look correct. Where can I get images from? I think they need to have correct size.
Hi @khiles : thanks for sharing the work!
Can you also share the image? Need to match the exact sizeā¦
Thanks
FYI another alternative; I use the āVehicle Status cardā
1 Like
Thanks this looks very promising!
Can I ask where do you download the vehicle images? To make it work need some png without background, tried to google around without luckā¦
To get the main tesla image, log into your tesla account (https://www.tesla.com/teslaaccount), click on your car and then right-click the image and save it.
After MUCH work I finally got the original card working with my Tesla in the latest (2025.11.3) HA Core.
Since there doesnāt seem to be a way to attach files in replies, Iāll post the updated YAML to my website and post the instructions here in the next day or so.
Hey Nick. My card is a mess after the update, if you wouldnāt mind sharing your yaml with me, it would be so nice, or private message me your website so i can grab it there, i was unable to find it. Thanks.
Hey Everyone, here are the instructions for how to make the card work. You can download the 3 required files, including the YAML here
Installation Instructions.
You will need to have HACS installed in Home Assistant.
Use HACS to:
-
Install Tesla Custom Integration (TCI)
Follow the instructions on the install documentation
Note - I did not need to do any of the Fleet API stuff. It worked OOB with my 2026 Juniper and my 2012 Model Y
I did need to install the Auth App for Tesla (in the TCI installation instructions) and generate the Client ID and Client Secret
If you have more than one car listed in TCI, enable or disable them as required, -
install button card
-
install card-mod
-
install mushroom card
-
Install Text Divider Row
Next, add Helpers (Settings, Devices and Services, Helpers)
- Add Helper ānumberā called tesla_card_height, click it and set to 500
- Add Helper ātextā called tesla_car_name and set it to the name of your car (i.e., the one that shows up in the Tesla App)
Next, log into your tesla account tesla.com/teslaaccount
- Find the car you want to display on the card and click manage
- Right click and save car image as ātesla-car-image.pngā (Iāve included my car image so the card will work out of the box)
Next, in HA, go to media (in the sidebar), my media/manage upload tesla-car-image.png and teslaTopDown.png
OK. Everything is now (hopefully) ready to go.
Go to your Dashboard and Edit,
Add Card. choose Manual Card,
Copy and paste the YAML from tesla-custom-card-njh.yaml
Unfortunately, there is one place in the YAML that has the car name hard coded
Edit the YAML
Search and replace āstormā (the name of my car) with the name of your car from the tesla app.
Fingers crossed, everything should be there in all its glory.
If you click the main car image the card will expand to include charging and tire pressure info
If you ckick the ātop downā car image, the card will collapse to hide that info.
If you want, you can also add the automations at 13:23 in the video to open the bottom part of the card automatically when it is charging
Planning improvements:
- simplify so that mushroom card is not needed.
Note: if you want two cards for two cars, youāll need to add a new helper called, e.g., tesla_car_name2 (and set it to the name of the 2nd car) and upload a new image tesla_car_image2 and in the 2nd card find and replace all instances of the names.
Note 2: my car is in the US so defaults to miles and deg. F; if you car is reporting in km and deg C, edit the TAML to change the units - they are all hard coded.
1 Like
Iāve fixed a couple of bugs in the YAML. The link in the previous post points to the latest version.
Fixed - zindex problem; bug in ātime sinceā calculation"; incorrect label on charging power
Works like a charm, thanks!
can you please share the code?
Here is my Y.
type: custom:vehicle-status-card
name: Tesla Model Y
images:
- image: https://xxx.xxx.xxx/Tesla-White.png
layout_config:
button_grid:
rows: 2
swipe: true
columns: 2
images_swipe:
height: 150
loop: true
effect: slide
autoplay: true
section_order:
- indicators
- images
- range_info
- mini_map
- buttons
range_info_config:
layout: row
mini_map:
device_tracker: device_tracker.tesla_location
enable_popup: true
maptiler_api_key: XXXXXXXXXXXXXXXXXXXX
single_map_card: false
use_zone_name: false
map_height: 220
indicator_rows:
- row_items:
- entity: lock.tesla_lock
type: entity
name: Doors
show_name: true
show_state: true
show_icon: true
tap_action:
action: more-info
- entity: cover.tesla_frunk
type: entity
show_name: true
show_state: true
show_icon: true
tap_action:
action: more-info
- entity: cover.tesla_trunk
type: entity
show_name: true
show_state: true
show_icon: true
tap_action:
action: more-info
- type: group
show_name: true
show_icon: true
name: Door
icon: mdi:car-door
items:
- entity: binary_sensor.tesla_front_driver_door
name: Driver
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.tesla_front_passenger_door
name: Passenger
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.tesla_rear_driver_door
name: Rear Driver
show_name: true
show_state: true
show_icon: true
- entity: binary_sensor.tesla_rear_passenger_door
name: Rear Passenger
show_name: true
show_state: true
show_icon: true
- row_items:
- type: entity
show_name: true
show_state: true
show_icon: true
show_entity_picture: false
include_state_template: false
tap_action:
action: more-info
entity: sensor.tesla_inside_temperature
name: Inside
- type: entity
show_name: true
show_state: true
show_icon: true
show_entity_picture: false
include_state_template: false
tap_action:
action: more-info
entity: sensor.tesla_outside_temperature
name: Outside
- type: group
show_name: true
show_icon: true
icon: mdi:car-seat-heater
items:
- entity: select.tesla_seat_heater_front_left
name: Seat Heater Driver
show_name: true
show_state: true
show_icon: true
- entity: select.tesla_seat_heater_front_right
name: Seat Heater Passenger
show_name: true
show_state: true
show_icon: true
- entity: select.tesla_steering_wheel_heater
name: Steering Wheel Heater
show_name: true
show_state: true
show_icon: true
- type: entity
show_name: true
show_state: true
show_icon: true
show_entity_picture: false
include_state_template: false
tap_action:
action: more-info
entity: sensor.tesla_charge_energy_added
name: Energy Added
range_info:
- energy_level:
entity: sensor.tesla_battery_level
tap_action:
action: more-info
value_alignment: start
value_position: outside
range_level:
entity: sensor.tesla_battery_range
value_position: outside
charging_entity: sensor.tesla_charging
progress_color: "#982a2a"
color_blocks: false
color_thresholds:
- value: 0
color: "#df1111"
- value: 20
color: "#ce3812"
- value: 40
color: "#bc4f15"
- value: 60
color: "#c87837"
- value: 80
color: "#d2ac5b"
charge_target_entity: number.tesla_charge_limit
charge_target_color: deep-orange
charging_template: |
{{ is_state('sensor.tesla_charging', 'charging') }}
charge_target_visibility: "{{ is_state('sensor.tesla_charging', 'charging') }}"
- energy_level:
entity: sensor.tesla_charge_energy_added
hide_icon: false
value_position: outside
progress_color: "#d39311"
range_level:
entity: sensor.tesla_time_to_full_charge
charging_entity: switch.tesla_charge
charge_target_entity: sensor.tesla_time_to_full_charge
button_cards:
- layout: horizontal
transparent: false
show_primary: true
show_secondary: true
show_icon: true
name: Charging
tap_action:
action: toggle
hide_button: false
button_type: default
card_type: custom
icon_type: icon
primary_info: name
icon: mdi:ev-station
include_state_template: false
sub_card:
custom_card:
- type: entities
entities:
- entity: switch.tesla_charge
- entity: lock.tesla_charge_cable_lock
- entity: sensor.tesla_charging
- entity: binary_sensor.tesla_charge_cable
- entity: number.tesla_charge_current
- entity: number.tesla_charge_limit
- entity: cover.tesla_charge_port_door
- entity: sensor.tesla_charge_energy_added
- entity: sensor.tesla_charge_rate
- entity: sensor.tesla_charger_power
- layout: horizontal
transparent: false
show_primary: true
show_secondary: true
show_icon: true
name: Heat
notify: "{{ true }}"
notify_color: >-
{{ iif (is_state('climate.tesla_climate', 'on'), 'mdi:heat-wave',
'mdi:heat-wave') }}
notify_icon: "{{ iif (is_state('climate.tesla_climate', 'on'), '#FAF625') }}"
tap_action:
action: toggle
hide_button: false
button_type: default
card_type: custom
icon_type: icon-template
primary_info: name
entity: climate.tesla_climate
icon_template: >-
{{ iif (is_state('climate.tesla_climate', 'on'),
'mdi:snowflake-thermometer', 'mdi:snowflake-thermometer') }}
color_template: "{{ iif (is_state('climate.tesla_climate', 'on'), '#F52727') }}"
include_state_template: true
state_content:
- state_template
sub_card:
default_card:
- title: New Category
items:
- entity: climate.tesla_climate
collapsed_items: true
state_color: false
- title: New Category
items:
- entity: number.tesla_charge_limit
- entity: binary_sensor.tesla_charge_cable
collapsed_items: true
custom_card:
- type: custom:mushroom-climate-card
entity: climate.tesla_climate
fill_container: true
show_temperature_control: true
collapsible_controls: false
hvac_modes:
- auto
- heat
- cool
- type: entities
entities:
- entity: sensor.tesla_inside_temperature
- entity: sensor.tesla_outside_temperature
- entity: switch.tesla_defrost
- entity: select.tesla_seat_heater_front_left
- entity: select.tesla_seat_heater_front_right
- entity: select.tesla_steering_wheel_heater
- layout: horizontal
transparent: false
show_primary: true
show_secondary: true
show_icon: true
name: Tire Pressure
tap_action:
action: more-info
hide_button: false
button_type: default
card_type: tire
icon_type: icon
primary_info: name
icon: mdi:car-tire-alert
state_color: true
sub_card:
tire_card:
front_left:
entity: sensor.tesla_tire_pressure_front_left
front_right:
entity: sensor.tesla_tire_pressure_front_right
rear_left:
entity: sensor.tesla_tire_pressure_rear_left
rear_right:
entity: sensor.tesla_tire_pressure_rear_right
- show_icon: true
show_primary: true
show_secondary: true
layout: horizontal
button_type: default
tap_action:
action: more-info
card_type: custom
icon_type: icon-template
primary_info: name
icon: mdi:lightbulb-auto
name: Lights
entity: light.all_light
state_color: false
icon_template: >-
{{ iif (is_state('light.all_light', 'on'), 'mdi:lightbulb-group',
'mdi:lightbulb-outline') }}
color_template: "{{ iif (is_state('light.all_light', 'on'), '#F5A327') }}"
include_state_template: true
state_content:
- state_template
sub_card:
default_card: []
custom_card:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom
secondary_info: last-changed
layout: default
- type: custom:mushroom-light-card
entity: light.kitchen
secondary_info: last-changed
layout: default
- type: custom:mushroom-light-card
entity: light.ifan03_light
secondary_info: last-changed
layout: default
- type: custom:mushroom-light-card
entity: light.dining_room
secondary_info: last-changed
layout: default