Application Web personnalisée Arduino Nano ESP32 avec la bibliothèque DIYables ESP32 WebApps
Vue d'ensemble
L'exemple CustomWebApp de la bibliothèque DIYables ESP32 WebApps fournit un modèle de démarrage pour la création d'interfaces basées sur le navigateur qui s'intègrent dans l'écosystème d'applications web DIYables existant sur l'Arduino Nano ESP32. Le modèle établit une communication WebSocket bidirectionnelle entre un navigateur et la carte : le navigateur peut envoyer des commandes texte à la carte, et la carte peut transmettre des données au navigateur à tout moment.
L'exemple se compose de quatre fichiers qui doivent être maintenus ensemble dans le même dossier de sketch :
- CustomWebApp.ino — sketch principal avec la logique d'application
- CustomWebApp.h — en-tête définissant l'interface de la classe de page
- CustomWebApp.cpp — implémentation de la classe et routage des messages WebSocket
- custom_page_html.h — HTML, CSS et JavaScript intégrés pour la page du navigateur
Ce que ce tutoriel couvre
- Exécution du modèle d'application personnalisée par défaut sur Arduino Nano ESP32
- Compréhension du système d'identifiant d'application qui isole les messages entre plusieurs applications
- Modification du modèle pour gérer des commandes matérielles personnalisées
- Envoi de données de capteur au navigateur à l'exécution
- Personnalisation du HTML, CSS et JavaScript de la page web intégrée
- Gestion de plusieurs applications personnalisées dans un projet sans conflits de messages
Matériel nécessaire
Ou vous pouvez acheter les kits suivants:
| 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.
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'Arduino IDE sur votre ordinateur.
- Sélectionnez la carte appropriée (par ex. Arduino Nano ESP32) et le port COM.
- Accédez à l'icône Bibliothèques dans la barre gauche de l'Arduino IDE.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Il vous sera demandé d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans l'Arduino IDE, allez dans Fichier Exemples DIYables ESP32 WebApps CustomWebApp. L'IDE ouvre quatre fichiers : CustomWebApp.ino, CustomWebApp.h, CustomWebApp.cpp et custom_page_html.h.
- Mettez à jour les identifiants WiFi dans CustomWebApp.ino :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans Arduino IDE pour téléverser le code sur Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ce qui suit :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: Arduino Nano 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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application personnalisée :
- Sélectionnez la carte Application Web personnalisée pour ouvrir la page :
- La page est également directement accessible à http://192.168.0.2/custom.
Vérification du modèle par défaut
Le modèle par défaut démontre la communication bidirectionnelle de base :
- Tapez n'importe quel texte dans le champ de saisie de la page et cliquez sur Envoyer. La carte reçoit le message et le renvoie en écho. La page web affiche : Echo: <votre message>
- La carte envoie un message de temps de fonctionnement à tous les navigateurs connectés toutes les 5 secondes : Arduino uptime: X seconds
- Tous les messages reçus sont affichés dans le Moniteur Série.
Système d'identifiant d'application
La bibliothèque permet à plusieurs applications web de partager un serveur WebSocket sur le port 81. Chaque application est isolée par une courte chaîne de préfixe appelée l'identifiant d'application. L'identifiant est préfixé à chaque message dans les deux directions.
Côté carte (CustomWebApp.h / CustomWebApp.cpp)
// CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
static const String APP_IDENTIFIER;
};
// CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Réception : supprimer l'identifiant avant de passer au callback
void CustomWebAppPage::handleWebSocketMessage(const String& message) {
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// invoquer le callback utilisateur avec la charge utile
}
}
// Envoi : préfixer l'identifiant avant la diffusion
void CustomWebAppPage::sendToWeb(const String& message) {
broadcastToAllClients(APP_IDENTIFIER + message);
}
Côté navigateur (custom_page_html.h)
const APP_IDENTIFIER = 'CUSTOM:';
// Réception
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// afficher le message
}
};
// Envoi
ws.send(APP_IDENTIFIER + userInput);
La valeur de l'identifiant dans le fichier .cpp et le fichier .h doit correspondre exactement. Lors de la création d'applications personnalisées supplémentaires, attribuez un identifiant distinct à chacune.
Identifiants réservés — les suivants sont déjà utilisés par les applications intégrées et ne doivent pas être réutilisés :
- Identifiants d'application : CHAT:, MONITOR:, PLOTTER:, DIGITAL_PINS:, JOYSTICK:, SLIDER:, TABLE:, RTC:, ROTATOR:, GAUGE:
- Identifiants de sous-protocole : TIME:, DATETIME:, JOYSTICK_CONFIG:, PLOTTER_DATA:, PLOTTER_CONFIG:, SLIDER_VALUES:, TABLE_CONFIG:, TABLE_DATA:, VALUE_UPDATE:, PIN_CONFIG:, PIN_STATES:, PIN_UPDATE:
Adaptation du modèle
Gestion des commandes matérielles
Étendez le callback dans CustomWebApp.ino pour répondre à des commandes spécifiques :
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
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");
}
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt();
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
else if (message == "get_temperature") {
float temp = readTemperatureSensor();
customPage.sendToWeb("Temperature: " + String(temp) + " C");
}
});
Envoi de données de capteur depuis la boucle
void loop() {
webAppsServer.loop();
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
int lightLevel = analogRead(A0);
customPage.sendToWeb("Light: " + String(lightLevel));
lastSend = millis();
}
}
Personnalisation de la page web (HTML)
Modifiez custom_page_html.h pour ajouter des boutons et des éléments d'affichage :
<div>
<h3>Contrôle de l'appareil</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<label>Angle du servo :</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
</div>
<div>
<h3>Données du capteur</h3>
<div>Température : <span id="tempValue">--</span></div>
<div>Niveau de lumière : <span id="lightValue">--</span></div>
</div>
Personnalisation du traitement des messages (JavaScript)
Mettez à jour ws.onmessage dans custom_page_html.h pour analyser des champs spécifiques :
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
if (message.startsWith('Temperature:')) {
document.getElementById('tempValue').textContent = message.split(':')[1].trim();
}
else if (message.startsWith('Light:')) {
document.getElementById('lightValue').textContent = message.split(':')[1].trim();
}
}
};
Personnalisation du chemin URL
Changez le chemin où la page est servie en modifiant le constructeur dans CustomWebApp.cpp :
// Par défaut : accessible à /custom
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {}
// Changer pour un chemin descriptif
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/temperature") {}
Le chemin doit commencer par / et ne doit pas dupliquer les chemins utilisés par les applications intégrées (/chat, /monitor, /plotter, /web-digital-pins, /web-joystick, /web-slider, /web-table, /web-rtc, /web-rotator, /web-gauge).
Gestion de plusieurs applications personnalisées
Lors de l'ajout de plus d'une page personnalisée, chacune doit avoir un identifiant unique, un chemin unique et un nom de classe unique.
Structure des fichiers
MyProject/
├── MyProject.ino
├── TemperatureApp.h
├── TemperatureApp.cpp
├── temperature_page_html.h
├── MotorApp.h
├── MotorApp.cpp
├── motor_page_html.h
├── SensorApp.h
├── SensorApp.cpp
└── sensor_page_html.h
Enregistrement de plusieurs applications
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
tempPage.onTemperatureMessageReceived([](const String& message) {
// gérer les commandes de température
});
motorPage.onMotorMessageReceived([](const String& message) {
// gérer les commandes moteur
});
}
Identifiants uniques par application
// TemperatureApp.cpp
const String TemperatureMonitorPage::APP_IDENTIFIER = "TEMP:";
// MotorApp.cpp
const String MotorControllerPage::APP_IDENTIFIER = "MOTOR:";
// SensorApp.cpp
const String SensorDashboardPage::APP_IDENTIFIER = "SENSOR:";