ui

User-Interface

Das User-Interface ist ein Webinterface im Responsive Design (für Mobilgeräte optimiert), das unter der URL http://<IP-Adresse> aufgerufen wird. Statt der IP-Adresse des Gerätes kann auch dessen Hostname verwendet werden. Beispiel: http://dose54.example.com.

3.3 User-Interface
      - Aufbau
      - Authentifizierung
      - Dashboard
      - Configuration
      - Events

Aufbau

Das Webinterface besteht aus einer Kopfzeile, einer Navigationszeile, dem eigentlichen Inhalt, der Fußzeile und dem Logo.

Ein Klick auf den Knopf Info oder auf das Logo führen in dieses Wiki. Angemeldete Benutzer können mit dem Knopf Logout die aktuelle Sitzung unmittelbar beenden.

Über die Navigationsleiste kann zwischen den drei Seiten Dashboard, Configuration und Log umgeschaltet werden, die weiter unten beschrieben sind.

Das Webinterface zeigt in der Fußzeile den auf der Seite Configuration konfigurierten Gerätenamen, die MAC-Adresse des WLAN-Adapters des ESP8266, die Versionsbezeichnung des Device und die Firmware-Version des OmniESP-Frameworks an. Diese ist aus dem Namen des Branchs, dem jüngsten Tag, der Anzahl der Commits seit dem jüngsten Tag und dem Digest des Commits der Firmware aufgebaut, aus der OmniESP gebaut wurde. Das Webinterface zeigt im Titel der Webseite auch den konfigurierten Gerätenamen an.

TOP

Authentifizierung

Gelangt der Anwender zum ersten Mal auf das Webinterface, so muss er sich anmelden. In der Maske

gibt der Anwender bei Username den Benutzernamen und bei Password das Kennwort ein, welches er auf der Seite Configuration hinterlegt hat. Es gibt nur einen Benutzer pro Gerät, der aber beliebig benannt sein kann. Die vorbelegten Anmeldedaten sind admin und admin für Benutzername und Kennwort.

Die Sicherheit von OmniESP ist bescheiden:

Die Übertragung findet unverschlüsselt per HTTP statt per HTTPS statt.
Die Websocketverbindung lässt sich ohne Authentifizierung aufbauen.
Eine Härtung oder Sicherheitstest haben nicht stattgefunden.
Kennwörter werden im Klartext im Gerät gespeichert.

Es verbietet sich also von selbst, sicherheitskritische Infrastrukturen mit OmniESP zu steuern oder wertvolle Kennwörter zu verwenden. Wer höhere Sicherheit braucht, deaktiviert das Webinterface im Programmkode.

Erfolgt einige Minuten lang keine Interaktion des Anwenders mit dem Webinterface, so wird er automatisch ausgeloggt.

Die Session-ID wird in einem Cookie im Browser gespeichert.

TOP

Dashboard

Die Seite Dashboard besteht aus einer Maske für API-Kommandos und dem eigentlichen Dashboard.

Die Maske für API-Kommandos besteht aus einem Eingabefeld und dem Ergebnisfeld:

Es wird ein Topic im Eingabefeld hinter API Call eingegeben und dann die Eingabetaste betätigt, um es ans Gerät zu senden. Der Rückgabewert wird in dem darunter liegenden Textfeld ausgegeben. Meist sind es die Werte ok oder no such topic.

Auf get-Befehle wird entweder mit einem Event reagiert, welches in der Seite Log ausgegeben wird und eine Veränderung im Dashboard erzeugt (z.B. Aktualisierung des Zustands einer Anzeige), oder es wird ein tatsächlicher Rückgabewert angezeigt, wie z.B. auf ~/get/wifi/scanResult, nachdem vorher ein ~/set/wifi/scan abgesetzt wurde.

Das eigentliche Dashboard wird vom Geräteentwickler definiert:

Das Dashboard enthält eine Reihe von Widgets, die sich abhängig von empfangenen Events aktualisieren oder get- und set-Befehle auslösen können.

TOP

Configuration

OmniESP wird in der Seite Configuration konfiguriert, wobei die einzelnen Konfigurationsmöglichkeiten in den zu Beginn eingeklappten Rubriken stehen.

Damit Änderungen wirksam werden, müssen diese mit dem Knopf Apply am unteren Ende der Maske bestätigt werden. Das schreibt die neue Konfiguration in den Flash-Speicher.

Die neue Konfiguration wird aber erst beim nächsten Start des Geräts verwendet. Dieser kann durch Klick auf den Knopf Reboot in der Rubrik Device herbeigeführt werden.

Device

