Arduino Nano ESP32 Mehrere Web-Apps mit DIYables ESP32 WebApps Library
Überblick
Dieses Tutorial zeigt dir, wie du mehrere Webanwendungsseiten gleichzeitig auf einem Arduino Nano ESP32 mit der DIYables ESP32 WebApps Library ausführst. Jede Seite ist unabhängig; du registrierst nur die, die dein Projekt benötigt. Die Startseite listet alle registrierten Apps automatisch auf.
Was dieses Tutorial abdeckt
- Mehrere Seitenobjekte mit einer Serverinstanz registrieren
- Zustandsvariablen konfigurieren, die auf mehreren Seiten gemeinsam genutzt werden
- Digitale Pin-Modi für die Web-Seite mit digitalen Pins vorkonfigurieren
- Joystick-Empfindlichkeit und Automatisches Zurücksetzen aus der Skizze konfigurieren
- Navigation zwischen Seiten von der Startseite
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
Folge diesen Anweisungen Schritt für Schritt:
- Wenn du zum ersten Mal den Arduino Nano ESP32 verwendest, beachte das Tutorial zur Einrichtung der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinde das Arduino Nano ESP32-Board mit deinem Computer über ein USB-Kabel.
- Starte die Arduino IDE auf deinem Computer.
- Wähle das entsprechende Board (z. B. Arduino Nano ESP32) und COM-Port.
- Navigiere zum Symbol Bibliotheken in der linken Navigationsleiste der Arduino IDE.
- Suche "DIYables ESP32 WebApps", dann finde die DIYables ESP32 WebApps Library von DIYables
- Klicke auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Du wirst aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicke auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Gehe in der Arduino IDE zu Datei Beispiele DIYables ESP32 WebApps MultipleWebApps, oder kopiere den obigen Code und füge ihn in den Editor der Arduino IDE ein
/*
* DIYables WebApp Library - Multiple WebApps Example
*
* This example demonstrates multiple web apps of the DIYables WebApp library:
* - Home page with links to multiple web apps
* - Web Monitor: Real-time serial monitoring via WebSocket
* - Web Slider: Dual slider control
* - Web Joystick: Interactive joystick control
* - Web Rotator: Interactive rotatable disc control
* - Web Analog Gauge: Professional circular gauge for sensor monitoring
* - Web Table: Two-column data table with real-time updates
* - Web Plotter: See WebPlotter example for real-time data visualization
*
* Features:
* - Simplified callback system - no manual command parsing needed
* - Automatic state synchronization and JSON handling
* - All protocol details handled by the library
* - Template for hardware control
*
* 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 the IP address in your web browser
*/
#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
ESP32ServerFactory factory;
DIYablesWebAppServer webAppsServer(factory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebMonitorPage webMonitorPage;
DIYablesWebSliderPage webSliderPage;
DIYablesWebJoystickPage webJoystickPage(false, 5); // autoReturn=false, sensitivity=5
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Continuous rotation mode (0-360°)
DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 100.0, "%"); // Range: 0-100%, units: %
DIYablesWebTablePage webTablePage;
// Variables to track states
int currentSlider1 = 64; // Slider 1 value (0-255)
int currentSlider2 = 128; // Slider 2 value (0-255)
int currentJoystickX = 0; // Current joystick X value (-100 to 100)
int currentJoystickY = 0; // Current joystick Y value (-100 to 100)
int currentRotatorAngle = 0; // Current rotator angle (0-360°)
float currentGaugeValue = 50.0; // Current gauge value (0.0-100.0)
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Multiple Apps Example");
// Add all web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webMonitorPage);
webAppsServer.addApp(&webSliderPage);
webAppsServer.addApp(&webJoystickPage);
webAppsServer.addApp(&webRotatorPage);
webAppsServer.addApp(&webAnalogGaugePage);
webAppsServer.addApp(&webTablePage);
// Add more web apps here (e.g., WebPlotter)
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Configure table structure (only attribute names, values will be updated dynamically)
webTablePage.addRow("Arduino Status");
webTablePage.addRow("WiFi Connected");
webTablePage.addRow("Uptime");
webTablePage.addRow("Slider 1");
webTablePage.addRow("Slider 2");
webTablePage.addRow("Joystick X");
webTablePage.addRow("Joystick Y");
webTablePage.addRow("Rotator Angle");
webTablePage.addRow("Gauge Value");
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
// Web Monitor callback - echo messages back
webMonitorPage.onWebMonitorMessage([](const String& message) {
Serial.println("Web Monitor: " + message);
webMonitorPage.sendToWebMonitor("Arduino received: " + message);
});
// Web Slider callback - handle slider values
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
currentSlider1 = slider1;
currentSlider2 = slider2;
// Print slider values (0-255) without String concatenation
Serial.print("Slider 1: ");
Serial.print(slider1);
Serial.print(", Slider 2: ");
Serial.println(slider2);
// Update table with new slider values using String() conversion
webTablePage.sendValueUpdate("Slider 1", String(slider1));
webTablePage.sendValueUpdate("Slider 2", String(slider2));
// TODO: Add your control logic here based on slider values
// Examples:
// - Control PWM: analogWrite(LED_PIN, slider1);
// - Control servos: servo.write(map(slider1, 0, 255, 0, 180));
// - Control motor speed: analogWrite(MOTOR_PIN, slider2);
// Update gauge based on slider1 value (map 0-255 to 0-100)
currentGaugeValue = map(slider1, 0, 255, 0, 100);
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
char gaugeStr[16];
snprintf(gaugeStr, sizeof(gaugeStr), "%.1f%%", currentGaugeValue);
webTablePage.sendValueUpdate("Gauge Value", String(gaugeStr));
});
// Handle slider value requests
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(currentSlider1, currentSlider2);
});
// Web Joystick callback - handle joystick movement
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Store the received values
currentJoystickX = x;
currentJoystickY = y;
// Print joystick position values (-100 to +100)
Serial.print("Joystick - X: ");
Serial.print(x);
Serial.print(", Y: ");
Serial.println(y);
Serial.print(x);
Serial.print(", Y: ");
Serial.println(y);
// Update table with new joystick values
webTablePage.sendValueUpdate("Joystick X", String(x));
webTablePage.sendValueUpdate("Joystick Y", String(y));
// TODO: Add your control logic here based on joystick position
// Examples:
// - Control motors: if (x > 50) { /* move right */ }
// - Control servos: servo.write(map(y, -100, 100, 0, 180));
// - Control LEDs: analogWrite(LED_PIN, map(abs(x), 0, 100, 0, 255));
});
// Handle joystick values requests (when web page loads/reconnects)
webJoystickPage.onJoystickValueToWeb([]() {
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
});
// Web Rotator callback - handle rotation angle changes
webRotatorPage.onRotatorAngleFromWeb([](float angle) {
// Store the received angle
currentRotatorAngle = (int)angle;
// Print rotator angle (0-360°)
Serial.println("Rotator angle: " + String(angle) + "°");
// Update table with new rotator angle
webTablePage.sendValueUpdate("Rotator Angle", String(angle, 0) + "°");
// TODO: Add your control logic here based on rotator angle
// Examples:
// - Control servo: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle);
// - Control directional LED strip: setLEDDirection(angle);
});
// Handle analog gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
});
// Handle table data requests (when web page loads/reconnects)
webTablePage.onTableValueRequest([]() {
// Send initial values to the table
webTablePage.sendValueUpdate("Arduino Status", "Running");
webTablePage.sendValueUpdate("WiFi Connected", "Yes");
webTablePage.sendValueUpdate("Uptime", "0 seconds");
webTablePage.sendValueUpdate("Slider 1", String(currentSlider1));
webTablePage.sendValueUpdate("Slider 2", String(currentSlider2));
webTablePage.sendValueUpdate("Joystick X", String(currentJoystickX));
webTablePage.sendValueUpdate("Joystick Y", String(currentJoystickY));
webTablePage.sendValueUpdate("Rotator Angle", String(currentRotatorAngle) + "°");
webTablePage.sendValueUpdate("Gauge Value", String(currentGaugeValue, 1) + "%");
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update table with current uptime every 5 seconds
static unsigned long lastUptimeUpdate = 0;
if (millis() - lastUptimeUpdate > 5000) {
lastUptimeUpdate = millis();
unsigned long uptimeSeconds = millis() / 1000;
String uptimeStr = String(uptimeSeconds) + " seconds";
if (uptimeSeconds >= 60) {
uptimeStr = String(uptimeSeconds / 60) + "m " + String(uptimeSeconds % 60) + "s";
}
webTablePage.sendValueUpdate("Uptime", uptimeStr);
}
// Simulate sensor data updates every 3 seconds
static unsigned long lastSensorUpdate = 0;
if (millis() - lastSensorUpdate > 3000) {
lastSensorUpdate = millis();
// Simulate a sensor reading that varies over time
float sensorValue = 50.0 + 30.0 * sin(millis() / 10000.0); // Oscillates between 20-80
currentGaugeValue = sensorValue;
// Update gauge and table
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
webTablePage.sendValueUpdate("Gauge Value", String(currentGaugeValue, 1) + "%");
}
// TODO: Add your main application code here
delay(10);
}
- Aktualisiere die WiFi-Anmeldedaten in der Skizze:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicke auf die Schaltfläche Hochladen in der Arduino IDE, um Code zum Arduino Nano ESP32 hochzuladen
- Öffne den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Multiple Apps Example
INFO: Added app /
INFO: Added app /web-monitor
INFO: Added app /web-slider
INFO: Added app /web-joystick
INFO: Added app /web-rotator
INFO: Added app /web-gauge
INFO: Added app /web-table
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/
Web Monitor: http://192.168.0.2/web-monitor
Web Slider: http://192.168.0.2/web-slider
Web Joystick: http://192.168.0.2/web-joystick
Web Rotator: http://192.168.0.2/web-rotator
Web Analog Gauge: http://192.168.0.2/web-gauge
Web Table: http://192.168.0.2/web-table
==========================================
- Wenn nichts angezeigt wird, drücke den Reset-Button auf dem Board.
- Notiere dir die IP-Adresse und gib sie in einen Browser auf einem Gerät ein, das mit demselben WiFi-Netzwerk verbunden ist.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt Karten für alle registrierten Anwendungen:
- Wähle eine Karte aus, um diese Anwendung zu öffnen. Jede Seite ist auch direkt über ihre URL erreichbar, z. B. http://192.168.0.2/web-monitor oder http://192.168.0.2/web-slider.
Anwendungs-URLs
| Application | URL Path | |
|---|---|---|
| Home Page | http | //[board-ip]/ |
| Web Monitor | http | //[board-ip]/web-monitor |
| Web Slider | http | //[board-ip]/web-slider |
| Web Joystick | http | //[board-ip]/web-joystick |
| Web Rotator | http | //[board-ip]/web-rotator |
| Web Analog Gauge | http | //[board-ip]/web-gauge |
| Web Table | http | //[board-ip]/web-table |
Konfigurationsdetails
Einrichtung der digitalen Pins
Ausgabe-Pins können vom Browser aus geschrieben werden; Eingangs-Pins zeigen ihren aktuellen Status an:
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // General output
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // General output
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT); // General output
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Built-in LED
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT); // Sensor input
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT); // Switch input
Joystick-Konfiguration
// autoReturn=false: joystick stays at released position
// sensitivity=5: updates only when movement exceeds 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Gemeinsame Zustandsvariablen
Zustandsvariablen halten alle Seiten konsistent mit den tatsächlichen Hardwarewerten:
int pinStates[16] = { LOW }; // Digital pin states for pins 0-13
int currentSlider1 = 64; // Slider 1 value (0-255), starts at 25%
int currentSlider2 = 128; // Slider 2 value (0-255), starts at 50%
int currentJoystickX = 0; // Last joystick X (-100 to 100)
int currentJoystickY = 0; // Last joystick Y (-100 to 100)
Integrierte Chat-Befehle
Die Beispielskizze verarbeitet die folgenden Chat-Eingaben:
- hello — Gibt eine Begrüßung zurück
- time — Meldet die Betriebszeit des Boards in Sekunden
- status — Meldet Systemstatus und LED-Status
- help — Listet erkannte Befehle auf
- led on — Schaltet die eingebaute LED ein
- led off — Schaltet die eingebaute LED aus
Beispielbeispiel:
User: hello
ESP32: Hello! I'm your Arduino. How can I help you?
User: led on
ESP32: Built-in LED is now ON
User: time
ESP32: I've been running for 1245 seconds.
User: status
ESP32: Status: Running smoothly! LED is ON
Anpassung des Beispiels
Verwenden des Joysticks mit Motorsteuerung
Ordne die Joystick-X/Y-Werte linker und rechter Motorgeschwindigkeit mit dem Callback zu:
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
int leftSpeed = constrain(y + (x / 2), -100, 100);
int rightSpeed = constrain(y - (x / 2), -100, 100);
// Scale by slider 1 for speed limiting
leftSpeed = map(leftSpeed, -100, 100, -currentSlider1, currentSlider1);
rightSpeed = map(rightSpeed, -100, 100, -currentSlider1, currentSlider1);
analogWrite(MOTOR_LEFT_PWM, abs(leftSpeed));
analogWrite(MOTOR_RIGHT_PWM, abs(rightSpeed));
});
Sensorwerte zum Monitor senden
Verwende die Monitor-Seite, um Sensormessungen statt des seriellen Ports anzuzeigen:
void loop() {
webAppsServer.loop();
float temperature = readTemperature();
webMonitorPage.sendToWebMonitor("Temp: " + String(temperature) + " C");
delay(1000);
}
Speicherüberlegungen
Jede registrierte Seite erhöht die Flash- und RAM-Nutzung. Entferne Seiten, die dein Projekt nicht verwendet. Das modulare Design bedeutet, dass das Aufrufen von addApp() nur für die erforderlichen Seiten ausreicht – unbenutzten Seitenklassen werden nicht verknüpft.
Beachte die Speicherreferenztabelle für Speicherverbrauchsschätzungen pro Komponente.