SENSOREN/ACTUATOREN

INTERNET VAN DE DINGEN (IoT)

Arduino UNO R4 - Ethernet

Arduino UNO R4 - E-mail

Arduino Custom WebApp Voorbeeld - Eenvoudige Web Interface Tutorial voor Beginners

Overzicht

Dit voorbeeld biedt een complete sjabloon voor het maken van uw eigen aangepaste webapplicaties die naadloos integreren met de DIYables WebApps bibliotheek.

Arduino Custom WebApp Voorbeeld - Bouw Uw Eigen Web Interface Tutorial

De CustomWebApp sjabloon is perfect voor beginners die hun eigen web interface willen toevoegen aan het DIYables WebApps ecosysteem! Deze tutorial toont u hoe u een eenvoudige webpagina bouwt met real-time bidirectionele data-uitwisseling tussen webbrowser en Arduino via WebSocket die kan:

Tekstberichten versturen van webbrowser naar Arduino direct via WebSocket
Berichten ontvangen van Arduino en deze real-time weergeven op de webpagina
Persistente WebSocket-verbinding onderhouden voor continue communicatie
Automatisch opnieuw verbinden wanneer de WebSocket-verbinding verloren gaat
Werken op mobiele apparaten met responsive design

Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT - deze sjabloon integreert perfect met bestaande DIYables web apps en biedt de basis voor het bouwen van uw eigen aangepaste IoT interfaces!

Deze sjabloon biedt minimale code om u op weg te helpen. Gebruikers kunnen hun eigen geavanceerde webapplicaties ontwikkelen door deze sjabloon te wijzigen. Basis webprogrammeerkennis (HTML, CSS, JavaScript) wordt aanbevolen voor het aanpassen van de web interface en het toevoegen van geavanceerde functies.

Wat U Zult Leren

Hoe u een aangepaste web app maakt die integreert met de DIYables WebApps bibliotheek
Hoe u uw aangepaste pagina toevoegt aan het DIYables web apps ecosysteem
Hoe u tekstberichten verzendt van webbrowser naar Arduino
Hoe u data verzendt van Arduino naar webbrowser
Hoe u WebSocket-verbindingen afhandelt en automatisch opnieuw verbindt
Hoe u mobiel-responsive web interfaces maakt
Hoe u het DIYables WebApps sjabloonsysteem gebruikt voor snelle ontwikkeling

Functies

DIYables WebApps Integratie: Integreert naadloos met het DIYables WebApps bibliotheek ecosysteem
Minimale Sjablooncode: Biedt een basis fundament dat u kunt uitbreiden en aanpassen
Sjabloon-Gebaseerde Ontwikkeling: Complete startpunt die u kunt wijzigen om geavanceerde applicaties te maken
Eenvoudige Tekstberichten: Verstuur berichten tussen webbrowser en Arduino
Automatisch Opnieuw Verbinden: Verbindt automatisch opnieuw wanneer de verbinding verloren gaat
Mobiel Responsive: Werkt perfect op telefoons, tablets en computers
Beginnersvriendelijk: Schone, eenvoudige code die makkelijk te begrijpen is
Uitbreidbaar Framework: Vereist basis webprogrammeerkennis (HTML/CSS/JavaScript) voor geavanceerde aanpassingen
Platform Uitbreidbaar: Momenteel geÃ¯mplementeerd voor Arduino Uno R4 WiFi, maar kan uitgebreid worden voor andere hardware platforms. Zie DIYables_WebApps_ESP32

Benodigde Hardware

1	×	Arduino UNO R4 WiFi
1	×	Alternatief: DIYables STEM V4 IoT
1	×	USB-kabel Type-C
1	×	(Aanbevolen) Schroefklem Block Shield voor Arduino Uno R4
1	×	(Aanbevolen) Breadboard-Shield voor Arduino Uno R4
1	×	(Aanbevolen) Behuizing voor Arduino Uno R4
1	×	(Aanbevolen) Stromsplitter voor Arduino Uno R4
1	×	(Aanbevolen) Prototyping Basisplaat & Breadboard Kit voor Arduino Uno

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.

