iobroker.vis

<html> <head> <link rel="stylesheet" href="../../css/doc.css" /> <title>Dokumentation Widget-Set basic</title> </head> <body> <h3><a name="tplContainerView">container - view in widget</a></h3> 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. <h4>Attribute</h4> <dl> <dt>contains_view</dt> <dd>Name der View die im Container angezeigt werden soll.</dd> </dl> <hr/> <h3><a name="tplHtml">static - HTML</a></h3> Dieses Widget stellt beliebigen HTML-Code dar. Es ist auch möglich Javascript innerhalb des Widgets zu verwenden. <h4>Attribute</h4> <dl> <dt>html</dt> <dd>Selbsterklärend ;) ...hier den HTML-Code einfügen</dd> </dl> <hr/> <h3><a name="tplIFrame">static - iFrame</a></h3> Dieses Widget bindet ein iFrame ein <h4>Attribute</h4> <dl> <dt>src</dt> <dd>Die URL (src Attribut)</dd> <dt>refreshInterval</dt> <dd>iFrame in Intervall neuladen: Angabe in milli-sekunden</dd> </dl> <hr/> <h3><a name="tplImage">static - Image</a></h3> Dieses Widget stellt ein Bild dar. (HTML <img> Tag) <h4>Attribute</h4> <dl> <dt>src</dt> <dd>Die Bild-URL</dd> <dt>refreshInterval</dt> <dd>Bild in Intervall neuladen: Angabe in milli-sekunden</dd> </dl> <hr/> <h3><a name="tplLink">static - link</a></h3> Dieses Widget entspricht dem <a href="#tplHtml">Widget "static - HTML"</a> 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. <dl> <dt>html</dt> <dd>Selbsterklärend ;) ...hier den HTML-Code einfügen</dd> <dt>href</dt> <dd>Die Link-URL. Um einen Link auf eine andere View zu nutzen einfach den View-Namen mit vorangestelltem Hash-Symbol (#) eintragen</dd> <dt>target</dt> <dd>Das Ziel des Links. Leer lassen um im gleichen Browser-Fenster zu bleiben, möchte man ein neues Fenster öffnen _blank eintragen</dd> </dl> <hr/> <h3><a name="tplStatefulContainerView8">stateful/container - view in widget 8</a></h3> Zeigt eine von 8 Views in Abhängigkeit von einem Zustand an. <dl> <dt>persistent</dt> <dd>Views die einmal gerendert wurden nicht mehr aus dem DOM Entfernen</dd> </dl> <hr/> <h3><a name="tplStatefulIFrame8">stateful - iFrame 8</a></h3> Zeigt einen von 8 iFrames in Abhängigkeit von einem Zustand an. <hr/> <h3><a name="tplStatefulImage8">stateful - Image 8</a></h3> Zeigt eines von 8 Bildern in Abhängigkeit von einem Zustand an. <hr/> <h3><a name="tplHtmlNav">navigation - HTML</a></h3> Dieses Widget dient dazu eine Navigation zwischen den Views aufzubauen. Entspricht dem <a href="#tplLink">Widget "static - link"</a>, 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. <h4>Attribute</h4> <dl> <dt>html</dt> <dd>Selbsterklärend ;) ...hier den HTML-Code einfügen</dd> <dt>nav_view</dt> <dd>Hier muss der Name der View zu der navigiert werden soll eingetragen werden</dd> <dt>hide_effect</dt> <dd>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. <a href="http://jqueryui.com/effect/" target="_blank">Hier gibt es Demos der Effekte</a>. </dd> <dt>hide_duration</dt> <dd>Dauer des Effekts in ms</dd> <dt>show_effect</dt> <dd>siehe oben, das gleiche aber dieses mal für das einblenden der neuen View</dd> <dt>show_duration</dt> <dd>Siehe oben, Zeit in ms für das einblenden der neuen View</dd> </dl> <hr/> <h3><a name="tplValueFloat">hm_val - Number</a></h3> Dieses Widget stellt einen Zahlenwert dar (sowohl für Integer als auch Float verwendbar) <h4>Attribute</h4> <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Zahlenwert angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Zahlenwert angezeigt wird</dd> <dt>digits</dt> <dd>Anzahl der dargestellten Nachkommastellen</dd> <dt>factor</dt> <dd>Faktor mit dem der Zahlenwert multipliziert wird</dd> </dl> <h4>Beispiel</h4> <img src="/dashui/widgets/basic/doc_example_hm_val_number.png" /> <hr/> <h3><a name="tplValueString">hm_val - String</a></h3> Dieses Widget stellt einen Datenpunkt vom Typ Zeichenkette dar. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem String angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem String angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueStringRaw">hm_val - String (unescaped)</a></h3> Dieses Widget stellt einen Datenpunkt vom Typ Zeichenkette dar. Im Unterschied zum <a href="#tplValueString">Widget "hm_val - String"</a> werden dabei keine Sonderzeichen "escaped" - d.h. die Variable kann auch HTML-Code enthalten und dieser wird dann dargestellt. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem String angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem String angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueStringImg">hm_val - String img src</a></h3> Diesem Widget kann ein Variable vom Typ Zeichenkette zugeordnet werden, eine dort enthaltene URL wird dann als Bild dargestellt <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueList">hm_val - ValueList Text</a></h3> Dieses Widget stellt eine Variable vom Typ Werteliste dar. <dl> <dt>valuelist</dt> <dd>Eine Semikolon-getrennte Liste von Texten für die jeweiligen Werte.</dd> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueListHtml">hm_val - ValueList HTML</a></h3> Dieses Widget stellt eine Variable vom Typ Werteliste dar. Entspricht dem <a href="#tplValueList">Widget "hm_val - ValueList Text</a>, allerdings wird nicht "escaped", d.h. in valuelist kann HTML-Code eingetragen werden. <dl> <dt>valuelist</dt> <dd>Eine Semikolon-getrennte Liste von HTML-Code für die jeweiligen Werte.</dd> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueListHtml8">hm_val - ValueList HTML 8</a></h3> Dieses Widget stellt eine Variable vom Typ Werteliste dar. Entspricht dem <a href="#tplValueListHTML">Widget "hm_val - ValueList HTML</a>, bietet aber die Möglichkeit für 8 verschiedene Werte (0-7) auch 8 verschiedene CSS-Angaben zu verwenden. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> <dt>value0 bis value7</dt> <dd>Text oder HTML-Code für die Werte 0 bis 7</dd> <dt>style0 bis style7</dt> <dd>CSS-Angaben für die Werte 0 bis 7</dd> </dl> <hr/> <h3><a name="tplValueBool">hm_val - Bool HTML</a></h3> Dieses Widget stellt Bool-Werte dar. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> <dt>html_true</dt> <dd>Text oder HTML-Code der im True-Fall angezeigt wird</dd> <dt>html_false</dt> <dd>Text oder HTML-Code der im False-Fall angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueBoolCheckbox">hm_ctrl - Bool Checkbox</a></h3> Dieses Widget zeigt Bool-Werte als einfache Checkbox an und erlaubt außerdem den Wert zu umzuschalten. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor der Checkbox angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter der Checkbox angezeigt wird</dd> </dl> <hr/> <h3><a name="tplValueBoolSelect">hm_ctrl - Bool Select</a></h3> Dieses Widget stellt Bool-Werte als Dropdown dar und erlaubt außerdem den Wert umzuschalten. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> <dt>text_true</dt> <dd>Text für den True-Fall</dd> <dt>text_false</dt> <dd>Text für den False-Fall</dd> </dl> <hr/> <h3><a name="tplValueBoolCtrl">hm_ctrl - Bool HTML</a></h3> Dieses Widget stellt Bool-Werte dar und erlaubt außerdem den Wert auf Klick innerhalb der Widget-Fläche umzuschalten. <dl> <dt>html_prepend</dt> <dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd> <dt>html_append</dt> <dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd> <dt>html_true</dt> <dd>Text oder HTML-Code der im True-Fall angezeigt wird</dd> <dt>html_false</dt> <dd>Text oder HTML-Code der im False-Fall angezeigt wird</dd> </dl> <hr/> <h3><a name="tplBasicState">hm_ctrl - HTML State</a></h3> Dieses Widget setzt bei Klick innerhalb der Widget-Fläche einen Wert. <dl> <dt>html</dt> <dd>Text oder HTML-Code der angezeigt wird</dd> <dt>value</dt> <dd>Wert der gesetzt werden soll</dd> </dl> <hr/> <h3><a name="tplHide">hm_val - Hide on 0/false</a></h3> Dieses Widget verschwindet wenn der Wert des zugeordneten Datenpunkts 0 bzw false ist. Geschickt z.B. für die Anzeige von Servicemeldungen <hr/> <h3><a name="tplRedNumber">hm_val - Red Number</a></h3> Anzeige eines numerischen Werts im Stil der iOS Benachrichtigungs-Symbole. Verschwindet beim Wert 0. <hr/> <h3><a name="tplBulbOnOff">hm_val - Bulb on/off</a></h3> Dieses Widget stellt einen Wert als ausgeschaltete oder leuchtende Glühbirne auf schwarzem Hintergrund dar. Ist für Bool und Float-Werte (Dimmer) einsetzbar. <hr/> <h3><a name="tplBulbOnOffCtrl">hm_ctrl - Bulb on/off</a></h3> Dieses Widget stellt einen Wert als ausgeschaltete oder leuchtende Glühbirne auf schwarzem Hintergrund dar. Bei Klick auf das Widget wird der Wert umgeschaltet. <hr/> <h3><a name="tplHmWindowRotary">hm_val - Drehgriff</a></h3> Dieses Widget stellt eine Drehgriff-Sensor mit den originalen Homematic-Icons dar. <hr/> <h3><a name="tplHmWindow">hm_val - TFK</a></h3> Dieses Widget stellt einen Tür-/Fenster-Kontakt mit den originalen Homematic-Icons dar. <hr/> <h3><a name="tplValueFloatBar">hm_val - Bar Horizontal</a></h3> Dieses Widget stellt einen Wert von 0-100 als horizontalen Balken dar. <dl> <dt>factor</dt> <dd>Faktor mit dem der Wert multipliziert wird. Beispiel: für einen Dimmer (der von 0.00 bis 1.00 geht) muss 100 eingetragen werden.</dd> <dt>color</dt> <dd>CSS-Eigenschaft background-color des Balkens</dd> <dt>border</dt> <dd>CSS-Eigenschaft border des Balkens</dd> <dt>shadow</dt> <dd>CSS-Eigenschaft box-shadow des Balkens</dd> <dt>reverse</dt> <dd>Wenn hier true eingetragen wird wird der Balken von rechts nach links statt von links nach rechts angezeigt</dd> </dl> <hr/> <h3><a name="tplValueFloatBarVertical">hm_val - Bar Vertical</a></h3> Entspricht dem <a href="#tplValueFloatBar">Widget "hm_val - Bar Horizontal</a>, allerdings vertikal statt horiziontal. <dl> <dt>factor</dt> <dd>Faktor mit dem der Wert multipliziert wird. Beispiel: für einen Dimmer (der von 0.00 bis 1.00 geht) muss 100 eingetragen werden.</dd> <dt>color</dt> <dd>CSS-Eigenschaft background-color des Balkens</dd> <dt>border</dt> <dd>CSS-Eigenschaft border des Balkens</dd> <dt>shadow</dt> <dd>CSS-Eigenschaft box-shadow des Balkens</dd> <dt>reverse</dt> <dd>Wenn hier true eingetragen wird wird der Balken von unten nach oben statt von oben nach unten angezeigt</dd> </dl> <hr/> </body> </html>