SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

ESP32 - Ethernet

ESP32 - GPIO-Unterbrechung

ESP32-Beispiel für mehrere Web-Apps – Komplettes IoT-Dashboard-Tutorial

Überblick

Dieses Beispiel zeigt, wie man mehrere Webanwendungen gleichzeitig mit der DIYables ESP32 WebApps-Bibliothek verwendet. Es demonstriert die Integration mehrerer interaktiver Webschnittstellen—wie Überwachung, Steuerung und Kommunikation—in einem einzigen Projekt. Ausgelegt für die ESP32-Plattform ist dieses Beispiel ideal, um zu lernen, wie man mehrere webbasierte Funktionen gleichzeitig kombiniert und verwaltet, und bietet eine robuste Grundlage für fortgeschrittene IoT-Projekte.

Arduino Mehrere Web-Apps-Beispiele – Umfassendes IoT-Dashboard-Tutorial

Funktionen

Startseite: Zentrales Navigationszentrum mit Links zu allen Webanwendungen
Web-Monitor: Echtzeit-Serienkommunikation und Debugging-Schnittstelle
Chat-Schnittstelle: Interaktives Chat-System mit ESP32-Antwortmöglichkeiten
Digitale Pin-Steuerung: Webbasierte Steuerung und Überwachung aller digitalen Pins
Dual-Schieberegler-Steuerung: Zwei unabhängige Regler zur Steuerung analoger Werte
Virtueller Joystick: 2D-Positionssteuerung für Richtungsanwendungen
Vereinheitlichte Zustandsverwaltung: Alle Schnittstellen teilen synchronisierte Zustandsinformationen
Echtzeit-Updates: WebSocket-Kommunikation für sofortige Reaktion
Vorlagenstruktur: Eine anpassungsbereite Grundlage für komplexe Projekte

Erforderliche Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
1	×	USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1	×	USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1	×	DIYables ESP32 Starter-Kit (ESP32 enthalten)
1	×	DIYables Sensor-Kit (30 Sensoren/Displays)
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.

Schnelle Schritte

Folgen Sie diesen Anweisungen Schritt für Schritt:

Wenn dies Ihre erste Verwendung des ESP32 ist, lesen Sie das Tutorial Einrichtung der Umgebung für ESP32 in der Arduino IDE.
Schließen Sie das ESP32-Board mit einem USB-Kabel an Ihren Computer an.
Starten Sie die Arduino-IDE auf Ihrem Computer.
Wählen Sie das geeignete ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
Suchen Sie "DIYables ESP32 WebApps", und finden Sie anschließend die DIYables ESP32 WebApps-Bibliothek von DIYables.
Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.

Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.

In der Arduino-IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps MultipleWebApps Beispiel, oder kopieren Sie den obigen Code und fügen 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); }

Konfigurieren Sie die WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:

const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um Code auf den ESP32 hochzuladen
Öffnen Sie den seriellen Monitor
Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht unten wie folgt aus

COM6

Send

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: 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 ==========================================

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
Beispiel: http://192.168.0.2
Sie sehen die Startseite mit allen Webanwendungen, wie im untenstehenden Bild gezeigt:

ESP32 DIYables Web-App-Startseite mit mehreren Web-Apps

Klicken Sie auf einen Link zu einer Webanwendung (Chat, Web Monitor, Web Digital Pins, Web Slider, Web Joystick usw.), Sie sehen dann die entsprechende Benutzeroberfläche der Webanwendung.
Oder Sie können jede Seite auch direkt über die IP-Adresse gefolgt vom Pfad der Anwendung aufrufen. Zum Beispiel: http://192.168.0.2/chat, http://192.168.0.2/web-monitor usw.
Erkunden Sie alle Webanwendungen: Versuchen Sie, mit Arduino zu chatten, die serielle Ausgabe zu überwachen, digitale Pins zu steuern, Schieberegler anzupassen und den virtuellen Joystick zu verwenden, um die vollständigen Möglichkeiten der integrierten Weboberfläche zu erleben.

Webinterface-Navigation

