Internetgesteuerte LED mit ESP32-basiertem Webserver - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Projektübersicht

In diesem Beispiel werden wir herausfinden, wie man einen ESP32-basierten Webserver erstellt, um den LED-Status zu steuern, auf den von überall auf der Welt zugegriffen werden kann. Sie benötigen für dieses Projekt einen Mac-Computer, aber Sie können diese Software auch auf einem kostengünstigen und stromsparenden Computer wie dem Raspberry Pi ausführen.

Vorbereitung des ESP32 mit der Arduino IDE

Um mit der Programmierung des ESP32 mit der Arduino-IDE und der Arduino-Programmiersprache zu beginnen, benötigen Sie ein spezielles Add-On. Lesen Sie über den folgenden Link, wie Sie die Arduino IDE für ESP32 unter Mac OS vorbereiten.

Lieferungen

Für dieses Tutorial benötigen Sie die folgenden Elemente:

• ESP32-Entwicklungsplatine5mm
• LEDWiderstand 220ohm
• 16x2 LCD-Display mit I2C-Modul
• Steckbrett
• Überbrückungsdrähte
• Micro-USB-Kabel

Schritt 1: Aufbau der Schaltung

Führen Sie die Verbindungen wie in der folgenden schematischen Abbildung unten gezeigt durch

Beginnen Sie mit dem Anschließen des 3V3-Versorgungsspannungsausgangs am ESP32 und GNDto an das Steckbrett. Verbinden Sie die LED über einen Widerstand mit dem ESP32, indem Sie den GPIO-Pin 23 als digitalen Ausgangspin verwenden. Verbinden Sie danach den SDA-Pin des 16x2-LCD-Displays mit GPIO-Pin 21 und SCL mit GPIO-Pin 22.

Schritt 2: Schneller Überblick über das SPIFFS-Dateisystem

SPIFFS steht für „Serial Peripheral Interface Flash File System“, d. h. Dateisystem für Flash-Speicher, das Daten über SPI überträgt. Dementsprechend ist SPIFFS ein vereinfachtes Dateisystem, das für Mikrocontroller mit Flash-Chips entwickelt wurde, die Daten über den SPI-Bus übertragen (z. B. ESP32-Flash-Speicher).

SPIFFS ist am nützlichsten für die Verwendung mit ESP32 in den folgenden Situationen:

• Erstellen von Dateien zum Speichern von Einstellungen
• Permanente Datenspeicherung.
• Erstellen von Dateien zum Speichern einer kleinen Datenmenge (anstatt dafür eine microSD-Karte zu verwenden).
• Speichern von HTML- und CSS-Dateien zum Erstellen eines Webservers.

Schritt 3: Installation des SPIFFS Bootloaders unter Mac OS

Sie können Daten direkt mit dem Plugin auf der Arduino IDE erstellen, speichern und in Dateien schreiben, die im ESP32-Dateisystem gespeichert sind.

Stellen Sie zunächst sicher, dass Sie die neueste Version der Arduino IDE installiert haben, und gehen Sie dann wie folgt vor:

• Öffnen Sie den folgenden Link und laden Sie das Archiv „ESP32FS-1.0.zip“herunter.
• Gehen Sie zum Arduino IDE-Verzeichnis, das sich im Ordner Documents befindet.
• Erstellen Sie einen Werkzeugordner, falls dieser nicht vorhanden ist. Erstellen Sie innerhalb des Tools-Verzeichnisses einen weiteren Ordner ESP32FS. Erstellen Sie innerhalb von ESP32FS ein weiteres, das als Tool bezeichnet wird.
• Entpacken Sie das in Schritt 1 heruntergeladene ZIP-Archiv in den Werkzeugordner.
• Starten Sie Ihre Arduino-IDE neu.
• Um zu überprüfen, ob das Plug-In erfolgreich installiert wurde, öffnen Sie die Arduino IDE und klicken Sie auf „Tools“und prüfen Sie, ob in diesem Menü der Eintrag „ESP32 Sketch Data Upload“vorhanden ist.

Schritt 4: Bibliotheken installieren

