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 was mir an der rot dargestellten Versionsnummer angezeigt wird.
Zunächst registrieren und unter Lizenz Key den erhaltenen 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 mir 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 – Lampe1 – Info – Power finde ich den Schalter (switch). Die Zeile markieren und bestätigen mit Auswählen. Das Fenster schliesst sich und der Power-Switch ist meinem Widget zugewiesen.

Schalter testen:

Zurück zum ioBroker, hier auf Übersicht und 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. Da es umständlich ist die IP-Adresse aufzurufen empfehle ich durch Löschen des DemoView nur noch den eigenen angelegten View zu haben, damit dieser nach Anklicken von vis runtime automatisch auf geht. In diesen View kann man auch weiter Elemente einrichten.

Tipp: Hat man später eine Vielzahl Steuerelementen, können diese auf mehrere View’s nach Rubriken verteilt werden. Z.B. Haus – Garten – Fernbedienung usw. Hat man also mehrere View’s macht es Sinn einen Auswahl View zu erstellen in dem man die einzelnen Views aufrufen kann. Da der Auswahl View mit A beginnt setzt er sich an die erste Stelle und kommt immer automatisch nach Aufruf „vis runtime“.

Zurück zum Thema. Will man nun die Lampe außerhalb des eigenen WLAN-Bereiches schalten, 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 gestaltet habe, wechsele ich wieder zu meinem ioBroker unter Übersicht klicke ich auf die Karte „vis- runtime“ und sehe mein frisch gestaltetes 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.

Die Änderung der Telemetry von 300 (5 Minuten) auf 10 (10 Sekunden = kleinster Wert) bewirkt, dass die oben beschriebene Messwertanzeige etwa 10 Sekunden nach dem Einschalten kommt. Zwischenzeitlich habe ich festgestellt, dass bei dieser Einstellung die Clients teilweise Probleme bekommen. Manche hängen sich da schon mal auf und müssen neu gestartet werden (vom Netz trennen und wieder einstecken). Eine Telemetry-Zeit von 30 (30 Sekunden) wirkt sich da wesentlich stabiler aus.

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.

Zum Seitenanfang