ESP32 WebDigitalPins Voorbeeld - Tutorial Digitale Pin Besturingsinterface
Overzicht
Het WebDigitalPins voorbeeld biedt een webgebaseerde interface om alle digitale pinnen op uw Arduino te besturen en te monitoren. Ontworpen voor het ESP32 educatieve platform met verbeterde GPIO-mogelijkheden, uitgebreide pinconfiguraties en ingebouwde educatieve functies voor het leren van digitale elektronica. U kunt pinnen aan/uit zetten, hun status in real-time monitoren en bulkbewerkingen uitvoeren via een intuïtieve webinterface.
Kenmerken
- Individuele Pinbesturing: Bedien elke digitale pin (0-13) afzonderlijk
- Real-time Status: Monitor pinstatus met visuele indicatoren
- Bulkbewerkingen: Bedien alle pinnen tegelijk (Alles AAN, Alles UIT, Toggle Alles)
- Pinconfiguratie: Stel pinnen in als Input of Output via de webinterface
- Visuele Feedback: Kleurgecodeerde knoppen tonen pinstatus (groen= AAN, rood= UIT)
- Responsief Ontwerp: Werkt op desktop, tablet en mobiele apparaten
- WebSocket Communicatie: Directe updates zonder pagina te vernieuwen
Benodigde Hardware
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.
Installatie-instructies
Snel aan de slag
Volg deze stappen zorgvuldig:
- Als u voor het eerst met de ESP32 werkt, volg dan de tutorial over het instellen van de omgeving voor ESP32 in de Arduino IDE.
- Verbind de ESP32-bord met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32-bord (bijv. ESP32 Dev Module) en de bijbehorende COM-poort.
- Ga naar het Libraries-icoon in de linker balk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps", zoek vervolgens de DIYables ESP32 WebApps Bibliotheek van DIYables.
- Klik op de Installeren-knop om de bibliotheek te installeren.
- U wordt gevraagd om afhankelijkheden voor andere bibliotheken te installeren.
- Klik op de Alles Installeren-knop om alle afhankelijkheden te installeren.
- In de Arduino IDE gaat u naar Bestand Voorbeelden DIYables ESP32 WebApps WebDigitalPins voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van Arduino IDE.
/*
* DIYables WebApp Library - Web Digital Pins Example
*
* This example demonstrates the Web Digital Pins feature with automatic command handling:
* - Control output pins 0-13 via web interface
* - Monitor input pins 0-13 in real-time
* - Individual pin ON/OFF control for outputs
* - Real-time pin status feedback for inputs
* - Bulk operations (All ON, All OFF, Toggle All) for outputs
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webdigitalpins
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances using platform abstraction
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebDigitalPinsPage webDigitalPinsPage;
// Array to store the state of each digital pin (0-13). Index corresponds to pin number.
int pinStates[16] = { 0 }; // Initialize all states to LOW (0)
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Digital Pins Example");
// Add home and digital pins pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webDigitalPinsPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Pin Configuration Examples:
// Method 1: Enable specific pins individually for output control
webDigitalPinsPage.enablePin(0, WEB_PIN_OUTPUT); // Enable pin 0 (TX - use with caution)
webDigitalPinsPage.enablePin(1, WEB_PIN_OUTPUT); // Enable pin 1 (RX - use with caution)
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT);
//webDigitalPinsPage.enablePin(5, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(6, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Enable pin 13 (built-in LED)
// Method 2: Enable pins for input monitoring
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT);
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT);
//webDigitalPinsPage.enablePin(10, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(11, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
// Method 3: Enable all pins at once (uncomment to use)
// for (int pin = 0; pin <= 13; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Method 4: Enable pins in a range using for loop (uncomment to use)
// for (int pin = 7; pin <= 11; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Initialize enabled pins
int outputPins[] = { 0, 1, 2, 3, 4, 13 }; // Note: Pins 0,1 are TX/RX - use with caution
for (int i = 0; i < 6; i++) {
int pin = outputPins[i];
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
}
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
pinMode(pin, INPUT); // Use INPUT_PULLUP if needed
pinStates[pin] = digitalRead(pin);
}
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Return the current state to display on Web App
webDigitalPinsPage.onPinRead([](int pin) {
return pinStates[pin]; // Return the current state of the pin
// You can implement custom read logic here if needed
});
// Handle the control request from Web App (for output pins)
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
pinStates[pin] = state;
// You can implement custom control logic here if needed
});
// Handle pin mode change requests (optional)
webDigitalPinsPage.onPinModeChange([](int pin, int mode) {
if (mode == WEB_PIN_OUTPUT) {
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
} else if (mode == WEB_PIN_INPUT) {
pinMode(pin, INPUT); // or INPUT_PULLUP as needed
pinStates[pin] = digitalRead(pin);
}
// You can implement custom mode change logic here if needed
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Monitor input pins for real-time updates
static unsigned long lastInputCheck = 0;
if (millis() - lastInputCheck > 100) { // Check every 100ms
lastInputCheck = millis();
// Check input pins for changes and send real-time updates
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
int currentState = digitalRead(pin);
if (currentState != pinStates[pin]) {
pinStates[pin] = currentState;
// Send real-time update to web clients
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
}
// Add your main application code here
delay(10);
}
- Configureer WiFi-gegevens in de code door de volgende regels bij te werken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload-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. Het zou er ongeveer zo uitzien:
COM6
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:GET_VALUES
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:64,128
DIYables WebApp - Web Digital Pins Example
INFO: Added app /
INFO: Added app /web-digital-pins
DEBUG: Enabling pin 0 with mode OUTPUT
DEBUG: Enabling pin 1 with mode OUTPUT
DEBUG: Enabling pin 2 with mode OUTPUT
DEBUG: Enabling pin 3 with mode OUTPUT
DEBUG: Enabling pin 4 with mode OUTPUT
DEBUG: Enabling pin 13 with mode OUTPUT
DEBUG: Enabling pin 8 with mode INPUT
DEBUG: Enabling pin 9 with mode INPUT
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
📟 Digital Pins: http://192.168.0.2/web-digital-pins
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Als u niets ziet, start de ESP32 vernieuwd op.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of pc in.
- Voorbeeld: http://192.168.0.2
- U ziet de startpagina zoals onderstaande afbeelding:
- Klik op de Web Digital Pins link, u ziet dan de UI van de Web Digital Pins app zoals hieronder:
- U kunt ook direct de pagina openen via het IP-adres gevolgd door /web-digital-pins. Bijvoorbeeld: http://192.168.0.2/web-digital-pins
- Probeer de digitale pinnen te bedienen door op de pinnknoppen te klikken om ze AAN/UIT te schakelen en observeer hoe de ingebouwde LED (pin 13) reageert op uw commando’s.
Creatieve Aanpassingen - Pas de Code aan voor uw Project
Dit voorbeeld laat verschillende manieren zien om pinnen te configureren passend bij uw creatieve project:
2. Pininstellingen Configureren
Het voorbeeld laat verschillende configuratiemethodes zien:
Methode 1: Specifieke pinnen activeren
// Activeer individuele pinnen voor output-besturing
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Pin 2 als output
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Pin 3 als output
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT); // Pin 4 als input
Methode 2: Reeks pinnen activeren
// Activeer een reeks pinnen voor output-besturing
webDigitalPinsPage.enableOutputPins(2, 13); // Pinnen 2-13 als outputs
Methode 3: Alle pinnen activeren
// Activeer alle pinnen 0-13 voor bediening (geen garantie voor pinnen 0,1)
webDigitalPinsPage.enableAllPins();
4. Upload de Sketch
- Selecteer uw ESP32-bord: Hulpmiddelen → Board → ESP32
- Selecteer de juiste poort: Hulpmiddelen → Poort → [Uw ESP32 Poort]
- Klik op de Upload knop
5. Vind het IP-adres
- Open Hulpmiddelen → Seriële Monitor
- Stel de baudrate in op 9600
- Wacht tot ESP32 verbinding maakt met WiFi
- Noteer het weergegeven IP-adres (bijvoorbeeld 192.168.1.100)
6. Toegang tot de Digitale Pin Interface
Open uw webbrowser en navigeer naar:
http://[ARDUINO_IP_ADDRESS]/digital-pins
Voorbeeld: http://192.168.1.100/digital-pins
Hoe te Gebruiken
Pinbesturingsinterface
De webinterface toont alle geconfigureerde pinnen met:
- Pinnummer: Welke ESP32 pin (0-13)
- Huidige status: AAN (groen) of UIT (rood) indicator
- Bedieningsknop: Klik om de pinstatus te wisselen
- Type pin: Toont of deze als Input of Output is ingesteld
Individuele Pinbesturing
- Zet pin AAN: Klik op de pinnknop als deze "UIT" toont
- Zet pin UIT: Klik op de pinnknop als deze "AAN" toont
- Monitor status: Pin-knoppen worden automatisch bijgewerkt om de huidige status weer te geven
Bulkbewerkingen
Gebruik de knoppen voor bulkbediening om meerdere pinnen tegelijk te bedienen:
Alles AAN
- Zet alle geconfigureerde output-pins op HIGH
- Input-pinnen blijven onaangeroerd
- Handig voor het testen van alle aangesloten apparaten
Alles UIT
- Zet alle geconfigureerde output-pins op LOW
- Input-pinnen blijven onaangeroerd
- Veilige manier om alle outputs uit te schakelen
Toggle Alles
- Draait de status van alle output-pinnen om
- AAN-pin wordt UIT, UIT-pin wordt AAN
- Creëert interessante licht-effecten
Real-time Monitoring
- Pinstatussen worden automatisch bijgewerkt via WebSocket
- Wijzigingen in code worden direct weerspiegeld in de webinterface
- Meerdere gebruikers kunnen simultaan dezelfde ESP32 monitoren
Hardware Aansluitingen
Voorbeelden Output Pinnen
LED-bediening
Arduino Pin → LED (met weerstand) → Aarde
Pin 2 → LED Anode → 220Ω Weerstand → Aarde
Pin 3 → LED Anode → 220Ω Weerstand → Aarde
Relay-bediening
Arduino Pin → Relay Input
Pin 4 → Relay IN1
Pin 5 → Relay IN2
Motorbesturing (via Motor Driver)
Arduino Pin → Motor Driver Input
Pin 6 → Motor Driver IN1
Pin 7 → Motor Driver IN2
Pin 9 → Motor Driver ENA (PWM)
Voorbeelden Input Pinnen
Schakelaar Input
Schakelaar → ESP32 Pin (met pull-up weerstand)
Schakelaar → Pin 8 → 10kΩ weerstand → 5V
→ GND
Sensor Input
Sensor Signaal → ESP32 Pin
PIR Sensor → Pin 10
Ultrasoon → Pin 11 (Echo)
Code Aanpassingen
Toevoegen van Callback bij Pin-wijziging
Monitor wanneer pinstatussen veranderen:
void setup() {
// Stel callback in voor pinstatus wijzigingen
webDigitalPinsPage.onPinChange([](int pin, bool state) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(" changed to: ");
Serial.println(state ? "HIGH" : "LOW");
// Voeg hier uw aangepaste logica toe
if (pin == 13 && state == HIGH) {
Serial.println("Ingebouwde LED aan!");
}
});
}
Aangepaste Pin Initialisatie
Zet specifieke pinnen in gewenste staat bij opstarten:
void setup() {
// Initialiseer pinnen naar specifieke staten
webDigitalPinsPage.setPinState(2, HIGH); // Zet pin 2 aan
webDigitalPinsPage.setPinState(3, LOW); // Zet pin 3 uit
// Configureer pin-modi
pinMode(4, INPUT_PULLUP); // Pin 4 als input met pull-up
pinMode(5, OUTPUT); // Pin 5 als output
}
Input Pinnen Uitlezen
Monitor input-pinnen in de main loop:
void loop() {
static unsigned long lastRead = 0;
if (millis() - lastRead > 1000) { // Elke seconde lezen
// Lees input-pinnen en update webinterface
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin) &&
webDigitalPinsPage.getPinMode(pin) == WEB_PIN_INPUT) {
bool currentState = digitalRead(pin);
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
lastRead = millis();
}
}
Geavanceerde Functies
Pingroepen
Maak logische groepen pinnen voor gerelateerde functies:
// Definieer pingroepen
const int LED_PINS[] = {2, 3, 4, 5};
const int RELAY_PINS[] = {6, 7, 8, 9};
void controlLEDGroup(bool state) {
for (int pin : LED_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
void controlRelayGroup(bool state) {
for (int pin : RELAY_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
Patroon Generatie
Maak lichtpatronen of -sequenties:
void runLightPattern() {
static unsigned long lastChange = 0;
static int currentPin = 2;
if (millis() - lastChange > 500) { // Elke 500ms veranderen
// Zet alle pinnen uit
for (int pin = 2; pin <= 13; pin++) {
webDigitalPinsPage.setPinState(pin, LOW);
}
// Zet huidige pin aan
webDigitalPinsPage.setPinState(currentPin, HIGH);
// Ga naar volgende pin
currentPin++;
if (currentPin > 13) currentPin = 2;
lastChange = millis();
}
}
PWM Besturingsintegratie
Combineer met analoge besturing voor geavanceerde functies:
void setup() {
// Activeer digitale pinnen voor aan/uit besturing
webDigitalPinsPage.enablePin(9, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(10, WEB_PIN_OUTPUT);
// Stel PWM pinnen in voor helderheidsbesturing
analogWrite(9, 128); // 50% helderheid
analogWrite(10, 255); // 100% helderheid
}
Veiligheidsoverwegingen
Richtlijnen voor Pin Gebruik
Pinnen 0 & 1 (TX/RX)
- Gebruikt voor Seriële communicatie
- Vermijd gebruik tenzij strikt noodzakelijk
- Kan programmeren en debuggen verstoren
Pin 13 (Ingebouwde LED)
- Veilig te gebruiken voor testen
- Biedt visuele feedback
- Geschikt voor initiële tests
Pinnen 2-12
- Veilig voor algemene digitale I/O
- Aanbevolen voor de meeste toepassingen
- Geen speciale aandacht vereist
Stroombeperkingen
Maximale stroom per pin: 40mA
- Gebruik stroombegrenzende weerstanden bij LED’s
- Gebruik transistors of relais voor hoge stromen
- Let op totale stroomvraag
Spanningsniveaus: 3.3V logica
- ESP32 werkt met 3.3V logica
- Zorg dat aangesloten apparaten compatibel zijn
- Gebruik level shifters voor 5V apparaten indien nodig
Problemen Oplossen
Veelvoorkomende Problemen
1. Pin reageert niet
- Controleer of pin in code is ingeschakeld
- Controleer hardwareverbindingen
- Controleer op kortsluiting
- Controleer pinmodus (INPUT/OUTPUT)
2. Webinterface werkt niet bij
- Controleer WebSocket-verbinding
- Vernieuw de browserpagina
- Controleer netwerkverbinding
- Controleer Seriële Monitor op fouten
3. Bulkbewerkingen werken niet
- Zorg dat pinnen als outputs zijn ingesteld
- Controleer hardwarelimieten
- Verifieer voedingscapaciteit
- Let op overstroomcondities
4. Inputpinnen tonen verkeerde waarden
- Controleer of pull-up/pull-down weerstanden correct zijn
- Controleer ingangs-signaaleigenschappen
- Controleer op elektromagnetische storing
- Verifieer pinconfiguratie
Debug Tips
Activeer debug-uitvoer:
void debugPinStates() {
Serial.println("=== Pinstatussen ===");
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin)) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(": ");
Serial.print(digitalRead(pin) ? "HIGH" : "LOW");
Serial.print(" (");
Serial.print(webDigitalPinsPage.getPinMode(pin) == WEB_PIN_OUTPUT ? "OUTPUT" : "INPUT");
Serial.println(")");
}
}
Serial.println("==================");
}
Projectideeën
Home Automatisering
- Bedien verlichting in kamers
- Bedien raamjaloezieën
- Regel verwarmings- en koelsystemen
- Integratie met alarmsystemen
Tuin Automatisering
- Bedien irrigatiesysteem
- Beheer groeilampen
- Temperatuurregeling
- Vochtigheidscontrole
Werkplaats Besturing
- Bedien gereedschapsvoeding
- Verlichtingsmanagement
- Ventilatiesysteem
- Veiligheidsinterlocks
Educatieve Projecten
- Demonstraties van logische poorten
- Verkeerslichtsimulaties
- Alarmprojecten
- Experimenteer met afstandsbediening
Integratievoorbeelden
Bewegingsgestuurde Verlichting
void setup() {
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // LED
webDigitalPinsPage.enablePin(3, WEB_PIN_INPUT); // PIR sensor
pinMode(3, INPUT);
}
void loop() {
if (digitalRead(3) == HIGH) { // Beweging gedetecteerd
webDigitalPinsPage.setPinState(2, HIGH); // LED aan
delay(5000); // 5 seconden aanhouden
webDigitalPinsPage.setPinState(2, LOW); // LED uit
}
}
Temperatuurgestuurde Ventilator
void loop() {
float temperature = getTemperature(); // Uw functie om temperatuur uit te lezen
if (temperature > 25.0) {
webDigitalPinsPage.setPinState(4, HIGH); // Ventilator aan
} else {
webDigitalPinsPage.setPinState(4, LOW); // Ventilator uit
}
}
Volgende Stappen
Na het beheersen van het WebDigitalPins voorbeeld, probeer:
- WebSlider - Voor PWM en analoge besturing
- WebJoystick - Voor richtingsbesturing
- WebMonitor - Voor debugging en monitoring
- MultipleWebApps - Voor het combineren van alle functies