Same for me.
Edit: Heater works, but locks doesn’t work.
/joZ
This is so beatiful. I had an idea to do something similar, do you share your code/card setup?
Hello,
Of course
I’m attaching the picture, it’s not the prettiest picture, I’m not a designer and I just threw it together quickly 
Volvo XC 60 PNG
elements:
- entity: sensor.rvb_883_odometer
prefix: ''
style:
transform: translate(-50%, -50%) scale(1.3, 1.3)
color: white
left: 13%
top: 18%
type: state-label
- entity: sensor.rvb_883_fuel_level
prefix: ' '
style:
transform: translate(-50%, -50%) scale(1.3, 1.3)
color: white
left: 33%
top: 18%
type: state-label
- entity: sensor.rvb_883_range
prefix: ' '
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 46%
top: 18%
type: state-label
- entity: sensor.rvb_883_fuel_amount
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 57%
top: 18%
type: state-label
- entity: switch.rvb_883_heater
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: '#FFFFFF'
left: 66.5%
top: 17.5%
type: state-label
- entity: binary_sensor.rvb_883_brake_fluid
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: white
left: 76%
top: 17.5%
type: state-icon
- entity: binary_sensor.rvb_883_bulbs
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: '#FFFFFF'
left: 85.5%
top: 17.5%
type: state-icon
- entity: binary_sensor.rvb_883_washer_fluid
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: '#FFFFFF'
left: 95%
top: 17.5%
type: state-icon
- entity: binary_sensor.rvb_883_front_right_tire
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: lightgrey
left: 35%
top: 34%
type: state-icon
- entity: binary_sensor.rvb_883_rear_right_tire
icon: null
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: lightgrey
left: 79%
top: 34%
type: state-icon
- entity: binary_sensor.rvb_883_front_left_tire
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: white
left: 34%
top: 89%
type: state-icon
- entity: binary_sensor.rvb_883_rear_left_tire
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: lightgrey
left: 79%
top: 89%
type: state-icon
- entity: binary_sensor.rvb_883_front_right_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 58%
top: 42%
type: state-icon
- entity: binary_sensor.rvb_883_rear_right_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 68%
top: 42%
type: state-icon
- entity: binary_sensor.rvb_883_front_left_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 58%
top: 80%
type: state-icon
- entity: binary_sensor.rvb_883_rear_left_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 68%
top: 80%
type: state-icon
- entity: binary_sensor.rvb_883_tailgate
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 90%
top: 60%
type: state-icon
- entity: binary_sensor.rvb_883_front_right_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 53%
top: 31%
type: state-icon
- entity: binary_sensor.rvb_883_rear_right_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 70%
top: 31%
type: state-icon
- entity: binary_sensor.rvb_883_front_left_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 53%
top: 92%
type: state-icon
- entity: binary_sensor.rvb_883_rear_left_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 70%
top: 92%
type: state-icon
- entity: switch.rvb_883_engine
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 10%
top: 35%
type: state-label
- entity: binary_sensor.rvb_883_windows
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 12%
top: 51%
type: state-label
- entity: binary_sensor.rvb_883_door_lock
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: '#FFFFFF'
left: 12%
top: 67%
type: state-label
- entity: device_tracker.rvb_883_position
prefix: ''
style:
transform: translate(-45%, -50%) scale(0.8, 0.8)
color: white
left: 12%
top: 83%
type: state-label
image: /local/volvo_xc60_ha.png
type: picture-elements
style: |
ha-card {
background: rgba(51,51,51,0.5);
box-shadow: none;
}
5 Likes
Great, thank you!
I am modifying your setup to get my V60 Recharge incl. battery stuff included.
One note for other trying to replicate it: You first need to install card-mod via HACS to make it look like in the picture above.
@WebPower Do you know what I need to do to get the same lock symbols you have? Mine are quite different. Additionally: My checkmark symbols are blueish, not gray as in your picture? Would you know why?
hi, the theme is probably different, 100%
hi, can you share your code? I have an xc60 recharge and woul like to have something similar set up.
Thanks
This is the picture I use. Since some time the style part for fixed background color does not work anymore, I therefore made a picture with a opaque background and not a transparent one as before:
Code for my V60 Regarge is this:
type: picture-elements
image: /local/Images/volvo_V60_ha_v13_opaque.png
title: Unser Volvo V60 Recharge
card-mod:
style: |
ha-card {
background: rgba(60,60,60,0.5);
box-shadow: none;
}
elements:
- entity: sensor.bl_74569_odometer
prefix: ''
style:
transform: translate(-50%, -50%) scale(1.3, 1.3)
color: white
left: 13%
top: 15%
type: state-label
- entity: sensor.bl_74569_fuel_level
prefix: ' '
style:
transform: translate(-50%, -50%) scale(1.3, 1.3)
color: white
left: 33%
top: 15%
type: state-label
- entity: sensor.bl_74569_range
prefix: ' '
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 46%
top: 15%
type: state-label
- entity: sensor.bl_74569_fuel_amount
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 57%
top: 15%
type: state-label
- entity: switch.bl_74569_heater
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: '#FFFFFF'
left: 66.5%
top: 14.5%
type: state-label
- entity: binary_sensor.bl_74569_brake_fluid
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: white
left: 76%
top: 14.5%
type: state-icon
- entity: binary_sensor.bl_74569_bulbs
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: '#FFFFFF'
left: 85.5%
top: 14.5%
type: state-icon
- entity: binary_sensor.bl_74569_washer_fluid
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: '#FFFFFF'
left: 95%
top: 14.5%
type: state-icon
- entity: sensor.switch_volvo_energy
prefix: ''
style:
transform: translate(-50%, -50%) scale(1.3, 1.3)
color: white
left: 13%
top: 33%
type: state-label
- entity: sensor.bl_74569_battery_level
prefix: ' '
style:
transform: translate(-50%, -50%) scale(1.3, 1.3)
color: white
left: 33%
top: 33%
type: state-label
- entity: sensor.bl_74569_battery_range
prefix: ' '
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 49%
top: 33%
type: state-label
- entity: sensor.bl_74569_time_to_fully_charged
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: white
left: 66%
top: 33%
type: state-label
- entity: binary_sensor.bl_74569_plug_status
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: '#FFFFFF'
left: 81%
top: 32.5%
type: state-icon
- entity: switch.switch_volvo
prefix: ''
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: '#FFFFFF'
left: 94%
top: 32.5%
type: state-icon
- entity: binary_sensor.bl_74569_front_right_tire
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: lightgrey
left: 35%
top: 47%
type: state-icon
- entity: binary_sensor.bl_74569_rear_right_tire
icon: null
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: lightgrey
left: 79%
top: 47%
type: state-icon
- entity: binary_sensor.bl_74569_front_left_tire
style:
transform: translate(-50%, -50%) scale(0.7, 0.7)
color: white
left: 35%
top: 91%
type: state-icon
- entity: binary_sensor.bl_74569_rear_left_tire
style:
transform: translate(-50%, -50%) scale(0.8, 0.8)
color: lightgrey
left: 79%
top: 91%
type: state-icon
- entity: binary_sensor.bl_74569_front_right_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 58%
top: 52%
type: state-icon
- entity: binary_sensor.bl_74569_rear_right_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 68%
top: 52%
type: state-icon
- entity: binary_sensor.bl_74569_front_left_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 58%
top: 84%
type: state-icon
- entity: binary_sensor.bl_74569_rear_left_door
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 68%
top: 84%
type: state-icon
- entity: binary_sensor.bl_74569_tailgate
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 90%
top: 69%
type: state-icon
- entity: binary_sensor.bl_74569_front_right_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 53%
top: 44%
type: state-icon
- entity: binary_sensor.bl_74569_rear_right_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 70%
top: 44%
type: state-icon
- entity: binary_sensor.bl_74569_front_left_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 53%
top: 93%
type: state-icon
- entity: binary_sensor.bl_74569_rear_left_window
style:
'--paper-item-icon-color': white
transform: translate(-50%, -50%) scale(0.7, 0.7)
left: 70%
top: 93%
type: state-icon
- entity: binary_sensor.bl_74569_battery_charging
prefix: ''
style:
transform: translate(0%, -50%) scale(0.8, 0.8)
color: white
left: 5%
top: 44%
type: state-label
- entity: binary_sensor.bl_74569_engine
prefix: ''
style:
transform: translate(0%, -50%) scale(0.8, 0.8)
color: white
left: 6%
top: 56%
type: state-label
- entity: binary_sensor.bl_74569_windows
prefix: ''
style:
transform: translate(0%, -50%) scale(0.8, 0.8)
color: white
left: 4%
top: 69%
type: state-label
- entity: binary_sensor.bl_74569_door_lock
prefix: ''
style:
transform: translate(0%, -50%) scale(0.8, 0.8)
color: '#FFFFFF'
left: 6%
top: 82%
type: state-label
- entity: device_tracker.bl_74569_position
prefix: ''
style:
transform: translate(0%, -50%) scale(0.8, 0.8)
color: white
left: 5%
top: 95%
type: state-label
1 Like
The result looks like this:
Looks nice.
downloadet it - thanks
1 Like