OH3-Beispiel: Auswahl-Schalter Widget
Verfasst: 21. Jan 2021 11:32
Hallo zusammen,
hier nochmal weiteres Beispiel, das die Möglichkeiten der neuen Main UI zeigt.
Hier geht es um ein Anzeige- und Bedienelement für die Betriebsart der Heizung, die drei verschiedene Modi (auto, an, aus).
Zunächst habe ich dafür ein einfaches Custom-Widget erstellt:
Dann habe ich auf der Page, auf der das Element angezeigt werden soll, ein List-Widget erzeugt, und darin ein Label List Item:
Ergebnis ist eine Element, das beim Anklicken ein Popup mit den entsprechenden Auswahlmöglichkeit öffnet und den Status anzeigt und dabei die Labelfarbe anpasst:
hier nochmal weiteres Beispiel, das die Möglichkeiten der neuen Main UI zeigt.
Hier geht es um ein Anzeige- und Bedienelement für die Betriebsart der Heizung, die drei verschiedene Modi (auto, an, aus).
Zunächst habe ich dafür ein einfaches Custom-Widget erstellt:
Code: Alles auswählen
uid: Heizungssteuerung Widget
props:
parameters:
- description: Der Titel der Betriebsart
label: Titel
name: title
required: true
type: TEXT
- context: item
description: Das Item für das die Betriebsart eingestellt wird
label: Betriebsart Item
name: item
required: true
type: TEXT
parameterGroups: []
timestamp: Jan 19, 2021, 4:31:12 PM
component: oh-list-card
config:
title: =props.title
slots:
default:
- component: oh-list-item
config:
title: auto
action: command
actionItem: =props.item
actionCommand: 1
icon: "=items[props.item].state === '1' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: "=items[props.item].state === '1' ? 'green' : 'gray'"
- component: oh-list-item
config:
title: aus
action: command
actionItem: =props.item
actionCommand: 2
icon: "=items[props.item].state === '2' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: "=items[props.item].state === '2' ? 'blue' : 'gray'"
- component: oh-list-item
config:
title: alles an
action: command
actionItem: =props.item
actionCommand: 3
icon: "=items[props.item].state === '3' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: "=items[props.item].state === '3' ? 'red' : 'gray'"
Code: Alles auswählen
component: oh-label-item
config:
item: ZENTRAL_Heizungseingriff
title: Heizungsbetrieb
action: popup
actionModal: widget:Heizungssteuerung Widget
actionModalConfig:
item: ZENTRAL_Heizungseingriff
icon: f7:gear
iconColor: "=(items.ZENTRAL_Heizungseingriff.state === '2') ? 'blue' : (items.ZENTRAL_Heizungseingriff.state === '3') ? 'red' : 'white'"