SENSOREN/ACTUATOREN

INTERNET VAN DE DINGEN (IoT)

ESP32 - Ethernet

ESP32 - GPIO Interrupt

ESP32 Bluetooth Analoog Meter Voorbeeld - Analoog Meter Display Tutorial
ESP32 Bluetooth Chat Voorbeeld - Tweerichtingsberichtgeving Interface Tutorial
ESP32 Bluetooth Digital Pins Voorbeeld - Pinbesturing en Monitor Interface Tutorial
ESP32 Bluetooth Joystick Voorbeeld - Interactieve 2D Besturingsinterface Tutorial
ESP32 Bluetooth Monitor Voorbeeld - Realtime Seriële Monitor Interface Tutorial
ESP32 Bluetooth Meerdere Apps Voorbeeld - Combineer Alle Bluetooth Apps in Eén Project Handleiding
ESP32 Bluetooth Plotter Voorbeeld - Tutorial voor Real-Time Data Plotten Interface
ESP32 Bluetooth Rotator Voorbeeld - Bedieningsinterface voor draaibare schijf/knop
ESP32 Bluetooth Slider Voorbeeld - Dual Slider Bediening Interface Tutorial
ESP32 Bluetooth Tabel Voorbeeld - Interface voor Gestructureerde Gegevensweergave Tutorial
ESP32 Bluetooth Temperatuur Voorbeeld - Temperatuurmeter Display Tutorial

ESP32 - LED via Web bedienen

In deze handleiding leert u hoe u een LED kunt bedienen via een webinterface met een browser op een pc of smartphone, gebruikmakend van de ESP32. Concreet wordt de ESP32 geprogrammeerd om te werken als een webserver. Stel dat het IP-adres van de ESP32 192.168.0.2 is. Zo werkt het in detail:

Wanneer u 192.168.0.2 in de webbrowser invoert, stuurt de browser een verzoek naar de ESP32 en reageert de ESP32 met een webpagina die een aan/uit knop bevat om de LED te bedienen.
Op dezelfde manier, wanneer u op de knop "Turn ON" op de webpagina klikt of 192.168.0.2/led1/on in de webbrowser typt, zet de ESP32 de LED aan en stuurt het de bedieningspagina terug.
Evenzo, wanneer u op de knop "Turn OFF" op de webpagina klikt of 192.168.0.2/led1/off in de webbrowser typt, zet de ESP32 de LED uit en stuurt opnieuw de bedieningspagina terug.

We gaan aan de hand van twee voorbeeldcodes leren:

HTML-inhoud is ingesloten in de ESP32-code
HTML-inhoud is gescheiden van de ESP32-code en in een .h-bestand geplaatst

De handleiding biedt de basis die u gemakkelijk en innovatief kunt aanpassen om het volgende te realiseren:

Meerdere LED’s bedienen via het web
De webgebruikersinterface (UI) herontwerpen

Hardware Benodigd

1	×	ESP32 ESP-WROOM-32 Ontwikkelingsmodule
1	×	USB-kabel Type-C
1	×	LED Kit
1	×	LED (red)
1	×	220 ohm weerstand
1	×	Breadboard (experimenteerprint)
1	×	Jumper draden
1	×	(Aanbevolen) Schroefklem Uitbreidingsboard voor ESP32
1	×	(Aanbevolen) Breakout Expansion Board for ESP32
1	×	(Aanbevolen) Stromsplitter voor ESP32

Of u kunt de volgende kits kopen:

1	×	DIYables Sensorkit (30 sensoren/displays)
1	×	DIYables Sensorkit (18 sensoren/displays)

Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.

Over LED en ESP32

Als u niet bekend bent met LED en ESP32 (pinout, werking, programmeren ...), kunt u hierover leren in de volgende tutorials:

Bedradingsschema

This image is created using Fritzing. Click to enlarge image

ESP32 Code - HTML-inhoud is ingesloten in ESP32-code

/* * Deze ESP32 code is ontwikkeld door newbiely.nl * Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld. * Voor volledige instructies en schema's, bezoek: * https://newbiely.nl/tutorials/esp32/esp32-controls-led-via-web */ #include <DIYables_ESP32_WebServer.h> #define LED_PIN 18 // ESP32 pin GPIO18 connected to LED int LED_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; // Page handlers String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "LED state: "; if (LED_state == LOW) html += "OFF"; else html += "ON"; html += ""; html += "<a href='/led1/on'>Turn ON</a>"; html += " "; html += "<a href='/led1/off'>Turn OFF</a>"; html += "</html>"; return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); // Your code here }

Snelle Stappen

