Picture Element card - Sideways orientation
In my previous post, I described how to use picture elements to generate a view similar to the MercedesMe app (in an “upright” view), with the help of the images provided by Mercedes Benz.
Now to continue with a rotated, “sideview” version:
Let’s start with the
Requirements
The set-up of the sensors is the same as with the upright version, so start there.
The difference starts with the supplied images. The CSS of the picture elements card take care of rotating the images, except for the background image (XXXXXX_car.png), which needs to be rotated using your favourite image manipulation programme (GIMP comes to mind). I called the rotated image XXX_car_rotate.png in my case.
Also, only the window_right_*.png images are used for the states of the windows.
Picture Elements card
Just as before (replace all the 297100 in the filenames to your filenames of the downloaded zip from earlier, and XXX with your car name), except that now a rotate command is added (and some coordinates change).
type: picture-elements
image: local/eqs/297100_car_rotate.png
elements:
- type: image
entity: sensor.eqs_door_frontleft
state_image:
Open: local/eqs/297100_door_frontleft_open.png
Unlocked: local/eqs/297100_door_frontleft_unlock.png
Locked: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: image
entity: sensor.eqs_window_frontleft
state_image:
OpenDC: local/eqs/297100_window_frontleft_opendoorclosed.png
OpenDO: local/eqs/297100_window_frontleft_opendooropened.png
VentDC: local/eqs/297100_window_frontleft_ventilatedoorclosed.png
VentDO: local/eqs/297100_window_frontleft_ventilatedooropened.png
Closed: null
Moving: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: image
entity: sensor.eqs_door_frontright
state_image:
Open: local/eqs/297100_door_frontright_open.png
Unlocked: local/eqs/297100_door_frontright_unlock.png
Locked: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
- type: image
entity: sensor.eqs_window_frontright
state_image:
OpenDC: local/eqs/297100_window_frontright_opendoorclosed.png
OpenDO: local/eqs/297100_window_frontright_opendooropened.png
VentDC: local/eqs/297100_window_frontright_ventilatedoorclosed.png
VentDO: local/eqs/297100_window_frontright_ventilatedooropened.png
Closed: null
Moving: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: image
entity: sensor.eqs_door_rearleft
state_image:
Open: local/eqs/297100_door_rearleft_open.png
Unlocked: local/eqs/297100_door_rearleft_unlock.png
Locked: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
- type: image
entity: sensor.eqs_window_rearleft
state_image:
OpenDC: local/eqs/297100_window_rearleft_opendoorclosed.png
OpenDO: local/eqs/297100_window_rearleft_opendooropened.png
VentDC: local/eqs/297100_window_rearleft_ventilatedoorclosed.png
VentDO: local/eqs/297100_window_rearleft_ventilatedooropened.png
Closed: null
Moving: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: image
entity: sensor.eqs_door_rearright
state_image:
Open: local/eqs/297100_door_rearright_open.png
Unlocked: local/eqs/297100_door_rearright_unlock.png
Locked: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
- type: image
entity: sensor.eqs_window_rearright
state_image:
OpenDC: local/eqs/297100_window_rearright_opendoorclosed.png
OpenDO: local/eqs/297100_window_rearright_opendooropened.png
VentDC: local/eqs/297100_window_rearright_ventilatedoorclosed.png
VentDO: local/eqs/297100_window_rearright_ventilatedooropened.png
Closed: null
Moving: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: image
entity: sensor.eqs_sunroof
state_image:
open: local/eqs/297100_sunroof_open.png
vent: local/eqs/297100_sunroof_ventilate.png
closed: null
moving: local/eqs/297100_sunroof_open.png
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
- type: image
entity: sensor.eqs_trunk
state_image:
open: local/eqs/297100_trunk_open.png
unlocked: local/eqs/297100_trunk_unlock.png
closed: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
- type: image
entity: sensor.eqs_window_frontleft
title: Front Left
state_image:
OpenDC: local/eqs/window_right_open.png
OpenDO: local/eqs/window_right_open.png
VentDC: local/eqs/window_right_vent.png
VentDO: local/eqs/window_right_vent.png
Closed: local/eqs/window_right_closed.png
Moving: local/eqs/window_right_moving.png
style:
top: 24%
left: 56%
transform: translate(-50%,-50%)
tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
front_left: '0'
hold_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
front_left: '10'
double_tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
front_left: '100'
- type: image
entity: sensor.eqs_window_frontright
title: Front Right
state_image:
OpenDC: local/eqs/window_right_open.png
OpenDO: local/eqs/window_right_open.png
VentDC: local/eqs/window_right_vent.png
VentDO: local/eqs/window_right_vent.png
Closed: local/eqs/window_right_closed.png
Moving: local/eqs/window_right_moving.png
style:
top: 76%
left: 56%
transform: translate(-50%,-50%)
tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
front_right: '0'
hold_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
front_right: '10'
double_tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
front_right: '100'
- type: image
entity: sensor.eqs_window_rearleft
title: Rear Left
state_image:
OpenDC: local/eqs/window_right_open.png
OpenDO: local/eqs/window_right_open.png
VentDC: local/eqs/window_right_vent.png
VentDO: local/eqs/window_right_vent.png
Closed: local/eqs/window_right_closed.png
Moving: local/eqs/window_right_moving.png
style:
top: 24%
left: 39%
transform: translate(-50%,-50%)
tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
rear_left: '0'
hold_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
rear_left: '10'
double_tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
rear_left: '100'
- type: image
entity: sensor.eqs_window_rearright
title: Rear Right
state_image:
OpenDC: local/eqs/window_right_open.png
OpenDO: local/eqs/window_right_open.png
VentDC: local/eqs/window_right_vent.png
VentDO: local/eqs/window_right_vent.png
Closed: local/eqs/window_right_closed.png
Moving: local/eqs/window_right_moving.png
style:
top: 76%
left: 39%
transform: translate(-50%,-50%)
tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
rear_right: '0'
hold_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
rear_right: '10'
double_tap_action:
action: call-service
service: mbapi2020.windows_move
data:
vin: W1KXXXXXXXXXXXXXX
rear_right: '100'
- type: state-label
entity: sensor.XXX_tire_pressure_front_left
title: Front Left
style:
top: 34%
left: 77%
transform: translate(-50%,-100%)
- type: image
entity: sensor.eqs_tire_image_frontleft
state_image:
Warning: local/eqs/297100_tire_frontleft.png
OK: null
title: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: state-label
entity: sensor.XXX_tire_pressure_front_right
title: Front Right
style:
top: 66%
left: 77%
transform: translate(-50%,0%)
- type: image
entity: sensor.eqs_tire_image_frontright
state_image:
Warning: local/eqs/297100_tire_frontright.png
OK: null
title: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: state-label
entity: sensor.XXX_tire_pressure_rear_left
title: Rear Left
style:
top: 34%
left: 26%
transform: translate(-50%,-100%)
- type: image
entity: sensor.eqs_tire_image_rearleft
state_image:
Warning: local/eqs/297100_tire_rearleft.png
OK: null
title: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none
- type: state-label
entity: sensor.XXX_tire_pressure_rear_right
title: Rear Right
style:
top: 66%
left: 26%
transform: translate(-50%,0%)
- type: image
entity: sensor.eqs_tire_image_rearright
state_image:
Warning: local/eqs/297100_tire_rearright.png
OK: null
title: null
style:
top: 0%
left: 0%
transform: translate(0, 0) rotate(0.25turn)
tap_action:
action: none