Mit den ESPAsyncWebServer- und AsyncTCP-Bibliotheken können Sie einen Webserver mit Dateien aus dem Dateisystem von ESP32 erstellen. Weitere Informationen zu diesen Bibliotheken finden Sie unter dem folgenden Link.

Installieren Sie die ESPAsyncWebServer-Bibliothek

• Klicken Sie hier, um das ZIP-Archiv der Bibliothek herunterzuladen.
• Entpacken Sie dieses Archiv. Sie sollten den ESPAsyncWebServer-master-Ordner abrufen.
• Benennen Sie es in "ESPAsyncWebServer" um.

Installieren Sie die AsyncTCP-Bibliothek

• Klicken Sie hier, um das ZIP-Archiv der Bibliothek herunterzuladen.
• Entpacken Sie dieses Archiv. Sie sollten den Ordner AsyncTCP-master erhalten.
• Benennen Sie es in „AsyncTCP“um.

Verschieben Sie die Ordner ESPAsyncWebServer und AsyncTCP in den Ordner Bibliotheken, der sich im Verzeichnis Dokumente befindet.

Starten Sie abschließend die Arduino-IDE neu.

Schritt 5: Erstellen Sie eine Index.html- und eine Style.css-Datei mit dem folgenden Inhalt

HTML/CSS-Template für Toggle-Button wurde aus der folgenden Quelle entnommen.

Schritt 6: Arduino-Code

Der Code basierte hauptsächlich auf dem Arduino-Code, der vom ESP32-Webserver mit SPIFFS und How to Use I2C LCD with ESP32 on Arduino IDE übernommen wurde.

Schritt 7: Laden Sie den Arduino-Code und die Dateien mit dem SPIFFS Loader hoch

• Öffnen Sie den Sketch-Ordner des Arduino-Codes.
• Erstellen Sie in diesem Ordner einen neuen Ordner namens „data“.
• Im Datenordner müssen Sie die Datei index.html und style.css ablegen.
• Arduino-Code hochladen
• Um die Dateien hochzuladen, klicken Sie dann in der Arduino IDE auf Tools> ESP32 Sketch Data Upload

Schritt 8: Ermitteln Sie die IP-Adresse des ESP32-Webservers

Es kann auf zwei Arten gefunden werden.

• Serieller Monitor auf Arduino IDE (Tools> Serieller Monitor)
• Auf dem LCD-Display

Schritt 9: Testen des lokalen Webservers

Öffnen Sie anschließend einen Webbrowser Ihrer Wahl und fügen Sie die folgende IP-Adresse in die Adressleiste ein. Sie sollten eine Ausgabe ähnlich der folgenden Abbildung erhalten.

Schritt 10: Zugriff auf einen lokalen Webserver von überall auf der Welt mit Ngrok

Ngrok ist eine Plattform, mit der Sie den Fernzugriff auf einen Webserver oder einen anderen Dienst, der auf Ihrem PC ausgeführt wird, über das externe Internet organisieren können. Der Zugriff wird über den sicheren Tunnel organisiert, der beim Start von ngrok erstellt wurde.

• Folgen Sie diesem Link und melden Sie sich an.
• Nachdem Sie ein Konto erstellt haben, loggen Sie sich ein und gehen Sie zum Reiter "Auth". Kopieren Sie die Zeile aus dem Feld „Your Tunnel Authtoken“.
• Klicken Sie in der Navigationsleiste auf die Registerkarte "Download". Wählen Sie die Version von ngrok aus, die zu Ihrem Betriebssystem passt, und laden Sie sie herunter.
• Entpacken Sie den heruntergeladenen Ordner und führen Sie die Befehlszeile aus.
• Verbinden Sie Ihr Konto, indem Sie den folgenden Befehl eingeben

./ngrok Authtoken

Starten Sie einen HTTP-Tunnel auf Port 80

./ngrok http Ihre_IP_Adresse:80

Wenn alles richtig gemacht wurde, sollte sich der Tunnelstatus auf „online“ändern und in der Spalte „Weiterleitung“sollte ein Weiterleitungslink erscheinen. Durch Eingabe dieses Links in Ihren Browser können Sie von überall auf der Welt auf den Webserver zugreifen.