Arduino WebDigitalPins Voorbeeld - Digitale Pin Besturingsinterface Tutorial
Overzicht
Het WebDigitalPins voorbeeld biedt een web-gebaseerde interface om alle digitale pinnen op uw Arduino te besturen en te monitoren. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde GPIO-mogelijkheden, uitgebreide pin configuraties, en ingebouwde educatieve functies voor het leren van digitale elektronica. U kunt pinnen aan/uit zetten, hun toestanden real-time monitoren, en bulk operaties uitvoeren via een intuïtieve webinterface.
Functies
- Individuele Pin Besturing: Bestuur elke digitale pin (0-13) afzonderlijk
- Real-time Status: Monitor pin toestanden met visuele indicatoren
- Bulk Operaties: Bestuur alle pinnen tegelijk (Alles AAN, Alles UIT, Alles Omschakelen)
- Pin Configuratie: Stel pinnen in als Input of Output via webinterface
- Visuele Feedback: Kleur-gecodeerde knoppen tonen pin toestanden (groen=AAN, rood=UIT)
- Responsief Ontwerp: Werkt op desktop, tablet en mobiele apparaten
- WebSocket Communicatie: Directe updates zonder pagina vernieuwing
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 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.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/DIYables STEM V4 IoT, raadpleeg de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind de Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer de juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM-poort.
- Navigeer naar het Libraries icoon in de linkerbalk van de Arduino IDE.
- Zoek "DIYables WebApps", vind vervolgens de DIYables WebApps bibliotheek van DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheek afhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheek afhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebDigitalPins voorbeeld, of kopieer de bovenstaande code en plak het 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory 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 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-inloggegevens in de code door deze 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 Arduino UNO R4/DIYables STEM V4 IoT te uploaden
- Open de Serial Monitor
- Bekijk het resultaat in Serial Monitor. Het ziet er als volgt uit
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: Arduino Uno R4 WiFi
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, herstart dan de Arduino board.
- 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 homepage zoals in de onderstaande afbeelding:
- Klik op de Web Digital Pins link, u ziet de Web Digital Pins app UI zoals hieronder:
- Of u kunt ook direct toegang krijgen tot de pagina via het IP-adres gevolgd door /web-digital-pins. Bijvoorbeeld: http://192.168.0.2/web-digital-pins
- Probeer de digitale pinnen te besturen door op de pin knoppen te klikken om ze AAN/UIT te zetten en observeer hoe de ingebouwde LED (pin 13) reageert op uw commando's.
Creatieve Aanpassing - Pas de Code aan aan Uw Project
Het voorbeeld toont verschillende manieren om pinnen te configureren om aan uw creatieve projectbehoeften te voldoen:
2. Pin Instellingen Configureren
Het voorbeeld toont verschillende manieren om pinnen te configureren:
Methode 1: Specifieke Pinnen Inschakelen
// Individuele pinnen inschakelen 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: Pin Bereiken Inschakelen
// Een bereik van pinnen inschakelen voor output besturing
webDigitalPinsPage.enableOutputPins(2, 13); // Pinnen 2-13 als outputs
Methode 3: Alle Pinnen Inschakelen
// Alle pinnen 0-13 inschakelen voor besturing (gebruik voorzichtig voor pinnen 0,1)
webDigitalPinsPage.enableAllPins();
4. Upload de Sketch
- Selecteer uw Arduino board: Tools → Board → Arduino UNO R4 WiFi
- Selecteer de juiste poort: Tools → Port → [Uw Arduino Poort]
- Klik op de Upload knop
5. Verkrijg het IP-Adres
- Open Tools → Serial Monitor
- Stel de baud rate in op 9600
- Wacht tot Arduino verbinding maakt met WiFi
- Noteer het weergegeven IP-adres (bijv., 192.168.1.100)
6. Toegang tot de Digitale Pinnen Interface
Open uw webbrowser en navigeer naar:
http://[ARDUINO_IP_ADDRESS]/digital-pins
Voorbeeld: http://192.168.1.100/digital-pins
Hoe te Gebruiken
Pin Besturingsinterface
De webinterface toont alle geconfigureerde pinnen met:
- Pin Nummer: Toont welke Arduino pin (0-13)
- Huidige Toestand: AAN (groen) of UIT (rood) indicator
- Besturingsknop: Klik om pin toestand om te schakelen
- Pin Type: Toont of geconfigureerd als Input of Output
Individuele Pin Besturing
- Pin AAN zetten: Klik op de pin knop wanneer deze "UIT" toont
- Pin UIT zetten: Klik op de pin knop wanneer deze "AAN" toont
- Toestand Monitoren: Pin knoppen updaten automatisch om huidige toestand te tonen
Bulk Operaties
Gebruik de bulk besturingsknoppen om meerdere pinnen tegelijk te besturen:
Alles AAN
- Zet alle geconfigureerde output pinnen op HIGH toestand
- Input pinnen worden niet beïnvloed
- Handig voor het testen van alle aangesloten apparaten
Alles UIT
- Zet alle geconfigureerde output pinnen op LOW toestand
- Input pinnen worden niet beïnvloed
- Veilige manier om alle outputs uit te schakelen
Alles Omschakelen
- Keert de toestand van alle output pinnen om
- AAN pinnen worden UIT, UIT pinnen worden AAN
- Creëert interessante verlichtingseffecten
Real-time Monitoring
- Pin toestanden updaten automatisch via WebSocket
- Wijzigingen in code worden weerspiegeld in webinterface
- Meerdere gebruikers kunnen dezelfde Arduino tegelijkertijd monitoren
Hardware Verbindingen
Output Pin Voorbeelden
LED Besturing
Arduino Pin → LED (met weerstand) → Massa
Pin 2 → LED Anode → 220Ω Weerstand → Massa
Pin 3 → LED Anode → 220Ω Weerstand → Massa
Relais Besturing
Arduino Pin → Relais Input
Pin 4 → Relais IN1
Pin 5 → Relais IN2
Motor Besturing (via Motor Driver)
Arduino Pin → Motor Driver Input
Pin 6 → Motor Driver IN1
Pin 7 → Motor Driver IN2
Pin 9 → Motor Driver ENA (PWM)
Input Pin Voorbeelden
Schakelaar Input
Schakelaar → Arduino Pin (met pull-up weerstand)
Schakelaar → Pin 8 → 10kΩ weerstand → 5V
→ GND
Sensor Input
Sensor Signaal → Arduino Pin
PIR Sensor → Pin 10
Ultrasonic → Pin 11 (Echo)
Code Aanpassing
Pin Wijzigings Callbacks Toevoegen
Monitor wanneer pinnen van toestand veranderen:
void setup() {
// Callback instellen voor pin toestand wijzigingen
webDigitalPinsPage.onPinChange([](int pin, bool state) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(" veranderd naar: ");
Serial.println(state ? "HIGH" : "LOW");
// Voeg hier uw aangepaste logica toe
if (pin == 13 && state == HIGH) {
Serial.println("Ingebouwde LED aangezet!");
}
});
}
Aangepaste Pin Initialisatie
Stel specifieke pinnen in op gewenste toestanden bij opstarten:
void setup() {
// Pinnen initialiseren naar specifieke toestanden
webDigitalPinsPage.setPinState(2, HIGH); // Pin 2 aanzetten
webDigitalPinsPage.setPinState(3, LOW); // Pin 3 uitzetten
// Pin modes configureren
pinMode(4, INPUT_PULLUP); // Pin 4 als input met pull-up
pinMode(5, OUTPUT); // Pin 5 als output
}
Input Pinnen Lezen
Monitor input pinnen in uw hoofdlus:
void loop() {
static unsigned long lastRead = 0;
if (millis() - lastRead > 1000) { // Elke seconde lezen
// Input pinnen lezen en webinterface updaten
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
Pin Groepen
Creëer logische groepen van pinnen voor gerelateerde functies:
// Pin groepen definiëren
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
Creëer verlichtingspatronen of sequenties:
void runLightPattern() {
static unsigned long lastChange = 0;
static int currentPin = 2;
if (millis() - lastChange > 500) { // Elke 500ms veranderen
// Alle pinnen uitzetten
for (int pin = 2; pin <= 13; pin++) {
webDigitalPinsPage.setPinState(pin, LOW);
}
// Huidige pin aanzetten
webDigitalPinsPage.setPinState(currentPin, HIGH);
// Naar volgende pin gaan
currentPin++;
if (currentPin > 13) currentPin = 2;
lastChange = millis();
}
}
PWM Besturing Integratie
Combineer met analoge besturing voor geavanceerde functies:
void setup() {
// Digitale pinnen inschakelen voor aan/uit besturing
webDigitalPinsPage.enablePin(9, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(10, WEB_PIN_OUTPUT);
// PWM pinnen instellen voor helderheid besturing
analogWrite(9, 128); // 50% helderheid
analogWrite(10, 255); // 100% helderheid
}
Veiligheidsoverwegingen
Pin Gebruik Richtlijnen
Pinnen 0 & 1 (TX/RX)
- Gebruikt voor Serial communicatie
- Vermijd gebruik tenzij absoluut noodzakelijk
- Kan interfereren met programmeren en debugging
Pin 13 (Ingebouwde LED)
- Veilig te gebruiken voor testen
- Ingebouwde LED geeft visuele feedback
- Goed voor initiële testen
Pinnen 2-12
- Veilig voor algemene digitale I/O
- Aanbevolen voor de meeste toepassingen
- Geen speciale overwegingen
Stroom Beperkingen
Maximum Stroom per Pin: 40mA
- Gebruik stroom-beperkende weerstanden met LEDs
- Gebruik transistors of relais voor hoge-stroom belastingen
- Overweeg totale stroomverbruik
Spanning Niveaus: 3.3V logica
- Arduino Uno R4 WiFi gebruikt 3.3V logica
- Zorg ervoor dat aangesloten apparaten compatibel zijn
- Gebruik level shifters voor 5V apparaten indien nodig
Probleemoplossing
Veelvoorkomende Problemen
1. Pin reageert niet
- Controleer of pin is ingeschakeld in code
- Verifieer hardware verbindingen
- Controleer op kortsluiting
- Bevestig pin mode (INPUT/OUTPUT)
2. Webinterface wordt niet geüpdatet
- Controleer WebSocket verbindingsstatus
- Ververs browserpagina
- Verifieer netwerkconnectiviteit
- Controleer Serial Monitor voor fouten
3. Bulk operaties werken niet
- Zorg ervoor dat pinnen zijn geconfigureerd als outputs
- Controleer op hardware beperkingen
- Verifieer voeding capaciteit
- Monitor voor overcurrent condities
4. Input pinnen tonen verkeerde toestanden
- Controleer voor juiste pull-up/pull-down weerstanden
- Verifieer input signaalniveaus
- Controleer op elektromagnetische interferentie
- Bevestig pin configuratie
Debug Tips
Debug output inschakelen:
void debugPinStates() {
Serial.println("=== Pin Toestanden ===");
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
Domotica
- Kamerverlichting besturen
- Raamdecoratie bedienen
- Verwarmings-/koelsystemen besturen
- Beveiligingssysteem integratie
Tuin Automatisering
- Irrigatiesysteem besturing
- Groeilicht management
- Temperatuur regulatie
- Vochtigheid besturing
Werkplaats Besturing
- Gereedschap voeding besturing
- Verlichting management
- Ventilatiesysteem
- Veiligheids vergrendelingen
Educatieve Projecten
- Logic gate demonstraties
- Verkeerslicht simulatie
- Alarmsysteem projecten
- Afstandsbediening experimenten
Integratie Voorbeelden
Beweging-Geactiveerde 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 aanzetten
delay(5000); // 5 seconden aan houden
webDigitalPinsPage.setPinState(2, LOW); // LED uitzetten
}
}
Temperatuur-Gestuurde Ventilator
void loop() {
float temperature = getTemperature(); // Uw temperatuur lees functie
if (temperature > 25.0) {
webDigitalPinsPage.setPinState(4, HIGH); // Ventilator aanzetten
} else {
webDigitalPinsPage.setPinState(4, LOW); // Ventilator uitzetten
}
}
Volgende Stappen
Na het beheersen van het WebDigitalPins voorbeeld, probeer:
- WebSlider - Voor PWM en analoge besturing
- WebJoystick - Voor directionele besturing
- WebMonitor - Voor debugging en monitoring
- MultipleWebApps - Alle functies combineren
Ondersteuning
Voor extra hulp:
- Bekijk de API Reference documentatie
- Bezoek DIYables tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino community forums