Dans ce guide, vous apprendrez à effectuer des mises à jour en direct (OTA) sur vos cartes ESP32 à l’aide de la bibliothèque AsyncElegantOTA. Cette bibliothèque crée un serveur Web qui vous permet de télécharger un nouveau firmware (un nouveau sketch) sur votre carte sans avoir besoin d’établir une connexion série entre l’ESP32 et votre ordinateur.
De plus, avec cette bibliothèque, vous pouvez également télécharger de nouveaux fichiers sur le système de fichiers ESP32 (SPIFFS). La bibliothèque est très facile à utiliser et compatible avec la bibliothèque ESPAsyncWebServer que nous utilisons souvent pour créer des projets de serveur Web.
À la fin de ce didacticiel, vous serez en mesure d’ajouter facilement des fonctionnalités OTA à vos projets de serveur Web avec l’ESP32 pour télécharger de nouveaux micrologiciels et fichiers sur le système de fichiers sans fil à l’avenir.
Nous avons un tutoriel similaire pour la carte ESP8266 NodeMCU : Mises à jour ESP8266 NodeMCU OTA (Over-the-Air) – AsyncElegantOTA utilisant Arduino IDE
Regardez le didacticiel vidéo
Ce projet est disponible en format vidéo et en format écrit. Vous pouvez regarder la vidéo ci-dessous ou vous pouvez faire défiler vers le bas pour les instructions écrites.
Aperçu
Ce tutoriel couvre :
Nous vous recommandons de suivre toutes les étapes du didacticiel pour comprendre le fonctionnement d’ElegantOTA et comment vous pouvez l’utiliser dans vos projets. Pour montrer comment procéder, nous allons télécharger des fichiers pour créer différents projets de serveur Web.
Programmation ESP32 OTA (en direct)
La mise à jour OTA (Over-the-Air) est le processus de chargement d’un nouveau micrologiciel sur la carte ESP32 à l’aide d’une connexion Wi-Fi plutôt que d’une communication série. Cette fonctionnalité est extrêmement utile en cas d’absence d’accès physique à la carte ESP32.
Il existe différentes façons d’effectuer des mises à jour OTA. Dans ce didacticiel, nous expliquerons comment procéder à l’aide du Bibliothèque AsyncElegantOTA. À notre avis, c’est l’un des moyens les meilleurs et les plus simples d’effectuer des mises à jour OTA.
La bibliothèque AsyncElegantOTA crée un serveur Web auquel vous pouvez accéder sur votre réseau local pour télécharger de nouveaux micrologiciels ou fichiers sur le système de fichiers (SPIFFS). Les fichiers que vous téléchargez doivent être au format .bin. Nous vous montrerons plus tard dans le tutoriel comment convertir vos fichiers au format .bin.
Le seul inconvénient de la programmation OTA est que vous devez ajouter le code OTA dans chaque croquis que vous téléchargez afin de pouvoir utiliser OTA à l’avenir. Dans le cas de la bibliothèque AsyncElegantOTA, elle se compose de seulement trois lignes de code.
Bibliothèque AsyncElegantOTA
Comme mentionné précédemment, il existe de nombreuses alternatives pour la programmation OTA avec les cartes ESP32. Par exemple, dans l’IDE Arduino, sous le dossier Exemples, il y a l’exemple BasicOTA (qui n’a jamais bien fonctionné pour nous) ; l’OTA Web Updater (fonctionne bien, mais il n’est pas facile à intégrer aux serveurs Web à l’aide de la bibliothèque ESPAsyncWebServer) ; et de nombreux autres exemples provenant de différentes bibliothèques.
La plupart de nos projets de serveur Web avec l’ESP32 utilisent le Bibliothèque ESPAsyncWebServer. Nous voulions donc une solution compatible avec cette bibliothèque. Le Bibliothèque AsyncElegantOTA est tout simplement parfait pour ce que nous voulons:
- Il est compatible avec la librairie ESPAsyncWebServer ;
- Il vous suffit d’ajouter trois lignes de code pour ajouter des fonctionnalités OTA à votre serveur Web asynchrone « normal » ;
- Il vous permet de mettre à jour non seulement le nouveau micrologiciel sur la carte, mais également les fichiers sur le système de fichiers ESP32 (SPIFFS) ;
- Il fournit une interface de serveur Web magnifique et moderne.
- Cela fonctionne extrêmement bien.
Si vous aimez cette bibliothèque et que vous l’utiliserez dans vos projets, envisagez de soutenir le travail de développeur.
Mises à jour OTA avec la bibliothèque AsyncElegantOTA – Résumé rapide
Pour ajouter des fonctionnalités OTA à vos projets à l’aide de la bibliothèque AsyncElegantOTA, procédez comme suit :
- Installer AsyncElegantOTA, AsyncTCPet ESPAsyncWebServer bibliothèques;
- Inclure la bibliothèque AsyncElegantOTA en haut de l’esquisse Arduino : #include
; - Ajoutez cette ligne AsyncElegantOTA.begin(&server); avant serveur.begin();
- Ouvrez votre navigateur et accédez à http://
/update, où est votre adresse IP ESP32.
Continuez à lire le didacticiel pour des étapes plus détaillées.
Comment fonctionne OTA Web Updater ?
- La première esquisse doit être téléchargée via le port série. Cette esquisse doit contenir le code pour créer le programme de mise à jour Web OTA afin que vous puissiez télécharger le code ultérieurement à l’aide de votre navigateur.
- L’esquisse OTA Web Updater crée un serveur Web auquel vous pouvez accéder pour télécharger une nouvelle esquisse via un navigateur Web.
- Ensuite, vous devez implémenter des routines OTA dans chaque croquis que vous téléchargez afin de pouvoir effectuer les prochaines mises à jour/téléchargements en direct.
- Si vous téléchargez un code sans routine OTA, vous ne pourrez plus accéder au serveur Web et télécharger une nouvelle esquisse en direct.
Installer la bibliothèque AsyncElegantOTA
Dans ce tutoriel, l’ESP32 sera programmé à l’aide de l’IDE Arduino. Si vous souhaitez apprendre à faire de même avec VS Code + PlatformIO, suivez le tutoriel suivant : Mises à jour ESP32 OTA (Over-the-Air) – AsyncElegantOTA (VS Code + PlatformIO)
Vous pouvez installer la bibliothèque AsyncElegantOTA à l’aide du gestionnaire de bibliothèque Arduino. Dans votre IDE Arduino, accédez à Sketch> Inclure la bibliothèque> Gérer les bibliothèques… Recherchez «AsyncElegantOTA» et installez-le.
Installer les bibliothèques AsyncTCP et ESPAsyncWebServer
Vous devez également installer les bibliothèques AsyncTCP et ESPAsyncWebServer. Cliquez sur les liens ci-dessous pour télécharger les bibliothèques.
Ces bibliothèques ne peuvent pas être installées via le gestionnaire de bibliothèque Arduino, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation Arduino. Alternativement, dans votre IDE Arduino, vous pouvez aller à Sketch> Inclure la bibliothèque> Ajouter une bibliothèque .zip et sélectionner les bibliothèques que vous venez de télécharger.
AsyncElegantOTA ESP32 Exemple de base
Commençons par l’exemple de base fourni par la bibliothèque. Cet exemple crée un serveur Web simple avec l’ESP32. L’URL root affiche du texte et l’URL /update affiche l’interface pour mettre à jour le micrologiciel et le système de fichiers.
Copiez le code suivant dans votre IDE Arduino.
/*
Rui Santos
Complete project details
- Arduino IDE: https://Raspberryme.com/esp32-ota-over-the-air-arduino/
- VS Code: https://Raspberryme.com/esp32-ota-over-the-air-vs-code/
This sketch shows a Basic example from the AsyncElegantOTA library: ESP32_Async_Demo
https://github.com/ayushsharma82/AsyncElegantOTA
*/
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
AsyncWebServer server(80);
void setup(void) {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "text/plain", "Hi! I am ESP32.");
});
AsyncElegantOTA.begin(&server); // Start ElegantOTA
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
}
Insérez vos informations d’identification réseau et le code devrait fonctionner immédiatement :
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Comment fonctionne le code
Tout d’abord, incluez les bibliothèques nécessaires :
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>Insérez vos informations d’identification réseau dans les variables suivantes afin que l’ESP32 puisse se connecter à votre réseau local.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Créez un objet AsyncWebServer sur le port 80 :
AsyncWebServer server(80);Dans le setup(), initialisez le Serial Monitor :
Serial.begin(115200);Initialiser le Wi-Fi :
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());Ensuite, traitez les demandes des clients. Les lignes suivantes, envoyez du texte Salut ! Je suis ESP32. lorsque vous accédez à l’URL root (/) :
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "text/plain", "Hi! I am ESP32.");
});Si votre serveur Web doit gérer plus de requêtes, vous pouvez les ajouter (nous vous le montrerons dans l’exemple suivant).
Ensuite, ajoutez la ligne suivante pour démarrer ElegantOTA :
AsyncElegantOTA.begin(&server);Enfin, initialisez le serveur :
server.begin();Accéder au serveur Web
Après avoir téléchargé le code sur la carte, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton RST embarqué ESP32. Il devrait afficher l’adresse IP ESP comme suit (la vôtre peut être différente) :
Dans votre réseau local, ouvrez votre navigateur et tapez l’adresse IP ESP32. Vous devriez avoir accès à la page Web root (/) avec du texte affiché.
Maintenant, imaginez que vous souhaitiez modifier le code de votre serveur Web. Pour ce faire via OTA, accédez à l’adresse IP ESP suivie de /update. La page Web suivante devrait se charger.
Suivez les sections suivantes pour savoir comment télécharger un nouveau micrologiciel à l’aide d’AsyncElegantOTA.
Télécharger de nouvelles mises à jour du micrologiciel OTA (Over-the-Air) – ESP32
Chaque fichier que vous téléchargez via OTA doit être au format .bin. Vous pouvez générer un fichier .bin à partir de votre croquis à l’aide de l’IDE Arduino.
Avec votre esquisse ouverte, il vous suffit d’aller dans Esquisse > Exporter le binaire compilé. Un fichier .bin sera généré à partir de votre croquis. Le fichier généré sera enregistré dans votre dossier de projet.
C’est ce fichier .bin que vous devez télécharger à l’aide de la page Web AsyncElegantOTA si vous souhaitez télécharger un nouveau micrologiciel.
Télécharger une nouvelle esquisse de serveur Web – Exemple
Voyons un exemple pratique. Imaginez qu’après avoir téléchargé le croquis précédent, vous souhaitiez en télécharger un nouveau qui vous permet de contrôler une LED via une interface Web comme ce projet. Voici les étapes que vous devez suivre :
1. Copiez le code suivant dans votre IDE Arduino. N’oubliez pas d’insérer vos identifiants réseau.
/*
Rui Santos
Complete project details
- Arduino IDE: https://Raspberryme.com/esp32-ota-over-the-air-arduino/
- VS Code: https://Raspberryme.com/esp32-ota-over-the-air-vs-code/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
// Import required libraries
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
bool ledState = 0;
const int ledPin = 2;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
h2{
font-size: 1.5rem;
font-weight: bold;
color: #143642;
}
.topnav {
overflow: hidden;
background-color: #143642;
}
body {
margin: 0;
}
.content {
padding: 30px;
max-width: 600px;
margin: 0 auto;
}
.card {
background-color: #F8F7F9;;
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
padding-top:10px;
padding-bottom:20px;
}
.button {
padding: 15px 50px;
font-size: 24px;
text-align: center;
outline: none;
color: #fff;
background-color: #0f8b8d;
border: none;
border-radius: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/*.button:hover {background-color: #0f8b8d}*/
.button:active {
background-color: #0f8b8d;
box-shadow: 2 2px #CDCDCD;
transform: translateY(2px);
}
.state {
font-size: 1.5rem;
color:#8c8c8c;
font-weight: bold;
}
</style>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
</head>
<body>
<div class="topnav">
<h1>ESP WebSocket Server</h1>
</div>
<div class="content">
<div class="card">
<h2>Output - GPIO 2</h2>
<p class="state">state: <span id="state">%STATE%</span></p>
<p><button id="button" class="button">Toggle</button></p>
</div>
</div>
<script>
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
window.addEventListener('load', onLoad);
function initWebSocket() {
console.log('Trying to open a WebSocket connection...');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage; // <-- add this line
}
function onOpen(event) {
console.log('Connection opened');
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
function onMessage(event) {
var state;
if (event.data == "1"){
state = "ON";
}
else{
state = "OFF";
}
document.getElementById('state').innerHTML = state;
}
function onLoad(event) {
initWebSocket();
initButton();
}
function initButton() {
document.getElementById('button').addEventListener('click', toggle);
}
function toggle(){
websocket.send('toggle');
}
</script>
</body>
</html>)rawliteral";
void notifyClients() {
ws.textAll(String(ledState));
}
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
if (strcmp((char*)data, "toggle") == 0) {
ledState = !ledState;
notifyClients();
}
}
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected\n", client->id());
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
String processor(const String& var){
Serial.println(var);
if(var == "STATE"){
if (ledState){
return "ON";
}
else{
return "OFF";
}
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
initWebSocket();
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Start ElegantOTA
AsyncElegantOTA.begin(&server);
// Start server
server.begin();
}
void loop() {
ws.cleanupClients();
digitalWrite(ledPin, ledState);
}
Il s’agit du même code utilisé dans ce projet, mais il contient les lignes de code nécessaires pour gérer ElegantOTA :
#include <AsyncElegantOTA.h>AsyncElegantOTA.begin(&server);2. Enregistrez votre croquis : Fichier > Enregistrer et donnez-lui un nom. Par exemple : Web_Server_LED_OTA_ESP32.
3. Générez un fichier .bin à partir de votre croquis. Accédez à Esquisse > Exporter le binaire compilé. Un nouveau fichier .bin doit être créé sous le dossier du projet.
4. Maintenant, vous devez télécharger ce fichier en utilisant la page ElegantOTA. Accédez à votre adresse IP ESP suivie de /update. Assurez-vous que l’option de micrologiciel est sélectionnée. Cliquez sur Choisir un fichier et sélectionnez le fichier .bin que vous venez de générer.
5. Une fois terminé, cliquez sur le bouton Retour.
6. Ensuite, vous pouvez accéder à l’URL root (/) pour accéder au nouveau serveur Web. C’est la page que vous devriez voir lorsque vous accédez à l’adresse IP ESP sur l’URL root (/).
Vous pouvez cliquer sur le bouton pour allumer et éteindre la LED embarquée ESP32.
Parce que nous avons également ajouté des fonctionnalités OTA à ce nouveau serveur Web, nous pouvons télécharger un nouveau sketch à l’avenir si nécessaire. Il vous suffit d’aller à l’adresse IP ESP32 suivie de /update.
Félicitations, vous avez téléchargé un nouveau code sur votre ESP32 via Wi-Fi en utilisant AsyncElegantOTA.
Continuez à lire si vous voulez apprendre à télécharger des fichiers sur le système de fichiers ESP32 (SPIFFS) en utilisant AsyncElegantOTA.
Télécharger des fichiers sur les mises à jour OTA (Over-the-Air) du système de fichiers – ESP32
Dans cette section, vous apprendrez à télécharger des fichiers sur le système de fichiers ESP32 (SPIFFS) à l’aide d’AsyncElegantOTA.
Plug-in de téléchargement de système de fichiers ESP32
Avant de continuer, vous devez avoir installé le plugin ESP32 Uploader dans votre IDE Arduino. Suivez le tutoriel suivant avant de continuer :
Serveur Web avec des fichiers de SPIFFS
Imaginez le scénario dans lequel vous devez télécharger des fichiers sur le système de fichiers ESP32, par exemple : fichiers de configuration ; Fichiers HTML, CSS et JavaScript pour mettre à jour la page du serveur Web ; ou tout autre fichier que vous souhaitez enregistrer dans SPIFFS via OTA.
Pour vous montrer comment procéder, nous allons créer un nouveau serveur Web qui sert des fichiers à partir de SPIFFS : fichiers HTML, CSS et JavaScript pour créer une page Web qui contrôle à distance les GPIO ESP32.
Avant de continuer, assurez-vous d’avoir le Bibliothèque Arduino_JSON par Arduino version 0.1.0 installée. Vous pouvez installer cette bibliothèque dans le gestionnaire de bibliothèque Arduino IDE. Allez simplement dans Sketch > Inclure la bibliothèque > Gérer les bibliothèques et recherchez le nom de la bibliothèque comme suit : Arduino_JSON.
Copiez le code suivant dans votre IDE Arduino.
/*
Rui Santos
Complete project details
- Arduino IDE: https://Raspberryme.com/esp32-ota-over-the-air-arduino/
- VS Code: https://Raspberryme.com/esp32-ota-over-the-air-vs-code/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
// Import required libraries
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
#include <Arduino_JSON.h>
#include <AsyncElegantOTA.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Create a WebSocket object
AsyncWebSocket ws("/ws");
// Set number of outputs
#define NUM_OUTPUTS 4
// Assign each GPIO to an output
int outputGPIOs[NUM_OUTPUTS] = {2, 4, 12, 14};
// Initialize SPIFFS
void initSPIFFS() {
if (!SPIFFS.begin(true)) {
Serial.println("An error has occurred while mounting SPIFFS");
}
Serial.println("SPIFFS mounted successfully");
}
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
String getOutputStates(){
JSONVar myArray;
for (int i =0; i<NUM_OUTPUTS; i++){
myArray["gpios"][i]["output"] = String(outputGPIOs[i]);
myArray["gpios"][i]["state"] = String(digitalRead(outputGPIOs[i]));
}
String jsonString = JSON.stringify(myArray);
return jsonString;
}
void notifyClients(String state) {
ws.textAll(state);
}
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
if (strcmp((char*)data, "states") == 0) {
notifyClients(getOutputStates());
}
else{
int gpio = atoi((char*)data);
digitalWrite(gpio, !digitalRead(gpio));
notifyClients(getOutputStates());
}
}
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,AwsEventType type,
void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected\n", client->id());
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// Set GPIOs as outputs
for (int i =0; i<NUM_OUTPUTS; i++){
pinMode(outputGPIOs[i], OUTPUT);
}
initSPIFFS();
initWiFi();
initWebSocket();
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", "text/html",false);
});
server.serveStatic("/", SPIFFS, "/");
// Start ElegantOTA
AsyncElegantOTA.begin(&server);
// Start server
server.begin();
}
void loop() {
ws.cleanupClients();
}
Insérez vos informations d’identification réseau dans les variables suivantes et enregistrez le code.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Mise à jour du firmware
Créez un fichier .bin à partir de cette esquisse comme indiqué précédemment (cette esquisse inclut les lignes de code nécessaires pour fournir les fonctionnalités OTA).
Accédez à l’adresse IP ESP32 suivie de /update et téléchargez le nouveau firmware.
Ensuite, nous verrons comment télécharger les fichiers.
Mettre à jour le système de fichiers
Sous le dossier du projet, créez un dossier nommé data et collez les fichiers HTML, CSS et JavaScript suivants (cliquez sur les liens pour télécharger les fichiers) :
Pour trouver votre dossier de projet, vous pouvez simplement aller à Sketch > Show Sketch Folder.
C’est là que votre dossier de données doit se trouver et à quoi il ressemble :
Après cela, avec l’ESP32 déconnecté de votre ordinateur (c’est tout l’objectif d’OTA), cliquez sur ESP32 Data Sketch Upload.
Vous obtiendrez une erreur car aucune carte ESP32 n’est connectée à votre ordinateur – ne vous inquiétez pas.
Faites défiler la fenêtre de débogage jusqu’à ce que vous trouviez l’emplacement du fichier .spiffs.bin. C’est ce fichier que vous devez télécharger (dans notre cas, le fichier s’appelle Web_Server_OTA_ESP32_Example_2.spiffs.bin.
Et voici le chemin où se trouve notre fichier :
C:\Users\sarin\AppData\Local\Temp\arduino_build_675367\Web_server_OTA_ESP32_Example_2.spiffs.binPour accéder à ce fichier sur mon ordinateur, je dois rendre visibles les fichiers cachés (le dossier AppData n’était pas visible). Vérifiez si c’est aussi votre cas.
Une fois que vous avez atteint le chemin du dossier, vous souhaitez obtenir le fichier avec l’extension .spiffs.bin.
Pour faciliter les choses, vous pouvez copier ce fichier dans votre dossier de projet.
Maintenant que nous avons un fichier .bin du dossier de données, nous pouvons télécharger ce fichier. Accédez à votre adresse IP ESP32 suivie de /update. Assurez-vous que l’option Système de fichiers est sélectionnée.
Ensuite, sélectionnez le fichier avec l’extension .spiffs.bin.
Une fois le téléchargement réussi, cliquez sur le bouton Retour. Et accédez à nouveau à l’URL root (/). Vous devriez avoir accès à la page Web suivante qui contrôle les sorties ESP32 à l’aide du protocole Web Socket.
Pour voir le serveur Web fonctionner, vous pouvez connecter 4 LED à votre ESP32 sur GPIOS : 2, 4, 12 et 14. Vous devriez pouvoir contrôler ces sorties depuis le serveur Web.
Si vous avez besoin de mettre à jour quelque chose sur votre projet, il vous suffit d’aller sur votre adresse IP ESP32 suivie de /update.
Toutes nos félicitations! Vous avez téléchargé avec succès des fichiers sur le système de fichiers ESP32 à l’aide d’AsyncElegantOTA.
Conclusion
Dans ce didacticiel, vous avez appris à ajouter des fonctionnalités OTA à vos serveurs Web asynchrones à l’aide de Bibliothèque AsyncElegantOTA. Cette bibliothèque est très simple à utiliser et vous permet de télécharger de nouveaux micrologiciels ou fichiers sur SPIFFS sans effort à l’aide d’une page Web. À notre avis, la bibliothèque AsyncElegantOTA est l’une des meilleures options pour gérer les mises à jour Web OTA.
Nous espérons que vous avez trouvé ce tutoriel utile.
En savoir plus sur l’ESP32 avec nos ressources :
Merci d’avoir lu.
Cette vidéo vous emmène dans l’histoire de Raspberry Pi :
