smartVISU
21:06 v3.3.1

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.listview - Anzeige einer Liste
  • basic.offset - Einstellen von Offsetwerten
  • basic.print - Ausgabe von Texten, Zahlenwerten, Formeln etc.
  • basic.roundslider - Runder Schieberegler
  • basic.select - Auswahlmenü (Dropdown Menü oder Schalter)
  • 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
  • basic.window - Anzeige von Zuständen eines Fensters

  • calendar.list - Kalenderliste
  • calendar.waste - Müll-Kalender
  • clock.countdown - Anzeige eines Countdowns
  • clock.digiclock - Uhr (mit Symbol)
  • clock.iconclock - kleine Iconuhr
  • clock.miniclock - Uhr

  • device.blind - Rollo/ Jalousiesteuerung
  • device.codepad - schützt Widgets mit einem Zahlencode
  • device.dimmer - Dimmer
  • device.roofwindow - Anzeige von Zuständen und Bedienelementen eines Dachfensters
  • device.rtr - Temperaturregler
  • device.rtrslider - Temperaturregler mit rundem Schieberegler
  • device.shutter - Jalousiesteuerung
  • device.smallshut - Mehrere Jalousiesteuerungen in Tabellenform
  • device.uzsugraph - Grafisches Einstellen der universellen Zeitschaltuhr
  • device.uzsuicon - Einstellen der universellen Zeitschaltuhr
  • device.uzsutable - Tabellendarstellung für die universelle Zeitschaltuhr
  • device.window - Anzeige von Zuständen eines Fensters mit Rolladen

  • multimedia.audio - spielt ein Soundfile
  • multimedia.image - Bilder, Cams einbinden
  • multimedia.music - Musikplayer
  • multimedia.playpause - Schaltet bei Mediendateien zwischen Play und Pause um
  • multimedia.slideshow - Diashow
  • multimedia.station - Fernbedienungen
  • multimedia.timeslider - Anzeige / Einstellen der aktuellen Laufzeit einer Mediendatei

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

  • plot.comfortchart - Komfort-Diagramm
  • plot.gauge - Rundinstrument
  • plot.heatingcurve - Soll- und Ist-Temperatur auf der Heizkurve
  • plot.period - Diagramm
  • plot.pie - Kuchen-Diagramm
  • plot.rtr - Soll / Ist Temperaturdiagramm für einen Regler
  • plot.temprose - Darstellung mehrerer Temperaturen in einem Netz
  • plot.xyplot - Darstellung eines XY-Diagramms aus einem List-Item

  • status.activelist - Zeigt eine Liste mit erweiiterbaren Textfeldern
  • status.badge - Kleine Statusanzeige an einem Widget
  • status.collapse - blended definierte Bereiche einer Seite in Abhängigkeit eines items aus
  • status.log - Zeigt Log-Informationen des Backends an
  • status.message - Popup mit einer Nachricht
  • status.notify - Meldungen (Warnung, Hinweis, Fehler)
  • status.toast - Meldungen (Warnung, Hinweis, Fehler) in Form eines Toasts

  • 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 - meist optional (Der Name der ID kann beliebig 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 standardmäß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.