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
Hello, would you be so kind and share this lovelace code? Thank you!
Is anyone else experiencing this? Unfortunately, the service is no longer working for me in Home Assistant.
The API used for communication with your Volvo vehicle appears to be outdated. It may be running through a home automation system or a similar platform.
Unfortunately, this API is being discontinued. At Volvo Cars, we are actively working on developing a new API specifically designed for this purpose. Please visit our website for the latest updates on the upcoming API and its timeline.