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 - Relay Besturen via Web

In deze handleiding leren we hoe u een relay kunt aansturen via een webinterface met een browser op een pc of smartphone, waarbij gebruik wordt gemaakt van de ESP32. Concreet wordt de ESP32 geprogrammeerd om als webserver te functioneren. Stel dat het IP-adres van de ESP32 192.168.0.2 is. Dit is hoe het werkt:

Wanneer u 192.168.0.2 invoert in de webbrowser, stuurt de browser een verzoek naar de ESP32, die vervolgens reageert met een webpagina met een aan/uit-knop voor het bedienen van de relay.
Op dezelfde manier, wanneer u op de knop “Turn ON” klikt op de webpagina of 192.168.0.2/relay1/on typt in de browser, schakelt de ESP32 de relay aan en stuurt de besturingspagina terug.
Evenzo, als u op de knop “Turn OFF” op de webpagina klikt of 192.168.0.2/relay1/off in de browser invoert, schakelt de ESP32 de relay uit en stuurt opnieuw de besturingspagina terug.

We leren aan de hand van twee voorbeeldcodes:

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

Deze handleiding biedt de basis die u eenvoudig en op een creatieve manier kunt aanpassen om het volgende te bereiken:

Het besturen van meerdere relais via het web
Het herontwerpen van de webgebruikersinterface (UI)

Hardware benodigd

1	×	ESP32 ESP-WROOM-32 Ontwikkelingsmodule
1	×	USB-kabel Type-C
1	×	Relais
1	×	Jumperdraden
1	×	Breadboard (experimenteerprint)
1	×	(Optioneel) Solenoïde slot
1	×	(Optioneel) 12V voedingadapter
1	×	(Optioneel) DC voeding jack
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 relay en ESP32

Als u nog niet bekend bent met relais en ESP32 (pinout, hoe het werkt, hoe te programmeren ...), bekijk dan de volgende tutorials:

Aansluitschema

Hoe ESP32 en relay aan te sluiten met een breadboard (gevoed via USB-kabel)

This image is created using Fritzing. Click to enlarge image

Hoe ESP32 en relay aan te sluiten met een breadboard (gevoed via Vin-pin)

This image is created using Fritzing. Click to enlarge image

Hoe ESP32 en relay aan te sluiten met een schroefterminal breakout board (gevoed via USB-kabel)

Hoe ESP32 en relay aan te sluiten met een schroefterminal breakout board (gevoed via Vin-pin)

ESP32 Code - HTML-inhoud is ingebed 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-relay-via-web */ #include <DIYables_ESP32_WebServer.h> #define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay int relay_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; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "Relay state: "; if (relay_state == LOW) html += "OFF"; else html += "ON"; html += ""; html += "<a href='/relay1/on'>Turn ON</a>"; html += " "; html += "<a href='/relay1/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()); } // Route to control the Relay void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/relay1/on", handleRelayOn); server.addRoute("/relay1/off", handleRelayOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

Snelle stappen

Als u voor het eerst ESP32 gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
Maak de bedrading volgens de bovenstaande afbeelding.
Verbind de ESP32 met uw pc via een micro USB-kabel.
Open Arduino IDE op uw pc.
Selecteer de juiste ESP32-board (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
Open de Library Manager door te klikken op het Library Manager icoon in de linker navigatiebalk van Arduino IDE.
Zoek op “DIYables ESP32 WebServer” en vind de Web Server bibliotheek van DIYables.
Klik op de Installeren knop om de Web Server bibliotheek te installeren.

Kopieer de bovenstaande code en open deze in Arduino IDE.
Pas de wifi-gegevens (SSID en wachtwoord) in de code aan naar die van uzelf.
Klik op de Uploaden knop in Arduino IDE om de code naar de ESP32 te uploaden.
Open de Seriële Monitor.
Bekijk 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 onderstaande drie formaten in de adresbalk in:

192.168.0.2

192.168.0.2/relay1/on

192.168.0.2/relay1/off

Houd er rekening mee dat het IP-adres kan verschillen. Controleer de actuele waarde in de Seriële Monitor.
U ziet ook 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 /relay1/on ESP32 Web Server: New request recieved: GET /relay1/off

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Controleer de status van het relais.
U ziet de webpagina van de ESP32 op de webbrowser zoals hieronder weergegeven.

U kunt nu de relay aan/uit bedienen via de webinterface.

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

Omdat een grafische webpagina een grote hoeveelheid HTML-inhoud bevat, wordt het onhandig om deze zoals voorheen in de ESP32-code in te sluiten. Om dit op te lossen, moeten we de ESP32-code en de HTML-code in verschillende bestanden plaatsen:

De ESP32-code wordt in een .ino-bestand gezet.
De HTML-code (inclusief HTML, CSS en Javascript) wordt in een .h-bestand geplaatst.

Snelle stappen

Open Arduino IDE en maak een nieuwe sketch aan. Geef het 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-relay-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // Include the index.h file #define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay int relay_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; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay 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()); } // Route to control the Relay void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("ESP32 Web Server: New request received"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/relay1/on", handleRelayOn); server.addRoute("/relay1/off", handleRelayOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); }

Pas de wifi-instellingen (SSID en wachtwoord) aan naar uw gegevens.
Maak in Arduino IDE het bestand index.h aan door:

Ofwel te klikken op de knop net onder het seriële monitor icoon en New Tab te kiezen, of gebruik Ctrl+Shift+N.

Geef het bestand de naam index.h en klik op OK.

Kopieer onderstaande code en plak deze in index.h.

Nu heeft u de code in twee bestanden: newbiely.com.ino en index.h.
Klik op de Uploaden-knop in Arduino IDE om de code naar de ESP32 te uploaden.
Open via uw pc of smartphone de webpagina van de ESP32-webserver in de browser. Deze ziet er vergelijkbaar uit met de vorige code:

※ Notiz:

Als u alleen de HTML-inhoud in index.h aanpast en niets in newbiely.com.ino wijzigt, zal de Arduino IDE bij compileren en uploaden de HTML-inhoud niet actualiseren.
Om de Arduino IDE de HTML-inhoud toch te laten updaten, voert u een wijziging door in het newbiely.com.ino bestand (bijvoorbeeld een lege regel toevoegen, een commentaarregel ...).

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

Meerdere relais via het web bedienen
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!