Exemple d'application Web personnalisée Arduino - Tutoriel d'une interface Web simple pour les débutants
Vue d'ensemble
Cet exemple fournit un modèle complet pour créer vos propres applications web personnalisées qui s'intègrent parfaitement à la bibliothèque WebApps de DIYables.
Le modèle CustomWebApp est parfait pour les débutants qui souhaitent ajouter leur propre interface Web à l'écosystème des WebApps DIYables ! Ce tutoriel vous montre comment créer une page Web simple avec un échange de données bidirectionnel en temps réel entre le navigateur Web et Arduino via WebSocket qui peut :
- Envoyer des messages texte depuis le navigateur Web vers Arduino instantanément via WebSocket
- Recevoir des messages depuis l'Arduino et les afficher en temps réel sur la page Web
- Maintenir une connexion WebSocket persistante pour une communication continue
- Reconnect automatique lorsque la connexion WebSocket est perdue
- Fonctionne sur les appareils mobiles avec un design réactif
Conçu pour Arduino Uno R4 WiFi et DIYables STEM V4 IoT - ce modèle s'intègre parfaitement avec les applications web DIYables existantes et constitue la base pour créer vos propres interfaces IoT personnalisées !
Ce modèle fournit un code minimal pour démarrer. Les utilisateurs peuvent développer leurs propres applications web sophistiquées en modifiant ce modèle. Une connaissance de base en programmation web (HTML, CSS, JavaScript) est recommandée pour personnaliser l'interface Web et ajouter des fonctionnalités avancées.
Ce que vous apprendrez
- Comment créer une application web personnalisée qui s'intègre à la bibliothèque WebApps de DIYables
- Comment ajouter votre page personnalisée à l'écosystème des WebApps DIYables
- Comment envoyer des messages texte depuis un navigateur Web vers Arduino
- Comment envoyer des données d'Arduino vers le navigateur Web
- Comment gérer les connexions WebSocket et la reconnexion automatique
- Comment rendre les interfaces web adaptées aux mobiles
- Comment utiliser le système de templates de DIYables WebApps pour un développement rapide
Fonctionnalités
- Intégration des DIYables WebApps: S'intègre parfaitement à l'écosystème de la bibliothèque DIYables WebApps
- Code Modèle Minimal: Fournit une base simple que vous pouvez étendre et personnaliser
- Développement basé sur des modèles: Point de départ complet que vous pouvez modifier pour créer des applications sophistiquées
- Messagerie texte simple: Envoyez des messages entre le navigateur Web et l'Arduino
- Reconnect automatique: Se reconnecte automatiquement lorsque la connexion est perdue
- Responsive sur mobile: Fonctionne parfaitement sur les téléphones, les tablettes et les ordinateurs
- Conçu pour les débutants: Un code propre et simple, facile à comprendre
- Cadre extensible: Nécessite des connaissances de base en programmation web (HTML/CSS/JavaScript) pour une personnalisation avancée
- Plateforme extensible: Actuellement implémenté pour Arduino Uno R4 WiFi, mais peut être étendu à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Comment démarrer
Vous pouvez commencer à créer votre application web personnalisée pour la carte Arduino Uno R4/DIYables STEM V4 IoT en suivant les étapes principales ci-dessous :
- Exécuter le modèle d’application personnalisée par défaut sur votre carte Arduino
- Tester et vérifier que l’application Web personnalisée par défaut fonctionne correctement
- Comprendre le protocole de communication et comment il fonctionne en arrière-plan
- Modifier le modèle pour adapter votre application
- Gérer plusieurs applications Web personnalisées - Guide essentiel de prévention des conflits
Commençons un par un.
Exécutez le modèle d'application personnalisée par défaut sur votre carte Arduino
Étapes rapides
- Si c'est la première fois que vous utilisez l'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel.
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB
- Lancez l'IDE Arduino sur votre ordinateur
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque
- Il vous sera demandé d'installer d'autres dépendances de bibliothèque
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de bibliothèque
- Dans l'IDE Arduino, allez dans Fichier > Exemples > DIYables WebApps > CustomWebApp
- Vous verrez 4 fichiers qui constituent le modèle complet d'une application Web personnalisée:
- CustomWebApp.ino - Programme Arduino principal (c’est ici que vous ajoutez votre logique personnalisée !)
- CustomWebApp.h - Fichier d'en-tête (définit l'interface de la bibliothèque WebApps de DIYables)
- CustomWebApp.cpp - Fichier d'implémentation (assure l'intégration avec le framework de la bibliothèque)
- custom_page_html.h - Conception de page Web (personnalisez votre interface Web ici !)
- Configurez les paramètres Wi‑Fi en modifiant ces lignes dans CustomWebApp.ino :
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Étape 5 : Téléverser et tester
- Cliquez sur le bouton Upload de l'IDE Arduino pour téléverser le code sur l'Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le Moniteur Série pour voir l'état de la connexion
- Notez l'adresse IP affichée dans le Moniteur Série
- Ouvrez le Moniteur Série
- Consultez le résultat sur le Moniteur Série. Il ressemble à ce qui suit
COM6
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
Clear output
9600 baud
Newline
- Si vous ne voyez rien, redémarrez la carte Arduino.
- Notez l'adresse IP affichée et saisissez-la dans la barre d'adresse d'un navigateur Web sur votre smartphone ou votre PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web Custom, vous verrez l'interface utilisateur de l'application Web Custom comme ci-dessous :
- Ou vous pouvez également accéder directement à la page via l'adresse IP suivie de /custom. Par exemple : http://[IP_ADDRESS]/custom
Tester et vérifier que l'application Web personnalisée par défaut fonctionne correctement
Lorsque vous exécutez le modèle par défaut de CustomWebApp, voici ce que vous devriez voir :
Sur l'interface Web:
- État de la connexion: Affiche « Connecté » en bleu lorsque le WebSocket est actif
- Champ de saisie des messages: Champ de texte pour saisir les messages destinés à l'Arduino
- Bouton Envoyer: Cliquez pour envoyer votre message (ou appuyez sur Entrée)
- Affichage des messages Arduino: Affiche les messages reçus de l'Arduino en texte bleu
Comportement d'Arduino:
- Réponse d'écho : Lorsque vous envoyez « Bonjour » depuis le Web, l'Arduino répond par « Écho : Bonjour »
- Mises à jour périodiques : L'Arduino envoie des messages de temps de fonctionnement toutes les 5 secondes : « Temps de fonctionnement d'Arduino : X secondes »
- Moniteur série : Tous les messages reçus sont enregistrés pour le débogage
Tester la communication:
- Tapez un message dans la zone de saisie (par exemple, "message de test")
- Cliquez sur Envoyer ou appuyez sur Entrée
- Vérifiez le Moniteur série - vous devriez voir : "Reçu du web : message de test"
- Vérifiez la page Web - vous devriez voir : "Écho : message de test"
- Attendez quelques secondes - vous verrez des messages de fonctionnement périodiques mis à jour toutes les 3 secondes (par exemple, "Temps de fonctionnement Arduino : 15 secondes", "Temps de fonctionnement Arduino : 18 secondes", etc.)
Comprendre le protocole de communication et son fonctionnement en arrière-plan
Comprendre les mécanismes internes vous aide à personnaliser le modèle de manière efficace.
Système d'identification des applications
Le modèle CustomWebApp utilise des balises de message uniques (appelées « identifiants d'application ») qui aident le code Arduino et les clients Web à filtrer les messages qui leur appartiennent. Cela est essentiel car votre application peut comporter plusieurs applications Web, et chaque application doit traiter uniquement ses propres messages tout en ignorant les autres :
Côté Arduino (CustomWebApp.h et CustomWebApp.cpp)
// In CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket message identifier for this custom app
static const String APP_IDENTIFIER;
// ...
};
// In CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Usage in handleWebSocketMessage:
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// Process clean payload without identifier
}
// Usage in sendToWeb:
broadcastToAllClients(APP_IDENTIFIER + message);
Côté JavaScript (custom_page_html.h)
// WebSocket message identifier for this custom app
const APP_IDENTIFIER = 'CUSTOM:';
// Usage in receiving:
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Process clean message without identifier
}
// Usage in sending:
ws.send(APP_IDENTIFIER + userInput);
Avantages de cette conception :
- Une source unique de vérité: Modifier l'identifiant en un seul endroit pour chaque langue
- Pas de chaînes magiques: Élimine les chaînes codées en dur « CUSTOM: » dans tout le code
- Sécurité de type: L'utilisation de constantes évite les fautes de frappe
- Extensible: Il est facile de créer plusieurs applications personnalisées avec des identifiants différents
- Éviter les conflits de données entre plusieurs applications: Chaque application utilise un identifiant unique pour éviter les interférences de messages
- Professionnel: Respecte les principes de conception orientée objet
Notes importantes:
- Vous pouvez conserver l'identifiant actuel « CUSTOM: » lors de la modification de ce modèle d'application web personnalisé pour l'adapter à votre projet. Cependant, lorsque vous créez plus d'une application personnalisée, assurez-vous de le modifier pour éviter les conflits.
- Si vous modifiez l'identifiant, assurez-vous que la valeur dans JavaScript (.h fichier) et dans le code Arduino (.cpp fichier) soient identiques (par exemple, les deux utilisent « TEMP: » ou les deux utilisent « SENSOR: »).
- Identifiants pré-réservés par les applications intégrées : Les identifiants suivants sont déjà utilisés par les applications intégrées des DIYables WebApps et doivent être évités :
- Identifiants principaux de l'application: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
- Identifiants de sous-protocoles: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"
Flux de communication
De la page Web à Arduino:
Lorsque vous tapez un message dans l'interface web et que vous cliquez sur le bouton Envoyer, par exemple : Hello, le flux suivant se déroule :
- JavaScript ajoute l'identifiant: JavaScript ajoute automatiquement l'identifiant de l'application (qui est "CUSTOM:" dans ce modèle) en utilisant la constante APP_IDENTIFIER, puis envoie le message à l'Arduino via WebSocket. Le message réel envoyé est : CUSTOM:Hello
- La bibliothèque DIYables WebApps reçoit: La bibliothèque reçoit le message CUSTOM:Hello et le transmet à votre méthode CustomWebAppPage::handleWebSocketMessage
- La classe CustomWebAppPage enlève l'identifiant: Dans handleWebSocketMessage, la classe CustomWebAppPage vérifie si le message commence par son APP_IDENTIFIER, retire l'identifiant en utilisant .substring(APP_IDENTIFIER.length()), puis transmet le message restant Hello en appelant la fonction de rappel implémentée dans votre fichier .ino
- Votre application gère: Votre application dans le fichier .ino reçoit seulement Hello et peut gérer le message selon votre logique personnalisée. Le modèle actuel se contente de l'imprimer et d'envoyer une réponse
De Arduino à la page Web :
Lorsque votre Arduino veut envoyer des données à l'interface Web, par exemple : Temperature: 25°C, le flux ci-dessous se produit :
- Votre application appelle sendToWeb(): Dans votre fichier .ino, vous appelez customPage.sendToWeb("Temperature: 25°C") pour envoyer des données au navigateur Web
- La classe CustomWebAppPage ajoute un identifiant et diffuse: La classe CustomWebAppPage ajoute automatiquement l'identifiant de l'application en utilisant sa constante APP_IDENTIFIER à votre message et diffuse CUSTOM:Temperature: 25°C à tous les clients Web connectés via WebSocket
- Le JavaScript reçoit et filtre le message: Le navigateur Web reçoit CUSTOM:Temperature: 25°C via le gestionnaire d'événements ws.onmessage, mais le JavaScript ne traite que les messages commençant par APP_IDENTIFIER et retire l'identifiant en utilisant .substring(APP_IDENTIFIER.length())
- La page Web affiche le message épuré: Le modèle actuel affiche le message épuré Temperature: 25°C (sans identifiant) dans la section « Message d'Arduino ». Vous pouvez personnaliser le JavaScript pour analyser et afficher les données de différentes manières selon les besoins de votre application
Vue d'ensemble de l'architecture
L'exemple CustomWebApp se compose de quatre fichiers principaux :
- CustomWebApp.ino - Croquis Arduino principal avec votre logique d’application
- CustomWebApp.h - Fichier d’en-tête définissant la classe de page personnalisée (interface de la bibliothèque)
- CustomWebApp.cpp - Implémentation avec la logique de communication (code de la bibliothèque)
- custom_page_html.h - Interface HTML séparée pour une personnalisation facile
Modifier le modèle pour adapter votre application
Le modèle est conçu pour être facilement personnalisable en fonction de vos besoins spécifiques. Voici comment l'adapter :
1. Intégration du matériel
Ajouter l'initialisation du matériel
Dans la fonction setup() de CustomWebApp.ino :
void setup() {
Serial.begin(9600);
// Add your hardware initialization here
pinMode(LED_BUILTIN, OUTPUT); // Built-in LED
pinMode(3, OUTPUT); // PWM output pin
pinMode(4, INPUT_PULLUP); // Button input with pullup
pinMode(A0, INPUT); // Analog sensor input
// Initialize sensors, displays, motors, etc.
// servo.attach(9);
// lcd.begin(16, 2);
// Rest of setup...
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
Gérer les commandes personnalisées
Étendez la fonction de rappel pour gérer vos commandes personnalisées :
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
// LED Control
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 Control
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt(); // Get number after "servo:"
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
// Sensor Reading Request
else if (message == "get_temperature") {
float temp = readTemperatureSensor(); // Your sensor function
customPage.sendToWeb("Temperature: " + String(temp) + "°C");
}
// Add more custom commands here
});
Envoyer des données de capteurs en temps réel
void loop() {
webAppsServer.loop();
// Send sensor data every 3 seconds
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
// Read your sensors
int lightLevel = analogRead(A0);
bool buttonPressed = !digitalRead(4); // Inverted due to pullup
float temperature = readTemperatureSensor();
// Send to web interface
customPage.sendToWeb("Light: " + String(lightLevel));
customPage.sendToWeb("Button: " + String(buttonPressed ? "Pressed" : "Released"));
customPage.sendToWeb("Temp: " + String(temperature) + "°C");
lastSend = millis();
}
}
2. Personnalisation de l'interface Web
Modifier la mise en page HTML
Modifiez le HTML dans custom_page_html.h pour changer l'interface :
<!-- Add new controls -->
<div>
<h3>🔌 Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<br><br>
<label>Servo Angle:</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>Temperature: <span id="tempValue">--°C</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
<div>Button Status: <span id="buttonValue">--</span></div>
</div>
Personnaliser le traitement JavaScript
Mettez à jour la fonction ws.onmessage pour gérer des types de données spécifiques :
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Display all messages in general area
document.getElementById('rawMessage').textContent = message;
// Handle specific message types
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;
}
}
};
Ajouter du style
Personnalisez le CSS de votre application :
<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>
Autre personnalisation
Au-delà de modifier l'interface web et l'intégration matérielle, vous pouvez également personnaliser la façon dont votre application apparaît dans l'écosystème WebApps de DIYables :
1. Personnaliser le chemin de l'application
Vous pouvez modifier le chemin d'URL par lequel votre application web personnalisée est accessible en modifiant le constructeur dans votre fichier d'en-tête :
Chemin par défaut:
// In CustomWebApp.cpp - Default path is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Exemples de chemins personnalisés :
// Temperature monitoring app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Accessible at: http://[IP_ADDRESS]/new-path
Notes importantes :
- Le chemin doit commencer par \"/\": Commencez toujours votre chemin par une barre oblique
- Utilisez des noms descriptifs: Choisissez des chemins qui décrivent clairement la fonction de votre application
- Évitez les conflits: N'utilisez pas des chemins déjà pris par des applications intégrées comme /chat, /monitor, /plotter, etc.
- Utilisez des minuscules et des tirets: Suivez les conventions des URL Web pour une meilleure compatibilité
2. Personnaliser la carte d'application sur la page d'accueil
Vous pouvez personnaliser l'apparence de votre application sur la page d'accueil des WebApps DIYables en modifiant la méthode getNavigationInfo() dans votre fichier d'implémentation :
Carte d'application basique :
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\">"
"<h3>🔧 Custom App</h3>"
"<p>My custom web application</p>"
"</a>";
}
Carte d'application avancée avec CSS en ligne:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\" "
"style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>Real-time temperature monitoring</p>"
"</a>";
}
Gérer plusieurs applications web personnalisées – Guide essentiel de prévention des conflits
Lors du développement de plusieurs applications web personnalisées, il est crucial d’éviter les conflits entre les différentes applications. Supposons que nous voulions ajouter trois applications personnalisées nommées « Temperature Monitor », « Motor Controller » et « Sensor Dashboard » à notre projet Arduino. Voici comment vous assurer qu’elles fonctionnent ensemble harmonieusement :
1. Utilisez des identifiants d'applications uniques
Chaque application web personnalisée doit disposer d'un identifiant unique pour éviter les conflits de messages:
Exemple : Application de surveillance de la température
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Exemple : Application du contrôleur de moteur
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Exemple : Application de tableau de bord du capteur
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Utilisez des chemins de pages uniques
Chaque application web a besoin d'un chemin d'URL unique :
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Utilisez des noms de classe uniques
Évitez les conflits de nommage en utilisant des noms de classe descriptifs:
// Instead of multiple "CustomWebAppPage" classes
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Organiser plusieurs applications dans un seul projet
Voici comment structurer un projet avec plusieurs applications personnalisées :
// In main .ino file
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
// Create instances
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
// Add all pages to server
webAppsServer.addApp(&homePage); // pre-built app
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callbacks for each app
tempPage.onTemperatureMessageReceived([](const String& message) {
// Handle temperature app messages
});
motorPage.onMotorMessageReceived([](const String& message) {
// Handle motor app messages
});
sensorPage.onSensorMessageReceived([](const String& message) {
// Handle sensor app messages
});
}
5. Bonnes pratiques pour plusieurs applications
Organisation des fichiers
MyProject/
├── MyProject.ino // Main sketch
├── TemperatureApp.h // Temperature app header
├── TemperatureApp.cpp // Temperature app implementation
├── temperature_page_html.h // Temperature app web page
├── MotorApp.h // Motor app header
├── MotorApp.cpp // Motor app implementation
├── motor_page_html.h // Motor app web page
├── SensorApp.h // Sensor app header
├── SensorApp.cpp // Sensor app implementation
└── sensor_page_html.h // Sensor app web page
Navigation entre les applications
Mettre à jour la méthode getNavigationInfo() dans chaque application pour faciliter la navigation :
String TemperatureMonitorPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>View real-time temperature data</p>"
"</a>";
}
String MotorControllerPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card motor\">"
"<h3>⚙️ Motor Controller</h3>"
"<p>Control servo and stepper motors</p>"
"</a>";
}
6. Tests de plusieurs applications
Lors du test de plusieurs applications :
- Testez d'abord chaque application individuellement
- Vérifiez le Moniteur série pour les conflits de messages
- Vérifiez que les identifiants uniques fonctionnent correctement
- Testez la navigation entre différentes applications
- Surveillez l'utilisation de la mémoire avec plusieurs applications chargées
En suivant ces directives, vous pouvez créer plusieurs applications web personnalisées qui fonctionnent ensemble sans interférer les unes avec les autres ni interférer avec d'autres WebApps DIYables.