In dit ESP32-artikel zullen we onderzoeken hoe we een ESP32-bord kunnen verbinden met een toegangspunt en de webserver kunnen ontwerpen. Met behulp van die webserver zullen we LED's en AC-apparaten aansturen met behulp van een relaismodule.
Inhoud:
- ESP32-webserver
- Hoe een ESP32-webserver te maken met Arduino IDE
- ESP32-webservercode
- ESP32 Webserver IP-adres
- LED's besturen met behulp van de ESP32-webserver
- Desktop-interface
- Mobiele interface
- AC-apparaten bedienen met behulp van de ESP32-webserver
- Conclusie
1. ESP32-webserver
De webserver beschikt over een speciaal programma dat webpagina's kan verwerken en naar webclients kan verzenden. Om een website te openen, gebruiken wij een webbrowser. Deze webbrowser wordt ook wel een webclient genoemd. De website die u wilt zien, is opgeslagen op een andere computer, een zogenaamde webserver.
Om met elkaar te praten, gebruiken de webserver en de webclient een gemeenschappelijke taal genaamd HTTP. Het werkt als volgt: de webclient vraagt de webserver om een webpagina via een HTTP-verzoek. De webserver stuurt de opgevraagde webpagina terug. Als de webpagina niet aanwezig is, ziet u een foutmelding.
In ESP32 kunnen we een webserver ontwerpen, omdat ESP32 niet alleen via een netwerk verbinding kan maken met andere apparaten, maar ook zijn eigen webserver kan creëren en kan reageren op de ontvangen verzoeken. Dit is allemaal mogelijk omdat de ESP32 in drie verschillende modi kan werken:
- Station
- Toegangspunt
- Zowel station als toegangspunt
Je kunt dit artikel lezen om inzicht te krijgen in alle drie de modi van ESP32:
Een ESP32-toegangspunt (AP) instellen met Arduino IDE
2. Hoe u een ESP32-webserver kunt maken met Arduino IDE
Om een ESP32-webserver te maken met behulp van Arduino IDE, kunt u ESP32 verbinden met een toegangspunt en een IP-adres voor de webserver genereren. U kunt wat HTML en CSS toepassen om uw serverinterface te ontwerpen.
Zodra u de werking van het ESP32-toegangspunt begrijpt, kunt u eenvoudig een ESP32-webserver ontwerpen met behulp van de Arduino IDE-code. De ESP32-webservercode maakt gebruik van de ESP32 Wi-Fi-bibliotheek. Dit maakt ons werk eenvoudiger, omdat deze bibliotheek alle belangrijke functies bevat die nodig zijn om ESP32 met een toegangspunt te verbinden.
Laten we een ESP32-webserver ontwerpen met behulp van Arduino IDE-code.
3. ESP32-webservercode
De ESP32-webservercode omvat de ESP32-verbinding met het toegangspunt en het verkrijgen van het IP-adres voor de server. Zodra u het IP-adres heeft verkregen, moet u verbinding maken met hetzelfde netwerk om toegang te krijgen tot de ESP32-webserver. Van daaruit kunt u LED's en andere apparaten bedienen.
Open Arduino IDE en verbind uw ESP32-bord ermee:
Het ESP32-bord installeren in Arduino IDE
Zodra het ESP32-bord is aangesloten, uploadt u de volgende code naar uw bord.
/***************Linuxhint.com
ESP32-webserver voor bediening van LED's
***************/
// Importeer de bibliotheek voor Wifi verbinding
#include
// Voer uw Wi-Fi-naam en wachtwoord in
const teken * ssid = 'ESP32' ;
const teken * wachtwoord = '123456789' ;
// Kies het poortnummer voor de webserver
WiFiServer-server ( 80 ) ;
// Maak een variabele om het webverzoek op te slaan
Tekenreekskop;
// Creëer variabelen om de status van de uitgangen op te slaan
Tekenreeksuitvoer26State = 'UIT' ;
Tekenreeksuitvoer27State = 'UIT' ;
// Wijs de uitvoerpinnen toe aan de variabelen
const int uitvoer26 = 26 ;
const int uitvoer27 = 27 ;
niet-ondertekende lange currentTime = millis ( ) ;
niet-ondertekend lang previousTime = 0 ;
// Kies de tijd begrenzing voor het webverzoek in milliseconden
const lange timeoutTime = 2000 ;
ongeldige opstelling ( ) {
Serieel.begin ( 115200 ) ;
// Stel de uitgangspinnen in als uitgangen
pinModus ( uitgang26, UITGANG ) ;
pinModus ( uitgang27, UITGANG ) ;
// Schakel de uitgangen uit
digitaalSchrijf ( uitgang26, LAAG ) ;
digitaalSchrijf ( uitgang27, LAAG ) ;
// Maak verbinding met het Wi-Fi-netwerk
Serieel.afdruk ( 'Verbinden met ' ) ;
Serieel.println ( ssid ) ;
WiFi.begin ( ssid, wachtwoord ) ;
// Wachten tot de verbinding is tot stand gebracht
terwijl ( WiFi.status ( ) ! = WL_VERBONDEN ) {
vertraging ( 500 ) ;
Serieel.afdruk ( '.' ) ;
}
Serieel.println ( '' ) ;
Serieel.println ( 'WiFi verbonden.' ) ;
Serieel.println ( 'IP adres: ' ) ;
Serieel.println ( WiFi.localIP ( ) ) ;
server.begin ( ) ;
}
lege lus ( ) {
WiFiClient-client = server.beschikbaar ( ) ; // Rekening voor nieuwe klanten
als ( cliënt ) { // Als er een client is aangesloten,
huidigeTijd = milli ( ) ;
vorigeTijd = huidigeTijd;
Serieel.println ( 'Nieuwe klant.' ) ; // Breng de seriële poort op de hoogte
Tekenreeks currentLine = '' ; // Maak een string om de klantgegevens op te slaan
terwijl ( klant.verbonden ( ) && huidigeTijd - vorigeTijd = 0 ) {
Serieel.println ( 'GPIO 26 aan' ) ;
uitgang26State = 'OP' ;
digitaalSchrijf ( uitgang26, HOOG ) ;
} anders als ( header.indexOf ( 'KRIJG /26/uit' ) > = 0 ) {
Serieel.println ( 'GPIO 26 uit' ) ;
uitgang26State = 'UIT' ;
digitaalSchrijf ( uitgang26, LAAG ) ;
} anders als ( header.indexOf ( 'KRIJG /27/op' ) > = 0 ) {
Serieel.println ( 'GPIO 27 aan' ) ;
output27State = 'OP' ;
digitaalSchrijf ( uitgang27, HOOG ) ;
} anders als ( header.indexOf ( 'KRIJG /27/uit' ) > = 0 ) {
Serieel.println ( 'GPIO 27 uit' ) ;
output27State = 'UIT' ;
digitaalSchrijf ( uitgang27, LAAG ) ;
}
klant.println ( '' ) ;
klant.println ( '
klant.println ( '
// CSS om de knoppen te stylen
klant.println ( '