Dashboard der Startseite

Die Startseite dient als Ihr Kontrollzentrum mit Links zu allen Anwendungen:

Webüberwachung: /webmonitor - Serielle Kommunikationsschnittstelle
Chat: /chat - Interaktive Nachrichten mit Arduino
Digitale Pins: /digital-pins - Pinsteuerung und Überwachung
Web-Schieberegler: /webslider - Zwei analoge Schieberegler zur Steuerung
Web-Joystick: /webjoystick - 2D-Positionssteuerungsschnittstelle

Anwendungs-URLs

Greifen Sie direkt auf jede Schnittstelle zu:

http://[ARDUINO_IP]/ # Home page http://[ARDUINO_IP]/webmonitor # Serial monitor interface http://[ARDUINO_IP]/chat # Chat interface http://[ARDUINO_IP]/digital-pins # Pin control http://[ARDUINO_IP]/webslider # Slider controls http://[ARDUINO_IP]/webjoystick # Joystick control

Kreative Anpassung - Entfessle deine Innovation

Dieses umfassende Beispiel bildet die Grundlage für Ihre kreativen Projekte. Passen Sie die untenstehenden Konfigurationen an, um erstaunliche IoT-Anwendungen zu erstellen, die zu Ihrer einzigartigen Vision passen.

Digitale Pin-Konfiguration

Das Beispiel konfiguriert bestimmte Pins für verschiedene Zwecke vor:

Ausgangspins (über das Web steuerbar)

webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // General purpose output webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // General purpose output webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT); // General purpose output webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Built-in LED

Eingangs-Pins (Überwacht über das Web)

webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT); // Sensor input webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT); // Switch input

Joystick-Konfiguration

// Create joystick with custom settings // autoReturn=false: Joystick stays at last position when released // sensitivity=5: Only send updates when movement > 5% DIYablesWebJoystickPage webJoystickPage(false, 5);

Zustandsvariablen

Das Beispiel hält den synchronisierten Zustand über alle Schnittstellen hinweg aufrecht:

int pinStates[16] = { LOW }; // Track pin states (pins 0-13) int currentSlider1 = 64; // Slider 1 value (0-255) - 25% int currentSlider2 = 128; // Slider 2 value (0-255) - 50% int currentJoystickX = 0; // Joystick X value (-100 to 100) int currentJoystickY = 0; // Joystick Y value (-100 to 100)

Integrierte Chatbefehle

Die Chat-Oberfläche enthält mehrere vorprogrammierte Befehle:

Grundlegende Befehle

Hallo - Freundliche Begrüßungsantwort
Zeit - Zeigt die ESP32-Betriebszeit in Sekunden
Status - Berichtet über ESP32-Status und LED-Zustand
Hilfe - Listet verfügbare Befehle auf

Steuerbefehle

LED einschalten - Schaltet die eingebaute LED ein
LED ausschalten - Schaltet die eingebaute LED aus

Beispiel-Chat-Sitzung

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

Beispiele zur Programmierintegration

Vollständiges Roboter-Steuerungssystem