Hoe Te Beginnen

U kunt beginnen met het bouwen van uw aangepaste web app voor Arduino Uno R4/DIYables STEM V4 IoT board door de volgende hoofdstappen te doorlopen:

Voer de Standaard Custom App Sjabloon uit op Uw Arduino Board
Test en Verifieer dat de Standaard Custom Web App Correct Werkt
Begrijp het Communicatieprotocol en Hoe Het Werkt op de Achtergrond
Wijzig de Sjabloon om Uw Applicatie aan te Passen
Beheer Meerdere Custom Web Apps - EssentiÃ«le Conflictpreventie Gids

Laten we Ã©Ã©n voor Ã©Ã©n beginnen.

Voer de Standaard Custom App Sjabloon uit op Uw Arduino Board

Snelle Stappen

Als dit de eerste keer is dat u de Arduino Uno R4 WiFi/DIYables STEM V4 IoT gebruikt, 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 met behulp van 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 naar "DIYables WebApps", zoek vervolgens de DIYables WebApps bibliotheek door DIYables
Klik op de Install knop om de bibliotheek te installeren

Arduino UNO R4 DIYables WebApps bibliotheek

U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren
Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren

Arduino UNO R4 DIYables WebApps afhankelijkheid

Ga in Arduino IDE naar File > Examples > DIYables WebApps > CustomWebApp
U ziet 4 bestanden die de complete aangepaste web app sjabloon vormen:

CustomWebApp.ino - Hoofd Arduino code (hier voegt u uw aangepaste logica toe!)
CustomWebApp.h - Header bestand (definieert de interface naar de DIYables WebApps bibliotheek)
CustomWebApp.cpp - Implementatie bestand (handelt integratie af met bibliotheek framework)
custom_page_html.h - Webpagina ontwerp (pas hier uw web interface aan!)

Configureer WiFi-instellingen door deze regels te wijzigen in CustomWebApp.ino:

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 code naar Arduino UNO R4/DIYables STEM V4 IoT te uploaden
Open de Serial Monitor om de verbindingsstatus te zien
Noteer het IP-adres dat wordt weergegeven in Serial Monitor
Open de Serial Monitor
Bekijk het resultaat in Serial Monitor. Het ziet er als volgt uit

COM6

Send

Starting Custom WebApp... INFO: Added app / INFO: Added app /custom 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/ ðŸ”§ Custom WebApp: http://192.168.0.2/custom ==========================================

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Als u niets ziet, herstart 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 ziet de startpagina zoals onderstaande afbeelding:

Arduino UNO R4 DIYables WebApp Startpagina met Web Custom app

Klik op de Web Custom link, u ziet de Web Custom app's UI zoals hieronder:

Arduino UNO R4 DIYables WebApp Web Custom app

Of u kunt de pagina ook direct benaderen via IP-adres gevolgd door /custom. Bijvoorbeeld: http://[IP_ADDRESS]/custom

Test en Verifieer dat de Standaard Custom Web App Correct Werkt

Wanneer u de standaard CustomWebApp sjabloon uitvoert, is dit wat u zou moeten zien:

Op de Web Interface:

Verbindingsstatus: Toont "Connected" in blauw wanneer WebSocket actief is
Berichtinvoerveld: Tekstveld om berichten naar Arduino te typen
Verzenden Knop: Klik om uw bericht te verzenden (of druk op Enter)
Arduino Berichten Weergave: Toont berichten ontvangen van Arduino in blauwe tekst

Arduino Gedrag:

Echo Reactie: Wanneer u "Hello" verzendt vanaf web, reageert Arduino met "Echo: Hello"
Periodieke Updates: Arduino verzendt uptime berichten elke 5 seconden: "Arduino uptime: X seconds"
Serial Monitor: Alle ontvangen berichten worden gelogd voor debugging

