Mises à jour ESP32 OTA (Over-the-Air) – AsyncElegantOTA VS Code

Mises à jour ESP32 OTA (Over-the-Air) - AsyncElegantOTA VS Code

Dans ce guide, vous apprendrez à effectuer des mises à jour en direct (OTA) sur vos cartes ESP32 à l’aide de la bibliothèque AsyncElegantOTA et de VS Code avec PlatformIO. La bibliothèque Async Elegant OTA crée un serveur Web qui vous permet de mettre à jour un nouveau micrologiciel (un nouveau croquis) 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 elle est compatible avec la bibliothèque ESPAsyncWebServer que nous utilisons souvent pour créer des projets de serveur Web.

ESP32 OTA Mises à jour en direct AsyncElegantOTA VS Code PlatformIO

À 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.

Lecture recommandée : Premiers pas avec VS Code et PlatformIO IDE pour ESP32 et ESP8266

Nous avons un tutoriel similaire pour la carte ESP8266 NodeMCU : Mises à jour ESP8266 NodeMCU OTA (Over-the-Air) – AsyncElegantOTA (VS Code + PlatformIO)

Aperçu

Ce tutoriel couvre :

Nous vous recommandons de suivre toutes les étapes de ce tutoriel 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 didacticiel comment obtenir vos fichiers au format .bin.

Serveur Web Async ElegantOTA Comment ça marche ESP32

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 différentes 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 est difficile à intégrer aux serveurs Web utilisant 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:

Bibliothèque AsyncElegantOTA
  • 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 :

  1. Inclure le AsyncElegantOTA, AsyncTCP et ESPAsyncWebServer bibliothèques dans le fichier platformio.ini de votre projet ;
  2. Inclure la bibliothèque AsyncElegantOTA en haut du code : #include  ;
  3. Ajoutez cette ligne AsyncElegantOTA.begin(&server); avant serveur.begin();
  4. 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 (code VS + PIO)

Dans ce tutoriel, nous utiliserons VS Code + PIO pour programmer l’ESP32. Si vous souhaitez utiliser l’IDE Arduino, suivez le didacticiel suivant : Mises à jour ESP32 OTA (Over-the-Air) – AsyncElegantOTA utilisant l’IDE Arduino.

Pour utiliser la bibliothèque AsyncElegantOTA, incluez-la dans votre fichier platformio.ini. Vous devez également inclure la bibliothèque ESPAsyncWebServer. Ajoutez ces bibliothèques comme suit :

lib_deps = ESP Async WebServer
  ayushsharma82/AsyncElegantOTA @ ^2.2.5

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.

Modifiez votre fichier platformio.ini afin qu’il ressemble à ceci :

[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
monitor_speed = 115200
lib_deps = ESP Async WebServer
  ayushsharma82/AsyncElegantOTA @ ^2.2.5

Copiez le code suivant dans le fichier main.cpp. 

/*
  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) {

}

Afficher le code brut

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 <Arduino.h>
#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); // Start ElegantOTA

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) :

Code VS avec PlatformIO Obtenir l'adresse IP de la carte

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é.

Exemple de démo AsyncElegantOTA URL racine du serveur Web

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.

Page de mise à jour asynchrone ElegantOTA

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. VS Code génère automatiquement le fichier .bin pour votre projet lorsque vous compilez le code. Le fichier s’appelle firmware.bin et il est enregistré dans votre dossier de projet sur le chemin suivant (ou similaire selon la carte que vous utilisez) :

.pio/build/esp32doit-devkit-v1/firmware.bin

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

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 fichier main.cpp. 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);
}

Afficher le code brut

Il s’agit du même code utilisé dans ce projet, mais il contient les lignes de code requises pour gérer ElegantOTA :

#include <AsyncElegantOTA.h>
AsyncElegantOTA.begin(&server);

2. Modifiez votre fichier platformio.ini comme suit :

[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
monitor_speed = 115200
lib_deps = ESP Async WebServer
  ayushsharma82/AsyncElegantOTA @ ^2.2.5

2. Enregistrez et compilez votre code – cliquez sur l’icône Build.

Code VS + Code de compilation (construction) PlatformIO

3. Maintenant, dans l’onglet Explorer de VS Code, vous pouvez vérifier que vous avez un fichier firmware.bin sous le dossier du projet sur le chemin suivant (ou similaire):

.pio/build/esp32doit-devkit-v1/firmware.bin
Code VS avec répertoire de fichiers PlatformIO Bin ESP32 ESP8266

4. Maintenant, il vous suffit de 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.

5. Cliquez sur Choisir un fichier, naviguez dans le dossier sur votre ordinateur et sélectionnez le fichier de votre projet.

Firmware Bin File Directory VS Code PlatformIO IDE

6. Attendez que la barre de progression atteigne 100 %.

Mettre à jour le nouveau firmware OTA élégant

7. Quand c’est terminé, cliquez sur le bouton Retour.

Télécharger un nouveau firmware Succès OTA élégant

8. 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 (/).

Sorties de contrôle du serveur ESP32 Websocket

Vous pouvez cliquer sur le bouton pour allumer et éteindre la LED embarquée ESP32.

Carte ESP32 LED intégrée allumée HIGH

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 ElegantOTA.

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.

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.

Copiez le code suivant dans votre fichier main.cpp.

/*
  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();
}

Afficher le code brut

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";

Modifiez votre fichier platformio.ini afin qu’il ressemble à ceci :

[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
monitor_speed = 115200
lib_deps  =  ESP Async WebServer
    arduino-libraries/Arduino_JSON @ 0.1.0
    ayushsharma82/AsyncElegantOTA @ ^2.2.5

Mise à jour du firmware

Après avoir inséré vos informations d’identification réseau, enregistrez et compilez le code.

Code VS + Code de compilation (construction) PlatformIO

Accédez à l’adresse IP ESP suivie de /update et téléchargez le nouveau firmware comme indiqué précédemment.

Ensuite, nous verrons comment télécharger les fichiers sur le système de fichiers.

Mettre à jour le système de fichiers

Sous le dossier du projet, créez un dossier appelé data et collez les fichiers HTML, CSS et JavaScript suivants (cliquez sur les liens pour télécharger les fichiers) :

Dans VS Code, cliquez sur l’icône PIO et accédez à Project Tasks > env:esp32doit-devkit-v1 (ou similaire) >Platform > Build Filesystem Image. Cela créera un fichier .bin à partir des fichiers enregistrés dans le dossier de données.

Construire une image de système de fichiers VS Code PlatformIO ESP32

Après avoir construit l’image du système de fichiers, vous devriez avoir un fichier spiffs.bin dans le chemin suivant (ou similaire) :

.pio/build/esp32doit-devkit-v1/spiffs.bin
Répertoire de fichiers SPIFFS Bin VS Code + PlatformIO ESP32

C’est ce fichier que vous devez télécharger pour mettre à jour le système de fichiers.

Accédez à votre adresse IP ESP suivie de /update. Assurez-vous que l’option Système de fichiers est sélectionnée et sélectionnez le fichier spiffs.bin.

Télécharger des fichiers sur le système de fichiers Elegant OTA

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.

Contrôler plusieurs sorties ESP32 ESP8266 Serveur Web Websocket

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’ElegantOTA.

Regardez la démonstration vidéo

YouTube video

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 le système de fichiers 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.

Apprenez tout ce que vous devez savoir sur la création de serveurs Web avec l’ESP32 :

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 :

YouTube video