Meine ersten Erfahrungen mit ESP32 und ESPUI. Mangels ESP8266 in meiner Bastelkiste teste ich nur mit ESP32.
Zu installierende Bibliotheken:
- ESPAsyncWebserver steht leider nur als ZIP-Datei zur Verfügung
- ArduinoJson (Last tested with version 6.10.0) Installation mittels Bibliotheksmanager der IDE
- (For ESP8266) ESPAsyncTCP
- (For ESP32) AsyncTCP steht leider nur als ZIP-Datei zur Verfügung
-
(For ESP32) lorol/LittleFS_esp32wird mit neuem Core nicht mehr benötigt
Datei ESP_ESPUI\ESP_ESPUI.ino mit dem Inhalt des Bibliotheksbeispiels completeExample.cpp angelegt, kompiliert und zum ESP32 übertragen.
Der Sketch verwendet 837893 Bytes (63%) des Programmspeicherplatzes. Das Maximum sind 1310720 Bytes.
Globale Variablen verwenden 40088 Bytes (12%) des dynamischen Speichers, 287592 Bytes für lokale Variablen verbleiben. Das Maximum sind 327680 Bytes.
Serieller Monitor:
Begin wifi...
............................
Creating access point...
,,,,,,,,,,,,,,,,,,,,
Die Verbindung zum Router war mangels SSID und Passwort nicht erfolgreich, das ist beim ersten Mal richtig. Der ESP32 wird alternativ als Accsess Point gestartet.
In Win10 "Netzwerkstatus/ Verfügbare Netzwerke" mit "ESPUITest" verbinden:
Zu den "Eigenschaften" wechseln:
Dort zu "Privat" wechseln, sonst meldest sich bei mir die Feuerwand:
Weiter unten sehe ich:
Also öffne ich einen Browser und gebe "http://192.168.1.1" ein.
Nun sehe ich im Browser (nur der obere Teil ist dargestellt):
Da ich den ESP32 als offenen Access Point nicht nutzen möchte, wechsle ich im Browser zum Tab "WiFi Credentials", wo ich SSID und Passwort meiner Fritz!Box (Router) eingebe:
Nach Klick auf "Save" sehe ich im seriellen Monitor "Saving credentials to EPROM..." zusammen mit eingegebenen SSID und Passwort.
SSID und Passwort stehen also im EEPROM und brauchen später nicht erneut eingegeben zu werden. Solange sie gültig sind, erfolgt eine Anmeldung am Router mit einer möglicherweise wechselnden IP.
Am ESP32 drücke ich den Reset-Knopf und sehe im seriellen Monitor
Begin wifi...
.192.168.178.22
Wifi started
Im Browser tippe ich die angegebene lokale IP "192.168.178.22" oder "http://espuitest.local/" ein und sehe:
Ich möchte gerne das Dateisystem LittleFS verwenden, um Dateien dort zu speichern. Daher öffne ich nun das Bibliotheksbeispiel prepareFilesystem.ino, kompiliere und lade es auf den ESP32. Im seriellen Monitor sehe ich:
Preparing filesystem with ESPUI resources
About to prepare filesystem...
./components/esp_littlefs/src/littlefs/lfs.c:1229:error: Corrupted dir pair at {0x0, 0x1}
E (532) esp_littlefs: mount failed, (-84)
E (536) esp_littlefs: Failed to initialize LittleFS
./components/esp_littlefs/src/littlefs/lfs.c:1229:error: Corrupted dir pair at {0x0, 0x1}
E (548) esp_littlefs: mount failed, (-84)
E (552) esp_littlefs: Failed to initialize LittleFS
Listing directory: /
LittleFS Mount ESP32 Done
File: /index.htm does not exist, not deleting
File: /css/style.css does not exist, not deleting
File: /css/normalize.css does not exist, not deleting
File: /js/zepto.min.js does not exist, not deleting
File: /js/controls.js does not exist, not deleting
File: /js/slider.js does not exist, not deleting
File: /js/graph.js does not exist, not deleting
File: /js/tabbedcontent.js does not exist, not deleting
Cleanup done
Writing file: /index.htm
File written
Writing file: /css/style.css
File written
Writing file: /css/normalize.css
File written
Writing file: /js/zepto.min.js
File written
Writing file: /js/controls.js
File written
Writing file: /js/slider.js
File written
Writing file: /js/graph.js
File written
Writing file: /js/tabbedcontent.js
File written
Done Initializing filesystem :-)
Listing directory: /
DIR : css
Listing directory: /css
FILE: normalize.css SIZE: 1945
FILE: style.css SIZE: 15650
FILE: index.htm SIZE: 1492
DIR : js
Listing directory: /js
FILE: controls.js SIZE: 16895
FILE: graph.js SIZE: 4768
FILE: slider.js SIZE: 2897
FILE: tabbedcontent.js SIZE: 4464
FILE: zepto.min.js SIZE: 26320
Done, files...
Listing directory: /
DIR : css
Listing directory: /css
FILE: normalize.css SIZE: 1945
FILE: style.css SIZE: 15650
FILE: index.htm SIZE: 1492
DIR : js
Listing directory: /js
FILE: controls.js SIZE: 16895
FILE: graph.js SIZE: 4768
FILE: slider.js SIZE: 2897
FILE: tabbedcontent.js SIZE: 4464
FILE: zepto.min.js SIZE: 26320
Total KB: 1472
Used KB: 116
Da LittleFS funktioniert, wird die Bibliothek LittleFS_esp32 tatsächlich nicht benötigt (IDE 1.8.19 und Core 2.0.5).
Um die Dateien in LittleFS wirklich zu benutzen, ändere ich ESPUI.begin in ESPUI.beginLITTLEFS:
//Finally, start up the UI.
//This should only be called once we are connected to WiFi.
//ESPUI.begin(HOSTNAME);
ESPUI.beginLITTLEFS(HOSTNAME); // If you want to serve the files from LittleFS
Diesen Text habe ich von RemoteXY Erfahrung hierher verschoben. Im ursprünglichen Thema sollen Temperaturistwert angezeigt und Temperatursollwert verändert werden. Dazu kürze ich das Bibliotheksbeispiel gui.ino bis auf die zwei notwendigen Grafikelemente und ergänze OTA.
#include "zugangsdaten.h"
#include <ArduinoOTA.h> // Programm hochladen Over The Air, siehe IDE Werkzeuge/Port
#include <ESPUI.h>
#if defined(ESP32)
#include <WiFi.h>
#else
#include <ESP8266WiFi.h>
#endif
const char* ssid = STA_SSID; // << kann bis zu 32 Zeichen haben
const char* password = STA_PASSWORD; // << mindestens 8 Zeichen jedoch nicht länger als 64 Zeichen
int millisLabelId;
uint8_t sollTemperatur = 20;
void numberCall(Control* sender, int type)
{
/*
Serial.print("CB: id(");
Serial.print(sender->id);
Serial.print(") Type(");
Serial.print(type);
Serial.print(") '");
Serial.print(sender->label);
Serial.print("' = ");
Serial.println(sender->value);
*/
String temp = sender->value;
sollTemperatur = temp.toInt();
Serial.printf("Neue Solltemperatur %u°C\n", sollTemperatur);
}
void setup(void)
{
//ESPUI.setVerbosity(Verbosity::VerboseJSON);
ESPUI.setVerbosity(Verbosity::Quiet);
Serial.begin(115200);
WiFi.begin(ssid, password); // try to connect to existing network
Serial.print("\nTry to connect to existing network");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
millisLabelId = ESPUI.label("Isttemperatur:", ControlColor::Wetasphalt, "0");
ESPUI.number("Solltemperatur", &numberCall, ControlColor::Wetasphalt, 20, 15, 35); // Start, Min, Max
ESPUI.beginLITTLEFS("ESPUI Control");
ArduinoOTA.begin(); // OTA starten
}
void loop(void)
{
ArduinoOTA.handle(); // OTA abhandeln
static long oldTime = 0;
uint8_t istTemperatur = random(15, 35);
if (millis() - oldTime > 5000)
{
oldTime = millis();
ESPUI.print(millisLabelId, String(istTemperatur));
Serial.printf("Solltemperatur %u°C\n", sollTemperatur);
}
}
Anzeige im seriellen Monitor einschließlich Änderung der Solltemperatur:
.
WiFi connected
IP address: 192.168.178.22
Solltemperatur 20°C
Solltemperatur 20°C
Neue Solltemperatur 21°C
Neue Solltemperatur 22°C
Solltemperatur 22°C
Anzeige im Browser:
Nicht perfekt, aber ein Anfang 
Eine Nacht drüber geschlafen für ein Fazit:
- Am Morgen angefangen und am Abend ein Ergebnis, das ist gut. Ich habe keine Stoppuhr mitlaufen lassen, zusätzlich andere Dinge getan, schätze die Zeit auf ein paar Stunden.
- Die Bibliotheksdokumentation beschreibt die Möglichkeiten der GUI, ist bei den ersten Schritten aber etwas sparsam mit Hinweisen. Ein Text "Melde Dich im Browser mit der IP 192.168.1.1 an" wäre beispielsweise sehr hilfreich.
- Ohne Kenntnisse in HTML, CSS, JSON und JavaScript ein funktionales Ergebnis zu erzielen, finde ich eine Empfehlung wert!