#include <Servo.h> // Hardware definitions const int MOTOR_LEFT_PWM = 9; const int MOTOR_RIGHT_PWM = 10; const int SERVO_PAN = 11; const int SERVO_TILT = 12; const int LED_STRIP_PIN = 6; Servo panServo, tiltServo; void setup() { // Initialize hardware panServo.attach(SERVO_PAN); tiltServo.attach(SERVO_TILT); pinMode(MOTOR_LEFT_PWM, OUTPUT); pinMode(MOTOR_RIGHT_PWM, OUTPUT); // ... WebApp setup code ... setupRobotCallbacks(); } void setupRobotCallbacks() { // Use joystick for robot movement webJoystickPage.onJoystickValueFromWeb([](int x, int y) { // Convert joystick to tank drive int leftSpeed = y + (x / 2); int rightSpeed = y - (x / 2); leftSpeed = constrain(leftSpeed, -100, 100); rightSpeed = constrain(rightSpeed, -100, 100); // Apply speed limits from sliders leftSpeed = map(leftSpeed, -100, 100, -currentSlider1, currentSlider1); rightSpeed = map(rightSpeed, -100, 100, -currentSlider1, currentSlider1); // Control motors analogWrite(MOTOR_LEFT_PWM, abs(leftSpeed)); analogWrite(MOTOR_RIGHT_PWM, abs(rightSpeed)); Serial.println("Robot - Left: " + String(leftSpeed) + ", Right: " + String(rightSpeed)); }); // Use sliders for camera pan/tilt control webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Slider 1 controls maximum speed, Slider 2 controls camera tilt int panAngle = map(currentJoystickX, -100, 100, 0, 180); int tiltAngle = map(slider2, 0, 255, 0, 180); panServo.write(panAngle); tiltServo.write(tiltAngle); Serial.println("Camera - Pan: " + String(panAngle) + "°, Tilt: " + String(tiltAngle) + "°"); }); // Use digital pins for special functions webDigitalPinsPage.onPinWrite([](int pin, int state) { switch (pin) { case 2: // Headlights digitalWrite(pin, state); Serial.println("Headlights " + String(state ? "ON" : "OFF")); break; case 3: // Horn/Buzzer if (state) { // Trigger buzzer sequence digitalWrite(pin, HIGH); delay(200); digitalWrite(pin, LOW); } break; case 4: // Emergency stop if (state) { analogWrite(MOTOR_LEFT_PWM, 0); analogWrite(MOTOR_RIGHT_PWM, 0); Serial.println("EMERGENCY STOP ACTIVATED"); } break; } }); // Enhanced chat commands for robot control chatPage.onChatMessage([](const String& message) { String msg = message; msg.toLowerCase(); if (msg.indexOf("stop") >= 0) { analogWrite(MOTOR_LEFT_PWM, 0); analogWrite(MOTOR_RIGHT_PWM, 0); chatPage.sendToChat("Robot stopped!"); return; } if (msg.indexOf("center camera") >= 0) { panServo.write(90); tiltServo.write(90); chatPage.sendToChat("Camera centered!"); return; } if (msg.indexOf("speed") >= 0) { String response = "Current max speed: " + String(map(currentSlider1, 0, 255, 0, 100)) + "%"; chatPage.sendToChat(response); return; } // Default response for unknown commands chatPage.sendToChat("Robot commands: stop, center camera, speed"); }); }

Smart-Home-Steuerungssystem

