Hey everyone,
i’m quite unsure if there is something like a “custom-widget-library” for openhab3. I did not find any.
Therefore i thought maybe we could share our widgets here.
I really enjoy the possiblity to write widgets with the new main ui.
So here we go: I needed a control for my heaters. I have 3 buttons controlling three HVAC-states of my KNX heating control. Additionally the widget presents current temperature, desired temperature and state of valve. Maybe its interesting for anyone? Hints, additions, extensions and co are very welcome.
Sample:
Code here:
uid: heizungsWidget
tags: []
props:
parameters:
- description: Raum der Heizung
label: Wohnraum
name: raum
required: true
type: TEXT
- context: item
description: Item der Heizung (HVAC)
label: HVAC Status
name: itemHvac
required: true
type: TEXT
- context: item
description: Item der Raumtemperatur
label: Raumtemperatur
name: itemRaumTemp
required: true
type: TEXT
- context: item
description: Item der Solltemperatur
label: Solltemperatur
name: itemSollTemp
required: true
type: TEXT
- context: item
description: Item des Ventilstatus
label: Ventilstatus
name: itemVentil
required: true
type: TEXT
parameterGroups: []
timestamp: Dec 22, 2020, 5:37:32 AM
component: f7-card
config:
title: ="Heizung " + props.raum
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- align-items-center
- display-flex
- justify-content-space-between
- align-content-stretch
slots:
default:
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemRaumTemp].displayState || items[props.itemRaumTemp].state)
style:
fontSize: 20px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: decrease_quotelevel
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemSollTemp].displayState || items[props.itemSollTemp].state)
style:
fontSize: 20px
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: f7-icon
config:
f7: gauge
size: 36
color: blue
class:
- margin-top
- component: Label
config:
text: =(items[props.itemVentil].state) + " %"
style:
fontSize: 20px
- component: f7-block
config:
class:
- segmented
slots:
default:
- component: oh-button
config:
active: =(items[props.itemHvac].state === "Comfort")
text: Komfort
action: command
actionItem: =(props.itemHvac)
actionCommand: Comfort
large: true
raised: true
class:
- margin
- component: oh-button
config:
active: =(items[props.itemHvac].state === "Standby")
text: Standby
action: command
actionItem: =(props.itemHvac)
actionCommand: Standby
large: true
raised: true
class:
- margin
- component: oh-button
config:
active: =(items[props.itemHvac].state === "Economy")
text: Nacht
action: command
actionItem: =(props.itemHvac)
actionCommand: Economy
large: true
raised: true
class:
- margin
The only thing i am missing with openhab3 is adding that widget automatically in my docker-environment like items, things and stuff defined in text-files. I miss that for pages too. Isn’t it possible to define that sources in text-files? Is the User-Interface the only way for configuring that? Or am i overseeing something? Maybe i could utilize the REST-API and a corresponding init-script but that somehow sounds like overkill for me
Kind regards
Matthew