Arduino Nano ESP32 Web-Steuerung digitaler Pins mit DIYables ESP32 WebApps-Bibliothek
Übersicht
Dieses Tutorial behandelt die DIYablesWebDigitalPinsPage-Klasse aus der DIYables ESP32 WebApps-Bibliothek. Die Seite präsentiert jeden registrierten Pin als Schaltfläche im Browser. Ausgabepins können umgeschaltet werden; Eingabepins zeigen ihren aktuellen Status an. Die Pin-Konfiguration erfolgt vollständig im Sketch – der Browser reflektiert, welchen Modus der Sketch definiert.
Was dieses Tutorial abdeckt
- Aktivierung einzelner Pins als WEB_PIN_OUTPUT oder WEB_PIN_INPUT
- Lesen von Ausgabestatusänderungen vom Browser über einen Callback
- Bereitstellung von Eingabe-Pin-Werten für den Browser über einen Lese-Callback
- Pushen von Statusaktualisierungen von dem Sketch zu verbundenen Browsern
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie zum ersten Mal Arduino Nano ESP32 verwenden, lesen Sie das Tutorial zum Einrichten der Arduino Nano ESP32 Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z. B. Arduino Nano ESP32) und den COM-Port aus.
- Navigieren Sie zum Libraries-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Install, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Install All, um alle Bibliotheksabhängigkeiten zu installieren.
- Gehen Sie in der Arduino IDE zu File Examples DIYables ESP32 WebApps WebDigitalPins oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* 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);
}
- Aktualisieren Sie die WiFi-Anmeldedaten im Sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Upload in der Arduino IDE, um den Code auf Arduino Nano ESP32 hochzuladen
- Öffnen Sie den Serial Monitor
- Die Ausgabe des Serial Monitor sollte folgende Ausgabe ähneln:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
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 Nano 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
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem Serial Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Web-Digital-Pins-Anwendung an:
- Wählen Sie die Karte "Digital Pins", um die Pin-Steuerungsseite zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-digital-pins erreichbar.
- Schalten Sie Ausgabepins um, indem Sie auf die entsprechenden Schaltflächen klicken. Pin 13 (integrierte LED) sollte sofort reagieren.
Pin-Konfigurationsmethoden
Pins müssen registriert werden, bevor webAppsServer.begin() aufgerufen wird. Drei Muster werden unterstützt:
Einzelne Pins aktivieren
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Pin 2 als Ausgang
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Pin 3 als Ausgang
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT); // Pin 4 als Eingang
Aktivierung eines Bereichs von Ausgabepins
// Registriert die Pins 2 bis 13 als Ausgänge
webDigitalPinsPage.enableOutputPins(2, 13);
Alle Pins aktivieren
// Registriert alle Pins 0-13 (vorsichtig verwenden für Pins 0 und 1 – UART)
webDigitalPinsPage.enableAllPins();
Callbacks
Schreib-Callback (Ausgabepins)
Wird aufgerufen, wenn der Browser einen Ausgabepin umschaltet:
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
Serial.println("Pin " + String(pin) + " set to " + String(state));
});
Lese-Callback (Eingabepins)
Wird aufgerufen, wenn der Browser den aktuellen Status eines Eingabepins anfordert:
webDigitalPinsPage.onPinRead([](int pin) -> int {
return digitalRead(pin);
});
Status vom Sketch aus pushen
Wenn sich ein Eingang außerhalb einer Browser-Anfrage ändert, pushen Sie die Aktualisierung manuell:
void loop() {
webAppsServer.loop();
int currentState = digitalRead(buttonPin);
if (currentState != lastButtonState) {
lastButtonState = currentState;
webDigitalPinsPage.updatePinState(buttonPin, currentState);
}
}
Web-Schnittstellen-Steuerelemente
- Pin-Schaltfläche: Klicken Sie, um einen Ausgabepin HIGH oder LOW umzuschalten. Grün zeigt HIGH an; rot zeigt LOW an.
- All ON: Setzt alle registrierten Ausgabepins auf HIGH.
- All OFF: Setzt alle registrierten Ausgabepins auf LOW.
- Toggle All: Invertiert den aktuellen Status aller Ausgabepins.
Eingabepins zeigen ihren aktuellen Status ohne eine Umschalttaste an – der Browser aktualisiert sie regelmäßig über WebSocket.
Fehlerbehebung
Pin-Status ändert sich nicht beim Anklicken
- Überprüfen Sie, ob der onPinWrite-Callback vor webAppsServer.begin() registriert ist
- Bestätigen Sie, dass der Pin mit WEB_PIN_OUTPUT registriert ist
- Überprüfen Sie den Serial Monitor auf eingehende WebSocket-Nachrichten
Eingabepin zeigt falschen Status
- Bestätigen Sie, dass der onPinRead-Callback registriert ist
- Fügen Sie einen Pull-up oder Pull-down Widerstand hinzu, um schwebende Eingänge zu vermeiden
- Überprüfen Sie, ob digitalRead() den erwarteten Wert im Callback zurückgibt
Seite nicht erreichbar
- Überprüfen Sie die IP-Adresse, die im Serial Monitor gedruckt ist
- Stellen Sie sicher, dass Port 80 im Netzwerk offen ist
- Das Board und das Browser-Gerät müssen sich im selben 2,4-GHz-WiFi-Netzwerk befinden