// Home automation pin assignments const int LIVING_ROOM_LIGHTS = 2; const int BEDROOM_LIGHTS = 3; const int KITCHEN_LIGHTS = 4; const int FAN_CONTROL = 9; const int AC_CONTROL = 10; const int MOTION_SENSOR = 8; const int DOOR_SENSOR = 9; void setupHomeAutomation() { // Configure home automation pins pinMode(LIVING_ROOM_LIGHTS, OUTPUT); pinMode(BEDROOM_LIGHTS, OUTPUT); pinMode(KITCHEN_LIGHTS, OUTPUT); pinMode(FAN_CONTROL, OUTPUT); pinMode(AC_CONTROL, OUTPUT); pinMode(MOTION_SENSOR, INPUT); pinMode(DOOR_SENSOR, INPUT_PULLUP); // Digital pins for room lighting control webDigitalPinsPage.onPinWrite([](int pin, int state) { digitalWrite(pin, state); String room; switch (pin) { case 2: room = "Living Room"; break; case 3: room = "Bedroom"; break; case 4: room = "Kitchen"; break; default: room = "Pin " + String(pin); break; } Serial.println(room + " lights " + String(state ? "ON" : "OFF")); // Send notification to chat String message = room + " lights turned " + String(state ? "ON" : "OFF"); chatPage.sendToChat(message); }); // Sliders for fan and AC control webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Slider 1 controls fan speed (0-255) analogWrite(FAN_CONTROL, slider1); // Slider 2 controls AC intensity (0-255) analogWrite(AC_CONTROL, slider2); Serial.println("Fan: " + String(map(slider1, 0, 255, 0, 100)) + "%, " + "AC: " + String(map(slider2, 0, 255, 0, 100)) + "%"); }); // Enhanced chat commands for home control chatPage.onChatMessage([](const String& message) { String msg = message; msg.toLowerCase(); if (msg.indexOf("all lights on") >= 0) { digitalWrite(LIVING_ROOM_LIGHTS, HIGH); digitalWrite(BEDROOM_LIGHTS, HIGH); digitalWrite(KITCHEN_LIGHTS, HIGH); chatPage.sendToChat("All lights turned ON!"); return; } if (msg.indexOf("all lights off") >= 0) { digitalWrite(LIVING_ROOM_LIGHTS, LOW); digitalWrite(BEDROOM_LIGHTS, LOW); digitalWrite(KITCHEN_LIGHTS, LOW); chatPage.sendToChat("All lights turned OFF!"); return; } if (msg.indexOf("temperature") >= 0) { String response = "Fan: " + String(map(currentSlider1, 0, 255, 0, 100)) + "%, " + "AC: " + String(map(currentSlider2, 0, 255, 0, 100)) + "%"; chatPage.sendToChat(response); return; } if (msg.indexOf("security") >= 0) { bool motion = digitalRead(MOTION_SENSOR); bool door = digitalRead(DOOR_SENSOR); String status = "Motion: " + String(motion ? "DETECTED" : "CLEAR") + ", Door: " + String(door ? "CLOSED" : "OPEN"); chatPage.sendToChat(status); return; } // Default home automation help chatPage.sendToChat("Home commands: all lights on/off, temperature, security"); }); } void loop() { server.loop(); // Monitor home security sensors static bool lastMotion = false; static bool lastDoor = false; bool currentMotion = digitalRead(MOTION_SENSOR); bool currentDoor = digitalRead(DOOR_SENSOR); // Send alerts for security events if (currentMotion != lastMotion) { if (currentMotion) { chatPage.sendToChat("🚨 MOTION DETECTED!"); webMonitorPage.sendToWebMonitor("Security Alert: Motion detected"); } lastMotion = currentMotion; } if (currentDoor != lastDoor) { String status = currentDoor ? "CLOSED" : "OPENED"; chatPage.sendToChat("🚪 Door " + status); webMonitorPage.sendToWebMonitor("Security: Door " + status); lastDoor = currentDoor; } delay(10); }

Bildungswissenschaftliches Projekt

// Science experiment control system const int HEATING_ELEMENT = 9; const int COOLING_FAN = 10; const int STIRRER_MOTOR = 11; const int TEMP_SENSOR_PIN = A0; const int PH_SENSOR_PIN = A1; void setupScienceExperiment() { // Sliders for temperature and stirring control webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { // Slider 1 controls target temperature (mapped to heating/cooling) int targetTemp = map(slider1, 0, 255, 20, 80); // 20-80°C range // Slider 2 controls stirrer speed analogWrite(STIRRER_MOTOR, slider2); // Simple temperature control logic int currentTemp = readTemperature(); if (currentTemp < targetTemp) { analogWrite(HEATING_ELEMENT, 200); // Heat on analogWrite(COOLING_FAN, 0); // Fan off } else if (currentTemp > targetTemp + 2) { analogWrite(HEATING_ELEMENT, 0); // Heat off analogWrite(COOLING_FAN, 255); // Fan on } else { analogWrite(HEATING_ELEMENT, 0); // Both off (maintain) analogWrite(COOLING_FAN, 0); } Serial.println("Target: " + String(targetTemp) + "°C, Current: " + String(currentTemp) + "°C"); }); // Chat interface for experiment control and data chatPage.onChatMessage([](const String& message) { String msg = message; msg.toLowerCase(); if (msg.indexOf("data") >= 0) { int temp = readTemperature(); float ph = readPH(); String data = "Temperature: " + String(temp) + "°C, pH: " + String(ph, 2); chatPage.sendToChat(data); return; } if (msg.indexOf("start") >= 0) { // Begin experiment sequence chatPage.sendToChat("🔬 Experiment started! Monitoring conditions..."); return; } if (msg.indexOf("stop") >= 0) { // Emergency stop analogWrite(HEATING_ELEMENT, 0); analogWrite(COOLING_FAN, 0); analogWrite(STIRRER_MOTOR, 0); chatPage.sendToChat("⚠️ Experiment stopped - all systems OFF"); return; } chatPage.sendToChat("Science commands: data, start, stop"); }); // Monitor for automatic data logging webMonitorPage.onWebMonitorMessage([](const String& message) { if (message == "log") { int temp = readTemperature(); float ph = readPH(); String logEntry = String(millis()) + "," + String(temp) + "," + String(ph, 2); webMonitorPage.sendToWebMonitor(logEntry); } }); } int readTemperature() { // Read temperature sensor (example implementation) int sensorValue = analogRead(TEMP_SENSOR_PIN); return map(sensorValue, 0, 1023, 0, 100); // Convert to temperature } float readPH() { // Read pH sensor (example implementation) int sensorValue = analogRead(PH_SENSOR_PIN); return map(sensorValue, 0, 1023, 0, 14) / 10.0; // Convert to pH }

