smartVISU
01:40, 13.12, v2.7

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.) und erleichtern das Gestalten der Visu. 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.button - Button
  • basic.checkbox - Chekbox mit Text
  • basic.colordisc - erweiterte RGB-Steuerung
  • basic.dual - Button mit Stausanzeige
  • basic.flip - Flip-Schalter
  • basic.float - Wertanzeige
  • basic.formula - berechnet Formeln
  • basic.glue - Verbindungswidget
  • basic.rgb - einfache RGB Steuerung
  • basic.shifter - Schieberegler mit Wert
  • basic.shutter - Rollo/ Jalousiesteuerung
  • basic.slider - Schieberegler
  • basic.switch - Schalter
  • basic.symbol - Status über Symbol
  • basic.tank - Füllstandsanzeige
  • basic.text - Status als Text
  • basic.trigger - Triggert Logiken
  • basic.value - Wertanzeige

  • 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

  • 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.switch setzt sich wie folgt zusammen.
{{ basic.switch(id, gad, pic_on, pic_off, val_on, val_off) }}

Hierbei ist folgendes definiert:
  • basic.switch = 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)
  • gad = das Item was angesprochen werden soll
  • pic_on = Icon für Zustand 1/An
  • pic_off = Icon für Zustand 0/Aus
  • val_on = zu sendender Wert für Zustand 1/An
  • val_off = zu sendender Wert für Zustand 0/Aus
Bei "pic_on", "pic_off", "val_on" und "val_off" sind im dazugehörigen Code bereits standartmäßig Werte und Bilder hinterlegt. Diese sind im einzelnen:
pic_on = control_on_off.png
pic_off = control_on_off.png
val_on = 1
val_off = 0


Ein normaler "Schalter" für Spot 3 könnte dann wie folgt aussehen
{{ basic.switch('S1', 'EG.Wohnzimmer.Spot3schalten') }}

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.switch('S1', 'EG.Wohnzimmer.Spot3schalten', icon1~'light_light.png', icon0~'light_light.png') }}
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.switch('S1', 'EG.Wohnzimmer.Spot3schalten', icon1~'light_light.png', icon0~'light_light.png', 0, 1) }}
Das Ergebnis sieht somit wie folgt aus:


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