ESP32 Custom WebApp Voorbeeld - Simpele Webinterface Tutorial voor Beginners
Overzicht
Dit voorbeeld biedt een complete template om uw eigen aangepaste webapplicaties te creëren die naadloos integreren met de DIYables ESP32 WebApps Library.
De CustomWebApp template is ideaal voor beginners die hun eigen webinterface willen toevoegen aan het DIYables ESP32 WebApps ecosysteem! Deze tutorial toont hoe u een eenvoudige webpagina bouwt met realtime tweerichtingsdataverkeer tussen webbrowser en ESP32 via WebSocket die kan:
- Direct tekstberichten verzenden van webbrowser naar ESP32 via WebSocket
- Berichten ontvangen van ESP32 en deze realtime weergeven op de webpagina
- Een persistente WebSocket-verbinding behouden voor continue communicatie
- Automatisch opnieuw verbinden wanneer de WebSocket-verbinding wordt verbroken
- Werken op mobiele apparaten door responsief ontwerp
Ontworpen voor ESP32 – deze template integreert perfect met bestaande DIYables web apps en biedt de basis voor het bouwen van uw eigen aangepaste IoT-interfaces!
Deze template bevat minimale code om u op weg te helpen. Gebruikers kunnen hun eigen geavanceerde webapplicaties ontwikkelen door deze template aan te passen. Basiskennis webprogrammering (HTML, CSS, JavaScript) wordt aanbevolen om de webinterface te personaliseren en geavanceerde functies toe te voegen.
Wat U Zal Leren
- Hoe u een aangepaste webapp maakt die integreert met de DIYables ESP32 WebApps Library
- Hoe u uw eigen pagina toevoegt aan het DIYables web apps ecosysteem
- Hoe u tekstberichten verzendt vanuit een webbrowser naar de ESP32
- Hoe u data verzendt vanuit ESP32 naar de webbrowser
- Hoe u WebSocket-verbindingen beheert en automatisch opnieuw verbindt
- Hoe u mobiele responsieve webinterfaces maakt
- Hoe u het DIYables ESP32 WebApps template systeem gebruikt voor snelle ontwikkeling
Functionaliteiten
- DIYables ESP32 WebApps Integratie: Naadloze integratie met de DIYables ESP32 WebApps Library-omgeving
- Minimale Template Code: Biedt een basis die u kunt uitbreiden en aanpassen
- Template-gebaseerde Ontwikkeling: Compleet startpunt dat u kunt wijzigen voor geavanceerde toepassingen
- Simpele Tekstberichtuitwisseling: Verstuur berichten tussen webbrowser en Arduino
- Auto-Herverbinden: Verbindt automatisch opnieuw bij wegvallen van de verbinding
- Mobiel Responsief: Perfect werkend op telefoons, tablets en computers
- Geschikt voor Beginners: Schone, eenvoudige code die makkelijk te begrijpen is
- Uitbreidbaar Framework: Vereist basiskennis webprogrammering (HTML/CSS/JavaScript) voor geavanceerde aanpassingen
Benodigd Materiaal
Of u kunt de volgende kits kopen:
| 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.
Hoe te Beginnen
U kunt uw eigen aangepaste webapp voor de ESP32 bouwen door de volgende hoofd stappen te doorlopen:
- Draai de Standaard Custom App Template op uw ESP32 board
- Test en Verifieer of de Standaard Custom Web App Correct Werkt
- Begrijp het Communicatieprotocol en de Achterliggende Werking
- Pas de Template aan voor uw Eigen Applicatie
- Beheer Meerdere Custom Web Apps – Essentiële Gids voor Conflictpreventie
Laten we stap voor stap starten.
Draai de Standaard Custom App Template op uw ESP32 board
Snelle Stappen
- Als dit uw eerste keer is met ESP32, volg dan eerst de tutorial over het opzetten van de ESP32-omgeving 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 (bijv. ESP32 Dev Module) en de juiste COM-poort
- Navigeer in de linkerbalk van de Arduino IDE naar het Libraries icoon
- Zoek op "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library van DIYables
- Klik op de Installeren knop om de bibliotheek te installeren
- U wordt gevraagd om aanvullende bibliotheekafhankelijkheden te installeren
- Klik op Alles Installeren om alle benodigde bibliotheken te installeren
- Ga in de Arduino IDE naar Bestand > Voorbeelden > DIYables ESP32 WebApps > CustomWebApp
- U ziet 4 bestanden die samen de complete custom web app template vormen:
- CustomWebApp.ino – Hoofd ESP32 code (hier voegt u uw eigen logica toe!)
- CustomWebApp.h – Header bestand (definieert de interface met DIYables ESP32 WebApps Library)
- CustomWebApp.cpp – Implementatie bestand (verzorgt de integratie met de bibliotheekframework)
- custom_page_html.h – Webpagina ontwerp (pas hier uw webinterface aan!)
- Configureer WiFi-instellingen door deze regels in CustomWebApp.ino aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Stap 5: Uploaden en Testen
- Klik op de Upload knop in Arduino IDE om de code naar de ESP32 te uploaden
- Open de Seriële Monitor om de verbindingsstatus te bekijken
- Noteer het IP-adres dat wordt weergegeven in de Seriële Monitor
- Controleer het resultaat in de Seriële Monitor. Het zou er ongeveer zo uit moeten zien:
COM6
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
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/
🔧 Custom WebApp: http://192.168.0.2/custom
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Als u niets ziet, start dan het ESP32 board opnieuw op
- Noteer het weergegeven IP-adres en voer dit in de adresbalk van uw smartphone of PC-webbrowser in
- Voorbeeld: http://192.168.0.2
- U ziet de startpagina zoals in de onderstaande afbeelding:
- Klik op de Web Custom link, u ziet de gebruikersinterface van de Web Custom app zoals hieronder:
- U kunt ook direct naar de pagina via IP-adres gevolgd door /custom navigeren, bijvoorbeeld: http://[IP_ADDRESS]/custom
Test en Verifieer of de Standaard Custom Web App Correct Werkt
Wanneer u de standaard CustomWebApp template draait, ziet u het volgende:
Op de Webinterface:
- Verbindingsstatus: Toont "Connected" in blauw wanneer WebSocket actief is
- Berichtinvoerveld: Tekstveld waar u berichten kunt typen voor Arduino
- Verzendknop: Klik om uw bericht te versturen (of druk op Enter)
- Arduino Berichtenscherm: Toont berichten ontvangen van ESP32 in blauwe tekst
Gedrag van de ESP32:
- Echo Antwoord: Als u "Hello" verstuurt vanaf web, reageert ESP32 met "Echo: Hello"
- Periodieke Updates: ESP32 stuurt uptime-berichten elke 5 seconden: "Arduino uptime: X seconds"
- Seriële Monitor: Alle ontvangen berichten worden gelogd voor debugging
Test de Communicatie:
- Typ een bericht in het invoerveld (bijv. "test message")
- Klik op Verzend of druk op Enter
- Bekijk de Seriële Monitor – u zou moeten zien: "Received from web: test message"
- Bekijk de webpagina – u zou moeten zien: "Echo: test message"
- Wacht een paar seconden – u ziet periodieke uptime-berichten die elke 3 seconden worden bijgewerkt (bijv. "Arduino uptime: 15 seconds", "Arduino uptime: 18 seconds", enz.)
Begrijp het Communicatieprotocol en de Achterliggende Werking
Begrijpen hoe het intern werkt helpt u om de template effectief aan te passen.
App Identifier Systeem
De CustomWebApp template gebruikt unieke berichtlabels (genaamd "App Identifiers") die ervoor zorgen dat de ESP32-code en webclients alleen berichten verwerken die bij hen horen. Dit is essentieel omdat uw applicatie mogelijk meerdere web apps bevat, waarbij elke app alleen zijn eigen berichten verwerkt en de rest negeert:
ESP32-Kant (CustomWebApp.h & CustomWebApp.cpp)
// In CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket bericht identifier voor deze custom app
static const String APP_IDENTIFIER;
// ...
};
// In CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Gebruik in handleWebSocketMessage:
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// Verwerk ‘schone’ payload zonder identifier
}
// Gebruik in sendToWeb:
broadcastToAllClients(APP_IDENTIFIER + message);
JavaScript-Kant (custom_page_html.h)
// WebSocket bericht identifier voor deze custom app
const APP_IDENTIFIER = 'CUSTOM:';
// Gebruik bij ontvangen:
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Verwerk ‘schone’ boodschap zonder identifier
}
// Gebruik bij verzenden:
ws.send(APP_IDENTIFIER + userInput);
Voordelen van dit ontwerp:
- Enkele bron van waarheid: Verander de identifier op één plek per taal
- Geen "magische" strings: Voorkomt hardcoded "CUSTOM:" door de code heen
- Typeveiligheid: Constantes voorkomen typefouten
- Uitbreidbaar: Makkelijk meerdere custom apps maken met verschillende identifiers
- Voorkomt dataconflicten: Elke app gebruikt unieke identifier voor eigen berichten
- Professioneel: Volgt objectgeoriënteerde ontwerpprincipes
Belangrijke Notities:
- U kunt de huidige identifier "CUSTOM:" behouden bij het aanpassen van deze template. Bij meerdere apps moet u wel unieke identifiers gebruiken ter voorkoming van conflicten.
- Als u de identifier wijzigt, zorg dan dat de waarde in zowel JavaScript (.h bestand) als ESP32 code (.cpp bestand) identiek is (bijv. beide "TEMP:" of beide "SENSOR:").
- Vooraf gereserveerde identifiers door ingebouwde apps: Gebruik deze niet omdat ze al in DIYables apps gebruikt worden:
- Hoofdapps: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
- Subprotocols: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"
- JavaScript voegt identifier toe: JavaScript plakt automatisch de app identifier (in deze template "CUSTOM:") toe via de constante APP_IDENTIFIER en verstuurt CUSTOM:Hello naar de ESP32 via WebSocket.
- DIYables ESP32 WebApps Library ontvangt: De bibliotheek ontvangt CUSTOM:Hello en geeft dit door aan uw CustomWebAppPage::handleWebSocketMessage methode.
- CustomWebAppPage klasse verwijdert identifier: In handleWebSocketMessage controleert de klasse of het bericht begint met de APP_IDENTIFIER, verwijdert deze met .substring(APP_IDENTIFIER.length()) en geeft het resterende bericht Hello door aan uw callbackfunctie in het .ino bestand.
- Uw applicatie verwerkt: Uw applicatie ontvangt Hello en verwerkt dit volgens uw eigen logica (in de huidige template wordt het bericht simpelweg uitgeprint en een reactie verstuurd).
- Uw applicatie roept sendToWeb() aan: In het .ino bestand roept u customPage.sendToWeb("Temperature: 25°C") op om data te sturen naar de webbrowser.
- CustomWebAppPage klasse voegt identifier toe en zendt uit: De CustomWebAppPage klasse voegt automatisch de APP_IDENTIFIER toe aan het bericht en zendt CUSTOM:Temperature: 25°C via WebSocket naar alle verbonden clients.
- JavaScript ontvangt en filtert bericht: De browser ontvangt CUSTOM:Temperature: 25°C via de ws.onmessage event handler, maar verwerkt alleen berichten die beginnen met APP_IDENTIFIER en verwijdert de identifier.
- Webpagina toont ‘schone’ boodschap: De template toont het bericht Temperature: 25°C (zonder identifier) in de sectie "Message from Arduino". U kunt de JavaScript aanpassen voor meer geavanceerde weergave.
- CustomWebApp.ino – Hoofd ESP32 sketch met uw applicatielogica
- CustomWebApp.h – Header bestand met definitie van de custom page class (bibliotheekinterface)
- CustomWebApp.cpp – Implementatie met communicatie-logica (bibliotheekcode)
- custom_page_html.h – HTML-interface, gescheiden voor gemakkelijke aanpassing
Communicatiestroom
Van Webpagina naar ESP32:
Wanneer u een bericht typt op de webinterface en op de verzendknop drukt (bijvoorbeeld Hello), gebeurt het volgende:
Van ESP32 naar Webpagina:
Wanneer uw ESP32 data naar de webinterface wil sturen, bijvoorbeeld Temperature: 25°C, gebeurt het volgende:
Architectuuroverzicht
Het CustomWebApp voorbeeld bestaat uit vier hoofd-bestanden:
Pas de Template aan voor uw Applicatie
De template is ontworpen voor eenvoudige aanpassing op uw specifieke wensen. Zo past u het aan:
1. Hardware Integratie
Voeg Hardware Inicialisatie toe
In CustomWebApp.ino in de setup() functie:
void setup() {
Serial.begin(9600);
// Voeg hier uw hardware-initialisatie toe
pinMode(LED_BUILTIN, OUTPUT); // On-board LED
pinMode(3, OUTPUT); // PWM-uitgangspin
pinMode(4, INPUT_PULLUP); // Knop-invoer met pullup
pinMode(A0, INPUT); // Analoge sensorinvoer
// Initialiseer sensoren, displays, motoren, etc.
// servo.attach(9);
// lcd.begin(16, 2);
// Rest van setup...
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
Verwerk Custom Commando’s
Breid de callbackfunctie uit om eigen commando’s af te handelen:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
// LED Besturing
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
// Servo Besturing
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt(); // Getal na "servo:"
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
// Sensor uitlezing aanvraag
else if (message == "get_temperature") {
float temp = readTemperatureSensor(); // Uw sensormethode
customPage.sendToWeb("Temperature: " + String(temp) + "°C");
}
// Voeg hier meer custom commando's toe
});
Verzend Realtime Sensordata
void loop() {
webAppsServer.loop();
// Stuur sensordata elke 3 seconden
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
// Lees uw sensoren
int lightLevel = analogRead(A0);
bool buttonPressed = !digitalRead(4); // Inverse i.v.m. pullup
float temperature = readTemperatureSensor();
// Verzend naar webinterface
customPage.sendToWeb("Light: " + String(lightLevel));
customPage.sendToWeb("Button: " + String(buttonPressed ? "Pressed" : "Released"));
customPage.sendToWeb("Temp: " + String(temperature) + "°C");
lastSend = millis();
}
}
2. Webinterface Aanpassing
Pas HTML-layout aan
Bewerk de HTML in custom_page_html.h om de interface te wijzigen:
<!-- Voeg nieuwe bedieningsknoppen toe -->
<div>
<h3>🔌 Apparatenbesturing</h3>
<button onclick="send('led_on')">LED AAN</button>
<button onclick="send('led_off')">LED UIT</button>
<br><br>
<label>Servo Hoek:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
<span id="servoValue">90°</span>
</div>
<div>
<h3>📊 Sensor Data</h3>
<div>Temperatuur: <span id="tempValue">--°C</span></div>
<div>Lichtniveau: <span id="lightValue">--</span></div>
<div>Knop Status: <span id="buttonValue">--</span></div>
</div>
Pas JavaScript Verwerking aan
Update de ws.onmessage functie om specifieke datatypes te verwerken:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Toon alle berichten in algemeen veld
document.getElementById('rawMessage').textContent = message;
// Verwerk specifieke berichttypes
if (message.startsWith('Temperature:')) {
let temp = message.split(':')[1].trim();
document.getElementById('tempValue').textContent = temp;
}
else if (message.startsWith('Light:')) {
let light = message.split(':')[1].trim();
document.getElementById('lightValue').textContent = light;
}
else if (message.startsWith('Button:')) {
let button = message.split(':')[1].trim();
document.getElementById('buttonValue').textContent = button;
}
}
};
Voeg Styling toe
Pas de CSS aan voor uw applicatie:
<style>
.control-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 20px;
margin: 10px 0;
color: white;
}
.sensor-display {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
Overige Aanpassingen
Naast het aanpassen van de webinterface en hardware-integratie, kunt u ook bepalen hoe uw app verschijnt in het DIYables ESP32 WebApps ecosysteem:
1. Pas de App-pagina URL aan
U kunt het pad wijzigen waar uw custom web app toegankelijk is door de constructor in uw headerbestand aan te passen:
Standaardpad:
// In CustomWebApp.cpp - Standaard pad is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Voorbeelden van aangepaste paden:
// Temperatuur monitor app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Toegang via: http://[IP_ADRES]/new-path
Belangrijke notities:
- Pad moet beginnen met "/": Begin altijd met een schuine streep
- Gebruik beschrijvende namen: Kies paden die de functie van uw app duidelijk maken
- Vermijd conflicten: Gebruik geen paden die al in gebruik zijn door ingebouwde apps zoals /chat, /monitor, /plotter, etc.
- Kies kleine letters en koppeltekens: Volg web URL conventies voor betere compatibiliteit
2. Pas de App-kaart op de startpagina aan
U kunt bepalen hoe uw app wordt getoond op de DIYables ESP32 WebApps startpagina door de getNavigationInfo() methode in uw implementatiebestand aan te passen:
Basale App-kaart:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\">"
"<h3>🔧 Custom App</h3>"
"<p>Mijn aangepaste webapplicatie</p>"
"</a>";
}
Geavanceerde App-kaart met inline CSS:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\" "
"style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\">"
"<h3>🌡️ Temperatuur Monitor</h3>"
"<p>Realtime temperatuurweergave</p>"
"</a>";
}
Beheer Meerdere Custom Web Apps – Essentiële Gids voor Conflictpreventie
Bij het ontwikkelen van meerdere custom webapplicaties is het cruciaal om conflicten tussen apps te voorkomen. Stel, we willen drie custom apps toevoegen: "Temperature Monitor", "Motor Controller" en "Sensor Dashboard". Zo zorgt u dat ze harmonieus samenwerken:
1. Gebruik Unieke App Identifiers
Elke custom webapp moet een unieke identifier hebben om berichtconflicten te voorkomen:
Voorbeeld: Temperature Monitor App
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Voorbeeld: Motor Controller App
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Voorbeeld: Sensor Dashboard App
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Gebruik Unieke Pagina Paden
Elke web app heeft een uniek URL-pad nodig:
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Gebruik Unieke Klassennamen
Vermijd naamconflicten met beschrijvende klassenamen:
// In plaats van meerdere "CustomWebAppPage" klassen
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Organiseer Meerdere Apps in één Project
Structuurvoorbeeld met meerdere custom apps:
// In het hoofd .ino bestand
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
// Maak instanties aan
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
// Voeg alle pagina's toe aan server
webAppsServer.addApp(&homePage); // ingebouwde app
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
// Stel callbacks in voor elke app
tempPage.onTemperatureMessageReceived([](const String& message) {
// Verwerk temperatuurberichten
});
motorPage.onMotorMessageReceived([](const String& message) {
// Verwerk motorberichten
});
sensorPage.onSensorMessageReceived([](const String& message) {
// Verwerk sensorberichten
});
}
5. Beste Praktijken voor Meerdere Apps
Bestandsorganisatie
MyProject/
├── MyProject.ino // Hoofd sketch
├── TemperatureApp.h // Header temperatuur app
├── TemperatureApp.cpp // Implementatie temperatuur app
├── temperature_page_html.h // Webpagina temperatuur app
├── MotorApp.h // Header motor app
├── MotorApp.cpp // Implementatie motor app
├── motor_page_html.h // Webpagina motor app
├── SensorApp.h // Header sensor app
├── SensorApp.cpp // Implementatie sensor app
└── sensor_page_html.h // Webpagina sensor app
Navigatie tussen Apps
Update de getNavigationInfo() methode in elke app voor eenvoudige navigatie:
String TemperatureMonitorPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">"
"<h3>🌡️ Temperatuur Monitor</h3>"
"<p>Bekijk realtime temperatuurdata</p>"
"</a>";
}
String MotorControllerPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card motor\">"
"<h3>⚙️ Motor Controller</h3>"
"<p>Bestuur servo- en stappenmotoren</p>"
"</a>";
}
6. Testen van Meerdere Apps
Bij het testen van meerdere apps:
- Test elke app eerst afzonderlijk
- Controleer de Seriële Monitor op berichtconflicten
- Verifieer dat unieke identifiers werken
- Test de navigatie tussen de verschillende apps
- Monitor het geheugengebruik bij het laden van meerdere apps
Door deze richtlijnen te volgen, kunt u meerdere custom webapplicaties maken die naadloos samenwerken zonder verstoring van elkaar of andere DIYables ESP32 WebApps.