Home-Assistant Lovelace card for carnet
- Download the images in the www folder and put them in /config/www
Optional, if you want the image to represent your car, log in to car-net on your computer and save the top image on the page as passat.png Double check the dimensions of the image. The style below was set based on my image which is 820x461 pixels.
- Put below content in your ui-lovelace.yaml
#START VW CAR IMAGE
- type: picture-elements
image: /local/passat.png
elements:
#State images to illustrate on top of car
- type: image
entity: switch.CARID_climatisation
image: /local/blank.png
style:
top: 39.5%
left: 55%
width: 43%
state_image:
"on": /local/passat_heat.png
- type: image
entity: binary_sensor.CARID_external_power
image: /local/blank.png
style:
top: 62.8%
left: 21.2%
width: 43%
state_image:
"on": /local/passatcharging.png
- type: image
entity: binary_sensor.CARID_parking_light
image: /local/blank.png
style:
top: 66.8%
left: 37.2%
width: 37%
state_image:
"on": /local/passat_light.png
- type: image
entity: lock.CARID_doors_locked
image: /local/blank.png
style:
top: 42.3%
left: 57%
width: 2%
state_image:
locked: /local/blink.gif
# Top left row with state icons
- type: state-icon
entity: lock.CARID_doors_locked
style:
top: 87%
left: 47%
- type: state-icon
entity: switch.CARID_climatisation
hold_action: toggle
style:
top: 87%
left: 58%
- type: state-icon
entity: switch.CARID_window_heater
hold_action: toggle
style:
top: 87%
left: 69%
#Top right icons
- type: state-icon
entity: switch.CARID_charging
style:
top: 87%
left: 80%
- type: state-label
entity: sensor.CARID_battery_level
style:
top: 96%
left: 81%
- type: state-icon
entity: sensor.CARID_fuel_level
style:
top: 87%
left: 91%
- type: state-label
entity: sensor.CARID_fuel_level
style:
top: 96%
left: 92%
#END VW IMAGE CARD