ESP32 MultipleWebApps Voorbeeld - Complete IoT Dashboard Tutorial
Overzicht
Dit voorbeeld laat zien hoe u meerdere webapplicaties gelijktijdig gebruikt met de DIYables ESP32 WebApps Library. Het demonstreert de integratie van diverse interactieve webinterfaces — zoals monitoring, bediening en communicatie — binnen één project. Ontworpen voor het ESP32-platform, is dit voorbeeld ideaal om te leren hoe u meerdere webgebaseerde functies combineert en beheert, wat een solide basis biedt voor geavanceerde IoT-projecten.
Kenmerken
- Homepagina: Centrale navigatiehub met links naar alle webapplicaties
- Web Monitor: Real-time seriële communicatie- en debuginterface
- Chat Interface: Interactief chatsysteem met ESP32-reactiemogelijkheden
- Digitale Pin Bediening: Webgebaseerde aansturing en monitoring van alle digitale pinnen
- Dubbele Slider Bediening: Twee onafhankelijke schuifregelaars voor analoge waardebediening
- Virtuele Joystick: 2D-positiebediening voor richtingsgerichte toepassingen
- Geünificeerde Statusbeheer: Alle interfaces delen gesynchroniseerde statusinformatie
- Real-time Updates: WebSocket-communicatie voor directe respons
- Template Structuur: Klaar om te personaliseren als basis voor complexe projecten
Benodigd Materiaal
Of u kunt de volgende kits kopen:
| 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 dat u met de ESP32 werkt, raadpleeg dan de tutorial over het opzetten van de omgeving voor ESP32 in de Arduino IDE.
- Verbind het ESP32-board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32-board (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries-icoon in de linkerzijbalk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en zoek vervolgens de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Installeren-knop om de bibliotheek te installeren.
- Er wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren.
- Klik op de Alles installeren-knop om alle afhankelijkheden te installeren.
- Open in de Arduino IDE Bestand Voorbeelden DIYables ESP32 WebApps MultipleWebApps voorbeeld, of kopieer bovenstaande code en plak deze in de editor van de 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: 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);
}
- Stel de WiFi-inloggegevens in door deze regels in de code aan te passen:
const char WIFI_SSID[] = "UW_WIFI_NETWERK";
const char WIFI_PASSWORD[] = "UW_WIFI_WACHTWOORD";
- Klik op de Uploaden-knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de seriële monitor.
- Bekijk het resultaat in de seriële monitor. Het ziet er uit als hieronder:
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' 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: 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
📋 Beschikbare applicaties:
🏠 Homepagina: 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 Analoge Meter: http://192.168.0.2/web-gauge
📊 Web Tabel: http://192.168.0.2/web-table
==========================================
- Als u niets ziet, start dan het ESP32-board opnieuw op.
- Noteer het getoonde 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 ziet de homepagina met alle webapplicaties zoals hieronder afgebeeld:
- Klik op een willekeurige webapplicatielink (Chat, Web Monitor, Web Digital Pins, Web Slider, Web Joystick, enzovoort), u ziet dan de gebruikersinterface van de betreffende webapp.
- U kunt ook elke pagina direct benaderen via het IP-adres gevolgd door het pad van de app, bijvoorbeeld: http://192.168.0.2/chat, http://192.168.0.2/web-monitor, enzovoort.
- Verken alle webapplicaties: probeer te chatten met Arduino, bekijk seriële output, bedien digitale pinnen, stel schuifregelaars in en gebruik de virtuele joystick om de volledige mogelijkheden van de geïntegreerde webinterface te ervaren.
Creatieve Aanpassing - Ontketen Uw Innovatie
Dit uitgebreide voorbeeld biedt een basis voor uw creatieve projecten. Pas onderstaande configuraties aan om verbluffende IoT-applicaties te bouwen die bij uw unieke visie passen.
Digitale Pin Configuratie
Het voorbeeld heeft specifieke pinnen vooraf geconfigureerd voor verschillende doeleinden:
Output Pinnen (Bedienbaar via Web)
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Algemeen doeluitgang
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Algemeen doeluitgang
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT); // Algemeen doeluitgang
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Ingebouwde LED
Input Pinnen (Monitoring via Web)
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT); // Sensor input
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT); // Schakelaar input
Joystick Configuratie
// Maak joystick aan met aangepaste instellingen
// autoReturn=false: joystick blijft op laatste positie bij loslaten
// sensitivity=5: alleen updates verzenden bij beweging > 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
Statusvariabelen
Het voorbeeld houdt gesynchroniseerde status bij over alle interfaces:
int pinStates[16] = { LOW }; // Houdt staat pinnen bij (pinnen 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 Chatcommando's
De chatinterface bevat diverse vooraf geprogrammeerde commando’s:
Basiscommando's
- hello - Vriendelijke begroeting
- time - Toont uptime van de ESP32 in seconden
- status - Geeft status van ESP32 en LED weer
- help - Lijst van beschikbare commando's
Bedieningscommando’s
- led on - Zet de ingebouwde LED aan
- led off - Zet de ingebouwde LED uit
Voorbeeld Chatgesprek
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
Voorbeelden van Programmeerintegratie
Compleet Robotbesturingssysteem
#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() {
// Hardware initialisatie
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 robotbeweging
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Zet joystick om naar tankbesturing
int leftSpeed = y + (x / 2);
int rightSpeed = y - (x / 2);
leftSpeed = constrain(leftSpeed, -100, 100);
rightSpeed = constrain(rightSpeed, -100, 100);
// Pas snelheidslimieten aan op basis 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 - Left: " + String(leftSpeed) + ", Right: " + String(rightSpeed));
});
// Gebruik sliders voor camera pan/tilt bediening
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Slider 1 regelt maximale snelheid, slider 2 regelt camerakantel
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 pinnen 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) {
// Buzzer sequentie activeren
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 chatcommando's voor robotbesturing
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;
}
// Standaardreactie voor onbekende commando's
chatPage.sendToChat("Robot commands: stop, center camera, speed");
});
}
Smart Home Besturingssysteem
// Pin toewijzingen voor huisautomatisering
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 pinnen voor huisautomatisering
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 pinnen voor kamerlichtbediening
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 melding naar chat
String message = room + " verlichting is " + String(state ? "AAN" : "UIT");
chatPage.sendToChat(message);
});
// Sliders voor ventilator- en airconditioningbediening
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Slider 1 regelt ventilatorsnelheid (0-255)
analogWrite(FAN_CONTROL, slider1);
// Slider 2 regelt intensiteit airconditioning (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 chatcommando's voor huisbesturing
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("Alle lichten aangezet!");
return;
}
if (msg.indexOf("all lights off") >= 0) {
digitalWrite(LIVING_ROOM_LIGHTS, LOW);
digitalWrite(BEDROOM_LIGHTS, LOW);
digitalWrite(KITCHEN_LIGHTS, LOW);
chatPage.sendToChat("Alle lichten uitgezet!");
return;
}
if (msg.indexOf("temperature") >= 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("security") >= 0) {
bool motion = digitalRead(MOTION_SENSOR);
bool door = digitalRead(DOOR_SENSOR);
String status = "Beweging: " + String(motion ? "GEREGISTREERD" : "GEEN") +
", Deur: " + String(door ? "GESLOTEN" : "OPEN");
chatPage.sendToChat(status);
return;
}
// Standaard huisautomatisering help
chatPage.sendToChat("Home commands: all lights on/off, temperature, security");
});
}
void loop() {
server.loop();
// Bewaak huisbeveiligingssensoren
static bool lastMotion = false;
static bool lastDoor = false;
bool currentMotion = digitalRead(MOTION_SENSOR);
bool currentDoor = digitalRead(DOOR_SENSOR);
// Verstuur meldingen bij beveiligingsgebeurtenissen
if (currentMotion != lastMotion) {
if (currentMotion) {
chatPage.sendToChat("🚨 BEWEGING GEREGISTREERD!");
webMonitorPage.sendToWebMonitor("Security Alert: Motion detected");
}
lastMotion = currentMotion;
}
if (currentDoor != lastDoor) {
String status = currentDoor ? "GESLOTEN" : "GEOPEND";
chatPage.sendToChat("🚪 Deur " + status);
webMonitorPage.sendToWebMonitor("Security: Door " + status);
lastDoor = currentDoor;
}
delay(10);
}
Educatief Wetenschapsproject
// Besturingssysteem voor wetenschappelijk experiment
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 roerbediening
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Slider 1 regelt doeltemperatuur (gemapped op verwarming/koeling)
int targetTemp = map(slider1, 0, 255, 20, 80); // 20-80°C bereik
// Slider 2 regelt roersnelheid
analogWrite(STIRRER_MOTOR, slider2);
// Eenvoudige temperatuurregeling
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 (onderhouden)
analogWrite(COOLING_FAN, 0);
}
Serial.println("Doel: " + String(targetTemp) + "°C, Huidig: " + String(currentTemp) + "°C");
});
// Chatinterface voor experimentbesturing 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) {
// Start experimentsequentie
chatPage.sendToChat("🔬 Experiment gestart! Condities worden gemonitord...");
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("Science commands: data, start, stop");
});
// Automatische datalogging monitoren
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 temperatuursensor (voorbeeldimplementatie)
int sensorValue = analogRead(TEMP_SENSOR_PIN);
return map(sensorValue, 0, 1023, 0, 100); // Omzetten naar temperatuur
}
float readPH() {
// Lees pH-sensor (voorbeeldimplementatie)
int sensorValue = analogRead(PH_SENSOR_PIN);
return map(sensorValue, 0, 1023, 0, 14) / 10.0; // Omzetten naar pH
}
Gevorderde Integratietechnieken
Statussynchronisatie
void synchronizeAllStates() {
// Zorg dat alle interfaces de actuele status tonen
webSliderPage.sendToWebSlider(currentSlider1, currentSlider2);
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
// Update alle pinstatussen
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin)) {
webDigitalPinsPage.updatePinState(pin, pinStates[pin]);
}
}
Serial.println("Alle interface-statussen gesynchroniseerd");
}
Communicatie tussen Interfaces
void setupCrossInterfaceCommunication() {
// Joystickpositie beïnvloedt maximale sliderwaardes
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Bereken afstand vanaf het midden
float distance = sqrt(x*x + y*y);
// Beperk maximale sliderwaarden op basis van joystick afstand
if (distance > 50) {
// Verlaag maximale sliderwaarden wanneer joystick ver van het midden is
int maxValue = map(distance, 50, 100, 255, 128);
// Hier zou dynamische slider-beperking geïmplementeerd kunnen worden
}
});
// Pinstatussen beïnvloeden beschikbare chatcommando's
webDigitalPinsPage.onPinWrite([](int pin, int state) {
if (pin == 2 && state == HIGH) {
chatPage.sendToChat("📢 Systeem geactiveerd - extra commando's beschikbaar");
} else if (pin == 2 && state == LOW) {
chatPage.sendToChat("📢 Systeem gedeactiveerd - alleen beperkte commando's");
}
});
}
Probleemoplossing
Veelvoorkomende Problemen
1. Sommige interfaces laden niet
- Controleer dat alle applicaties in setup() aan de server zijn toegevoegd
- Verifieer WebSocket-verbindingen in de browserconsole
- Controleer of er voldoende geheugen beschikbaar is voor alle interfaces
2. Statusinconsistenties tussen interfaces
- Implementeer status synchronisatie callbacks
- Gebruik gedeelde globale variabelen voor statustracking
- Roep synchronisatiefuncties aan na grote statuswijzigingen
3. Prestatieproblemen bij meerdere interfaces
- Verlaag updatefrequenties voor niet-kritieke interfaces
- Implementeer selectieve updates gebaseerd op actieve interface
- Overweeg niet-gebruikte interfaces uit te schakelen in specifieke projecten
4. Geheugenbeperkingen
- Monitor beschikbaar RAM met Serial.print(freeMemory())
- Schakel ongebruikte interfaces uit bij beperkte geheugenruimte
- Optimaliseer callbackfuncties om geheugenverbruik te minimaliseren
Debugstrategie
void debugSystemState() {
Serial.println("=== Debug systeemstatus ===");
Serial.println("Vrij geheugen: " + String(freeMemory()) + " bytes");
Serial.println("Digitale pinnen:");
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("============================");
}
Projecttemplates
Template voor Industrieële Besturing
- Digitale pinnen voor machinebesturing
- Sliders voor snelheids-/temperatuurregelingen
- Joystick voor positioneringssystemen
- Chat voor statusrapportage en commando’s
- Monitor voor datalogging
Template voor Educatief Laboratorium
- Sliders voor experimentele parameters
- Digitale pinnen voor apparatuurbesturing
- Chat voor studenteninteractie
- Monitor voor dataverzameling
- Real-time sensorbewaking
Template voor Huisautomatisering
- Digitale pinnen voor licht-/apparaatbesturing
- Sliders voor dimmen en klimaatregeling
- Beveiligingsbewaking via inputpinnen
- Chat voor spraakachtige commando's
- Monitor voor systeemstatus logging
Template voor Robotica Ontwikkeling
- Joystick voor bewegingsbesturing
- Sliders voor snelheid en servopositie
- Digitale pinnen voor sensor inputs
- Chat voor commando-interface
- Monitor voor debugging en telemetrie
Prestatieoptimalisatie
Geheugenbeheer
void optimizeMemoryUsage() {
// Schakel ongebruikte interfaces uit om geheugen te besparen
// server.addApp(&homePage); // Altijd home pagina aanhouden
// server.addApp(&webMonitorPage); // Bewaren voor debugging
// server.addApp(&chatPage); // Optioneel
// server.addApp(&webDigitalPinsPage); // Afhankelijk van projectbehoefte
// server.addApp(&webSliderPage); // Afhankelijk van projectbehoefte
// server.addApp(&webJoystickPage); // Afhankelijk van projectbehoefte
}
Updatefrequentieregeling
void controlUpdateFrequency() {
static unsigned long lastSlowUpdate = 0;
static unsigned long lastFastUpdate = 0;
// Snelle updates voor kritieke bedieningen (10ms)
if (millis() - lastFastUpdate > 10) {
// Update joystick en noodbediening
lastFastUpdate = millis();
}
// Langzame updates voor monitoring (1000ms)
if (millis() - lastSlowUpdate > 1000) {
// Update sensorwaarden en status
lastSlowUpdate = millis();
}
}
Volgende Stappen
Na het beheersen van het MultipleWebApps voorbeeld:
- Pas aan voor uw project: Verwijder ongebruikte interfaces en voeg project-specifieke logica toe
- Voeg sensoren toe: Integreer echte sensorwaarden voor inputmonitoring
- Implementeer veiligheid: Voeg noodstops en veiligheidsinterlocks toe
- Maak aangepaste commando's: Breid chatinterface uit met project-specifieke commando’s
- Voeg datalogging toe: Gebruik de webmonitor voor permanente gegevensopslag
- Optimaliseer voor mobiel: Test en optimaliseer voor gebruik op mobiele apparaten
Ondersteuning
Voor extra hulp:
- Raadpleeg de afzonderlijke voorbeelddocumentatie (Chat_Example.txt, WebMonitor_Example.txt, enz.)
- Bekijk de API Reference documentatie
- Bezoek DIYables tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32 communityforums
Dit uitgebreide voorbeeld vormt de basis voor vrijwel elk webgestuurd ESP32-project. Begin met deze template en pas hem aan uw specifieke behoeften aan!
Gerelateerde Tutorials
📱 Aanbevolen apps
English for KidsSpelenderwijs Engels leren voor jonge kinderen.Ontdek het opGoogle PlayBeschikbaar in deApp Store
Bubble NoteZelfverwijderende notities – schrijf ze als berichten.Ontdek het opGoogle PlayBeschikbaar in deApp Store
Didn't BuyVersla impulsaankopen en bespaar meer.Ontdek het opGoogle PlayBeschikbaar in deApp Store
Knowledge PathOefentoetsen om alles te leren.Ontdek het opGoogle PlayBeschikbaar in deApp Store