Einstellung	Bedeutung
`Name`	Name des Geräts, u.a. für MQTT und API
`Username`	Name des Benutzers des Gerät, üblicherweise admin
`Password`	Kennwort des Benutzers, im Auslieferungszustand admin

Mit dem Knopf Reboot wird das Gerät neu gestartet, was eine Initialisierung mit den geänderten Werten bewirkt.

OTA Update

Das OTA-Update (over-the-air) dient dazu, eine neue Version der Gerätesoftware auf das Gerät aufzubringen, ohne es mit einem Programmieradapter physisch anfassen zu müssen.

Local Update

Mit Durchsuchen wird ein Tarball auf dem lokalen Rechner ausgewählt. Dieser heißt beispielsweise SimpleSwitch-master-alpha_V2-127-g53fa26d.tar und befindet sich in src/update oder in _customDevices/<device>/firmware.

Durch Klick auf den Knopf Update wird das Update gestartet. Dieses läuft in den folgenden Schritten ab:

Der Tarball wird auf das Gerät hochgeladen.
Der Tarball wird ausgepackt. Dabei werden die Dateien für das Webinterface entpackt und die Firmware an den oberen Rand des Programmspeichers geschrieben.
Das Gerät wird neu gebootet und die Firmware an den Anfang des Programmspeichers kopiert und gestartet.

OTA-Updates funktionieren nicht, wenn der Device-Entwickler dieses ausgeschlossen hat. Dies ist in der Regel der Fall für Chips, die weniger als 2 MB Flash-Speicher beinhalten.

Remote Update

Diese Funktion ist noch nicht implementiert.

Unter URL wird die URL eines Tarballs angegeben. Das kann z.B. ein Verweis auf eine Firmware auf https://github.com/Pfannex/OmniESP sein. In der Einstellung Auto wird alle 24 Stunden geprüft, ob unter der URL eine andere Gerätesoftware liegt als diejenige, die gerade ausgeführt wird (noch zu definieren, wie das erkannt wird).

Wird im Automatik-Modus eine neue Gerätesoftware erkannt oder wenn der Update-Knopf betätigt wird, wird ein Tarball auf das Gerät heruntergeladen. Der restliche Vorgang folgt dem Ablauf wie bei einem lokalen Update.

Access Point

OmniESP kann einen WLAN-Access-Point aufspannen. Wenn sich der Anwender mit dem Access-Point verbunden hat, kann er das Gerät unter der IP-Adresse 192.168.4.1 erreichen.

Einstellung	Bedeutung
`Off` `Auto` `On`	Gibt an, ob der Access-Point aus ist, automatisch aktiviert wird, oder an ist.
`SSID`	SSID des WLAN-Netzwerks, dass der Access-Point aufspannt.
`Password`	Kennwort, um sich mit dem WLAN-Netzwerk zu verbinden, dass der Access-Point aufspannt.

Im Automatik-Modus schaltet das Gerät automatisch den Access-Point ein, wenn kein WLAN konfiguriert ist oder wenn die Verbindung zum WLAN verloren gegangen ist. Wenn die Verbindung zum WLAN verloren gegangen ist, nachdem schon ein WLAN konfiguriert wurde, fällt das Gerät nach einer gewissen Zeit wieder in den Station-Mode zurück und prüft, ob es sich wieder mit dem konfigurierten WLAN verbinden kann, es sei denn, dass man gerade mit dem Access-Point verbunden ist. Einige Geräte signalisieren dies durch ein Blinken der LED (SWA1 und SimpleSwitch: schnelles Blinken, wenn Access-Point an ist, langsames Blinken, wenn sich ein jemand mit diesem verbunden hat).

Die Erstkonfiguration kann so bequem von einem Smartphone oder Tablet aus erfolgen.

WiFi

Einstellung	Bedeutung
`Off` `DHCP` `Manual`	WLAN ausschalten, per DHCP konfiguriert, oder manuell mit statischen Adressdaten konfiguriert
`SSID`	SSID des WLAN-Netzwerks, mit dem sich das Gerät verbinden soll
`Password`	Kennwort, um sich mit diesem WLAN-Netzwerk zu verbinden
`IP Address`	IP-Adresse des WLAN-Adapters des ESP8266
`Netmask`	Netzmaske
`Gateway`	Gateway für die Verbindung ins Internet
`DNS Server`	DNS-Server zur Auflösung der Hostnamen in den weiteren Rubriken

LAN

Diese Funktion ist noch nicht implementiert.

Einstellung	Bedeutung
`Off` `DHCP` `Manual`	LAN ausschalten, per DHCP konfiguriert, oder manuell mit statischen Adressdaten konfiguriert
`IP Address`	IP-Adresse des LAN-Adapters des Geräts
`Netmask`	Netzmaske
`Gateway`	Gateway für die Verbindung ins Internet
`DNS Server`	DNS-Server zur Auflösung der Hostnamen in den weiteren Rubriken

Network Time

Einstellung	Bedeutung
`Off` `On`	NTP-Client zum Bezug der Netzwerkzeit aus- oder einschalten
`NTP Server IP Address`	IP-Adresse oder Hostname des NTP-Servers

Mit dem Knopf Set time kann die Zeit sofort aktualisiert werden.

Wenn keine Netzwerkzeit verwendet wird, läuft die innere Uhr des Geräts beim Neustart ab dem Zeitpunkt 01.01.1970 00:00:00 los.

Die Zeitzone ist auf Mitteleuropäische Zeit fest eingestellt. Die Umschaltung zwischen Sommerzeit und Winterzeit wird automatisch berücksichtigt.

FTP Server

Einstellung	Bedeutung
`Off` `On`	FTP-Server aus- oder einschalten

Die Anmeldedaten für den FTP-Server sind dieselben wie für das Webinterface und werden im Abschnitt Device angegeben. Der FTP-Server funktioniert nur im Passive-Modus, so dass unmittelbar nach der Anmeldung der FTP-Client mit PASV in den Passive-Modus geschaltet werden muss.

Man kann über den FTP-Server Dateien auf dem Flash-Filesystem des Geräts lesen und schreiben. Es gibt auf dem Flash-Filesystem keine Ordner. Die Schrägstriche / in Dateilistings sind also als Teil des Dateinamens zu lesen!

MQTT

Einstellung	Bedeutung
`Off` `On`	MQTT-Client aus- oder einschalten
Broker IP Address	IP-Adresse oder Hostname des MQTT-Brokers
Broker Port	Port, auf dem der MQTT-Broker lauscht
Username	Benutzername zur Anmeldung beim MQTT-Broker, kann leer sein
Password	Kennwort zur Anmeldung beim MQTT-Broker, kann leer sein
Aliases	Aliasnamen für das Gerät, durch Kommas oder Leerzeichen getrennt

Das Gerät hört per MQTT zunächst nur auf seinen Namen, wie er im Abschnitt Device angegeben ist. Beispielsweise hört ein Gerät namens flora2 auf das Topic flora2/get/device/temperature. Möchte man mehrere Geräte mit einem Befehl schalten, kann man diese über Aliase in eine Gruppe packen, da das Gerät zusätzlich auf alle Namen hört, die als Aliase angegeben sind. So kann z.B. ein smarter Schalter namens Tischlampe die Aliase Schalter und Wohnzimmer erhalten und reagiert damit nicht nur auf Tischlampe/set/device/power off sondern auch auf Schalter/set/device/power off und Wohnzimmer/set/device/power off.

TOP

Events

Vom Framework erzeugte Events werden ins Webinterface propagiert. Im folgenden steht wieder die Tilde ~ als Vertreter für den Namen des jeweiligen Geräts, dessen Webinterface der Anwender gerade vor sich hat.

Nachdem sich der Anwender am Webinterface angemeldet hat, baut dieses eine Websocket-Verbindung zum Gerät auf und lauscht auf dieser Websocketverbindung auf Events und auf Logeinträge. Die empfangenen Rohdaten werden auf der Seite Log dargestellt. Logeinträge landen im Fenster Device log:

Events landen im Fenster Events:

Beide Fenster scrollen automatisch. Es werden nur die letzten 100 Einträge angezeigt. Scrollt man zurück, hält das scrollen an, bis man wieder ganz zum Ende gescrollt hat.

Die Events werden ferner dekodiert und hierarchisch nach den einzelnen Items im Topic gruppiert im Abschnitt Readings dargestellt. Ein Eintrag besteht aus einer Zeile mit der Ankunftszeit im Webinterface, dem Item und dem Argument. Zeilen, die sich geändert haben, werden für ca. 2 Sekunden rot markiert:

In der Abbildung ist beispielsweise zu erkennen, dass das Event ~/event/clock/time 22.09.2018 18:40:15 gerade eingetroffen ist. Um 17:16:35 wurde der Taster kurz gedrückt, was das Event ~/event/device/button/click short auslöste.

Jede empfangene Event wird ferner vom Dashboard gerätespezifisch ausgewertet und setzen dort die Widgets, welche vom Geräte-Entwickler so konfiguriert wurden, auf das jeweilige Event zu reagieren.

TOP