Ich nehme es gleich vorweg, ich habe nicht alles selber programmiert, sondern habe auch AI verwendet um mir Vorschläge zu unterbreiten.
Dies war auch mein erstes Projekt mit AI Hilfe. Es ist schon ganz erstaunlich wie hilfreich dies sein kann.

Es gibt viele fertige Captive-Portale und auch mit noch mehr Möglichkeiten als meines.

Meine Vorgaben:

  • Ich wollte ein modernes GUI mit Bootstrap
  • Responsive
  • Horizontale Menueführung
  • Hell/Dunkel Umschaltung
  • Async Webserver
  • HTML getrennt vom C++ Code, abgelegt im LittleFS
  • Speicherung der Einstellungen im NVRAM
  • Firmware update Funktion
  • MQTT Einstellungen
  • Code kann frei angepasst werden

Wird der ESP32 zum ersten Mal gestartet, so sind keine Einstellungen vorhanden, daher wird er im Access Point Modus starten.
Wie bekannt sein sollte, ist dies immer die IP 192.168.4.1
Der ESP meldet sich als ESP32-Setup und dem PW: 12345678

Anschliessend ins Menu Einstellungen - Wifi gehen

Hier werden automatisch beim aufrufen der Seite die verfügbaren Wlans gescannt. Mittels der Schaltfläche Suchen, kann der Vorgang wiederholt werden

Beim Anklicken eines Wlans, wird man aufgefordert das Passwort einzugeben.
Durch drücken auf Verbinden wird der ESP32 neu gestartet im Client Modus.

Auf der Startseite werden die wichtigsten Verbindungsdaten angezeigt und via Ajax alle paar Sekunden aktualisiert.

Hier die Seite für die MQTT Einstellungen. Die Daten werden ebenfalls im NVRAM abgelegt und können zur weiteren Verarbeitung im C++ Code
verwendet werden.

Firmware update Seite

und hier die Seite für die Aktualisierung der Webseiten im LittleFS.
Es können nur .bin Dateien geladen werden. Der Inhalt des Ordners data im Projekt muss also zuerst kompiliert werden!

Im Menu Neustart/Reset stehen 3 verschieden Funktionen zu Verfügung.

  1. Reboot (Der ESP32 startet neu, alle Einstellungen bleiben erhalten)
  2. Wlan löschen (Wlan Einstellungen werden gelöscht, aber die MQTT Einstellungen bleiben erhalten. Der ESP startet wieder im Access Point Modus)
  3. Factory Reset (Hier werden alle Einstellungen gelöscht. Der ESP startet wieder im Access Point Modus)

Es kann noch vieles verbessert werden, aber der Code läuft ohne Probleme.

Bei Bedarf, Zeit und Lust 😃, werden ich den Code sicher noch erweitern. Er gibt mir aber eine solide Grundlage für weiter Projekte
ohne die Settings im Code "hardcodieren" zu müssen