Test de Communicatie:

Typ een bericht in het invoerveld (bijv. "test bericht")
Klik Verzenden of druk op Enter
Controleer Serial Monitor - u zou moeten zien: "Received from web: test bericht"
Controleer webpagina - u zou moeten zien: "Echo: test bericht"
Wacht enkele seconden - u ziet periodieke uptime berichten die elke 3 seconden worden bijgewerkt (bijv. "Arduino uptime: 15 seconds", "Arduino uptime: 18 seconds", etc.)

Begrijp het Communicatieprotocol en Hoe Het Werkt op de Achtergrond

Het begrijpen van de interne mechanismen helpt u de sjabloon effectief aan te passen.

App Identifier Systeem

De CustomWebApp sjabloon gebruikt unieke berichtlabels (genaamd "App Identifiers") die helpen Arduino code en web clients berichten te filteren die bij hen horen. Dit is essentieel omdat uw applicatie mogelijk meerdere web apps bevat, en elke app moet alleen zijn eigen berichten verwerken terwijl anderen worden genegeerd:

Arduino Kant (CustomWebApp.h & CustomWebApp.cpp)

// In CustomWebApp.h class CustomWebAppPage : public DIYablesWebAppPageBase { private: // WebSocket bericht identifier voor deze aangepaste 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 aangepaste app const APP_IDENTIFIER = 'CUSTOM:'; // Gebruik bij ontvangen: if (event.data.startsWith(APP_IDENTIFIER)) { let message = event.data.substring(APP_IDENTIFIER.length); // Verwerk schoon bericht zonder identifier } // Gebruik bij verzenden: ws.send(APP_IDENTIFIER + userInput);

Voordelen van dit ontwerp:

Enkele bron van waarheid: Wijzig identifier op Ã©Ã©n plek per taal
Geen magische strings: Elimineert hardgecodeerde "CUSTOM:" door de code
Type veiligheid: Het gebruik van constanten voorkomt typefouten
Uitbreidbaar: Gemakkelijk om meerdere aangepaste apps te maken met verschillende identifiers
Voorkom dataconflicten tussen meerdere apps: Elke app gebruikt een unieke identifier om berichtinterferentie te voorkomen
Professioneel: Volgt objectgeoriÃ«nteerde ontwerpprincipes

Belangrijke Opmerkingen:

U kunt de huidige identifier "CUSTOM:" behouden wanneer u deze aangepaste web app sjabloon aanpast voor uw project. Wanneer u echter meer dan Ã©Ã©n aangepaste app maakt, zorg er dan voor dat u deze wijzigt om conflicten te vermijden.
Als u de identifier wijzigt, zorg er dan voor dat de waarde in JavaScript (.h bestand) en Arduino code (.cpp bestand) hetzelfde zijn (bijv. beide gebruiken "TEMP:" of beide gebruiken "SENSOR:").
Vooraf gereserveerde identifiers door ingebouwde apps: De volgende identifiers worden al gebruikt door DIYables WebApps ingebouwde applicaties en moeten worden vermeden:

Hoofd app identifiers: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
Sub-protocol identifiers: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"

Communicatiestroom

Van Webpagina naar Arduino:

Wanneer u een bericht typt op de web interface en op de verzendknop klikt, bijvoorbeeld: Hallo, gebeurt de volgende stroom:

JavaScript voegt identifier toe: JavaScript voegt automatisch de app identifier toe (namelijk "CUSTOM:" in deze sjabloon) met behulp van de APP_IDENTIFIER constante en verstuurt vervolgens het bericht naar Arduino via WebSocket. Het werkelijke verzonden bericht is: CUSTOM:Hallo
DIYables WebApps bibliotheek ontvangt: De bibliotheek ontvangt het bericht CUSTOM:Hallo en geeft het door aan uw CustomWebAppPage::handleWebSocketMessage methode
CustomWebAppPage klasse verwijdert identifier: In handleWebSocketMessage controleert de CustomWebAppPage klasse of het bericht begint met zijn APP_IDENTIFIER, verwijdert de identifier met .substring(APP_IDENTIFIER.length()), en geeft vervolgens het resterende bericht Hallo door door de callback functie te roepen die in uw .ino bestand is geÃ¯mplementeerd
Uw applicatie verwerkt: Uw applicatie in het .ino bestand ontvangt alleen Hallo en kan het bericht verwerken afhankelijk van uw aangepaste logica. De huidige sjabloon drukt het af en stuurt een antwoord terug

