OH3-Beispiel: Auswahl-Schalter Widget

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
harteknut
Beiträge: 234
Registriert: 3. Dez 2019 08:21
Answers: 9

OH3-Beispiel: Auswahl-Schalter Widget

Beitrag von harteknut »

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:

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'"
Dann habe ich auf der Page, auf der das Element angezeigt werden soll, ein List-Widget erzeugt, und darin ein Label List Item:

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'"
Ergebnis ist eine Element, das beim Anklicken ein Popup mit den entsprechenden Auswahlmöglichkeit öffnet und den Status anzeigt und dabei die Labelfarbe anpasst:
1..jpg
2.jpg
3.jpg
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

kdb
Beiträge: 10
Registriert: 9. Jan 2024 18:00
Answers: 0

Re: OH3-Beispiel: Auswahl-Schalter Widget

Beitrag von kdb »

Hallo,
es ist zwar in der Art was ich suche, aber es passiert nicht.
Das Aussehen ist im Anhang gezeigt.
Erstellt unter openHAB 4 auf Raspberry
Was genau muss alles gemacht werden.
Vielen Dank
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Antworten