Eine Bedienoberfläche Editieren und verwenden.

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

Als erstes melde ich mich wieder über Eingabe der IP-Adresse mit Port in die Adresszeile des Internetbrowser am ioBroker an.

Adapter inatallieren.

Als nächstes wird ein kleines Programm (Adapter) benötigt mit dem eine schöne Oberfläche und Elemente gestalltet werden kann.
Ich wähle hierzu unter Adapter den Adapter VIS (Visualisierung) aus und fügen Ihn den 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.

Ich merke mir wieder den 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 die 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 es kann weiter gemacht werden.

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

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

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

Schalter testen.

Zurück zum ioBroker, hier auf Übersicht und hier die Karte „vis runtime“ wählen.
Es öffnet sich der DemoView.
Um auf den von mir angelegten View zu gelangen, gebe ich oben in die Adresszeile statt DemoView meinen View ein. Am besten ihn als Lesezeichen zu hinterlegen um ihn schnell wieder aufrufen zu können oder den DemoView löschen, wodurch mein View an die erste Stelle rückt und nach Aufruf von „vis runtime“ erscheint.
Jetzt ist im Editor die erstellte Glühbirne zu sehen.
Durch Anklicken leuchtet diese und meine 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) meine 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.

Die Bedienseite kann durch weitere Widgets verschönert und ergänzt werden. z.B. durch einen anderen Hintergrund. Arbeitsfläche Anklicken und rechts Color auswählen.

Oder ein Texfeld ergänzen.

Ich kann auch z.B. die Leistung meiner Lampe auslesen fals der Client dies zulässt.

Oder den Messwert grafisch Darstellen.

Mit der neuen Oberfläche arbeiten.

Nachdem ich meine Seite gestalltet habe, wechsele ichwieder zu meinem ioBroker unter Übersicht klicke ich auf die Karte „vis runtime“ und sehe mein 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 will ich meine 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.