In diesem ESP32-Artikel werden wir untersuchen, wie wir ein ESP32-Board mit einem Zugangspunkt verbinden und seinen Webserver entwerfen können. Über diesen Webserver steuern wir LEDs und Wechselstromgeräte mithilfe eines Relaismoduls.
Inhalt:
- ESP32-Webserver
- So erstellen Sie einen ESP32-Webserver mit der Arduino IDE
- ESP32-Webservercode
- IP-Adresse des ESP32-Webservers
- Steuern von LEDs mit dem ESP32-Webserver
- Desktop-Schnittstelle
- Mobile Schnittstelle
- Steuern von AC-Geräten mithilfe des ESP32-Webservers
- Abschluss
1. ESP32-Webserver
Der Webserver verfügt über ein spezielles Programm, das Webseiten verarbeiten und an Web-Clients senden kann. Um eine Website zu öffnen, verwenden wir einen Webbrowser. Dieser Webbrowser wird auch Webclient genannt. Die Website, die Sie sehen möchten, wird auf einem anderen Computer, einem sogenannten Webserver, gespeichert.
Um miteinander zu kommunizieren, verwenden Webserver und Webclient eine gemeinsame Sprache namens HTTP. So funktioniert es: Der Webclient fragt den Webserver per HTTP-Anfrage nach einer Webseite. Der Webserver sendet die angeforderte Webseite zurück. Wenn die Webseite nicht vorhanden ist, wird eine Fehlermeldung angezeigt.
In ESP32 können wir einen Webserver entwerfen, da ESP32 nicht nur über ein Netzwerk eine Verbindung zu anderen Geräten herstellen, sondern auch seinen Webserver erstellen und auf die empfangenen Anfragen antworten kann. Dies alles ist möglich, weil der ESP32 in drei verschiedenen Modi arbeiten kann:
- Bahnhof
- Zugangspunkt
- Sowohl Station als auch Zugangspunkt
Sie können diesen Artikel lesen, um einen Einblick in alle drei Modi von ESP32 zu erhalten:
So richten Sie einen ESP32 Access Point (AP) mithilfe der Arduino IDE ein
2. So erstellen Sie einen ESP32-Webserver mit der Arduino IDE
Um einen ESP32-Webserver mit der Arduino IDE zu erstellen, können Sie ESP32 mit einem Access Point verbinden und eine IP-Adresse für den Webserver generieren. Sie können HTML und CSS anwenden, um Ihre Serverschnittstelle zu entwerfen.
Sobald Sie die Funktionsweise des ESP32-Zugangspunkts verstanden haben, können Sie mithilfe des Arduino-IDE-Codes ganz einfach einen ESP32-Webserver entwerfen. Der ESP32-Webservercode verwendet die ESP32-Wi-Fi-Bibliothek. Dies erleichtert uns die Arbeit, da diese Bibliothek alle wichtigen Funktionen enthält, die für die Anbindung von ESP32 an einen Access Point benötigt werden.
Lassen Sie uns einen ESP32-Webserver mit Arduino-IDE-Code entwerfen.
3. ESP32-Webservercode
Der ESP32-Webservercode umfasst die ESP32-Verbindung mit dem Zugangspunkt und das Abrufen der IP-Adresse für den Server. Sobald Sie die IP-Adresse erhalten haben, müssen Sie sich mit demselben Netzwerk verbinden, um auf den ESP32-Webserver zuzugreifen. Von dort aus können Sie LEDs und andere Geräte steuern.
Öffnen Sie die Arduino IDE und verbinden Sie Ihr ESP32-Board damit:
Installieren des ESP32-Boards in der Arduino IDE
Sobald das ESP32-Board angeschlossen ist, laden Sie den folgenden Code auf Ihr Board hoch.
/******************Linuxhint.com
ESP32-Webserver zur Steuerung von LEDs
**************/
// Importieren Sie die Bibliothek für WiFi Verbindung
#include
// Geben Sie Ihren WLAN-Namen und Ihr Passwort ein
const char * ssid = „ESP32“ ;
const char * Passwort = „123456789“ ;
// Wählen Sie die Portnummer für Der Webserver
WiFiServer-Server ( 80 ) ;
// Erstellen Sie eine Variable zum Speichern der Webanfrage
String-Header;
// Erstellen Sie Variablen, um den Status der Ausgänge zu speichern
String-Ausgabe26State = 'AUS' ;
String-Ausgabe27State = 'AUS' ;
// Weisen Sie den Variablen die Ausgangspins zu
const int Ausgabe26 = 26 ;
const int Ausgabe27 = 27 ;
unsigned long currentTime = Millis ( ) ;
unsigned long previousTime = 0 ;
// Wählen Sie das Zeit Grenze für die Webanfrage In Millisekunden
const long timeoutTime = 2000 ;
ungültiges Setup ( ) {
Serial.begin ( 115200 ) ;
// Legen Sie die Ausgangspins fest als Ausgänge
pinMode ( Ausgang26, AUSGANG ) ;
pinMode ( Ausgang27, AUSGANG ) ;
// Schalten Sie die Ausgänge aus
digitalWrite ( Ausgang26, LOW ) ;
digitalWrite ( Ausgang27, LOW ) ;
// Stellen Sie eine Verbindung zum Wi-Fi-Netzwerk her
Seriendruck ( 'Verbinden mit ' ) ;
Serial.println ( SSID ) ;
WiFi.beginnen ( SSID, Passwort ) ;
// Warten bis Die Verbindung wird hergestellt
während ( WLAN-Status ( ) ! = WL_CONNECTED ) {
Verzögerung ( 500 ) ;
Seriendruck ( '.' ) ;
}
Serial.println ( „“ ) ;
Serial.println ( „WiFi verbunden.“ ) ;
Serial.println ( 'IP Adresse: ' ) ;
Serial.println ( WiFi.localIP ( ) ) ;
server.begin ( ) ;
}
Leere Schleife ( ) {
WiFiClient-Client = server.available ( ) ; // Überprüfen für neue Kunden
Wenn ( Klient ) { // Wenn ein Client verbunden ist,
currentTime = Millis ( ) ;
previousTime = currentTime;
Serial.println ( 'Neuer Kunde.' ) ; // Benachrichtigen Sie den seriellen Port
String currentLine = „“ ; // Erstellen Sie einen String zum Speichern der Clientdaten
während ( Client.verbunden ( ) && currentTime - previousTime = 0 ) {
Serial.println ( „GPIO 26 an“ ) ;
Ausgabe26State = 'AN' ;
digitalWrite ( Ausgang26, HIGH ) ;
} anders Wenn ( header.indexOf ( „GET /26/off“ ) > = 0 ) {
Serial.println ( „GPIO 26 aus“ ) ;
Ausgabe26State = 'AUS' ;
digitalWrite ( Ausgang26, LOW ) ;
} anders Wenn ( header.indexOf ( „GET /27/on“ ) > = 0 ) {
Serial.println ( „GPIO 27 an“ ) ;
Ausgabe27State = 'AN' ;
digitalWrite ( Ausgang27, HIGH ) ;
} anders Wenn ( header.indexOf ( „GET /27/off“ ) > = 0 ) {
Serial.println ( „GPIO 27 aus“ ) ;
Ausgabe27State = 'AUS' ;
digitalWrite ( Ausgang27, LOW ) ;
}
client.println ( „“ ) ;
client.println ( ' ) ;
// Übergangseffekt für die Knöpfe
client.println ( „.button, .button2 {transition: alle 0,3 Sekunden Ease-in-out;}“ ) ;
// Abgerundete Knöpfe
client.println ( '.button, .button2 {border-radius: 50%;}' ) ;
// Titel der Webseite
client.println ( „
ESP32-Webserver
');// Zeigen Sie den Status und die Schaltflächen an für GPIO 26
client.println ( '
'
// Zeigen Sie die Schaltfläche „EIN“ an Wenn Der Zustand ist AUS
Wenn ( Ausgabe26Status == 'AUS' ) {
client.println ( ' ) ;
// Zeigen Sie die Schaltfläche „EIN“ an Wenn Der Zustand ist AUS
Wenn ( Ausgabe27Status == 'AUS' ) {
client.println ( ' \R ') { // Füge das Byte zur aktuellen Zeile hinzu, wenn es' Es ist keine Kutsche zurückkehren
aktuelleZeile += c;
}
}
}
// Setzen Sie den Header zurück
Kopfzeile = „“ ;
// Schließen Sie die Clientverbindung
client.stop ( ) ;
Serial.println ( „Clientverbindung getrennt.“ ) ;
Serial.println ( „“ ) ;
}
}
Code-Erklärung
Der ESP32-Webservercode begann mit dem Einrichten der WLAN-Verbindung. Erstens enthält es die WiFi.h-Bibliothek. Als nächstes müssen Sie mit diesem Code die SSID und das Passwort für das Netzwerk eingeben, mit dem Sie Ihr ESP32-Board verbinden möchten. Danach haben wir Variablen erstellt, um den Status der Ausgänge zu speichern, und diesen Variablen wurden die Ausgangspins zugewiesen. Hier nutzen wir die GPIO-Pins 26 und 27, Sie können aber auch beliebige andere GPIO-Pins zum Anschluss von Geräten oder LEDs nutzen.
Im zweiten Teil des Codes wird die serielle Kommunikation gestartet. Dies wird uns helfen, den Status der ESP32-Karte und der daran angeschlossenen Peripheriegeräte zu überprüfen. Darüber hinaus haben wir den seriellen Ausgang für unterschiedliche Zustände der beiden angeschlossenen LEDs definiert. Sie können LED-Leuchten anschließen und deren Status als EIN und AUS definieren. Dieser Codeteil gibt nach dem Hochladen des Codes auch die IP-Adresse des ESP32-Webservers aus. Der Codeteil inklusive der IP-Adresse wird nur einmal gedruckt, da er sich in der Funktion Setup() befindet.
Im dritten Teil oder innerhalb der Loop()-Funktion haben wir den Code für die Verarbeitung der Web-Anfragen und die Steuerung der GPIO-Pins definiert. Dieser Codeteil wird wie in der Funktion „loop()“ wiederholt ausgeführt. Es sucht nach neuen Clients und liest die Daten von Clients. Nach dem Lesen werden die HTTP-Anfragen analysiert und eine entsprechende Antwort gesendet, z. B. das Ein- oder Ausschalten einer LED. Dieser Codeteil enthält auch Informationen zum grundlegenden Stil des ESP32-Webservers. Die Schnittstelle umfasst die LED-Tasten und deren aktuellen Status.
4. IP-Adresse des ESP32-Webservers
Die IP-Adresse des ESP32-Webservers ist die eindeutige Kennung des Geräts im Netzwerk. Um auf den ESP32-Webserver zuzugreifen, benötigen Sie diese IP-Adresse. Nachdem Sie den obigen Code hochgeladen haben, wird die IP-Adresse automatisch vom Router zugewiesen, auch bekannt als dynamische IP. Sie können jedoch auch manuell eine IP-Adresse, auch bekannt als statische IP, zuweisen.
Um die IP-Adresse Ihres ESP32-Servers herauszufinden, können Sie nach dem Hochladen des Codes den seriellen Monitor der Arduino IDE überprüfen. Denken Sie daran, dass diese IP-Adresse nur angezeigt wird, wenn die ESP32-Karte erfolgreich mit einem Zugangspunkt verbunden ist.
Notiz : Wenn Sie Schwierigkeiten haben, Ihr ESP32-Board mit einem Zugangspunkt zu verbinden, versuchen Sie, die SSID des Routers (Zugangspunkts) zu ändern. Versuchen Sie, die Sonderzeichen in Ihrer SSID zu vermeiden.
5. LEDs mit dem ESP32-Webserver steuern
Nun werden wir zwei LEDs mit ESP32-Board einrichten und diese über den ESP32-Webserver steuern. Sie können dieselben im Code definierten GPIO-Pins verwenden oder den Code für alle anderen GPIO-Pins ändern. Hier verbinden wir eine LED mit GPIO 26 und die andere mit GPIO 27.
Desktop-Schnittstelle
Sobald die Hardware bereit ist, besteht der nächste Schritt darin, über dieselbe IP-Adresse, die vom ESP32 auf dem Arduino IDE-Terminal vergeben wurde, auf den Webserver zuzugreifen. Dazu muss Ihr System mit demselben Netzwerk verbunden sein. Öffnen Sie auf dem Desktop die WLAN-Einstellungen und stellen Sie eine Verbindung zum Netzwerk her.
Sobald die Verbindung hergestellt ist, können Sie über einen Webbrowser (Chrome) auf den Webserver zugreifen. Geben Sie die IP des ESP32-Webservers in die URL-Leiste ein und klicken Sie Eingeben . Nach dem Öffnen sehen Sie die folgende Oberfläche.
Im aktuellen Status, wie er im Code festgelegt ist, sind beide LEDs AUS. Nachdem Sie den ESP32 an den PC angeschlossen haben, werden Sie feststellen, dass keine der LEDs leuchtet.
Wir beginnen mit dem Einschalten der LED an GPIO 26. Schalten Sie den AUS-Schalter um und Sie werden sehen, dass die LED leuchtet.
Die LED am GPIO 26 leuchtet.
In ähnlicher Weise können Sie für die LED am GPIO 27 die zweite Taste umschalten.
Jetzt sehen Sie, dass auch die zweite mit GPIO 27 verbundene LED leuchtet.
Sie können beide LEDs auch einschalten, indem Sie ihre Tasten umschalten.
Nachdem Sie beide LEDs umgeschaltet haben, werden Sie sehen, dass beide LEDs leuchten.
Mobile Schnittstelle
Der ESP32-Webserver ist nicht nur auf Desktop-Browser beschränkt, Sie können auch von jedem anderen Gerät wie einem Smartphone oder Tablet darauf zugreifen. Um eine Verbindung mit dem ESP32-Webserver herzustellen, öffnen Sie die WLAN-Netzwerkeinstellungen und suchen Sie nach derselben SSID, die Sie im Code definiert haben.
Nachdem Sie nach dem Zugangspunkt gesucht haben, verbinden Sie Ihr Smartphone mit diesem Zugangspunkt.
Sobald die Verbindung hergestellt ist, öffnen Sie den Browser auf Ihrem Smartphone und greifen Sie über die ESP32-IP-Adresse auf den Webserver zu. Die Oberfläche im Smartphone ähnelt dem Desktop. Sie haben die volle Kontrolle über die Steuerung Ihrer GPIO-Pins, genau wie in einem Desktop-Browser.
6. Steuern von AC-Geräten mithilfe des ESP32-Webservers
Wir haben vorerst eine einfache LED mit ESP32 verbunden und diese über den ESP32-Webserver gesteuert. Aber das ist nur ein einfaches Programm für den ESP32-Webserver. Sie können das gleiche Konzept auf alle Sensoren oder Module anwenden und die gewünschte Ausgabe erzeugen.
Sie können beispielsweise ein Relaismodul mit ESP32 verbinden und jedes AC-Gerät mit demselben oben angegebenen Webserver-Code steuern.
Lesen : Relais mit ESP32 mit Arduino IDE
Jetzt verbinden wir eine AC-Glühbirne über ein Relaismodul mit ESP32. Hier werde ich den GPIO-Pin 26 zur Steuerung der AC-Glühbirne verwenden. Sie können Ihre gewünschten GPIO-Pins zur Steuerung des Relais definieren.
| ESP32-Pin | Relaismodul-Pins |
|---|---|
| Fahrgestellnummer/3V3 | Vcc |
| GND | GND |
| GPIO 26 oder GPIO 27 | IN1 oder IN2 |
Unten ist das schematische Diagramm von ESP32 mit einem Relaismodul und einer Wechselstrombirne.
Öffnen Sie nach dem Anschließen des Relaismoduls den ESP32-Webserver und schalten Sie den GPIO 26-Schalter um.
Sie werden sehen, dass die Glühbirne aufleuchtet.
Wir haben erfolgreich einen ESP32-Webserver erstellt und steuern damit sowohl AC- als auch DC-Geräte. Sie können denselben Code für jeden anderen Sensor anwenden und Ihre benutzerdefinierten Webserver für Ihr Projekt erstellen.
Abschluss
ESP32 ist ein Mikrocontroller-Board, das eine Verbindung mit einem Access Point herstellen oder als Access Point für andere Geräte fungieren kann. Mit dieser Funktion von ESP32 können Sie einen ESP32-Webserver entwerfen. Sie müssen lediglich Ihr ESP32-Board mit einem Zugangspunkt verbinden und die IP-Adresse für den Webserver erhalten. Danach müssen Sie in einem beliebigen Webbrowser dieselbe IP-Adresse eingeben und erhalten sofort Zugriff auf den Webserver. Stellen Sie jedoch sicher, dass Sie beim Zugriff auf den ESP32-Webserver mit demselben Netzwerk verbunden sind. Darüber hinaus können Sie den angegebenen Code ändern und jeden Sensor oder jedes Modul Ihrer Wahl steuern.