This widget was created for OH4 as a summary overview of my BEV car status, at the OH main web page. It’s in German, but should be easy to translate.
Data for the widget come from a Raspberry Pi which is running the jlr2mqtt library from https://github.com/smar000/jlr2mqtt. Actually, I used the latest fork (available from same page) because this includes an update in the JLR InControl protocol. The Raspberry Pi retreives car status data from JLR InControl server, and sends updates every 10 minutes to the OH instance via MQTT.
Beside battery charge status, odometer and washer fluid, this summary widget shows icon indicators for all tyres, windows, doors and alarm activation.
uid: autoSummary
tags:
- BEV
props:
parameters:
- context: item
description: Das Item für die Akkuladung
label: Battery Charge Item
name: itemBatteryCharge
required: true
type: TEXT
- context: item
description: Das Item für die Akkureichweite
label: Battery km Item
name: itemBatteryRange
required: true
type: TEXT
timestamp: May 4, 2024, 11:09:48 AM
component: f7-card
config:
class:
- no_padding
- no_margin
style:
-moz-user-select: none
-ms-user-select: none
-webkit-user-select: none
border-radius: 5px
height: 390px
overflow: hidden
position: absolute
user-select: none
width: 260px
slots:
default:
- component: f7-block
config:
style:
background: ='url(' + '/static/I-Pace-Top-White.png' + ')'
background-repeat: no-repeat
background-size: contain
height: 100%
left: 0px
margin-top: 230px
padding-top: 0px
position: absolute
top: 0px
width: 100%
- component: f7-block
config:
class:
- padding
style:
border-radius: 10px
margin: 0
slots:
default:
- component: f7-row
slots:
default:
- component: f7-card-content
config:
style:
width: 95%
border-radius: 5px
slots:
default:
- component: f7-block
config:
style:
margin: -4px
slots:
default:
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: battery_25
size: 32
class:
- align-self-center
style:
margin-left: -25px
margin-top: -20px
color: white
- component: Label
config:
text: Batterie
style:
font-size: 18px
font-weight: 500
margin-left: 10px
margin-top: -19px
color: white
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: =(Number.parseFloat(items[props.itemBatteryCharge].state.split(" ")[0]) * 100 / 100).toFixed(0) + ' %, ' + (Number.parseFloat(items[props.itemBatteryRange].state.split(" ")[0]) * 100 / 100).toFixed(0) + ' km'
style:
font-size: 24px
line-height: 1.1
font-weight: 350
margin-left: 17px
margin-top: 0px
color: '=(Number.parseFloat(items[props.itemBatteryCharge].state.split(" ")[0]) >= 75) ? "#0af00a" : "white"'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: speedometer
size: 32
class:
- align-self-center
style:
margin-left: -25px
margin-top: 10px
color: white
- component: Label
config:
text: Tachometer
style:
font-size: 18px
font-weight: 500
margin-left: 10px
margin-top: 11px
color: white
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: =items['JLR_Odometer_km'].state + ' km'
style:
font-size: 18px
line-height: 1.1
font-weight: 350
margin-left: 17px
margin-top: 0px
color: white
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: rays
size: 32
class:
- align-self-center
style:
margin-left: -25px
margin-top: 10px
color: white
- component: Label
config:
text: Wischwasser
style:
font-size: 18px
font-weight: 500
margin-left: 10px
margin-top: 11px
color: white
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: "=(items['Jaguar_JLR_Washer_Fluid_Warn'].state === 'NORMAL' ? 'Ausreichend' : '-')"
style:
font-size: 18px
line-height: 1.1
font-weight: 350
margin-left: 17px
margin-top: 0px
color: white
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
top: 237px
position: absolute
z-index: 90
slots:
default:
- component: oh-image
config:
style:
left: 45px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRTyreData_TyreStatusStatusFrontRight'].state === 'NORMAL') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png'"
- component: oh-image
config:
style:
left: 100px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRDoorData_DoorStatusFrontRightPosition'].state === 'CLOSED') ? ((items['JLR_Window_Data_JLR_Window_Front_Right_Status'].state === 'CLOSED') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png') : '/static/icons/caution_red.png'"
- component: oh-image
config:
style:
left: 150px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRDoorData_DoorStatusRearRightPosition'].state === 'CLOSED') ? ((items['JLR_Window_Data_JLR_Window_Rear_Right_Status'].state === 'CLOSED') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png') : '/static/icons/caution_red.png'"
- component: oh-image
config:
style:
left: 190px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRTyreData_TyreStatusStatusRearRight'].state === 'NORMAL') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png'"
- component: f7-col
config:
style:
top: 280px
position: absolute
z-index: 90
slots:
default:
- component: oh-image
config:
style:
left: 10px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRDoorData_DoorStatusEngineHoodPosition'].state === 'CLOSED') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png'"
- component: oh-image
config:
style:
left: 125px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['Jaguar_DoorStatusIsAllDoorsLocked'].state === 'TRUE') ? '/static/icons/locked.png' : '/static/icons/unlocked.png'"
- component: oh-image
config:
style:
left: 180px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['Jaguar_JLR_Theft_Alarm_Status'].state === 'ALARM_ARMED') ? '/static/icons/alarm_armed.png' : '/static/icons/alarm_disarmed.png'"
- component: oh-image
config:
style:
left: 222px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRDoorData_DoorStatusBootPosition'].state === 'CLOSED') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png'"
- component: f7-col
config:
style:
top: 325px
position: absolute
z-index: 90
slots:
default:
- component: oh-image
config:
style:
left: 45px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRTyreData_TyreStatusStatusFrontLeft'].state === 'NORMAL') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png'"
- component: oh-image
config:
style:
left: 100px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRDoorData_DoorStatusFrontLeftPosition'].state === 'CLOSED') ? ((items['JLR_Window_Data_JLR_Window_Front_Right_Status'].state === 'CLOSED') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png') : '/static/icons/caution_red.png'"
- component: oh-image
config:
style:
left: 150px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRDoorData_DoorStatusRearLeftPosition'].state === 'CLOSED') ? ((items['JLR_Window_Data_JLR_Window_Rear_Right_Status'].state === 'CLOSED') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png') : '/static/icons/caution_red.png'"
- component: oh-image
config:
style:
left: 190px
height: 24px
width: 24px
position: absolute
top: 0px
url: "=(items['JLRTyreData_TyreStatusStatusRearLeft'].state === 'NORMAL') ? '/static/icons/ok_sign.png' : '/static/icons/caution_yellow.png'"
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
left: 30px
position: absolute
top: 355px
width: 300px
z-index: 98
slots:
default:
- component: Label
config:
style:
font-size: 13px
font-weight: 500
margin-left: -5px
letter-spacing: .75px
position: relative
text: "='Aktualisiert: ' + items['Jaguar_JLRStatusDataTimestamp'].state"
Please note that I made only few items configurable, just to show how this works. Since I am monitoring only my car, all other items are hard coded. However, should be no problem to find and replace to other item names.
Following icons are used in the YAML:
And the car top view picture:
