ESP32 Pico-Board und Node-RED GUI https://erik-bartmann.de/ ESP32 Addon ESP32 und Node-RED GUI Vers. 1.0 by Erik Bartmann, Juli 2018
ESP32 und Node-RED GUI D ieses ESP32-Addon erweitert quasi das vorhergehende, das sich mit der Einführung in Node-RED [2] befasste. Wir wollen jetzt die Funktionalität von Node-RED ein wenig erweitern und die Möglichkeit nutzen, eine grafische Benutzeroberfläche - ein User-Interface UI - über einen Web-Browser zur Verfügung zu stellen. Das ist mit der Installation einer Erweiterung von Node-RED möglich, die sich Dashboard nennt und einen sehr großen Funktionsumfang liefert. Detailinformationen sind natürlich in meinem Node-RED-Buch [3] zu finden. ESP32 und Node-RED GUI https://erik-bartmann.de/ Seite 2
Das Dashboard - Eine Node-RED Erweiterung W ollen wir zu Beginn das gerade angesprochene Dashboard installieren bzw. in unsere vorhandene Node-RED-Installation integrieren. Auf diesem Wege zeige ich auch eine Möglichkeit, Node-RED über eine Kommandozeile auf den neuesten Stand zu bringen. Hier noch einmal die Befehle, die zur Installation von Node-RED auf dem Raspberry Pi erforderlich sind. # sudo apt-get update # sudo apt-get upgrade # sudo apt-get install nodered Zur Aktualisierung der bestehenden Node-RED-Version sind die folgenden Zeilen notwendig, die wiederum in einem Terminal-Fenster abzusetzen sind. # bash <(curl -sl https://raw.githubusercontent.com/node-red/raspbian-debpackage/master/resources/update-nodejs-and-nodered) Die Installation dauert ca. 20-30 Minuten. Nach erfolgreichem Abschluss zeigen sich die folgenden Informationen im Terminal-Fenster, wobei die Version sich mittlerweile sicherlich geändert hat. Abbildung 1 Die Updatehinweise des Skriptes Auf der folgenden Abbildung sehen wir, wie der Raspberry Pi mit seinem Node-RED Server als zentrale Instanz arbeitet, um darüber die unterschiedlichsten Clients zu bedienen. 3 ESP32 und Node-RED GUI
Abbildung 2 Node-RED als zentraler Server Eine sehr interessante Sache ist natürlich die Kommunikation mit diversen Internetdiensten wie z.b. facebook, Twitter, Email, MongoDB und einigen anderen. Ebenso ist eine Kommunikation mit verschiedenen Mikrocontrollern wie ESP32, ESP8266 oder dem Arduino möglich, was die Einsatzgebiete extrem vergrößert und unbegrenzte Möglichkeiten bietet. Neben dem Raspberry Pi als Server-Instanz werden natürlich auch die bekannten Betriebssysteme wie Windows, Mac OSX und Linux unterstützt und wer einen BeagleBone Black besitzt, kann sich ebenfalls über eine entsprechende Unterstützung freuen. 4 ESP32 und Node-RED GUI
Die Installation des Dashboards geht folgendermaßen von statten. Über einen Mausklick auf die drei weißen horizontalen Linien wird das Menü geöffnet, wo sich u.a. der Punkt Manage Palette befindet, der ausgewählt werden muss. Abbildung 3 Der Menüpunkt Manage Palette Über den Wechsel in den Reiter Install kann der Suchbegriff dashboard eingegeben werden. Nun die Install-Schaltfläche rechts unten in dem Ergebnis anklicken. 5 ESP32 und Node-RED GUI
Durch die Bestätigung des folgenden Dialogs, wird das Dashboard wird zu Node-RED hinzugefügt. Im Anschluss ist die Palette von Node-RED um die Dashboard-Nodes erweitert worden. Abbildung 4 Die Dashboard-Palette von Node-RED Wir werden gleich als kleine Einführung die switch-node verwenden, um darüber mehrere IO-Pins des ESP32-Picoboards zu steuern. 6 ESP32 und Node-RED GUI
Der Flow Starten wir mit dem Flow, der wie folgt ausschaut und Nachrichten über TCP versendet, die dann vom ESP32-Picoboard empfangen und ausgewertet werden. Abbildung 5 Der Flow zur Steuerung der IO-Pins am ESP32 Es ist aus dieser Abbildung schon ersichtlich, dass die folgenden IO-Pins manipuliert werden sollen. IO19 IO23 IO18 IO05 Wir erhalten - und das nehme ich jetzt einmal vorweg - nützlich Zusatzinformationen bei der Ansicht dieses Flows. IO19 wurde auf ON und IO05 auf OFF gesetzt. Zudem besteht eine aktive Verbindung zum TCP-Gerät unter der angegebenen IP-Adresse, was am grünen Quadrat mit dem Zusatz connected unterhalb der TCP-Node zu sehen ist. Die vier Nodes wurden allesamt mit dem Eingang der TCP-Node verbunden, was bedeutet, dass sie ihre Informationen dort hin liefern. 7 ESP32 und Node-RED GUI
Schauen wir uns die Konfiguration einer Node im Detail an und sehen, welche Form die Information beim Versenden besitzt. Durch einen Doppelklick konfigurieren wir die Switch-Node. Abbildung 6 Die Konfiguration der switch-node Ich habe die benötigten Informationen rot markiert. Von oben nach unten sind das folgende Details. Gruppeninformation der einzelnen Switch-Nodes, die darüber gruppiert werden. Diese Gruppe muss neu angelegt werden und kann einen eigenen Namen (hier: IO Control) erhalten Die Bezeichnung des Schalters über die Label-Eigenschaft Was soll versendet werden, wenn der Schalter ON - also An - ist. Hier 19:1 Was soll versendet werden, wenn der Schalter OFF - als Aus - ist. Hier 19:0 Hinsichtlich der zu versendenden Daten sollte ich etwas konkreter werden. Die erste Zahl bezeichnet den IO-Pin (hier 19) und die zweite den Status (1 oder 0). Der Status gibt an, ob der IO-Pin einen HIGH- oder LOW-Level erhalten soll. Beide Informationen sind durch einen sogenannten Delimiter (Trennzeichen) voneinander getrennt. 8 ESP32 und Node-RED GUI
Diese Informationen (Pin:Status) werden später vom ESP32 ausgewertet. Jede weitere Switch-Node versendet natürlich ihren eigenen Fingerabdruck, der wie folgt ausschaut. ON OFF IO19 19:1 19:0 IO23 23:1 23:0 IO18 18:1 18:0 IO05 5:1 5:0 Tabelle 1 Sendeinformationen der einzelnen Switches Wie aber sind die vier Schalter überhaupt in einer Web-Oberfläche - dem UI - zu sehen, denn bisher haben wir lediglich die Programmierung der Nodes zu Gesicht bekommen? Die Antwort ist einfach! Es muss hinter der IP-Adresse:Port der URL lediglich der Zusatz ui für User-Interface angefügt werden. 192.168.178.27:1880/ui Bei mir schaut das dann wie folgt aus. Abbildung 7 Das User-Interface unseres Flows Es sind die vier Schalter untereinander angeordnet und mit der Gruppierungsüberschrift IO Control versehen. Die Bezeichnung HOME steht für den Tab, der ebenfalls frei definiert werden kann. Es ist auf dieser Abbildung zu sehen, dass der erste Schalter für IO 19 von mir schon in die ON-Position verschoben wurde. Natürlich ist die Steuerung des ESP32-Picoboards auch über ein Tablett möglich, denn auch dort kann in einem Browser die IP-Adresse eingegeben werden. 9 ESP32 und Node-RED GUI
Abbildung 8 Die Steuerung des ESP32-Picoboards mit einem Tablett Die Steuerung erfolgt also wirklich drahtlos über Wifi und der USB-Anschluss am ESP32-Picoboard dient lediglich dem Upload der Firmware und der späteren Spannungsversorgung. Auf dem ESP32-Pico-Discoveryboard [4] schaut das Ganze dann wie folgt aus. Abbildung 9 Das ESP32-Pico-Discoveryboard 10 ESP32 und Node-RED GUI
Die Verschaltung ist recht einfach, wobei ich die vier rechten LEDs mit den IO-Pins verbunden habe, die wir in diesem Addon verwenden. Die LED rechts außen ist mit IO19 verbunden und leuchtet im Moment. Der Schaltplan dazu schaut wie folgt aus. Abbildung 10 Der Schaltplan zur Ansteuerung der vier LEDs Das sollte für die Konfiguration von Node-RED erst einmal genügen. Kommen wir jetzt zur Empfangsseite, was uns zur Programmierung des ESP32-Picoboards bringt. Der ESP32-Code Der ESP32-Code [5] für dieses Addon wurde von mir wieder in einzelne Bereiche unterteilt, weil ich so die einzelnen Funktionen besser erklären kann. #include <WiFi.h> #define MSG 50 // Maximale Länge der Nachricht const char* ssid = "<SSID>"; const char* password = "<Passwort>"; int pinarray[] = {19, 23, 18, 5}; // IO-Pins WiFiServer server(8088); // Server hört auf Port 8088 Zu Beginn werden die erforderlichen Deklarationen vorgenommen, wobei natürlich die Authentifizierungsinformationen für das Wifi entsprechend angepasst werden müssen. 11 ESP32 und Node-RED GUI
Das Pin-Array beinhaltet die Pins der verwendeten IOs. Der Wifi-Server lauscht auf dem Port 8088. In der setup-funktion werden die IO-Pins als Ausgänge konfiguriert und eine Wifi-Verbindung etabliert. Im vorherigen Addon bin ich auf diese Schritte eingegangen. void setup() { } for(int i=0; i<4; i++) pinmode(pinarray[i], OUTPUT); Serial.begin(9600); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status()!= WL_CONNECTED) { } delay(500); Serial.print("."); Serial.println(""); Serial.println("WiFi connected to IP address: "); Serial.println(WiFi.localIP()); server.begin(); // Server starten Innerhalb der loop-funktion werden die eingehenden Informationen des Wifi-Clients verarbeitet und an eine evalmessage-funktion weitergereicht. Diese übernimmt dann die Steuerung der IO-Pins. void loop() { } String msg = ""; // Nachricht // Auf einen neuen Client warten WiFiClient client = server.available(); uint8_t data[msg]; if (client) { } Serial.println("New client"); // Prüfen, ob Client verbunden while (client.connected()) { } if (client.available()) { } int len = client.read(data, MSG); if (len < MSG) data[len] = '\0'; else data[msg] = '\0'; Serial.print("Clients message: "); msg = (char *)data; Serial.println(msg); evalmessage(msg); 12 ESP32 und Node-RED GUI
Der Inhalt der evalmessage-funktion übernimmt die Steuerung der IO-Pins. void evalmessage(string msg) { int pos = msg.indexof(':'); int pin = msg.substring(0, pos).toint(); int status = msg.substring(pos + 1).toInt(); Serial.println(pin); Serial.println(status); digitalwrite(pin, status); } Wie ist die Arbeitsweise dieser Funktion? Die eingehenden Daten haben ja das schon erwähnte Format Beide Informationseinheiten - also Pin und Status - müssen voneinander getrennt werden, wobei der Delimiter der Doppelpunkt in dieser Zeichenkette ist. Um Pin und Status zu extrahieren, ist es also gut zu wissen, an welcher Zeichenposition sich der Doppelpunkt befindet. Dann ist es möglich vor und nach dem Doppelpunkt die Daten zu ermitteln. Über die indexof-methode wird die Position des Doppelpunktes ermittelt und der Variablen pos zugewiesen. int pos = msg.indexof(':'); Mittels der substring-methode werden jetzt pin und status extrahiert, die gleich für den Aufruf der digitalwrite-funktion zur Ansteuerung der IO-Pins benötigt werden. int pin = msg.substring(0, pos).toint(); int status = msg.substring(pos + 1).toInt(); Die toint-methode wandelt die extrahierte Zeichenkette in einen Ganzzahlwert vom Typ int. Letztendlich wird über die digitalwrite-funktion der angeforderte IO-Pin manipuliert. digitalwrite(pin, status); 13 ESP32 und Node-RED GUI
Die Statusinformationen sind über den Serial-Monitor abzurufen und dieser eignet sich sehr gut bei der Fehlersuche. Abbildung 11 Debug-Informationen im Serial-Monitor Zuerst wird die empfangene Zeichenkette zur Anzeige gebracht und im Anschluss der ermittelte Pin bzw. der angeforderte Status. Ich erwähnte es schon, dass der USB- Anschluss lediglich für das Firmware-Upload zuständig ist und im Anschluss lediglich als Spannungsversorgung dient. Auf der folgenden Abbildung sehen wir ein handelsübliches Netzteil für das Laden eines Smartphones über Micro-USB. Abbildung 12 Die externe Spanungsversorgung des ESP32-Picoboards 14 ESP32 und Node-RED GUI
Wenn wir also über Node-RED die IO-Pins kontrollieren können, ist es sicherlich auch interessant, etwas Sinnvolles damit zu realisieren, was mich zum nächsten Punkt bringt. Es gibt sogenannte Relais-Boards, die in der Lage sind, über Steuersignale von z.b. 3,3V hohe Spannungen bis 240V zu schalten. Auf der folgenden Abbildung sehen wir ein derartiges Relais-Board, das 4 Kanäle bedienen kann. Abbildung 13 Ein 4-Kanal-Relaisboard Die Ansteuerung bzw. Modifikation unserer Schaltung ist denkbar einfach. Anstelle der LEDs werden die Eingänge des Relais-Boards verwendet. Auf der folgenden Abbildung ist der Schaltungsaufbau zu sehen. Abbildung 14 Die Ansteuerung des Relais-Boards 15 ESP32 und Node-RED GUI
Die Spannungsversorgung des Relais-Boards beträgt 5V, was über das ESP32-Picoboard durchaus realisierbar ist. Die Ansteuerung der Eingänge IN1 bis IN4 kann über 3,3V erfolgen. Die Grundvoraussetzungen sind also gegeben. Ich habe in Hack 17 meines ESP32-Praxisbuches [1] die Ansteuerung detailliert beschreiben. Natürlich möchte ich auch hier etwas genauer darauf eingehen. Die Relais werden - wie schon erwähnt - mit 5V betrieben, aber die auf dem Modul befindlichen Optokoppler ermöglichen jedoch eine Ansteuerung über 3,3V. Auf dem Relais-Board gibt es eine galvanische Trennung durch den Optokoppler vom Typ PC817. Falls im Moment kein Relais-Modul zur Hand ist, aber ein paar Optokoppler übrig sind, kann man sich eine derartige Ansteuerung selbst basteln. Der folgende Schaltplan zeigt die Ansteuerung eines einzelnen Relais. Abbildung 15 Die Ansteuerung des Relais über einen Optokoppler Der Schaltplan zur Ansteuerung schaut wie folgt aus. Abbildung 16 Der Schaltplan zur Ansteuerung des Relais-Boards 16 ESP32 und Node-RED GUI
Bei der Ansteuerung eines derartigen Relais-Boards ist darauf zu achten, dass es mit einem LOW-Pegel je Kanal anzusteuern ist. Frohes Frickeln 17 ESP32 und Node-RED GUI
Das ESP32-Praxisbuch [1] https://www.elektor.de/das-esp32-praxisbuch [2] https://nodered.org/ [3] https://www.elektor.de/iot-programmierung-mit-node-red [4] https://www.erik-bartmann.de/?projekte ESP32_Discovery-Board [5] https://github.com/erikbartmann/elektoresp32/tree/master/addons/noderedui https://www.erik-bartmann.de/ 18 ESP32 und Node-RED GUI