Eine Bedienoberfläche Editieren und verwenden.

In diesem Kapitel geht es darum unseren Schaltvorgang aus dem vorherigen Kapitel etwas ansprechender und für jeden der berechtigt ist bedienbar zu machen. Also legen wir los.

Als erstes melden wir uns wieder über Eingabe der IP-Adresse mit Port in die Adresszeile des Internetbrowser bei unserem ioBroker an.

Adapter inatallieren.

Als nächstes benötigen wir ein kleines Programm (Adapter) mit dem wir eine schöne Oberfläche und Elemente gestallten können.
Wir wählen hierzu unter Adapter den Adapter VIS (Visualisierung) aus und fügen Ihn unseren Instanzen zu.
Da es sich hier um einen etwas größeren Adapter handelt, kann es etwas länger dauern bis dieser down geladen und installiert ist.

Wir merken uns wieder unseren Port und SCHLIESSEN.
Unter Übersicht sind nun zwei neue Karten erstellt.

VIS registrieren.
Nach klicken auf die Karte Visualisierung öffnet sich die DemoView Registerkarte.

VIS ist noch nicht lizenziert
Zunächst registrieren und Key dann unter Lizenz Key hineinkopieren.

Oben links blinkt die Versionsnummer mit dem Hinweis: „Lizenzfehler“.
Unter Instanzen ist unsere vis-Instanz zu finden.
Durch Klick auf den Schraubenschlüssel öffnet sich die Adapterkonfiguration mit dem Hinweis, dass ein License Key benötigt wird.
Man kann einen Lizenz Key auf iobroker.net durch registrierung erhalten, den man sich Kopiert und oben einfügt.
Ich habe bereits einen Lizenz Key, den ich mir gespeichert habe (bzw. ist er auch unter meinem Account bei https://iobroker.net/ hinterlegt) und füge diesen oben ein.
Und weiter mit SPEICHERN UND SCHLIESSEN.

Schalter editieren.
Nach erneutem öffnen des Visualisierungs Editors ist die Version nun schwarz hinterlegt und wir können weitermachen.

Wir wählen Register VIEW und hier das + Zeichen.
Nun geben wir einen belibigen Namen ein und bestätigen mit dem Häckchen.
Schon ist eine neue Registerkarte mit unserem Namen erstellt.
Durch Klick auf das Registersymbol links neben der DemoView-Karte öffnet sich ein DropDown Menue und zeigt alle Views.

Unter Widgets (links) suchen wir uns ein Schalter-Widget oder klicken links oben bei dem Sternchen auf das DropDown Menue und wählen „control“.
Jetzt werden uns alle Controll-Elemente angezeigt.
Mit der Maus ziehen wir nun das Widget Bulb on/off in die leere Arbeitsfläche und passen die Größe an.
Durch markieren des Widgets öffnet sich rechts ein Bearbeitungsmenue.
Hier wählen wir unter Object ID: den kleinen grauen Button und unsere Instanzen öffnen sich.

Unter Sonoff – Lampe – Info – Power finden wir unseren Schalter (swith). Die Zeile markieren wir und bestätigen mit Auswählen. Im darauf folgenden Fenster wählen wir unsere Lampe und hier unter POWER den Schalter (switch) aus. Noch mit „ok“ bestätigen.

Schalter testen.

Wir gehen zurück zu unserem ioBroker auf Übersicht und wählen hier die Karte „vis runtime“.
Es öffnet sich unser DemoView.
Um auf unseren View zu gelangen, geben wir oben in die Adresszeile statt DemoView unseren View ein. Am besten wir hinterlegen ihn als Lesezeichen um ihn schnell wieder aufrufen zu können oder wir löschen den DemoView, wodurch unser View an die erste Stelle rückt und nach Aufruf von „vis runtime“ erscheint.
Jetzt sehen wir die im Editor erstellte Glühbirne.
Durch Anklicken leuchtet diese und unsere Lampe geht an.

Nun kann von jedem Rechner, Pad oder Handy im eigenen Netz, durch Eingabe der VIS-Adresse im Internetbrowser (z.B. http://192.168.178.27:8082/vis/edit.html#Meine_Schalter) unser Lampe geschaltet werden.
Will man dies aus der Ferne tun, ist ein VPN-Tunnel erforderlich.
Dieser kann, wenn man über eine Fritzbox verfügt, über diese registriet und kostenfrei genutzt werden.
Der VPN Zugang simuliert das externe Gerät zum internen Gerät.

Schaltfläche editieren.

Unsere Bedienseite können wir durch weitere Widgets verschönern und ergänzen. z.B. durch einen anderen Hintergrund. Arbeitsfläche Anklicken und rechts Color auswählen.

Oder durch ein Texfeld ergänzen.

Wir können auch z.B. die Leistung unserer Lampe auslesen fals der Client dies zulässt.

Oder den Messwert grafisch Darstellen.

Mit der neuen Oberfläche arbeiten.

Wenn wir unsere Seite gestalltet haben wechseln wir wieder zu unserem ioBroker unter Übersicht klicken wir auf die Karte „vis runtime“ und sehen unser frisch gestalltetes Werk. Nach klick auf die Lampe geht diese an und verzögert kommt auch das Messergebnis.

Damit dürfte das Grundprinzip des VIS-Editors vorgestellt sein. Nun geht es ans Forschen was alles möglich ist. Aber das überlasse ich jedem selbst. Es können auch weitere Adapter geladen werden um weitere Widgets für Schalter, Messwerke ect. zu erhalten.

Anmerkung:

Damit die Messwertanzeige nicht mehr so träge ist, kann im Client die Meldezeit (Telemetry) verkürzt werden. Dies benötigt allerdings eine höhere Rechenleistung und sollte daher nur bei den Clients erfolgen die entsprechende Anzeigen zur Verfügung stellen die auch genutzt werden.

Im nächsten Kapitel wollen wir unsere Lampe so einrichten, dass diese automatisch geschalten wird. Denn dies ist der Sinn einer Automatition. So soll sie beispielsweise bei Sonnenuntergang eingeschaltet und zu einer bestimmten Zeit ausgeschaltet werden.