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.
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!