Hi, i just installed the custom Tesla integration, but now i am looking for a simple but pretty card for a lovelace dashboard. i did find a few nice once but these all require me to have a masters degree in python and god knows what. does anyone have some tips to get my pretty new car integrated in Lovelace?
1 Like
I wanted something simple too. No control, just overview.
Here’s how I did mine…
When charging it also shows the charging rate…
type: picture-elements
image: /local/tesla_y.jpg
elements:
- type: state-label
entity: device_tracker.<car name>_location_tracker
tap_action: none
hold_action: none
style:
top: 7%
left: 91%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
- type: state-icon
entity: binary_sensor.<car name>_online_sensor
tap_action: none
hold_action: none
style:
top: 6.5%
left: 83%
- type: state-icon
entity: binary_sensor.<car name>_ischarging
tap_action: none
hold_action: none
style:
top: 7%
left: 70.5%
- type: state-icon
entity: binary_sensor.<car name>_update_available_sensor
tap_action: none
hold_action: none
style:
top: 7%
left: 64%
- type: state-icon
entity: climate.<car name>_hvac_climate_system
tap_action: none
hold_action: none
style:
top: 7%
left: 58%
- type: state-icon
entity: switch.<car name>_sentry_mode_switch
tap_action: none
hold_action: none
style:
top: 7%
left: 77%
- type: state-icon
entity: lock.<car name>_door_lock
tap_action: none
hold_action: none
style:
top: 30%
left: 45%
- type: state-icon
entity: lock.<car name>_door_lock
tap_action: none
hold_action: none
style:
top: 30%
left: 60%
- type: state-icon
entity: lock.<car name>_door_lock
tap_action: none
hold_action: none
style:
top: 70%
left: 45%
- type: state-icon
entity: lock.<car name>_door_lock
tap_action: none
hold_action: none
style:
top: 70%
left: 60%
- type: state-icon
entity: lock.<car name>_frunk_lock
tap_action: none
hold_action: none
style:
top: 50%
left: 85%
- type: state-icon
entity: lock.<car name>_trunk_lock
tap_action: none
hold_action: none
style:
top: 50%
left: 21%
- type: state-icon
entity: lock.<car name>_charger_door_lock
tap_action: none
hold_action: none
style:
top: 31%
left: 21%
- type: conditional
conditions:
- entity: binary_sensor.<car name>_charger_sensor
state: 'on'
elements:
- type: state-label
entity: sensor.<car name>_charging_rate_sensor
tap_action: none
hold_action: none
style:
top: 27%
left: 21%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
- type: state-label
entity: sensor.<car name>_temperature_sensor_inside
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
font-size: 100%
font-weight: normal
color: rgb(255,255,255)
- type: icon
icon: mdi:thermometer
tap_action: none
hold_action: none
style:
top: 50%
left: 41%
font-size: 100%
font-weight: normal
color: rgb(255,255,255)
- type: state-label
entity: sensor.<car name>_temperature_sensor_outside
tap_action: none
hold_action: none
style:
top: 23%
left: 80%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
- type: icon
icon: mdi:thermometer
tap_action: none
hold_action: none
style:
top: 23%
left: 71%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
- type: custom:bar-card
entity: sensor.<car name>_battery_sensor
severity:
- color: Red
from: 0
to: 10
- color: Orange
from: 11
to: 20
- color: Green
from: 21
to: 100
entity_row: true
positions:
icon: 'off'
name: 'off'
indicator: 'off'
animation:
state: 'on'
speed: 5
width: 270px
tap_action: none
stack: vertical
style:
top: 85%
left: 53%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
1 Like
That looks great! What dimensions are the car image you used?
Thanks! All working
do you mind sharing the location where you got this pic? I am looking for similar angle for a model3. thanks.
Not too sure where I found it, but just found a better resource with 3d images. I might make my card a little fancier 
link
2 Likes
thanks mate. that link is mazing.
Hi, thank you! Can you give me the same angle, the color is black!
Made some improvements with the updates of the integration.
type: picture-elements
image: /local/tesla_y.jpg
elements:
- type: state-icon
entity: button.<car_name>_force_data_update
style:
top: 6.5%
left: 10%
color: '#039be5'
tap_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.<car_name>_force_data_update
double_tap_action: none
hold_action: none
- type: state-label
entity: button.<car_name>_force_data_update
tap_action:
action: call-service
service: button.press
service_data: {}
target:
entity_id: button.<car_name>_force_data_update
double_tap_action: none
hold_action: none
style:
top: 96%
left: 53%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
prefix: 'Last update: '
- type: state-label
entity: device_tracker.<car_name>_location_tracker
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 92%
font-size: 100%
font-weight: normal
color: black
- type: conditional
conditions:
- entity: binary_sensor.<car_name>_online
state: 'on'
elements:
- type: icon
icon: mdi:link-variant
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 6.5%
left: 83%
color: '#039be5'
- type: conditional
conditions:
- entity: binary_sensor.<car_name>_online
state_not: 'on'
elements:
- type: icon
icon: mdi:link-variant-off
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 6.5%
left: 83%
color: black
- type: conditional
conditions:
- entity: switch.<car_name>_sentry_mode
state: 'on'
elements:
- type: icon
icon: mdi:shield-car
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 77%
color: black
- type: conditional
conditions:
- entity: switch.<car_name>_sentry_mode
state_not: 'on'
elements:
- type: icon
icon: mdi:shield-alert-outline
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 77%
color: red
- type: conditional
conditions:
- entity: lock.<car_name>_doors
state: locked
elements:
- type: icon
icon: mdi:lock
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 70.5%
color: black
- type: conditional
conditions:
- entity: lock.<car_name>_doors
state_not: locked
elements:
- type: icon
icon: mdi:lock-open-variant
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 70.5%
color: '#039be5'
- type: conditional
conditions:
- entity: update.<car_name>_software_update
state_not: 'on'
elements:
- type: icon
icon: mdi:upload-off
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 64%
color: black
- type: conditional
conditions:
- entity: update.<car_name>_software_update
state: 'on'
elements:
- type: icon
icon: mdi:upload
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 64%
color: '#039be5'
- type: conditional
conditions:
- entity: climate.<car_name>_hvac_climate_system
state: 'off'
elements:
- type: icon
icon: mdi:fan-off
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 58%
color: black
- type: conditional
conditions:
- entity: climate.<car_name>_hvac_climate_system
state: heat_cool
elements:
- type: icon
icon: mdi:air-conditioner
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 7%
left: 58%
color: '#039be5'
- type: conditional
conditions:
- entity: sensor.<car_name>_tpms_front_left
state_not: 43
elements:
- type: icon
icon: mdi:car-tire-alert
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 6.9%
left: 51.5%
color: red
- type: conditional
conditions:
- entity: sensor.<car_name>_tpms_front_right
state_not: 43
elements:
- type: icon
icon: mdi:car-tire-alert
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 6.9%
left: 51.5%
color: red
- type: conditional
conditions:
- entity: sensor.<car_name>_tpms_rear_left
state_not: 43
elements:
- type: icon
icon: mdi:car-tire-alert
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 6.9%
left: 51.5%
color: red
- type: conditional
conditions:
- entity: sensor.<car_name>_tpms_rear_right
state_not: 43
elements:
- type: icon
icon: mdi:car-tire-alert
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 6.9%
left: 51.5%
color: red
- type: state-label
entity: binary_sensor.<car_name>_doors
attribute: Driver Rear
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 30%
left: 40%
color: black
- type: state-label
entity: binary_sensor.<car_name>_doors
attribute: Driver Front
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 30%
left: 60%
color: black
- type: state-label
entity: binary_sensor.<car_name>_doors
attribute: Passenger Rear
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 70%
left: 40%
color: black
- type: state-label
entity: binary_sensor.<car_name>_doors
attribute: Passenger Front
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 70%
left: 60%
color: black
- type: state-label
entity: cover.<car_name>_frunk
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 50%
left: 85%
color: white
- type: state-label
entity: cover.<car_name>_trunk
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 50%
left: 21%
color: white
- type: conditional
conditions:
- entity: cover.<car_name>_charger_door
state: open
elements:
- type: icon
icon: mdi:ev-plug-tesla
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 31%
left: 21%
color: '#039be5'
- type: conditional
conditions:
- entity: cover.<car_name>_charger_door
state_not: open
elements:
- type: icon
icon: mdi:ev-plug-tesla
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 31%
left: 21%
color: black
- type: conditional
conditions:
- entity: binary_sensor.<car_name>_charger
state: 'on'
elements:
- type: state-label
entity: sensor.<car_name>_charging_rate
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 26%
left: 21%
font-size: 100%
font-weight: normal
color: '#039be5'
- type: conditional
conditions:
- entity: binary_sensor.<car_name>_charger
state: 'on'
elements:
- type: state-label
entity: binary_sensor.<car_name>_charger
attribute: charging_state
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 22%
left: 21%
font-size: 100%
font-weight: normal
color: '#039be5'
- type: state-label
entity: sensor.<car_name>_temperature_inside
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 50%
left: 50%
font-size: 100%
font-weight: normal
color: rgb(255,255,255)
- type: icon
icon: mdi:thermometer
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 50%
left: 41%
font-size: 100%
font-weight: normal
color: rgb(255,255,255)
- type: state-label
entity: sensor.<car_name>_temperature_outside
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 23%
left: 80%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
- type: icon
icon: mdi:thermometer
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 23%
left: 71%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
- type: conditional
conditions:
- entity: binary_sensor.<car_name>_ischarging
state: 'on'
- entity: device_tracker.<car_name>_location_tracker
state: home
elements:
- type: icon
icon: mdi:home-lightning-bolt-outline
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 84.7%
left: 55%
color: green
- type: conditional
conditions:
- entity: binary_sensor.<car_name>_ischarging
state: 'on'
- entity: device_tracker.<car_name>_location_tracker
state_not: home
elements:
- type: icon
icon: mdi:ev-station
tap_action: none
double_tap_action: none
hold_action: none
style:
top: 84.7%
left: 55%
color: green
- type: custom:bar-card
entity: sensor.<car_name>_battery
severity:
- color: Red
from: 0
to: 10
- color: Orange
from: 11
to: 20
- color: Green
from: 21
to: 100
entity_row: true
positions:
icon: 'off'
name: 'off'
indicator: 'off'
animation:
state: 'on'
speed: 5
width: 270px
tap_action: none
hold_action: none
double_tap_action: none
stack: vertical
style:
top: 85%
left: 53%
font-size: 100%
font-weight: normal
color: rgb(0,0,0)
7 Likes
Thanks for all your work on this, do you know how we can get the bottom bar to show mileage if that’s what we have set up in the car as opposed to percent? Thank you!
Change the entity to sensor.<car_name>_range define min and max and massage the severity colours.
See the bar-card for the setup details:
I like % better because the range can be ambiguous. The max range would vary depending on many things.
Ex. Assuming the max car range is 300mi, I’d update the bar-card setup to…
- type: custom:bar-card
entity: sensor.<car_name>_range
max: 300
min: 0
severity:
- color: Red
from: 0
to: 30
- color: Orange
from: 31
to: 60
- color: Green
from: 61
to: 300
@alexbeatle , that looks amazing, great job !
However, when I try to copy-paste your code it does not allow me to save the card (I have that red-line on the side)
Is there like a best practice for copy-paste or something ? Am I doing something wrong ? (and yes I changed the “car name” of-course)
Can you post the snapshot?
Hello
What a beautiful integration! congratulations!
Could you send me the photo of the Tesla Y model in white?
thank you so much
Hello
How do you make Tesla Mate update the status of the sensors with this button?
I don’t see that it is possible to create a button that requests the update of the values
thank you
She looks beautiful. She would only need pneumatic pressure sensors.
Thanks for sharing
2 Likes
I agree, this is GREAT!
The tyre sensor should be changed to between 40 and 43 before it shows red. Temperatures change this…
Maybe sensors around the wheel locations instead, just showing?
1 Like
I want to keep it nice and clean, don’t think the tyre pressures need to show. I would personally only care if they’re out of range or not - hence the colour changing icon at the top.
Good idea about introducing the “acceptable” range.
1 Like