Als dit de eerste keer is dat u een ESP32 gebruikt, bekijk dan hoe de omgeving in te stellen voor ESP32 in Arduino IDE.
Maak de bedrading zoals in bovenstaande afbeelding.
Sluit de ESP32 aan op uw pc via een micro USB-kabel.
Open Arduino IDE op uw pc.
Selecteer het juiste ESP32 board (bijv. ESP32 Dev Module) en de bijbehorende COM-poort.
Open de Library Manager door te klikken op het Library Manager icoon in de linkernavigatiebalk van Arduino IDE.
Zoek op “DIYables ESP32 WebServer” en zoek de Web Server bibliotheek van DIYables.
Klik op de Install knop om de Web Server bibliotheek te installeren.

Kopieer bovenstaande code en open deze in Arduino IDE.
Pas de wifi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen gegevens.
Klik op de Upload knop in Arduino IDE om de code naar de ESP32 te uploaden.
Open de Seriële Monitor.
Zie het resultaat in de Seriële Monitor.

COM6

Send

Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2

Autoscroll Show timestamp

Clear output

9600 baud

Newline

U ziet een IP-adres, bijvoorbeeld 192.168.0.2. Dit is het IP-adres van de ESP32 Web Server.
Open een webbrowser en voer één van de drie onderstaande formaten in de adresbalk in:

192.168.0.2

192.168.0.2/led1/on

192.168.0.2/led1/off

Houd er rekening mee dat het IP-adres kan verschillen. Controleer de actuele waarde in de Seriële Monitor.
U ziet bovendien de volgende output in de Seriële Monitor:

COM6

Send

Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address: 192.168.0.2 ESP32 Web Server: New request recieved: GET / ESP32 Web Server: New request recieved: GET /led1/on ESP32 Web Server: New request recieved: GET /led1/off

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Controleer de staat van de LED.
U ziet de webpagina van de ESP32 op de webbrowser zoals hieronder weergegeven.

U kunt nu de LED via de webinterface aan- en uitzetten.

ESP32 Code - HTML-inhoud is gescheiden van de ESP32-code

Aangezien een grafische webpagina grote hoeveelheden HTML bevat, wordt het onhandig om dit mee te nemen in de ESP32-code zoals hierboven. Daarom scheiden we de ESP32-code en de HTML-code in verschillende bestanden:

De ESP32-code komt in een .ino bestand.
De HTML-code (inclusief HTML, CSS en JavaScript) komt in een .h bestand.

Snelle Stappen

Open Arduino IDE en maak een nieuwe sketch aan. Geef deze een naam, bijvoorbeeld newbiely.com.ino.
Kopieer onderstaande code en open deze in Arduino IDE.

/* * Deze ESP32 code is ontwikkeld door newbiely.nl * Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld. * Voor volledige instructies en schema's, bezoek: * https://newbiely.nl/tutorials/esp32/esp32-controls-led-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // Include the index.h file #define LED_PIN 18 // ESP32 pin GPIO18 connected to LED int LED_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; // Page handlers String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state return html; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); // Your code here }

Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen netwerk.
Maak het bestand index.h aan in Arduino IDE door:

Klik op de knop net onder het seriële monitor-icoon en kies New Tab, of gebruik de toetsencombinatie Ctrl+Shift+N.

Geef de bestandsnaam op als index.h en klik op de OK knop.

Kopieer onderstaande code in dit bestand index.h.

Nu heeft u de code verdeeld over twee bestanden: newbiely.com.ino en index.h.
Klik op de Upload knop in Arduino IDE om de code naar de ESP32 te uploaden.
Open vervolgens de webpagina van het ESP32 board via een webbrowser op uw pc of smartphone zoals eerder. U zult een vergelijkbare pagina zien als bij de vorige code:

※ Notiz:

Als u de HTML-inhoud in het index.h bestand aanpast, maar niets wijzigt in het newbiely.com.ino bestand, zal Arduino IDE tijdens compileren en uploaden de HTML-inhoud niet bijwerken.
Om ervoor te zorgen dat Arduino IDE de HTML-inhoud toch bijwerkt, breng dan een wijziging aan in het newbiely.com.ino bestand (bijvoorbeeld een lege regel toevoegen, een commentaar toevoegen, etc.)

U kunt de bovenstaande code eenvoudig en creatief aanpassen om het volgende te realiseren:

Meerdere LED’s bedienen via het web
De webgebruikersinterface (UI) herontwerpen

Gerelateerde Tutorials

※ ONZE BERICHTEN

U bent welkom om de link naar deze tutorial te delen. Gebruik onze inhoud echter niet op andere websites. We hebben veel moeite en tijd gestoken in het maken van de inhoud, respecteer alstublieft ons werk!