Van Arduino naar Webpagina:

Wanneer uw Arduino gegevens wil verzenden naar de web interface, bijvoorbeeld: Temperatuur: 25Â°C, gebeurt de volgende stroom:

Uw applicatie roept sendToWeb() aan: In uw .ino bestand roept u customPage.sendToWeb("Temperatuur: 25Â°C") aan om gegevens naar de webbrowser te sturen
CustomWebAppPage klasse voegt identifier toe en broadcast: De CustomWebAppPage klasse voegt automatisch de app identifier toe met zijn APP_IDENTIFIER constante aan uw bericht en broadcast CUSTOM:Temperatuur: 25Â°C naar alle verbonden web clients via WebSocket
JavaScript ontvangt en filtert bericht: De webbrowser ontvangt CUSTOM:Temperatuur: 25Â°C via de ws.onmessage event handler, maar JavaScript verwerkt alleen berichten die beginnen met APP_IDENTIFIER en verwijdert de identifier met .substring(APP_IDENTIFIER.length())
Webpagina toont schoon bericht: De huidige sjabloon toont het schone bericht Temperatuur: 25Â°C (zonder identifier) in de sectie "Bericht van Arduino". U kunt JavaScript aanpassen om de gegevens op verschillende manieren te parseren en weer te geven afhankelijk van uw applicatiebehoeften

Architectuuroverzicht

Het CustomWebApp voorbeeld bestaat uit vier hoofdbestanden:

CustomWebApp.ino - Hoofd Arduino schets met uw applicatielogica
CustomWebApp.h - Header bestand dat de aangepaste paginaklasse definieert (bibliotheekinterface)
CustomWebApp.cpp - Implementatie met communicatielogica (bibliotheekcode)
custom_page_html.h - HTML interface gescheiden voor eenvoudige aanpassing

Wijzig de Sjabloon om Uw Applicatie aan te Passen

De sjabloon is ontworpen om eenvoudig aanpasbaar te zijn voor uw specifieke behoeften. Hier leest u hoe u deze kunt aanpassen:

1. Hardware Integratie

Hardware Initialisatie Toevoegen

In de CustomWebApp.ino setup() functie:

