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"