Tutorial: Erste Schritte - eine Visu in einer halben Minute

In diesem Tutorial wird gezeigt wie innerhalb einer halben Minute bereits die erste (natürlich rudimentäre) Visu erstellt werden kann.

Wichtig

Dieses Tutorial wurde mit der Version 0.11 erstellt. Der Manager und Editor wurde für neuere Versionen grundlegend überarbeitet. Das hier gezeigte Vorgehen ist jedoch leicht übertragbar.

Video

Einzelschritte

Die im Video gezeigten Schritte werden hier noch einmal Stück für Stück aufgeführt. Es soll eine Beispiel-Visu für einen Heizungsregler im Wohnzimmer erstellt werden, für den gilt:

Wert

GA

Datentyp

Ist

4/0/30

DPT:9.001

Soll

3/3/30

DPT:9.001

Wichtig

Es ist ziemlich unwahrscheinlich, dass die eigene Installation die gleichen Adressen für diese Werte verwendet. Daher bitte prüfen und die Werte beim Nachstellen dieses Tutorials entsprechend anpassen!

Erste Visu - in unter einer halben Minute

Im Manager wird von der Default-Konfig „Editieren“ ausgewählt:

../_images/first_steps01.png

Über einen Links-Klick auf das „+“ vor pages werden die Kinder-Elemente eingeblendet:

../_images/first_steps02.png

Über einen Rechts-Klick auf page "Start"

../_images/first_steps03.png

… wird dort das Kontext-Menü angezeigt:

../_images/first_steps04.png

Dort wird über Links-Klick auf add child das Menü zum Einfügen eines Kind-Elementes aufgerufen.

In diesem Menü wird das info-Widget ausgewählt…

../_images/first_steps05.png

… und über „+“ wird das Info-Widget als Kind-Element der Seite (page) „Start“ hinzugefügt:

../_images/first_steps06.png

Über Links-Klick auf das „+“ vor info

../_images/first_steps07.png

… wird das Vor-Erzeugte address-Element angezeigt:

../_images/first_steps08.png

Dort wird die Adresse (GA) für die Ist-Temperatur (4/0/30) eingetragen…

../_images/first_steps09.png

… und mit Return bestätigt:

../_images/first_steps10.png

Wird nun mit links auf address geklickt…

../_images/first_steps11.png

… so erscheint rechts neben dem Elementen-Baum das Menü mit den Attributen für das address-Element:

../_images/first_steps12.png

Unter transform wird nun der Datentyp DPT:9.001 eingetragen:

../_images/first_steps13.png

Über „preview“ wird eine Vorschau des aktuellen Zustands der Konfig angezeigt:

../_images/first_steps14.png

Wie im Video gezeigt ist nun nach gerade einmal 23 Sekunden die erste (allerdings noch sehr rudimentäre) Visu entstanden.

Wenn die eigene Installation zu den oben angegebenen Beispiel-Adressen passen sollte, so wir bei dem Nachstellen dieses Tutorials auch eine Temperatur erscheinen:

../_images/first_steps15.png

Über einen weiteren Klick auf „preview“ kommt man wieder zurück zum Editor:

../_images/first_steps16.png

Verfeinerung

Um von einer blanken, nichtssagenden Zahl zu einer nutzbaren Visualisierung zu kommen, sollte diese noch etwas erweitert werden. Im ersten Schritt wird der Ausgabe-Wert so modifiziert, dass eine Nachkommastelle und die Einheit °C angezeigt wird.

Über Links-Klick auf info

../_images/first_steps17.png

… wird in das Attribut format

../_images/first_steps18.png

… der Wert %.1f °C eingetragen:

../_images/first_steps19.png

Für eine Beschreibung wird nun noch ein label hinzugefügt.

Rechts-Klick auf info und Links-Klick auf add child

../_images/first_steps20.png

… lässt ein label-Element hinzufügen:

../_images/first_steps21.png

Im Elemente-Baum unter dem label wird noch ein #text Element benötigt:

../_images/first_steps22.png

Dieses wird mit dem Label für das Info-Widget befüllt, in diesem Tutorial folglich mit „Wohnzimmertemperatur“:

../_images/first_steps23.png

Dem page "Start" wird nun für die Modifikation der Solltemperatur ein infotrigger-Widget hinzugefügt:

../_images/first_steps24.png

Dies bekommt die address mit dem Wert aus diesem Tutorial, der 3/3/30:

../_images/first_steps25.png

Dazu gehört das transform-Attribut DPT:9.001:

../_images/first_steps26.png

Die Attribute des infotrigger selbst werden befüllt mit:

Attribut

Wert

Bedeutung

upvalue

0.5

Temperaturänderung für Auf bzw. „wärmer“

downvalue

-0.5

Temperaturänderung für Ab bzw. „kälter“

uplabel

wärmer

Button-Beschriftung für Auf

downlabel

kälter

Button-Beschriftung für Ab

change

absolute

Direkte („absolute“) Änderung des Wertes

format

%.1f °C

Eine Nachkommastelle mit angehängtem „ °C“

../_images/first_steps27.png

Nun nur noch die Beschriftung bzw. das Label für das Widget:

../_images/first_steps28.png

Über save

../_images/first_steps29.png

… wird die Konfiguration gespeichert:

../_images/first_steps30.png

Zurück zum manager

../_images/first_steps31.png

… mit der Warnung, dass dadurch die letzten Änderungen verloren gehen. Dies ist jedoch hier nicht relevant, da die Änderungen ja gerade eben noch von uns gespeichert wurden:

../_images/first_steps32.png

Im Manager wird über „Öffnen“…

../_images/first_steps33.png

… nun die fertige Visualisierung im Browser geöffnet:

../_images/first_steps34.png