void setup() { Serial.begin(9600); // Voeg hier uw hardware initialisatie toe pinMode(LED_BUILTIN, OUTPUT); // Ingebouwde LED pinMode(3, OUTPUT); // PWM uitgangspin pinMode(4, INPUT_PULLUP); // Knopingang met pull-up pinMode(A0, INPUT); // Analoge sensoringang // 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);

Aangepaste Opdrachten Verwerken

Breid de callback functie uit om uw aangepaste opdrachten te verwerken:

customPage.onCustomMessageReceived([](const String& message) { Serial.println("Ontvangen: " + message); // LED Besturing if (message == "led_on") { digitalWrite(LED_BUILTIN, HIGH); customPage.sendToWeb("LED ingeschakeld"); } else if (message == "led_off") { digitalWrite(LED_BUILTIN, LOW); customPage.sendToWeb("LED uitgeschakeld"); } // Servo Besturing else if (message.startsWith("servo:")) { int angle = message.substring(6).toInt(); // Haal getal op na "servo:" // servo.write(angle); customPage.sendToWeb("Servo bewogen naar " + String(angle) + " graden"); } // Sensorwaarde Opvragen else if (message == "get_temperature") { float temp = readTemperatureSensor(); // Uw sensorfunctie customPage.sendToWeb("Temperatuur: " + String(temp) + "Â°C"); } // Voeg hier meer aangepaste opdrachten toe });

Real-time Sensorgegevens Verzenden

void loop() { webAppsServer.loop(); // Stuur sensorgegevens elke 3 seconden static unsigned long lastSend = 0; if (millis() - lastSend > 3000) { // Lees uw sensoren int lightLevel = analogRead(A0); bool buttonPressed = !digitalRead(4); // Omgekeerd vanwege pull-up float temperature = readTemperatureSensor(); // Stuur naar web interface customPage.sendToWeb("Licht: " + String(lightLevel)); customPage.sendToWeb("Knop: " + String(buttonPressed ? "Ingedrukt" : "Losgelaten")); customPage.sendToWeb("Temp: " + String(temperature) + "Â°C"); lastSend = millis(); } }

2. Web Interface Aanpassen

HTML Lay-out Wijzigen

Bewerk de HTML in custom_page_html.h om de interface te wijzigen:

<div> <h3>ðŸ”Œ Apparaatbesturing</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>ðŸ“Š Sensorgegevens</h3> <div>Temperatuur: <span id="tempValue">--Â°C</span></div> <div>Lichtniveau: <span id="lightValue">--</span></div> <div>Knopstatus: <span id="buttonValue">--</span></div> </div>

JavaScript Verwerking Aanpassen

Update de ws.onmessage functie om specifieke gegevenstypes 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 gebied document.getElementById('rawMessage').textContent = message; // Verwerk specifieke berichttypen if (message.startsWith('Temperatuur:')) { let temp = message.split(':')[1].trim(); document.getElementById('tempValue').textContent = temp; } else if (message.startsWith('Licht:')) { let light = message.split(':')[1].trim(); document.getElementById('lightValue').textContent = light; } else if (message.startsWith('Knop:')) { let button = message.split(':')[1].trim(); document.getElementById('buttonValue').textContent = button; } } };

Stijlen Toevoegen

Pas de CSS aan voor uw applicatie:

Overige Aanpassingen

Naast het wijzigen van de web interface en hardware integratie, kunt u ook aanpassen hoe uw app verschijnt in het DIYables WebApps ecosysteem:

1. App Pad Aanpassen

U kunt het URL-pad wijzigen waar uw aangepaste web app toegankelijk is door de constructor in uw header bestand te wijzigen:

Standaard Pad:

// In CustomWebApp.cpp - Standaard pad is "/custom" CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") { }

Aangepaste Pad Voorbeelden:

// Temperatuurmonitoringsapp CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/nieuw-pad") { } // Toegankelijk via: http://[IP_ADDRESS]/nieuw-pad

Belangrijke Opmerkingen:

Pad moet beginnen met "/": Begin uw pad altijd met een schuine streep
Gebruik beschrijvende namen: Kies paden die duidelijk de functie van uw app beschrijven
Vermijd conflicten: Gebruik geen paden die al worden gebruikt door ingebouwde apps zoals /chat, /monitor, /plotter, etc.
Gebruik kleine letters en koppeltekens: Volg web URL-conventies voor betere compatibiliteit

2. App Kaart op Startpagina Aanpassen

U kunt aanpassen hoe uw app verschijnt op de DIYables WebApps startpagina door de getNavigationInfo() methode in uw implementatiebestand te wijzigen:

Basis App Kaart:

// In CustomWebApp.cpp String CustomWebAppPage::getNavigationInfo() const { return "<a href=\"" + getPagePath() + "\" class=\"app-card\">" "<h3>ðŸ”§ Aangepaste 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>ðŸŒ¡ï¸ Temperatuurmonitor</h3>" "<p>Real-time temperatuurmonitoring</p>" "</a>"; }

Meerdere Aangepaste Web Apps Beheren - EssentiÃ«le Conflictpreventiegids

Bij het ontwikkelen van meerdere aangepaste webapplicaties is het cruciaal om conflicten tussen verschillende apps te vermijden. Stel dat we drie aangepaste apps willen toevoegen met de namen "Temperatuurmonitor", "Motorbesturing" en "Sensordashboard" aan ons Arduino project. Hier leest u hoe u ervoor kunt zorgen dat ze harmonieus samenwerken:

1. Gebruik Unieke App Identifiers

Elke aangepaste web app moet een unieke identifier hebben om berichtconflicten te voorkomen:

Voorbeeld: Temperatuurmonitor App

// In TemperatureApp.cpp const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:"; // JavaScript in temperature_page_html.h const APP_IDENTIFIER = 'TEMP:';

Voorbeeld: Motorbesturing App

// In MotorApp.cpp const String MotorAppPage::APP_IDENTIFIER = "MOTOR:"; // JavaScript in motor_page_html.h const APP_IDENTIFIER = 'MOTOR:';

Voorbeeld: Sensordashboard App

// In SensorApp.cpp const String SensorAppPage::APP_IDENTIFIER = "SENSOR:"; // JavaScript in sensor_page_html.h const APP_IDENTIFIER = 'SENSOR:';

2. Gebruik Unieke Paginapaden

Elke web app heeft een uniek URL-pad nodig:

// Temperatuurapp TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") { } // Motorbesturing App MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") { } // Sensordashboard App SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") { }

3. Gebruik Unieke Klassenamen

Vermijd naamconflicten door beschrijvende klassenamen te gebruiken:

// In plaats van meerdere "CustomWebAppPage" klassen class TemperatureMonitorPage : public DIYablesWebAppPageBase { }; class MotorControllerPage : public DIYablesWebAppPageBase { }; class SensorDashboardPage : public DIYablesWebAppPageBase { };

Hier leest u hoe u een project structureert met meerdere aangepaste apps:

// In het hoofd .ino bestand #include "TemperatureApp.h" #include "MotorApp.h" #include "SensorApp.h" // Instanties aanmaken DIYablesHomePage homePage; TemperatureMonitorPage tempPage; MotorControllerPage motorPage; SensorDashboardPage sensorPage; void setup() { // Voeg alle pagina's toe aan de server webAppsServer.addApp(&homePage); // vooraf gebouwde 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 temperatuurapp berichten }); motorPage.onMotorMessageReceived([](const String& message) { // Verwerk motorapp berichten }); sensorPage.onSensorMessageReceived([](const String& message) { // Verwerk sensorapp berichten }); }

5. Best Practices voor Meerdere Apps

Bestandsorganisatie

MijnProject/ â”œâ”€â”€ MijnProject.ino // Hoofd schets â”œâ”€â”€ TemperatureApp.h // Temperatuurapp header â”œâ”€â”€ TemperatureApp.cpp // Temperatuurapp implementatie â”œâ”€â”€ temperature_page_html.h // Temperatuurapp webpagina â”œâ”€â”€ MotorApp.h // Motorapp header â”œâ”€â”€ MotorApp.cpp // Motorapp implementatie â”œâ”€â”€ motor_page_html.h // Motorapp webpagina â”œâ”€â”€ SensorApp.h // Sensorapp header â”œâ”€â”€ SensorApp.cpp // Sensorapp implementatie â””â”€â”€ sensor_page_html.h // Sensorapp webpagina

Navigatie Tussen Apps

Update de getNavigationInfo() methode in elke app om eenvoudige navigatie te bieden:

String TemperatureMonitorPage::getNavigationInfo() const { return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">" "<h3>ðŸŒ¡ï¸ Temperatuurmonitor</h3>" "<p>Bekijk real-time temperatuurgegevens</p>" "</a>"; }

Gerelateerde Tutorials

※ ONZE BERICHTEN

U bent welkom om de link naar deze tutorial te delen. Gebruik onze inhoud echter niet op andere websites. We hebben veel moeite en tijd gestoken in het maken van de inhoud, respecteer alstublieft ons werk!