Arduino MultipleWebApps Voorbeeld - Volledige IoT Dashboard Tutorial
Overzicht
Dit voorbeeld toont hoe u meerdere webapplicaties tegelijkertijd kunt gebruiken met de DIYables WebApps library. Het demonstreert de integratie van verschillende interactieve webinterfaces—zoals monitoring, besturing en communicatie—binnen een enkel project. Ontworpen voor de Arduino Uno R4 WiFi en DIYables STEM V4 IoT platform, is dit voorbeeld ideaal voor het leren combineren en beheren van meerdere web-gebaseerde functies tegelijkertijd, en biedt het een robuuste basis voor geavanceerde IoT projecten.
Functies
- Home Pagina: Centrale navigatiehub met links naar alle webapplicaties
- Web Monitor: Real-time seriële communicatie en debugging interface
- Chat Interface: Interactief chatsysteem met Arduino response mogelijkheden
- Digital Pin Besturing: Web-gebaseerde besturing en monitoring van alle digitale pins
- Dual Slider Besturing: Twee onafhankelijke sliders voor analoge waardebesturing
- Virtuele Joystick: 2D positiebesturing voor directionele toepassingen
- Unified State Management: Alle interfaces delen gesynchroniseerde statusinformatie
- Real-time Updates: WebSocket communicatie voor directe respons
- Template Structuur: Ready-to-customize basis voor complexe projecten
- 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.
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 dan de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv. Arduino Uno R4 WiFi) en COM poort.
- Navigeer naar het Libraries icoon in de linker balk van de Arduino IDE.
- Zoek "DIYables WebApps", en vind vervolgens de DIYables WebApps library van DIYables
- Klik op de Install knop om de library te installeren.
- U wordt gevraagd om enkele andere library dependencies te installeren
- Klik op de Install All knop om alle library dependencies te installeren.
- Ga in Arduino IDE naar File Examples DIYables WebApps MultipleWebApps voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van Arduino IDE
/*
* 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);
}
- 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 te uploaden naar Arduino UNO R4/DIYables STEM V4 IoT
- Open de Serial Monitor
- Bekijk het resultaat in Serial Monitor. Het ziet eruit als onderstaand
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
- Als u niets ziet, herstart dan het 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 zult de home pagina zien met alle webapplicaties zoals onderstaande afbeelding:
- Klik op elke webapplicatie link (Chat, Web Monitor, Web Digital Pins, Web Slider, Web Joystick, etc.), u zult de bijbehorende web app's UI zien.
- Of u kunt ook elke pagina direct bereiken via het IP-adres gevolgd door het app pad. Bijvoorbeeld: http://192.168.0.2/chat, http://192.168.0.2/web-monitor, etc.
- Verken alle webapplicaties: probeer te chatten met Arduino, monitor seriële uitvoer, bestuur digitale pins, pas sliders aan, en gebruik de virtuele joystick om de volledige mogelijkheden van de geïntegreerde web interface te ervaren.
Creatieve Aanpassing - Ontketenen Uw Innovatie
Dit uitgebreide voorbeeld biedt een basis voor uw creatieve projecten. Wijzig en pas de onderstaande configuraties aan om geweldige IoT applicaties te bouwen die passen bij uw unieke visie.
Digital Pin Configuratie
Het voorbeeld pre-configureert specifieke pins voor verschillende doeleinden:
Output Pins (Bestuurbaar via Web)
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Algemene uitvoer
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Algemene uitvoer
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT); // Algemene uitvoer
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Ingebouwde LED
Input Pins (Gemonitord via Web)
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT); // Sensor invoer
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT); // Schakelaar invoer
Joystick Configuratie
// Maak joystick met aangepaste instellingen
// autoReturn=false: Joystick blijft op laatste positie bij loslaten
// sensitivity=5: Stuur alleen updates wanneer beweging > 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
State Variabelen
Het voorbeeld houdt gesynchroniseerde status bij over alle interfaces:
int pinStates[16] = { LOW }; // Volg pin states (pins 0-13)
int currentSlider1 = 64; // Slider 1 waarde (0-255) - 25%
int currentSlider2 = 128; // Slider 2 waarde (0-255) - 50%
int currentJoystickX = 0; // Joystick X waarde (-100 tot 100)
int currentJoystickY = 0; // Joystick Y waarde (-100 tot 100)
Ingebouwde Chat Commando's
De chat interface bevat verschillende vooraf geprogrammeerde commando's:
Basis Commando's
- hello - Vriendelijke begroeting respons
- time - Toont Arduino uptime in seconden
- status - Rapporteert Arduino status en LED staat
- help - Lijst beschikbare commando's
Besturing Commando's
- led on - Zet de ingebouwde LED aan
- led off - Zet de ingebouwde LED uit
Voorbeeld Chat Sessie
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
Programming Integratie Voorbeelden
Compleet Robot Besturingssysteem
#include <Servo.h>
// Hardware definities
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() {
// Initialiseer 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() {
// Gebruik joystick voor robot beweging
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Converteer joystick naar tank drive
int leftSpeed = y + (x / 2);
int rightSpeed = y - (x / 2);
leftSpeed = constrain(leftSpeed, -100, 100);
rightSpeed = constrain(rightSpeed, -100, 100);
// Pas snelheidslimieten toe van sliders
leftSpeed = map(leftSpeed, -100, 100, -currentSlider1, currentSlider1);
rightSpeed = map(rightSpeed, -100, 100, -currentSlider1, currentSlider1);
// Bestuur motoren
analogWrite(MOTOR_LEFT_PWM, abs(leftSpeed));
analogWrite(MOTOR_RIGHT_PWM, abs(rightSpeed));
Serial.println("Robot - Links: " + String(leftSpeed) + ", Rechts: " + String(rightSpeed));
});
// Gebruik sliders voor camera pan/tilt besturing
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Slider 1 regelt maximale snelheid, Slider 2 regelt camera kanteling
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) + "°");
});
// Gebruik digitale pins voor speciale functies
webDigitalPinsPage.onPinWrite([](int pin, int state) {
switch (pin) {
case 2: // Koplampen
digitalWrite(pin, state);
Serial.println("Koplampen " + String(state ? "AAN" : "UIT"));
break;
case 3: // Claxon/Buzzer
if (state) {
// Activeer buzzer sequentie
digitalWrite(pin, HIGH);
delay(200);
digitalWrite(pin, LOW);
}
break;
case 4: // Noodstop
if (state) {
analogWrite(MOTOR_LEFT_PWM, 0);
analogWrite(MOTOR_RIGHT_PWM, 0);
Serial.println("NOODSTOP GEACTIVEERD");
}
break;
}
});
// Uitgebreide chat commando's voor robot besturing
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 gestopt!");
return;
}
if (msg.indexOf("center camera") >= 0) {
panServo.write(90);
tiltServo.write(90);
chatPage.sendToChat("Camera gecentreerd!");
return;
}
if (msg.indexOf("speed") >= 0) {
String response = "Huidige max snelheid: " + String(map(currentSlider1, 0, 255, 0, 100)) + "%";
chatPage.sendToChat(response);
return;
}
// Standaard respons voor onbekende commando's
chatPage.sendToChat("Robot commando's: stop, center camera, speed");
});
}
Smart Home Besturingssysteem
// Domotica pin toewijzingen
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() {
// Configureer domotica 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);
// Digitale pins voor kamerverlichting besturing
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
String room;
switch (pin) {
case 2: room = "Woonkamer"; break;
case 3: room = "Slaapkamer"; break;
case 4: room = "Keuken"; break;
default: room = "Pin " + String(pin); break;
}
Serial.println(room + " verlichting " + String(state ? "AAN" : "UIT"));
// Stuur notificatie naar chat
String message = room + " verlichting " + String(state ? "aangezet" : "uitgezet");
chatPage.sendToChat(message);
});
// Sliders voor ventilator en AC besturing
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Slider 1 regelt ventilator snelheid (0-255)
analogWrite(FAN_CONTROL, slider1);
// Slider 2 regelt AC intensiteit (0-255)
analogWrite(AC_CONTROL, slider2);
Serial.println("Ventilator: " + String(map(slider1, 0, 255, 0, 100)) + "%, " +
"AC: " + String(map(slider2, 0, 255, 0, 100)) + "%");
});
// Uitgebreide chat commando's voor thuisbesturing
chatPage.onChatMessage([](const String& message) {
String msg = message;
msg.toLowerCase();
if (msg.indexOf("alle lichten aan") >= 0) {
digitalWrite(LIVING_ROOM_LIGHTS, HIGH);
digitalWrite(BEDROOM_LIGHTS, HIGH);
digitalWrite(KITCHEN_LIGHTS, HIGH);
chatPage.sendToChat("Alle lichten aangezet!");
return;
}
if (msg.indexOf("alle lichten uit") >= 0) {
digitalWrite(LIVING_ROOM_LIGHTS, LOW);
digitalWrite(BEDROOM_LIGHTS, LOW);
digitalWrite(KITCHEN_LIGHTS, LOW);
chatPage.sendToChat("Alle lichten uitgezet!");
return;
}
if (msg.indexOf("temperatuur") >= 0) {
String response = "Ventilator: " + String(map(currentSlider1, 0, 255, 0, 100)) + "%, " +
"AC: " + String(map(currentSlider2, 0, 255, 0, 100)) + "%";
chatPage.sendToChat(response);
return;
}
if (msg.indexOf("beveiliging") >= 0) {
bool motion = digitalRead(MOTION_SENSOR);
bool door = digitalRead(DOOR_SENSOR);
String status = "Beweging: " + String(motion ? "GEDETECTEERD" : "VRIJ") +
", Deur: " + String(door ? "GESLOTEN" : "OPEN");
chatPage.sendToChat(status);
return;
}
// Standaard domotica hulp
chatPage.sendToChat("Huis commando's: alle lichten aan/uit, temperatuur, beveiliging");
});
}
void loop() {
server.loop();
// Monitor thuis beveiligingssensoren
static bool lastMotion = false;
static bool lastDoor = false;
bool currentMotion = digitalRead(MOTION_SENSOR);
bool currentDoor = digitalRead(DOOR_SENSOR);
// Stuur waarschuwingen voor beveiligingsgebeurtenissen
if (currentMotion != lastMotion) {
if (currentMotion) {
chatPage.sendToChat("🚨 BEWEGING GEDETECTEERD!");
webMonitorPage.sendToWebMonitor("Beveiligings Waarschuwing: Beweging gedetecteerd");
}
lastMotion = currentMotion;
}
if (currentDoor != lastDoor) {
String status = currentDoor ? "GESLOTEN" : "GEOPEND";
chatPage.sendToChat("🚪 Deur " + status);
webMonitorPage.sendToWebMonitor("Beveiliging: Deur " + status);
lastDoor = currentDoor;
}
delay(10);
}
Educatief Wetenschap Project
// Wetenschap experiment besturingssysteem
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 voor temperatuur en roer besturing
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Slider 1 regelt doeltemperatuur (gemapped naar verwarmen/koelen)
int targetTemp = map(slider1, 0, 255, 20, 80); // 20-80°C bereik
// Slider 2 regelt roerder snelheid
analogWrite(STIRRER_MOTOR, slider2);
// Eenvoudige temperatuurbesturing logica
int currentTemp = readTemperature();
if (currentTemp < targetTemp) {
analogWrite(HEATING_ELEMENT, 200); // Verwarming aan
analogWrite(COOLING_FAN, 0); // Ventilator uit
} else if (currentTemp > targetTemp + 2) {
analogWrite(HEATING_ELEMENT, 0); // Verwarming uit
analogWrite(COOLING_FAN, 255); // Ventilator aan
} else {
analogWrite(HEATING_ELEMENT, 0); // Beide uit (handhaven)
analogWrite(COOLING_FAN, 0);
}
Serial.println("Doel: " + String(targetTemp) + "°C, Huidige: " + String(currentTemp) + "°C");
});
// Chat interface voor experiment besturing en data
chatPage.onChatMessage([](const String& message) {
String msg = message;
msg.toLowerCase();
if (msg.indexOf("data") >= 0) {
int temp = readTemperature();
float ph = readPH();
String data = "Temperatuur: " + String(temp) + "°C, pH: " + String(ph, 2);
chatPage.sendToChat(data);
return;
}
if (msg.indexOf("start") >= 0) {
// Begin experiment sequentie
chatPage.sendToChat("🔬 Experiment gestart! Monitort condities...");
return;
}
if (msg.indexOf("stop") >= 0) {
// Noodstop
analogWrite(HEATING_ELEMENT, 0);
analogWrite(COOLING_FAN, 0);
analogWrite(STIRRER_MOTOR, 0);
chatPage.sendToChat("⚠️ Experiment gestopt - alle systemen UIT");
return;
}
chatPage.sendToChat("Wetenschap commando's: data, start, stop");
});
// Monitor voor automatische 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() {
// Lees temperatuur sensor (voorbeeld implementatie)
int sensorValue = analogRead(TEMP_SENSOR_PIN);
return map(sensorValue, 0, 1023, 0, 100); // Converteer naar temperatuur
}
float readPH() {
// Lees pH sensor (voorbeeld implementatie)
int sensorValue = analogRead(PH_SENSOR_PIN);
return map(sensorValue, 0, 1023, 0, 14) / 10.0; // Converteer naar pH
}
Geavanceerde Integratie Technieken
State Synchronisatie
void synchronizeAllStates() {
// Zorg ervoor dat alle interfaces huidige staat tonen
webSliderPage.sendToWebSlider(currentSlider1, currentSlider2);
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
// Update alle pin states
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin)) {
webDigitalPinsPage.updatePinState(pin, pinStates[pin]);
}
}
Serial.println("Alle interface states gesynchroniseerd");
}
Cross-Interface Communicatie
void setupCrossInterfaceCommunication() {
// Joystick positie beïnvloedt slider maximum waarden
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Bereken afstand vanaf centrum
float distance = sqrt(x*x + y*y);
// Beperk slider maximum gebaseerd op joystick afstand
if (distance > 50) {
// Reduceer maximum slider waarden wanneer joystick ver van centrum is
int maxValue = map(distance, 50, 100, 255, 128);
// U kunt hier dynamische slider beperking implementeren
}
});
// Pin states beïnvloeden beschikbare chat commando's
webDigitalPinsPage.onPinWrite([](int pin, int state) {
if (pin == 2 && state == HIGH) {
chatPage.sendToChat("📢 Systeem bewapend - extra commando's beschikbaar");
} else if (pin == 2 && state == LOW) {
chatPage.sendToChat("📢 Systeem ontwapend - alleen beperkte commando's");
}
});
}
Problemen Oplossen
Veel Voorkomende Problemen
1. Sommige interfaces laden niet
- Controleer dat alle applicaties zijn toegevoegd aan server in setup()
- Verifieer WebSocket verbindingen in browser console
- Zorg voor voldoende geheugen voor alle interfaces
2. State inconsistenties tussen interfaces
- Implementeer state synchronisatie callbacks
- Gebruik gedeelde globale variabelen voor state tracking
- Roep synchronisatie functies aan na grote state wijzigingen
3. Prestatie problemen met meerdere interfaces
- Reduceer update frequenties voor niet-kritieke interfaces
- Implementeer selectieve updates gebaseerd op actieve interface
- Overweeg het uitschakelen van ongebruikte interfaces voor specifieke projecten
4. Geheugen beperkingen
- Monitor beschikbaar RAM met Serial.print(freeMemory())
- Schakel ongebruikte interfaces uit als geheugen krap is
- Optimaliseer callback functies om geheugengebruik te minimaliseren
Debug Strategieën
void debugSystemState() {
Serial.println("=== Systeem State Debug ===");
Serial.println("Vrij Geheugen: " + String(freeMemory()) + " bytes");
Serial.println("Digitale 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("========================");
}
Project Templates
Industriële Besturing Template
- Digitale pins voor machine besturing
- Sliders voor snelheid/temperatuur besturing
- Joystick voor positioneersystemen
- Chat voor status rapportage en commando's
- Monitor voor data logging
Educatief Laboratorium Template
- Sliders voor experiment parameters
- Digitale pins voor apparatuur besturing
- Chat voor student interactie
- Monitor voor data verzameling
- Real-time sensor monitoring
Domotica Template
- Digitale pins voor verlichting/apparaat besturing
- Sliders voor dimmen en klimaat besturing
- Beveiliging monitoring via invoer pins
- Chat voor stem-achtige commando's
- Monitor voor systeem status logging
Robotica Ontwikkeling Template
- Joystick voor beweging besturing
- Sliders voor snelheid en servo positionering
- Digit