Visualisierung

Jetzt noch eine Bedienoberfläche, damit wir unseren Temperaturwächter auch beobachten können. Siehe hierzu auch Kapitel 8.

Zuerst starten wir unseren Visualisierungs-Editor unter Übersicht und Visualisierung.

Wir legen einen neuen View an durch Klick auf das + Zeichen.

Noch einen aussagekräftigen Namen für den View vergeben und mit dem Häkchen bestätigen.

Nachdem wir uns auf unsere neue Registerkarte „Temp-Wächter“ begeben haben ziehen wir als erstes Symbole für die LED’s auf die Arbeitsfläche. Ich habe den Stern gewählt.

In die Objekt ID legen wir den Power Switch. Nach Klick auf das Symbol hinter Object ID öffnen sich die Objekte. Hier suchen wir unseren ESP8266-x und weiter den entsprechenden Power Switch und einfügen. Dann formatieren wir die Symbole nacheinander. Grün für die grüne und rot für die rote LED und wenn sie nicht leuchtet soll der Stern weiß bleiben. Demzufolge ist für jeden Stern die Füllfarbe bei Betrieb (true (grün oder rot)) und im jeweils ausgeschalteten Zustand (false (weiss)) zu konfigurieren. Die Einträge unter Edit Text ausbessern. Style = fill: Füllfarbe.

Als nächstes fügen wir zwei Wertefelder ein um uns die Temperatur und Luftfeuchtigkeit anzeigen zu lassen. Auch hier müssen wir als Object ID die DHT11_Temperature- bzw. DHT11_Humidity-Zeile unseres ESP8266-x wählen und bestätigen. Auch können wir angeben was vor und nach dem Wert stehen soll.

Auch können wir zwei Schalter für die Dioden einfügen. Die machen zwar bei unserem Projekt keinen Sinn, da die Leuchtdioden automatisch in Abhängigkeit von der Temperatur schalten sollen. Aber wenn wir den Skript anhalten und zu Lehrzwecken ist es ganz sinnvoll die Vorgehensweise zu zeigen. Der Eintrag für Falsch- und Wahrwert ist anzupassen. Und natürlich wie oben ist auch die Object ID anzupassen.

Steht nun der Skript aus dem vorhergehenden Kapitel, lassen sich die LED’s mit den Schaltern von Hand schalten.

Ist alles Formatiert, kann unter Übersicht und vis runtime (siehe oberstes Bild der Seite) unsere Seite angezeigt werden. Nach Auswahl von vis runtime die Adresszeile des Browsers wie folgt ausfüllen: 
http://192.168.178.27:8082/vis/index.html#Temp-W%C3%A4chter.

Um schnell zwischen meinen Views wechseln zu können, lege ich auf jedem View Navigations-Buttons an.

So sieht meine fertige Seite aus.

Im Kapitel 11 habe ich noch einmal ausführlich die Arbeitsweise des Flashens und die Verwaltung mit dem ioBroker beschrieben. Damit bin ich mit meinen Ausführungen diesbezüglich am Ende. Jeder sollte jetzt die prinzipielle Arbeitsweise kennen und sich selbst weiter helfen können.

Ab Kapitel 12 Kapitel werde ich lediglich noch Tipps und Hilfen für das Arbeiten mit der Home Automation geben und werden diese Zug um Zug erweitert.