I copied someone else's idea from a forum somewhere and adapted it. Will need the mushroom cards added to your system.
I just grabbed an overhead image of a car from googling, saved it into the HA files section where your images are kept, and overlayed some data on that.
It sits in a panel/single card dashboard. Looks not so good on a computer screen but works well on a phone screen, which it this dashboard's purpose.
Play round with the top and left position % numbers to move the little info cards about to fit your own example. They operate as coordinates from the top left corner. IOW 0% left + 0% top = top left corner, 100% left + 100% right = bottom right corner.
yaml (replace the "xxxxx" sensors with those for your vehicle):
YAML:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.xxxxx_soc
name: Battery
needle: true
segments:
- from: 0
color: "#FF0000"
- from: 1.47
color: "#FF0F00"
- from: 2.94
color: "#FF1E00"
- from: 4.41
color: "#FF2D00"
- from: 5.88
color: "#FF3C00"
- from: 7.35
color: "#FF4B00"
- from: 8.82
color: "#FF5A00"
- from: 10.29
color: "#FF6900"
- from: 11.76
color: "#FF7800"
- from: 13.24
color: "#FF8700"
- from: 14.71
color: "#FF9600"
- from: 16.18
color: "#FFA500"
- from: 17.65
color: "#FFB400"
- from: 19.12
color: "#FFC300"
- from: 20.59
color: "#FFD200"
- from: 22.06
color: "#FFE100"
- from: 23.53
color: "#FFF000"
- from: 25
color: "#FFFF00"
- from: 26.57
color: "#F7FD00"
- from: 28.14
color: "#F0FC00"
- from: 29.71
color: "#E9FA00"
- from: 31.29
color: "#E1F900"
- from: 32.86
color: "#DAF701"
- from: 34.43
color: "#D3F601"
- from: 36
color: "#CCF401"
- from: 37.57
color: "#C4F301"
- from: 39.14
color: "#BDF101"
- from: 40.71
color: "#B6F002"
- from: 42.29
color: "#AEEE02"
- from: 43.86
color: "#A7ED02"
- from: 45.43
color: "#A0EC02"
- from: 47
color: "#99EA02"
- from: 48.57
color: "#91E903"
- from: 50.14
color: "#8AE703"
- from: 51.71
color: "#83E603"
- from: 53.29
color: "#7BE403"
- from: 54.86
color: "#74E303"
- from: 56.43
color: "#6DE104"
- from: 58
color: "#66E004"
- from: 59.57
color: "#5EDE04"
- from: 61.14
color: "#57DD04"
- from: 62.71
color: "#50DC04"
- from: 64.29
color: "#48DA05"
- from: 65.86
color: "#41D905"
- from: 67.43
color: "#3AD705"
- from: 69
color: "#33D605"
- from: 70.57
color: "#2BD405"
- from: 72.14
color: "#24D306"
- from: 73.71
color: "#1DD106"
- from: 75.29
color: "#15D006"
- from: 76.86
color: "#0ECE06"
- from: 78.43
color: "#07CD06"
- from: 80
color: "#00CC07"
- from: 81.18
color: "#08C410"
- from: 82.35
color: "#10BC19"
- from: 83.53
color: "#18B422"
- from: 84.71
color: "#20AC2B"
- from: 85.88
color: "#28A434"
- from: 87.06
color: "#309C3D"
- from: 88.24
color: "#389446"
- from: 89.41
color: "#408C4F"
- from: 90.59
color: "#488458"
- from: 91.76
color: "#507C61"
- from: 92.94
color: "#58746A"
- from: 94.12
color: "#606C73"
- from: 95.29
color: "#68647C"
- from: 96.47
color: "#705C85"
- from: 97.65
color: "#78548E"
- from: 98.82
color: "#804C97"
- from: 100
color: "#8845A1"
unit: "%"
- type: tile
entity: sensor.xxxxx_range
icon: mdi:map-marker-distance
name: Range
vertical: true
features_position: bottom
- type: custom:mushroom-entity-card
layout: vertical
name: Aux Battery
entity: sensor.xxxxx_auxiliary_battery_voltage
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
name: Charger
layout: vertical
primary_info: none
entity: binary_sensor.xxxxx_charger_connected
- type: custom:mushroom-entity-card
name: Charging?
layout: vertical
primary_info: none
entity: switch.xxxxx_charging
- type: custom:mushroom-entity-card
name: Power
layout: vertical
primary_info: none
entity: sensor.xxxxx_power
- type: horizontal-stack
cards:
- type: thermostat
name: Car Aircon
show_current_as_primary: true
features:
- type: climate-hvac-modes
hvac_modes:
- "off"
- auto
entity: climate.xxxxx_vehicle_climate
- type: vertical-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.xxxxx_doors_lock
name: Doors
- type: custom:mushroom-lock-card
entity: lock.xxxxx_boot_lock
name: Boot
- type: tile
entity: sensor.xxxxx_mileage
icon: mdi:counter
name: Odometer
show_entity_picture: false
vertical: false
color: accent
features_position: bottom
- type: picture-elements
image: local/community/MG-ZS-EV-Secundrabad-2.png
elements:
- type: state-badge
entity: sensor.xxxxx_soc
style:
top: 15%
left: 44%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: sensor.xxxxx_range
style:
top: 15%
left: 56%
"--ha-label-badge-title-font-size": 0em
- type: state-icon
entity: binary_sensor.xxxxx_battery_charging
style:
top: 14.5%
left: 50%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: lock.xxxxx_doors_lock
style:
top: 45%
left: 90%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: lock.xxxxx_boot_lock
style:
top: 90%
left: 50%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: climate.xxxxx_vehicle_climate
style:
top: 33%
left: 56%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: sensor.xxxxx_interior_temperature
style:
top: 33%
left: 44%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: sensor.xxxxx_tyres_front_left_pressure
style:
top: 25%
left: 13%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: sensor.xxxxx_tyres_front_right_pressure
style:
top: 25%
left: 86%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: sensor.xxxxx_tyres_rear_left_pressure
style:
top: 77%
left: 13%
"--ha-label-badge-title-font-size": 0em
- type: state-badge
entity: sensor.xxxxx_tyres_rear_right_pressure
style:
top: 77%
left: 86%
"--ha-label-badge-title-font-size": 0em