Dokumentation Widget-Set basic

### container - view in widget

Dieses Widget kann Views innerhalb von Views darstellen. Sinnvoll z.B. für eine Navigation: Man baut eine View mit Navigations-Elementen auf und bindet diese dann in beliebig vielen anderen Views ein.

#### Attribute

contains_view
  Name der View die im Container angezeigt werden soll.

### static - HTML

Dieses Widget stellt beliebigen HTML-Code dar. Es ist auch möglich Javascript innerhalb des Widgets zu verwenden.

#### Attribute

html
  Selbsterklärend ;) ...hier den HTML-Code einfügen

### static - iFrame

Dieses Widget bindet ein iFrame ein

#### Attribute

src
  Die URL (src Attribut)
refreshInterval
  iFrame in Intervall neuladen: Angabe in milli-sekunden

### static - Image

Dieses Widget stellt ein Bild dar. (HTML <img> Tag)

#### Attribute

src
  Die Bild-URL
refreshInterval
  Bild in Intervall neuladen: Angabe in milli-sekunden

### static - link

Dieses Widget entspricht dem Widget "static - HTML" ist aber zusätzlich auf seiner ganzen Fläche ein klickbarer Link. Kann für die Navigation zwischen Views oder für externe Links genutzt werden.

html
  Selbsterklärend ;) ...hier den HTML-Code einfügen
href
  Die Link-URL. Um einen Link auf eine andere View zu nutzen einfach den View-Namen mit vorangestelltem Hash-Symbol (#) eintragen
target
  Das Ziel des Links. Leer lassen um im gleichen Browser-Fenster zu bleiben, möchte man ein neues Fenster öffnen _blank eintragen

### stateful/container - view in widget 8

Zeigt eine von 8 Views in Abhängigkeit von einem Zustand an.

persistent
  Views die einmal gerendert wurden nicht mehr aus dem DOM Entfernen

### stateful - iFrame 8

Zeigt einen von 8 iFrames in Abhängigkeit von einem Zustand an.

### stateful - Image 8

Zeigt eines von 8 Bildern in Abhängigkeit von einem Zustand an.

### navigation - HTML

Dieses Widget dient dazu eine Navigation zwischen den Views aufzubauen. Entspricht dem Widget "static - link", ist jedoch ausschließlich für die Navigation zwischen den Views nutzbar und bietet zusätzlich die Möglichkeit animierte Effekte beim Wechsel der Views zu verwenden.

#### Attribute

html
  Selbsterklärend ;) ...hier den HTML-Code einfügen
nav_view
  Hier muss der Name der View zu der navigiert werden soll eingetragen werden
hide_effect
  Hier kann der Name eines jQueryUI Effektes eingetragen werden der beim verlassen der View genutzt wird. Verfügbare Effekte sind: Blind, Bounce, Clip, Drop, Explode, Fade, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size, Slide und Transfer. Hier gibt es Demos der Effekte.
hide_duration
  Dauer des Effekts in ms
show_effect
  siehe oben, das gleiche aber dieses mal für das einblenden der neuen View
show_duration
  Siehe oben, Zeit in ms für das einblenden der neuen View

### hm_val - Number

Dieses Widget stellt einen Zahlenwert dar (sowohl für Integer als auch Float verwendbar)

#### Attribute

html_prepend
  Text oder HTML-Code der vor dem Zahlenwert angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Zahlenwert angezeigt wird
digits
  Anzahl der dargestellten Nachkommastellen
factor
  Faktor mit dem der Zahlenwert multipliziert wird

#### Beispiel

### hm_val - String

Dieses Widget stellt einen Datenpunkt vom Typ Zeichenkette dar.

html_prepend
  Text oder HTML-Code der vor dem String angezeigt wird
html_append
  Text oder HTML-Code der hinter dem String angezeigt wird

### hm_val - String (unescaped)

Dieses Widget stellt einen Datenpunkt vom Typ Zeichenkette dar. Im Unterschied zum Widget "hm_val - String" werden dabei keine Sonderzeichen "escaped" - d.h. die Variable kann auch HTML-Code enthalten und dieser wird dann dargestellt.

html_prepend
  Text oder HTML-Code der vor dem String angezeigt wird
html_append
  Text oder HTML-Code der hinter dem String angezeigt wird

### hm_val - String img src

Diesem Widget kann ein Variable vom Typ Zeichenkette zugeordnet werden, eine dort enthaltene URL wird dann als Bild dargestellt

html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird

### hm_val - ValueList Text

Dieses Widget stellt eine Variable vom Typ Werteliste dar.

valuelist
  Eine Semikolon-getrennte Liste von Texten für die jeweiligen Werte.
html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird

### hm_val - ValueList HTML

