Grundlagen - Widgets

Was ist ein Widget?

Widgets könnte man "laienhaft" als vorgefertigte Bausteine mit oftmals zusätzlichen Einstellungsmöglichkeiten beschreiben. Es gibt verschiedene Widgets für die verschiedenen Anwendungen (Licht, Heizung, Rollo, Multimedia etc.), die das Gestalten der Visu erleichtern. In den Widgets werden u.a. die Items eingefügt.
Derzeit werden mit dem aktuellen Image über 40 Widgets mitgeliefert.Eigene Widgets können selber geschrieben werden. Alle Widgets sind im /pages/Docu in englischer Sprache dokumentiert.

Liste verfügbarer Widgets (hier klicken)

  • basic.checkbox - Chekbox mit Text
  • basic.color - erweiterte RGB-Steuerung
  • basic.flip - Flip-Schalter
  • basic.glue - Verbindungswidget
  • basic.icon - Stellt Icons dar
  • basic.input - Eingabe von Texten, Zahlen und Datumseinstellungen
  • basic.offset - Einstellen von Offsetwerten
  • basic.print - Ausgabe von Texten, Zahlenwerten, Formeln etc.
  • basic.shifter - Schieberegler mit Wert
  • basic.shutter - Rollo/ Jalousiesteuerung
  • basic.slider - Schieberegler
  • basic.stateswitch - Schalter mit Mehrfachfunktionen
  • basic.symbol - Status über Symbol
  • basic.tank - Füllstandsanzeige
  • basic.trigger - Triggert Logiken

  • calendar.list - Kalendeliste
  • clock.digiclock - Uhr (mit Symbol)
  • clock.iconclock - kleine Iconuhr
  • clock.miniclock - Uhr

  • device.blind - Rollo/ Jalousiesteuerung
  • device.dimmer - Dimmer
  • device.rtr - Temperaturregler
  • device.shutter - Jalousiesteuerung
  • device.smallshut - Mehrere Jalousiesteuerungen in Tabellenform
  • device.uzsuicon - Einstellen der universellen Zeitschaltuhr
  • device.uzsugraph - Grafisches Einstellen der universellen Zeitschaltuhr

  • multimedia.image - Bilder, Cams einbinden
  • multimedia.music - Musikplayer
  • multimedia.slideshow - Diashow
  • multimedia.station - Fernbedienungen

  • phone.list - Telefonliste
  • phone.missedlist - verpasste Anrufe

  • plot.comfortchart - Komfort-Diagramm
  • plot.period - Diagramm
  • plot.rtr plot.temprose - Temperatur-Diagramm

  • status.log - Status loggen
  • status.notify - Meldungen (Warnung, Hinweis, Fehler)

  • weather.current - Wetter
  • weather.forecast - Wettervorschau
  • weather.forecastweek - Wettervorschau Woche
  • weather.map - Wetterkarte
  • weather.mapslides - Wetterkarte Diashow


Ein Widget besteht aus dem Namen des Widgets (Funktion), einer eindeutigen ID, dem Item und meist zusätzlichen Einstellungsparametern.
Ein Beispiel:
Das Widget basic.stateswitch setzt sich wie folgt zusammen.
{{ basic.stateswitch(id, item, style, [val_on, val_off], [pic_on, pic_off], ...) }}

Hierbei ist folgendes definiert:
  • basic.stateswitch = Name des Widgets (Funktion)
  • id = ID des Widgets (Der Name der ID kann beliebieg vergeben werden, darf auf einer html-Seite aber nur einmalig vorhanden sein)
  • item = das Item,das angesprochen werden soll
  • style = die Darstellung des switches als Icon oder Button (micro, mini, midi)
  • val_on = zu sendender Wert für Zustand 1/An
  • val_off = zu sendender Wert für Zustand 0/Aus
  • pic_on = Icon für Zustand 1/An
  • pic_off = Icon für Zustand 0/Aus
Bei "style", "val_on", "val_off", "pic_on", "pic_off" sind im dazugehörigen Code bereits standartmäßig Werte und Bilder hinterlegt. Diese sind im einzelnen:
style = mini
pic_on = control_on_off.png
pic_off = control_on_off.png
val_on = 1
val_off = 0


Ein normaler "Schalter" für Das Deckenlicht könnte dann wie folgt aussehen
{{ basic.stateswitch('S1', 'EG.Wohnzimmer.Deckenlicht.schalten') }}

Somit haben wir einen "Schalter" auf der VISU der das vorher definierte Item Ein- und Ausschaltet.
Wollte man den "Schalter" nun etwas anpassen (z.B. ein anderes Icon für EIN und AUS), müßte man den Code etwas erweitern
{{ basic.stateswitch('S2', 'EG.Wohnzimmer.Deckenlicht.schalten', 'icon','',['light_light.svg', 'light_light.svg']) }}
Das Ergebnis sieht somit wie folgt aus:

Benötigt man einen negierten Schaltwert, gibt man diesen einfach über die val_on - und val_off -Attribute vor.
{{ basic.stateswitch('S3', 'EG.Wohnzimmer.Deckenlicht.schalten','micro',[0,1],['light_light.svg','light_light.svg']) }}
Das Ergebnis sieht somit wie folgt aus:


Im weiteren Verlauf dieser Anleitung wird näher auf einige grundlegende Widgets eingegangen.