Nano ESP32 im WLAN / Webinterface

Der Nano ESP32 bietet nicht nur mehr Speicherplatz für Programme und einen potenteren Prozessor sondern ermöglicht auch die Kommunikation über ein WLAN. Dadurch besteht nun die Möglichkeit für den TonUINO, sowohl Einstellungen als auch Bedienung über eine graphische Oberfläche, das Webinterface, über ein beliebiges anderes Gerät zu machen. Bemerkenswert ist, dass keine spezifische Software oder App erforderlich ist, da das bereitgestellte Webinterface mit jedem derzeit üblichen Browser angezeigt und bedient werden kann. Die bisher gewohnte Bedienung über Sprachmenüs bleibt davon unberührt und kann unverändert, auch parallel mit dem Webinterface, weiter verwendet werden.

Damit die Möglichkeiten des Webinterface genutzt werden können, muss der TonUINO nun mit einem Netzwerk /WLAN) verbunden werden.
Wie die Einbindung in ein bestehendes Netzwerk funktioniert, ist in den folgenden Abschnitten detailliert beschrieben.
Als Basis für diese Beschreibung diente ein PC mit aktuellem Windows 11 Betriebssystem.

Voraussetzungen für Nano ESP32, PC und Netzwek:

Auf den Arduino Nano ESP32 muss die TonUINO Firmware mit passender Konfiguration erfolgreich geflasht sein, so dass er damit prinzipiell lauf- und funktionsfähig ist. Sollten jedoch noch Probleme mit DF-Player und / oder Kartenleser bestehen, können diese für die nächsten Schritte zunächst vernachlässigt werden.
Der PC muss mit einer funktionsfähigen WLAN-Baugruppe für 2,4 GHz Netzwerke bestückt sein und sollte bereits mit dem bevorzugten WLAN verbunden sein.
Zusätzlich muss ein aktueller Internetbrowser (Edge, Chrome o. ä.) installiert sein.
Das WLAN, mit dem der TonUINO verbunden werden soll, muss im 2,4 GHz Bereich arbeiten und darf kein "verborgenes" Netzwerk sein, sondern muss für alle Geräte mit seinem Namen (der SSID) erkennbar und auffindbar sein.

Prüfung der Netzwerkumgebung

Bevor der Nano ESP32 eingeschaltet wird, verschafft man sich einen Überblick über die bestehende WLAN-Verbindung und weitere verfügbare WLAN-Netze im Empfangsbereich des PCs.

Dazu wird die WLAN-Verwaltung von Windows mit Klick auf das Netzwerksymbol in der Taskleiste rechts unten geöffnet:

Dann geht es weiter mit Klick auf den Pfeil im Bereich WLAN.

Angezeigt werden nun das Netzwerk, mit dem der PC aktuell verbunden ist, sowie weitere Netzwerke, die sich im Empfangsbereich befinden.

WLAN / Access Point (AP) des Nano ESP32 finden und verbinden

Nachdem nun die aktuelle Netzwerkumgebung bekannt ist, wird der Nano ESP32 eingeschaltet.

Bei der Erstinbetriebnahme baut der Nano ESP32 sofort einen Access Point / ein eigenes WLAN mit dem Namen "TonUINO" auf
Wurde bereits eine WLAN Konfiguration vorgenommen, versucht sich der Nano ESP32 unter Verwendung der angegebenen Daten mit dem Netzwerk zu verbinden.
Kann keine erfolgreiche Verbindung hergestellt werden, stellt der Nano ESP32 wieder einen Access Point / ein eigenes WLAN mit dem Namen "TonUINO" auf. Bei erfolgreicher Verbindung bezieht der Nano ES32 automatisch eine Adresse aus dem Netzwerk. Da diese aber zunächst unbekant oder nur schwer zu ermitteln ist, kann keine Verbindung zum Webinterface aufgebaut werden. Hier hilft dann das Vorgehen, wie im nächsten Punkt beschrieben.

In der Windows WLAN-Verwaltung ist nun das neue Netzwerk "TonUINO" zu sehen.

Es ist (scheinbar) ein Fehler aufgetreten:
Das Netzwerk "TonUINO" wird in der WLAN-Verwaltung nicht angezeigt.
Was ist jetzt zu tun?

Ein Klick auf den Netzwerknamen öffnet die Aufforderung zur Verbindung, die mit Klick bestätigt wird.

Die Verbindung wird hergestellt und automatisch wird der Standardbrowser des PCs gestartet und die Seite des Webinterface angezeigt.

Damit ist eine erfolgreiche Verbindung von Nano ESP32 und PC über WLAN gelungen und es kann die Konfiguration zur dauerhaften Verbindung mit dem bevorzugten WLAN vorgenommen werden.

WLAN Konfiguration für bevorzugtes Netzwerk

Damit später aus dem heimischen Netzwerk auf das Webinterface zugegriffen und der TonUINO eingestellt und gesteuert werden kann, darf der TonUINO natürlich nicht in einem eigenen separaten WLAN verbleiben, sondern muss in das bevorzugte Netzwerk integriert werden.

