Arduino MultipleWebApps-Beispiel - Komplettes IoT-Dashboard-Tutorial
MultipleWebApps-Beispiel - Vollständige Integrationsanleitung
Überblick
Dieses Beispiel zeigt, wie man mehrere Webanwendungen gleichzeitig mit der DIYables WebApps-Bibliothek verwendet. Es demonstriert die Integration mehrerer interaktiver Weboberflächen – wie Überwachung, Steuerung und Kommunikation – in einem einzigen Projekt. Dieses Beispiel ist für den Arduino Uno R4 WiFi und die DIYables STEM V4 IoT-Plattform konzipiert und eignet sich hervorragend, um zu lernen, wie man mehrere webbasierte Funktionen gleichzeitig kombiniert und verwaltet und bietet eine robuste Grundlage für fortgeschrittene IoT-Projekte.
Funktionen
- Startseite: Zentrales Navigationszentrum mit Links zu allen Webanwendungen
- Web Monitor: Echtzeit-Serienkommunikation und Debugging-Schnittstelle
- Chat Interface: Interaktives Chatsystem mit Arduino-Antwortmöglichkeiten
- Digital Pin Control: Webbasierte Steuerung und Überwachung aller digitalen Pins
- Duale Schieberegler-Steuerung: Zwei unabhängige Schieberegler zur Steuerung analoger Werte
- Virtueller Joystick: 2D-Positionssteuerung für Richtungsanwendungen
- Vereinheitlichte Zustandsverwaltung: Alle Schnittstellen teilen sich synchronisierte Zustandsinformationen
- Echtzeit-Updates: WebSocket-Kommunikation für sofortige Reaktionen
- Vorlagenstruktur: Bereit zur individuellen Anpassung als Grundlage für komplexe Projekte
- Plattform-Erweiterbarkeit: Derzeit implementiert für Arduino Uno R4 WiFi, kann aber auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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 Sie das Arduino Uno R4 WiFi/DIYables STEM V4 IoT zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
- Verbinden Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board über ein USB-Kabel mit Ihrem Computer.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port.
- Gehen Sie zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie dann die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Sie werden aufgefordert, einige 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 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: 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 the IP address in your web browser
*/
#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
UnoR4ServerFactory 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 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 im Arduino IDE, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen
- Öffnen Sie den Serial Monitor
- Überprüfen Sie das Ergebnis im Serial Monitor. Es sieht so aus wie unten gezeigt
COM6
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 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/
📊 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
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
- Notieren Sie die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite mit allen Webanwendungen, wie im folgenden Bild.
- Klicken Sie auf jeden Link einer Webanwendung (Chat, Web Monitor, Web Digital Pins, Web Slider, Web Joystick usw.). Sie sehen die Benutzeroberfläche der entsprechenden Webanwendung.
- Oder Sie können auch direkt auf jede Seite zugreifen, indem Sie die IP-Adresse gefolgt vom App-Pfad verwenden. 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.
Navigation der Weboberfläche
Startseiten-Dashboard
Die Startseite dient als Ihr Kontrollzentrum mit Links zu allen Anwendungen:
- Webmonitor: /webmonitor - Serielle Kommunikationsschnittstelle
- Chat: /chat - Interaktives Messaging mit Arduino
- Digitale Pins: /digital-pins - Pin-Steuerung und -Überwachung
- Web-Schieberegler: /webslider - Zwei analoge Schieberegler
- Web-Joystick: /webjoystick - 2D-Positionsteuerungsschnittstelle
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 bietet eine Grundlage für Ihre kreativen Projekte. Passen Sie die untenstehenden Konfigurationen an, um erstaunliche IoT-Anwendungen zu erstellen, die Ihrer einzigartigen Vision entsprechen.
Digitale Pin-Konfiguration
Das Beispiel vorkonfiguriert bestimmte Pins für verschiedene Zwecke:
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
Eingabepins (über das Web überwacht)
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
- hello - freundliche Begrüßungsantwort
- time - zeigt die Arduino-Betriebszeit in Sekunden an
- status - gibt den Arduino-Status und den LED-Zustand aus
- help - 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
Arduino: Hello! I'm your Arduino. How can I help you?
User: led on
Arduino: Built-in LED is now ON!
User: time
Arduino: I've been running for 1245 seconds.
User: status
Arduino: 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");
});
}
Intelligentes Zuhause-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);
}
Erziehungswissenschaftliches 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");
}
});
}
Fehlersuche
Häufige Probleme
1. Einige Schnittstellen laden nicht
- Überprüfen Sie, dass alle Anwendungen während des Setups auf dem Server hinzugefügt wurden.
- Überprüfen Sie WebSocket-Verbindungen in der Browser-Konsole.
- Stellen Sie sicher, dass ausreichend Speicher für alle Schnittstellen vorhanden ist.
- Inkonsistenzen zwischen Schnittstellen angeben
- Implementieren Sie Rückruffunktionen zur Zustands-Synchronisierung
- Verwenden Sie gemeinsam genutzte globale Variablen zur Verfolgung des Zustands
- Rufen Sie Synchronisationsfunktionen nach wesentlichen Änderungen des Zustands auf
3. Leistungsprobleme mit mehreren Schnittstellen
- Reduzieren Sie die Aktualisierungsrate für nicht kritische Schnittstellen
- Implementieren Sie selektive Aktualisierungen basierend auf der aktiven Schnittstelle
- Erwägen Sie, nicht verwendete Schnittstellen für bestimmte Projekte zu deaktivieren
- 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
Vorlage für ein Lehrlabor
- Schieberegler für Versuchsparameter
- Digitale Pins zur Steuerung von Geräten
- Chat zur Interaktion mit Studierenden
- Monitor zur Datenerfassung
- Sensorüberwachung in Echtzeit
Vorlage für Heimautomatisierung
- Digitale Pins zur Beleuchtungs- und Gerätesteuerung
- Schieberegler zum Dimmen und zur Klimasteuerung
- Sicherheitsüberwachung über Eingangspins
- Chat für sprachähnliche Befehle
- Monitor zur Protokollierung des Systemstatus
Robotik-Entwicklungs-Vorlage
- Joystick zur Bewegungssteuerung
- Schieberegler für Geschwindigkeit und Servopositionierung
- Digitale Pins für Sensoreneingänge
- Chat-Schnittstelle für Befehlsoberfläche
- Monitor zur Fehlerdiagnose 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 gemeistert haben:
- Passen Sie Ihr Projekt an: Entfernen Sie ungenutzte Schnittstellen und fügen Sie projektbezogene Logik hinzu
- Sensoren hinzufügen: Integrieren Sie reale Sensorwerte zur Überwachung der Eingaben
- Sicherheit implementieren: Fügen Sie Not-Aus-Schalter und Sicherheitsverriegelungen hinzu
- Eigene Befehle erstellen: Erweitern Sie die Chat-Oberfläche mit projektspezifischen Befehlen
- Datenprotokollierung hinzufügen: Verwenden Sie den Web-Monitor für dauerhafte 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 DIYables-Tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino-Community-Foren
Dieses umfassende Beispiel bildet die Grundlage für nahezu jedes Arduino-Projekt, das über das Web gesteuert wird. Beginnen Sie mit dieser Vorlage und passen Sie sie an Ihre spezifischen Bedürfnisse an!