The ConnectedCar Dashboard Widget is part one of the widget series for the Connected Car binding. It can be used as a standalone widget or in combination with the ConnectedCarDetailsVied Widget. To keep configuration simple, the predefined channel names of the binding are used. You should create a car equipement under your model and add all (check advanced) channels as points with predefined names. All needed icons can be found under ressources and need to be copied to your openHAB 3 conf-folders icon directory : …/conf/icons/classic/*
Config
The widget takes four config params only:
| Parameter | Description | |
|---|---|---|
| propLabel | optional | A Label for the widget (e.g. My Car) |
| carGroup | mandatory | The equipement/group name of your car items |
| itemPrefix | mandatory | The Name of your car thing, which will be added with default channel names for items, separated by an underscor. |
| carModel | optional | Model of your car, defaults to generic |
| pictureUrl | optional | URL to your car picture if you don’t want to use pictures retreived by the binding |
Screenshots
If you can get the original icons from WeConnect App, your dashboard can look like the following example for a Tiguan.
Changelog
Version 0.2
- Adopted to new Iconify icon source.
- Reworked to show detailed door/window state.
Version 0.1
- initial release
Resources
uid: widget_ConnectedCarDashboard
tags: []
props:
parameters:
- description: ConnectedCarDashboard Widget V0.2
required: false
- context: item
description: Name of Car Group Item
label: Car Group (mandatory)
name: carGroup
required: true
type: TEXT
- description: Prefix for item names.
label: Item prefix (mandatory)
name: itemPrefix
required: true
type: TEXT
- defaultValue: generic
description: Car Model.
label: Car Model (optional, defaults to generic)
name: carModel
required: false
type: TEXT
- description: Picture
label: Picture URL (optional)
name: pictureUrl
required: false
type: TEXT
parameterGroups: []
timestamp: Sep 10, 2021, 12:19:44 PM
component: f7-card
config:
style:
background-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
class:
- padding: 0px
height: 100px
margin-left: 5px
margin-right: 5px
noShadow: false
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-block
slots:
default:
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_car"
style:
height: 120px
left: -5px
position: absolute
top: -42px
- component: oh-icon
config:
icon: '=(items[(props.itemPrefix + "_doors_FrontLeftDoor")].state === "OPEN") ? "car_" + props.carModel + "_door_ul_open" : "car_" + props.carModel + "_door_ul_closed" '
style:
height: 120px
left: -5px
position: absolute
top: -42px
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_window_ul_open"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=((items[(props.itemPrefix + "_windows_FrontLeftWindow")].state === "OPEN") && (items[(props.itemPrefix + "_doors_FrontLeftDoor")].state === "CLOSED")) ? "true" : "false"'
- component: oh-icon
config:
icon: '=(items[(props.itemPrefix + "_doors_RearLeftDoor")].state === "OPEN") ? "car_" + props.carModel + "_door_ll_open" : "car_" + props.carModel + "_door_ll_closed" '
style:
height: 120px
left: -5px
position: absolute
top: -42px
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_window_ll_open"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=((items[(props.itemPrefix + "_windows_RearLeftWindow")].state === "OPEN") && (items[(props.itemPrefix + "_doors_RearLeftDoor")].state === "CLOSED")) ? "true" : "false"'
- component: oh-icon
config:
icon: '=(items[(props.itemPrefix + "_doors_FrontRightDoor")].state === "OPEN") ? "car_" + props.carModel + "_door_ur_open" : "car_" + props.carModel + "_door_ur_closed" '
style:
height: 120px
left: -5px
position: absolute
top: -42px
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_window_ur_open"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=((items[(props.itemPrefix + "_windows_FrontRightWindow")].state === "OPEN") && (items[(props.itemPrefix + "_doors_FrontRightDoor")].state === "CLOSED")) ? "true" : "false"'
- component: oh-icon
config:
icon: '=(items[(props.itemPrefix + "_doors_RearRightDoor")].state === "OPEN") ? "car_" + props.carModel + "_door_lr_open" : "car_" + props.carModel + "_door_lr_closed" '
style:
height: 120px
left: -5px
position: absolute
top: -42px
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_window_lr_open"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=((items[(props.itemPrefix + "_windows_RearRightWindow")].state === "OPEN") && (items[(props.itemPrefix + "_doors_RearRightDoor")].state === "CLOSED")) ? "true" : "false"'
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_bonnet_open"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=(items[(props.itemPrefix + "_doors_Hood")].state === "CLOSED") ? "false" : "true"'
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_trunk_open"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=(items[(props.itemPrefix + "_doors_Trunk")].state === "CLOSED") ? "false" : "true"'
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_p_lights_left_on"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=(items[(props.itemPrefix + "_status_ParkingLight")].state === "OFF") ? "false" : "true"'
- component: oh-icon
config:
icon: ="car_" + props.carModel + "_p_lights_right_on"
style:
height: 120px
left: -5px
position: absolute
top: -42px
visible: '=(items[(props.itemPrefix + "_status_ParkingLight")].state === "OFF") ? "false" : "true"'
- component: f7-block
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 107px
position: absolute
top: -25px
visible: '=(Number.parseFloat(items[(props.itemPrefix + "_maintenance_DistanceInspection")].state) > 1000) ? "false" : "true"'
slots:
media:
- component: oh-icon
config:
color: orange
height: 15px
icon: iconify:mdi:car-info
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 127px
position: absolute
top: -25px
visible: '=(items[(props.itemPrefix + "_status_MaintenanceActionRequired")].state === "OFF") ? "false" : "true"'
slots:
media:
- component: oh-icon
config:
color: orange
height: 15px
icon: iconify:mdi:engine-off
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 107px
position: absolute
top: -5px
visible: '=(Number.parseFloat(items[(props.itemPrefix + "_maintenance_DistanceOilChange")].state) > 1000) ? "false" : "true"'
slots:
media:
- component: oh-icon
config:
color: orange
height: 15px
icon: iconify:mdi:oil-level
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 127px
position: absolute
top: -5px
visible: '=(items[(props.itemPrefix + "_status_AllTiresOK")].state === "ON") ? "false" : "true"'
slots:
media:
- component: oh-icon
config:
color: orange
height: 15px
icon: iconify:mdi:car-tire-alert
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 107px
position: absolute
top: 15px
slots:
media:
- component: oh-icon
config:
color: '=(items[(props.itemPrefix + "_status_VehicleLocked")].state === "ON") ? "lightgreen" : "red" '
height: 15px
icon: iconify:mdi:car-door-lock
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 127px
position: absolute
top: 15px
slots:
media:
- component: oh-icon
config:
color: '=(items[(props.itemPrefix + "_status_AllWindowsClosed")].state === "ON") ? "lightgreen" : "red" '
height: 15px
icon: iconify:mdi:car-door
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 87px
position: absolute
top: 35px
visible: '=(items[(props.itemPrefix + "_status_ParkingBrake")].state === "OFF") ? false : true '
slots:
media:
- component: oh-icon
config:
color: orange
height: 15px
icon: iconify:mdi:car-brake-parking
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 107px
position: absolute
top: 35px
slots:
media:
- component: oh-icon
config:
color: '=(items[(props.itemPrefix + "_range_TotalRange")].state.split(" ")[0] < "100") ? "red" : (items[(props.itemPrefix + "_range_TotalRange")].state.split(" ")[0] > "100") ? "green" : "orange" '
height: 15px
icon: material:local_gas_station
- component: f7-chip
config:
visible: '=(items[(props.itemPrefix + "_maintenance_DistanceAdBlue")].state.split(" ")[0] > "1000") ? "false" : "true" '
style:
--f7-chip-bg-color: "=themeOptions.dark === 'light' ? 'white' : 'black'"
left: 127px
position: absolute
top: 35px
slots:
media:
- component: oh-icon
config:
color: blue
height: 15px
icon: material:local_gas_station
- component: oh-link
config:
action: popup
actionModal: widget:widget_CarnetDetailsView
actionModalConfig:
carGroup: =props.carGroup
itemPrefix: =props.itemPrefix
pictureUrl: =props.pictureUrl
propLabel: =props.propLabel
class:
- card-prevent-open
style:
height: 150%
left: 0px
position: absolute
top: 0px
width: 100%
Icons