Über das Menü "System / Configure WiFi" wird die WLAN Konfigurationsseite im Webinterface aufgerufen.

Auf der Konfigurationsseite werden alle verfügbaren Netzwerke aufgelistet.
Sollte das bevorzugte WLAN nicht angezeigt werden, kann die Liste mit Klick auf "Refresh" aktualisiert bzw. erneuert werden.

Ein Klick auf das bevorzugte Netzwerk übernimmt den Namen des Netzwerkes (die SSID) automatisch in das entsprechende Konfigurationsfeld.

Im nächsten Feld muss das Passwort angegeben werden, das für das ausgewählte Netz erforderlich ist, um Zugang zu erhalten.

Im Feld "Hostname" kann ein Name für den TonUINO vergeben werden. Dieser Name identifiziert den TonUINO eindeutig im Netzwerk, was von besonderer Bedeutung ist, wenn sich später mehr als nur ein einziger TonUINO im Netzwerk befinden.

Neben der Identifizierung des TonUINO wird der Hostname auch verwendet, um das zugehörige Webinterface aufzurufen.

Sind alle Angaben komplett und richtig, müssen sie noch mit dem "Save-Button" unten auf der Seite an den Nano ESP32 übergeben werden.
Wirksam werden die Einstellungen erst nach einem Neustart, der mit "Reboot on Save" gleich mit der Sicherung angestossen werden kann.

Die erfolgreiche Datenübergabe wird quittiert und, wenn gewünscht, gleich ein Neustart ausgeführt.

Der Nano ESP32 schaltet das WLAN "TonUINO" ab und meldet sich bei dem angegebenen WLAN an.
Der PC verliert die Verbindung zum Netzwerk "TonUINO" und sollte sich in der Standardkonfiguration wieder automatisch mit dem bevorzugten (ursprünglichen) WLAN verbinden.
Sind bevorzugtes WLAN des PCs und das für den TonUINO angegebene WLAN identisch, wird wieder eautomatisch eine Verbindung zwischen TonUINO und PC hergestellt und die Startseite des Webinterface im Browser angezeigt.

Es ist gut erkennbar, dass die Verbindung über das bevorzugte WLAN erfolgreich hergestellt wurde, indem der vergebene Hostname im Kopf des Webinterface angezeigt wird.

Kontrolle des TonUINO

Das Webinterface bietet nun mehr als die bisher vom Menü bekannten Möglichkeiten der Einstellung und Steuerung des TonUINO.
Ganz besonders zu schätzen ist die Möglichkeit das Log einzusehen, ohne erst eine (Kabel-)Verbindung für die Konsole herstellen zu müssen.

Hier ein Auszug aus dem Log, in dem hier die erfolgreiche Verbindung zum WLAN bestätigt und auch die erhaltene Netzwerkadresse angezeigt wird.

Mit dieser Netzwerkadresse kann später auch das Webinterface geöffnet werden (siehe unten).

Über das Menü "System / Info" wird die gesamte Konfiguration des TonUINO (und mehr) übersichtlich angezeigt, wie sie in der "constants.hpp" angegeben wurde.

Webinterface aufrufen

Das Webinterface kann komfortabel aufgerufen werden, indem der Hostname des TonUINO in das Adressfeld des Browsers eingetragen wird.

Achtung bei Erstinstallation:
Wenn bei erfolgreicher Verbindung mit dem WLAN "TonUINO" der Browser nicht automatisch mit der Startseite des Webinterface geöffnet wird, kann das Webinterface geöffnet werden, indem in die Adresszeile des Browsers "Tonuino.de" eingetragen wird.

Das Webinterface kann ebenso aufgerufen werden, indem die Netzwerkadresse (hier: 192.168.0.150) des TonUINO in das Adressfeld des Browsers eingetragen wird.

Nach Bestätigung mit der Eingabetaste wird das Webinterface angezeigt wird.

WLAN "TonUINO" wird nicht aufgebaut / angezeigt

Es ist möglich, dass bei Verbindungs- und Konfigurationsversuchen ein Zustand erreicht wird, bei dem der Nano ESP32 keinen Access Point / WLAN aufbaut oder sich unerkannt bereits an ein WLAN angemeldet hat, ohne dass weitere Daten bekannt sind.

In diesem Fall kann man erzwingen, dass der Nano ESP32 einen Access Point unabhängig von gespeicherten Konfigurationsdaten aufbaut, indem während des gesamten Bootvorgangs die UP- / VOR-Taste gedrückt gehalten wird.

Ist der Bootvorgang mit dieser Prozedur abgeschlossen, sollte die WLAN-Verwaltung wieder ein Netzwerk "TonUINO" anzeigen und Konfiguration und Verbindung können nach Anleitung hergestellt werden.

Zu WLAN / Access Point finden und verbinden