da es noch so wenig Beispiele für Widgets gibt, hier mein Thermostat-Widget.
Ich nutze vier Items:
- aktuelle Raumtemperatur (Number, in °C)
- Setpoint-Temperatur (Number, in °C)
- Status des Heizventils (Switch, ON/OFF)
- Betriebsart (String, 1=auto, 2=aus, 3=an)
So sieht das Widget aus: Folgende Funktionen:
- Klick auf die Raumtemperatur öffnet einen Analysegraphen
- Farbe des Thermometers neben der Termperatur zeigt an, ob gerade geheizt wird oder nicht.
- Klick auf "Betriebsart" öffnet ein Popup mit den drei möglichen Parametern
- Farbe des Zahnrads zeigt an, wenn gerade nicht "auto" eingestellt ist.
- Slider stellt den Setpoint ein.
Hier der passende Code für das Thermostat-Widget:
Code: Alles auswählen
uid: Raumthermostat Widget
tags: []
props:
parameters:
- description: Thermostat to control
label: Description
name: title
required: false
type: TEXT
- context: item
description: Das Item für die Betriebsart
label: Item Betriebsart
name: item_betriebsart
required: true
type: TEXT
- context: item
description: Das Item für die (gemessene) Ist-Temperatur
label: Ist-Temperatur
name: item_temp_av
required: true
type: TEXT
- context: item
description: Das Item für den Setpoint-Temperatur
label: Setpoint-Temperatur
name: item_temp_tar
required: true
type: TEXT
- context: item
description: Das Item Heizungsrelais
label: Heizungsrelais
name: item_hv_relais
required: true
type: TEXT
timestamp: Jan 27, 2021, 4:23:18 PM
component: f7-card
slots:
content:
- component: oh-label-card
config:
trendItem: =(props.item_temp_av)
trendLineColor: gray
action: analyzer
actionAnalyzerItems: =[props.item_temp_av, props.item_temp_tar, props.item_hv_relais]
item: =(props.item_temp_av)
title: =(props.title)
icon: f7:thermometer
iconColor: "=items[props.item_hv_relais].state === 'ON' ? 'red' : 'white'"
- component: oh-list-card
config: {}
slots:
default:
- component: oh-label-item
config:
item: =(props.item_betriebsart)
title: Betriebsart
action: popup
actionModal: widget:Heizungssteuerung Widget
actionModalConfig:
item: =(props.item_betriebsart)
icon: f7:gear
iconColor: "=(items[props.item_betriebsart].state === '2') ? 'blue' : (items[props.item_betriebsart].state === '3') ? 'red' : 'white'"
- component: oh-slider-card
config:
item: =(props.item_temp_tar)
min: 15
scaleSteps: 5
max: 25
scale: true
step: 0.2
label: true
scaleSubSteps: 5
footer: =(items[props.item_temp_tar].state)
(Noch ein Hinweis: Wenn man das Widget auf einer Seite einbaut, muss man alle vier Items und den Titel auswählen. Bei zehn Räumen kann das lästig sein, daher lässt sich das auch schlauer aufbauen: Wer die vier Items immer nach der gleichen Syntax mit den gleichen Suffixen aufbaut (z.B. <Raumname>_Solltemperatur, <Raumname> _Isttemperatur, ...) kann die Eingabe auf ein einziges Item (Group-Item <Raumname>) reduzieren, wenn man den Code ein bisschen umschreibt. War mir aber zu aufwändig & zu unflexibel.)