Fortgeschrittene Integrationstechniken

Zustandsynchronisierung

void synchronizeAllStates() { // Ensure all interfaces show current state webSliderPage.sendToWebSlider(currentSlider1, currentSlider2); webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY); // Update all pin states for (int pin = 0; pin <= 13; pin++) { if (webDigitalPinsPage.isPinEnabled(pin)) { webDigitalPinsPage.updatePinState(pin, pinStates[pin]); } } Serial.println("All interface states synchronized"); }

Schnittstellenübergreifende Kommunikation

void setupCrossInterfaceCommunication() { // Joystick position affects slider maximum values webJoystickPage.onJoystickValueFromWeb([](int x, int y) { // Calculate distance from center float distance = sqrt(x*x + y*y); // Limit slider maximum based on joystick distance if (distance > 50) { // Reduce maximum slider values when joystick is far from center int maxValue = map(distance, 50, 100, 255, 128); // You could implement dynamic slider limiting here } }); // Pin states affect available chat commands webDigitalPinsPage.onPinWrite([](int pin, int state) { if (pin == 2 && state == HIGH) { chatPage.sendToChat("📢 System armed - additional commands available"); } else if (pin == 2 && state == LOW) { chatPage.sendToChat("📢 System disarmed - limited commands only"); } }); }

Fehlerbehebung

Häufige Probleme

1. Einige Schnittstellen laden nicht

Stellen Sie sicher, dass im Setup alle Anwendungen dem Server hinzugefügt werden.
Überprüfen Sie die WebSocket-Verbindungen in der Browser-Konsole.
Stellen Sie sicher, dass ausreichend Speicher für alle Schnittstellen vorhanden ist.

Inkonsistenzen zwischen Schnittstellen aufzeigen

Implementieren Sie Callback-Funktionen zur Zustandssynchronisation
Verwenden Sie gemeinsam genutzte globale Variablen zur Zustandsverfolgung
Rufen Sie Synchronisationsfunktionen nach größeren Zustandsänderungen auf

3. Leistungsprobleme mit mehreren Schnittstellen

Reduzieren Sie die Aktualisierungsfrequenzen für nicht-kritische Schnittstellen
Implementieren Sie selektive Aktualisierungen basierend auf der aktiven Schnittstelle
Erwägen Sie, ungenutzte Schnittstellen für bestimmte Projekte zu deaktivieren

4. Speicherbeschränkungen

Überwache den verfügbaren RAM mit Serial.print(freeMemory())
Deaktiviere ungenutzte Schnittstellen, wenn der Speicher knapp ist
Optimiere Callback-Funktionen, um den Speicherverbrauch zu minimieren

Debug-Strategien

void debugSystemState() { Serial.println("=== System State Debug ==="); Serial.println("Free Memory: " + String(freeMemory()) + " bytes"); Serial.println("Digital Pins:"); for (int pin = 0; pin <= 13; pin++) { if (webDigitalPinsPage.isPinEnabled(pin)) { Serial.println(" Pin " + String(pin) + ": " + String(pinStates[pin] ? "HIGH" : "LOW")); } } Serial.println("Sliders: " + String(currentSlider1) + ", " + String(currentSlider2)); Serial.println("Joystick: X=" + String(currentJoystickX) + ", Y=" + String(currentJoystickY)); Serial.println("========================"); }

Projektvorlagen

Industrielle Steuerungsvorlage

Digitale Pins zur Maschinensteuerung
Schieberegler zur Steuerung von Geschwindigkeit und Temperatur
Joystick für Positioniersysteme
Chat für Statusmeldungen und Befehle
Monitor zur Datenerfassung

Bildungslabor-Vorlage

Schieberegler für Experimentparameter
Digitale Pins zur Steuerung von Geräten
Chat für die Interaktion mit Studierenden
Monitor zur Datenerfassung
Sensorüberwachung in Echtzeit

Vorlage für Hausautomation

Digitale Pins zur Steuerung von Beleuchtung/Haushaltsgeräten
Schieberegler für Dimmen und Klimasteuerung
Sicherheitsüberwachung über Eingangs-Pins
Chat für sprachähnliche Befehle
Monitor zur Protokollierung des Systemstatus

Vorlage zur Robotikentwicklung

Joystick zur Bewegungssteuerung
Schieberegler für Geschwindigkeit und Servo-Positionierung
Digitale Pins für Sensor-Eingänge
Chat für die Befehlsoberfläche
Monitor für Debugging und Telemetrie

Leistungsoptimierung

Speicherverwaltung

void optimizeMemoryUsage() { // Disable unused interfaces to save memory // server.addApp(&homePage); // Always keep home page // server.addApp(&webMonitorPage); // Keep for debugging // server.addApp(&chatPage); // Optional // server.addApp(&webDigitalPinsPage); // Based on project needs // server.addApp(&webSliderPage); // Based on project needs // server.addApp(&webJoystickPage); // Based on project needs }

Steuerung der Aktualisierungsfrequenz

void controlUpdateFrequency() { static unsigned long lastSlowUpdate = 0; static unsigned long lastFastUpdate = 0; // Fast updates for critical controls (10ms) if (millis() - lastFastUpdate > 10) { // Update joystick and emergency controls lastFastUpdate = millis(); } // Slow updates for monitoring (1000ms) if (millis() - lastSlowUpdate > 1000) { // Update sensor readings and status lastSlowUpdate = millis(); } }

Nächste Schritte

Nachdem Sie das MultipleWebApps-Beispiel beherrscht haben:

Passen Sie es an Ihr Projekt an: Entfernen Sie ungenutzte Schnittstellen und fügen Sie projektspezifische Logik hinzu
Sensoren hinzufügen: Integrieren Sie reale Sensorwerte zur Überwachung der Eingaben
Sicherheit implementieren: Fügen Sie Not-Aus-Schalter und Sicherheitsverriegelungen hinzu
Benutzerdefinierte Befehle erstellen: Erweitern Sie die Chat-Oberfläche um projektspezifische Befehle
Datenlogging hinzufügen: Verwenden Sie den Webmonitor für permanente Datenspeicherung
Mobile-Optimierung: Testen und optimieren Sie die Nutzung mobiler Geräte

Unterstützung

Für weitere Hilfe:

Überprüfen Sie die Dokumentation der einzelnen Beispiele (Chat_Example.txt, WebMonitor_Example.txt usw.)
Überprüfen Sie die API-Referenzdokumentation
Besuchen Sie die DIYables-Tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
ESP32-Community-Foren

Dieses umfassende Beispiel bildet die Grundlage für nahezu jedes webgesteuerte ESP32-Projekt. Beginnen Sie mit dieser Vorlage und passen Sie sie an Ihre spezifischen Bedürfnisse an!