Mises à jour ESP8266 NodeMCU OTA (Over-the-Air) – ElegantOTA Arduino IDE

View raw code

Insert your network credentials and the code should work straight away.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Comment fonctionne le code ?

Commencez par inclure les bibliothèques requises.

#include 
#include 
#include 
#include 
#include 

Insérez vos informations d'identification réseau dans les variables suivantes afin que l'ESP32 puisse se connecter au Wi-Fi sur 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 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, gérez les demandes des clients. Les lignes suivantes, envoyez du texte Salut ! Je suis ESP8266 lorsque vous accédez à l'URL root (/) :

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
  request->send(200, "text/plain", "Hi! I am ESP8266.");
});

Si votre serveur Web doit traiter davantage de requêtes, vous pouvez les ajouter (nous vous le montrerons dans l'exemple suivant).

Initialisez le serveur :

server.begin();

Ensuite, ajoutez la ligne suivante pour démarrer ElegantOTA :

ElegantOTA.begin(&server);    // Start ElegantOTA

Dans la boucle(), ajoutez la ligne suivante :

ElegantOTA.loop();

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 115 200. Appuyez sur le bouton RST intégré de l'ESP8266. Il devrait afficher l'adresse IP de l'ESP comme suit (la vôtre peut être différente) :

Sur votre réseau local, ouvrez votre navigateur et saisissez l'adresse IP ESP8266. Vous devriez accéder à la page Web root (/) avec du texte affiché.

Désormais, si vous souhaitez modifier le code de votre serveur web via OTA, rendez-vous sur l'adresse IP ESP suivie de /update. La page Web suivante devrait se charger.

Pour télécharger du nouveau code sur votre carte ou des fichiers sur le système de fichiers, vous devez les télécharger au format .bin. Suivez la section suivante pour savoir comment générer un fichier .bin à partir de votre croquis dans l'IDE Arduino.

Téléchargez un nouveau code sur l'ESP8266 via OTA

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.

Une fois votre esquisse ouverte, il vous suffit de sélectionner la carte ESP8266 que vous utilisez dans Outils > Carte, puis 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é sous votre dossier de projet dans une série d'autres dossiers. Le fichier avec l'extension .ino.bin est celui que vous devez télécharger sur votre tableau à l'aide de la page Web ElegantOTA.

Télécharger une nouvelle esquisse de serveur Web via OTA – Exemple

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 à suivre :

1. Copiez le code suivant sur votre IDE Arduino. N'oubliez pas d'insérer vos informations d'identification réseau.

/*********
  Rui Santos & Sara Santos - Raspberryme.com
  Complete project details at https://Raspberryme.com/esp8266-nodemcu-ota-elegantota-arduino/
  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 Softwar
*********/

// Import required libraries
#include 
#include 
#include 
#include 
#include 

// 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(


  ESP Web Server
  
  
  
ESP Web Server




  
  
    
      
Output - GPIO 2
      
state: %STATE%
      
Toggle
    
  


)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(200, "text/html", index_html, processor);
  });

  // Start server
  server.begin();
  ElegantOTA.begin(&server);    // Start ElegantOTA
}

void loop() {
  ws.cleanupClients();
  digitalWrite(ledPin, !ledState);
  ElegantOTA.loop();
}

Afficher le code brut

Il s'agit du même code que celui utilisé dans ce projet, mais il contient les lignes de code nécessaires pour gérer ElegantOTA :

#include 

ElegantOTA.begin(&server);

ElegantOTA.loop();

2. Enregistrez votre croquis : Fichier > Enregistrer et donnez-lui un nom. Par exemple : ESP8266_WebServer_LED_OTA.

3. Générez un fichier .bin à partir de votre esquisse. Tout d’abord, sélectionnez le modèle de carte que vous utilisez dans Outils > Carte. Ensuite, allez dans Sketch > Exporter le binaire compilé.

Accédez à votre dossier de croquis. Vous devriez avoir un dossier de construction. Dans ce dossier, vous aurez un autre dossier lié à votre modèle de carte. Ouvrez ce dossier. Il y aura plusieurs fichiers. Vous devez télécharger le fichier avec l'extension ino.bin.

4. Maintenant, vous devez télécharger ce fichier à l'aide de la page ElegantOTA. Accédez à votre adresse IP ESP suivie de /update. Assurez-vous que l'option du micrologiciel est sélectionnée. Cliquez sur Choisir un fichier et sélectionnez le fichier .ino.bin que vous venez de générer.

5. Après quelques secondes, vous devriez recevoir un message de réussite. Ensuite, cliquez sur le bouton Retour.

6. Vous pouvez maintenant 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 intégrée de l'ESP8266.

Comme nous avons également ajouté des fonctionnalités OTA à ce nouveau serveur Web, nous pourrons télécharger une nouvelle esquisse ultérieurement si nécessaire. Il vous suffit de vous rendre sur l'adresse IP ESP8266 suivie de /update.

Félicitations, vous avez téléchargé un nouveau code sur votre ESP8266 via Wi-Fi à l'aide d'ElegantOTA.

Conclusion

Dans ce didacticiel, vous avez appris comment ajouter des fonctionnalités OTA à vos projets de serveur Web Async à l'aide de la bibliothèque ElegantOTA sur la carte ESP8266. Cette bibliothèque est simple à utiliser : il vous suffit d'ajouter trois lignes de code à votre projet.

Nous espérons que vous avez trouvé ce tutoriel utile.

Apprenez-en davantage sur l'ESP8266 grâce à nos ressources :

Merci d'avoir lu.

Apprenez l'histoire de Raspberry Pi à travers cette vidéo :