Dieses Widget stellt eine Variable vom Typ Werteliste dar. Entspricht dem Widget "hm_val - ValueList Text, allerdings wird nicht "escaped", d.h. in valuelist kann HTML-Code eingetragen werden.

valuelist
  Eine Semikolon-getrennte Liste von HTML-Code für die jeweiligen Werte.
html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird

### hm_val - ValueList HTML 8

Dieses Widget stellt eine Variable vom Typ Werteliste dar. Entspricht dem Widget "hm_val - ValueList HTML, bietet aber die Möglichkeit für 8 verschiedene Werte (0-7) auch 8 verschiedene CSS-Angaben zu verwenden.

html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird
value0 bis value7
  Text oder HTML-Code für die Werte 0 bis 7
style0 bis style7
  CSS-Angaben für die Werte 0 bis 7

### hm_val - Bool HTML

Dieses Widget stellt Bool-Werte dar.

html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird
html_true
  Text oder HTML-Code der im True-Fall angezeigt wird
html_false
  Text oder HTML-Code der im False-Fall angezeigt wird

### hm_ctrl - Bool Checkbox

Dieses Widget zeigt Bool-Werte als einfache Checkbox an und erlaubt außerdem den Wert zu umzuschalten.

html_prepend
  Text oder HTML-Code der vor der Checkbox angezeigt wird
html_append
  Text oder HTML-Code der hinter der Checkbox angezeigt wird

### hm_ctrl - Bool Select

Dieses Widget stellt Bool-Werte als Dropdown dar und erlaubt außerdem den Wert umzuschalten.

html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird
text_true
  Text für den True-Fall
text_false
  Text für den False-Fall

### hm_ctrl - Bool HTML

Dieses Widget stellt Bool-Werte dar und erlaubt außerdem den Wert auf Klick innerhalb der Widget-Fläche umzuschalten.

html_prepend
  Text oder HTML-Code der vor dem Bild angezeigt wird
html_append
  Text oder HTML-Code der hinter dem Bild angezeigt wird
html_true
  Text oder HTML-Code der im True-Fall angezeigt wird
html_false
  Text oder HTML-Code der im False-Fall angezeigt wird

### hm_ctrl - HTML State

Dieses Widget setzt bei Klick innerhalb der Widget-Fläche einen Wert.

html
  Text oder HTML-Code der angezeigt wird
value
  Wert der gesetzt werden soll

### hm_val - Hide on 0/false

Dieses Widget verschwindet wenn der Wert des zugeordneten Datenpunkts 0 bzw false ist. Geschickt z.B. für die Anzeige von Servicemeldungen

### hm_val - Red Number

Anzeige eines numerischen Werts im Stil der iOS Benachrichtigungs-Symbole. Verschwindet beim Wert 0.

### hm_val - Bulb on/off

Dieses Widget stellt einen Wert als ausgeschaltete oder leuchtende Glühbirne auf schwarzem Hintergrund dar. Ist für Bool und Float-Werte (Dimmer) einsetzbar.

### hm_ctrl - Bulb on/off

Dieses Widget stellt einen Wert als ausgeschaltete oder leuchtende Glühbirne auf schwarzem Hintergrund dar. Bei Klick auf das Widget wird der Wert umgeschaltet.

### hm_val - Drehgriff

Dieses Widget stellt eine Drehgriff-Sensor mit den originalen Homematic-Icons dar.

### hm_val - TFK

Dieses Widget stellt einen Tür-/Fenster-Kontakt mit den originalen Homematic-Icons dar.

### hm_val - Bar Horizontal

Dieses Widget stellt einen Wert von 0-100 als horizontalen Balken dar.

factor
  Faktor mit dem der Wert multipliziert wird. Beispiel: für einen Dimmer (der von 0.00 bis 1.00 geht) muss 100 eingetragen werden.
color
  CSS-Eigenschaft background-color des Balkens
border
  CSS-Eigenschaft border des Balkens
shadow
  CSS-Eigenschaft box-shadow des Balkens
reverse
  Wenn hier true eingetragen wird wird der Balken von rechts nach links statt von links nach rechts angezeigt

### hm_val - Bar Vertical

Entspricht dem Widget "hm_val - Bar Horizontal, allerdings vertikal statt horiziontal.

factor
  Faktor mit dem der Wert multipliziert wird. Beispiel: für einen Dimmer (der von 0.00 bis 1.00 geht) muss 100 eingetragen werden.
color
  CSS-Eigenschaft background-color des Balkens
border
  CSS-Eigenschaft border des Balkens
shadow
  CSS-Eigenschaft box-shadow des Balkens
reverse
  Wenn hier true eingetragen wird wird der Balken von unten nach oben statt von oben nach unten angezeigt