Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Si eres un entusiasta de la programación inalámbrica y estás buscando una forma fácil de actualizar tus proyectos de ESP32, ¡has llegado al lugar indicado! En este artículo te mostraremos cómo utilizar el actualizador web en Arduino IDE para programar de forma remota tus dispositivos ESP32. ¡No te lo pierdas!

Guía rápida que muestra cómo realizar programación inalámbrica (OTA) con ESP32 utilizando OTA Web Updater en Arduino IDE. El actualizador web OTA le permite actualizar/cargar nuevo código a su ESP32 usando un navegador sin requerir una conexión en serie entre el ESP32 y su computadora.

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

La programación OTA es útil cuando necesita actualizar el código en placas ESP32 a las que no se puede acceder fácilmente. El ejemplo que se muestra aquí funciona si el ESP32 y su navegador están en su red local.

El único inconveniente de OTA Web Updater es que debe incluir el código de OTA en cada boceto cargado para poder utilizar OTA en el futuro.

¿Cómo funciona el actualizador web OTA?

  • El primer boceto debe cargarse a través del puerto serie. Este boceto debe contener el código para crear el actualizador web OTA para que luego puedas cargar el código a través de tu navegador.
  • El boceto de OTA Web Updater crea un servidor web al que puede acceder para cargar un nuevo boceto a través de un navegador web.
  • Luego, debe implementar rutinas OTA en cada boceto que cargue para poder realizar las próximas actualizaciones/cargas por aire.
  • Si carga un código sin una rutina OTA, ya no podrá acceder al servidor web y cargar un nuevo boceto de forma inalámbrica.

requisitos

Antes de continuar con este tutorial, debes tener el complemento ESP32 instalado en tu IDE de Arduino. Siga uno de los siguientes tutoriales para instalar ESP32 en el IDE de Arduino si aún no lo ha hecho.

  • Instalación de la placa ESP32 en Arduino IDE (Guía de Windows)
  • Instalación de la Placa ESP32 en el IDE Arduino (Guía para Mac y Linux)

Actualizador web ESP32 OTA

Cuando instala el complemento ESP32 para Arduino IDE, la biblioteca ArduinoOTA se instala automáticamente. Ir a archivo > Ejemplos >ArduinoOTA> Actualizador Web OTA.

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Debería cargarse el siguiente código.

/*
 * OTAWebUpdater.ino Example from ArduinoOTA Library
 * Rui Santos 
 * Complete Project Details https://randomnerdtutorials.com
 */

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <Update.h>

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

WebServer server(80);

/*
 * Login page
 */
const char* loginIndex = 
 "<form name="loginForm">"
    "<table width="20%" bgcolor="A09F9F" align='center'>"
        "<tr>"
            "<td colspan=2>"
                "<center><font size=4><b>ESP32 Login Page</b></font></center>"
                "<br>"
            "</td>"
            "<br>"
            "<br>"
        "</tr>"
        "<td>Username:</td>"
        "<td><input type="text" size=25 name="userid"><br></td>"
        "</tr>"
        "<br>"
        "<br>"
        "<tr>"
            "<td>Password:</td>"
            "<td><input type="Password" size=25 name="pwd"><br></td>"
            "<br>"
            "<br>"
        "</tr>"
        "<tr>"
            "<td><input type="submit" onclick='check(this.form)' value="Login"></td>"
        "</tr>"
    "</table>"
"</form>"
"<script>"
    "function check(form)"
    "{"
    "if(form.userid.value=='admin' && form.pwd.value=='admin')"
    "{"
    "window.open('/serverIndex')"
    "}"
    "else"
    "{"
    " alert('Error Password or Username')/*displays error message*/"
    "}"
    "}"
"</script>";
 
/*
 * Server Index Page
 */
 
const char* serverIndex = 
"<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>"
"<form method='POST' action='#' enctype="multipart/form-data" id='upload_form'>"
   "<input type="file" name="update">"
        "<input type="submit" value="Update">"
    "</form>"
 "<div id='prg'>progress: 0%</div>"
 "<script>"
  "$('form').submit(function(e){"
  "e.preventDefault();"
  "var form = $('#upload_form')[0];"
  "var data = new FormData(form);"
  " $.ajax({"
  "url: '/update',"
  "type: 'POST',"
  "data: data,"
  "contentType: false,"
  "processData:false,"
  "xhr: function() {"
  "var xhr = new window.XMLHttpRequest();"
  "xhr.upload.addEventListener('progress', function(evt) {"
  "if (evt.lengthComputable) {"
  "var per = evt.loaded / evt.total;"
  "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
  "}"
  "}, false);"
  "return xhr;"
  "},"
  "success:function(d, s) {"
  "console.log('success!')" 
 "},"
 "error: function (a, b, c) {"
 "}"
 "});"
 "});"
 "</script>";

/*
 * setup function
 */
void setup(void) {
  Serial.begin(115200);

  // Connect to WiFi network
  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());

  /*use mdns for host name resolution*/
  if (!MDNS.begin(host)) { //http://esp32.local
    Serial.println("Error setting up MDNS responder!");
    while (1) {
      delay(1000);
    }
  }
  Serial.println("mDNS responder started");
  /*return index page which is stored in serverIndex */
  server.on("/", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", loginIndex);
  });
  server.on("/serverIndex", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", serverIndex);
  });
  /*handling uploading firmware file */
  server.on("/update", HTTP_POST, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
    ESP.restart();
  }, []() {
    HTTPUpload& upload = server.upload();
    if (upload.status == UPLOAD_FILE_START) {
      Serial.printf("Update: %sn", upload.filename.c_str());
      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { //start with max available size
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_WRITE) {
      /* flashing firmware to ESP*/
      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_END) {
      if (Update.end(true)) { //true to set the size to the current progress
        Serial.printf("Update Success: %unRebooting...n", upload.totalSize);
      } else {
        Update.printError(Serial);
      }
    }
  });
  server.begin();
}

void loop(void) {
  server.handleClient();
  delay(1);
}

Ver código sin formato

Debe modificar las siguientes líneas en el código para incluir sus propias credenciales de red:

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

El ejemplo de OTAWebUpdater para ESP32 crea un servidor web asíncrono que le permite cargar código nuevo a su placa sin requerir una conexión en serie.

Sube el código anterior a tu placa ESP32. No olvide ingresar sus credenciales de red y seleccionar la placa y el puerto serie correctos.

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Después de cargar el código, abra el monitor serie con una velocidad de baudios de 115200, presione el botón de activación de ESP32 y debería obtener la dirección IP de ESP32:

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Ahora puede cargar código de forma inalámbrica a su ESP32 usando un navegador en su red local.

Para probar el Actualizador web OTA, puede desconectar el ESP32 de su computadora y alimentarlo desde un banco de energía, por ejemplo (esto es opcional, lo recomendamos para simular una situación en la que el ESP32 no está conectado a su computadora).

Actualice el nuevo código usando OTA Web Updater

Abra un navegador en su red e ingrese la dirección IP ESP32. Deberías obtener lo siguiente:

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Ingrese el nombre de usuario y contraseña:

  • Nombre de usuario: Administrador
  • contraseña: Administrador

Puede cambiar el nombre de usuario y la contraseña en el código.

Nota: Después de ingresar su nombre de usuario y contraseña será redirigido a /índiceservidor URL. No es necesario introducir el nombre de usuario y contraseña para acceder al /índiceservidor URL. Entonces, si alguien conoce la URL para cargar el nuevo código, el nombre de usuario y la contraseña no protegerán el sitio web del acceso de otros.

Debería abrirse una nueva pestaña /índiceservidor URL. En esta página puedes subir un nuevo código a tu ESP32. Ellos deberían .Envase archivos (veremos cómo hacer esto en un momento).

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Preparando el nuevo boceto

Si carga un nuevo boceto de forma inalámbrica, tenga en cuenta que deberá agregar código a su nuevo boceto para OTA para que siempre pueda sobrescribir cualquier boceto con uno nuevo en el futuro. Por lo tanto, le recomendamos que modifique el boceto de OTAWebUpdater para incluir su propio código.

Para fines de aprendizaje, cargamos un nuevo código que hace parpadear un LED (sin demora). Copie el siguiente código en su IDE de Arduino.

/*
 * Rui Santos 
 * Complete Project Details https://randomnerdtutorials.com
 */

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <Update.h>

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

//variabls to blink without delay:
const int led = 2;
unsigned long previousMillis = 0;        // will store last time LED was updated
const long interval = 1000;           // interval at which to blink (milliseconds)
int ledState = LOW;             // ledState used to set the LED

WebServer server(80);

/*
 * Login page
 */

const char* loginIndex = 
 "<form name="loginForm">"
    "<table width="20%" bgcolor="A09F9F" align='center'>"
        "<tr>"
            "<td colspan=2>"
                "<center><font size=4><b>ESP32 Login Page</b></font></center>"
                "<br>"
            "</td>"
            "<br>"
            "<br>"
        "</tr>"
        "<td>Username:</td>"
        "<td><input type="text" size=25 name="userid"><br></td>"
        "</tr>"
        "<br>"
        "<br>"
        "<tr>"
            "<td>Password:</td>"
            "<td><input type="Password" size=25 name="pwd"><br></td>"
            "<br>"
            "<br>"
        "</tr>"
        "<tr>"
            "<td><input type="submit" onclick='check(this.form)' value="Login"></td>"
        "</tr>"
    "</table>"
"</form>"
"<script>"
    "function check(form)"
    "{"
    "if(form.userid.value=='admin' && form.pwd.value=='admin')"
    "{"
    "window.open('/serverIndex')"
    "}"
    "else"
    "{"
    " alert('Error Password or Username')/*displays error message*/"
    "}"
    "}"
"</script>";
 
/*
 * Server Index Page
 */
 
const char* serverIndex = 
"<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>"
"<form method='POST' action='#' enctype="multipart/form-data" id='upload_form'>"
   "<input type="file" name="update">"
        "<input type="submit" value="Update">"
    "</form>"
 "<div id='prg'>progress: 0%</div>"
 "<script>"
  "$('form').submit(function(e){"
  "e.preventDefault();"
  "var form = $('#upload_form')[0];"
  "var data = new FormData(form);"
  " $.ajax({"
  "url: '/update',"
  "type: 'POST',"
  "data: data,"
  "contentType: false,"
  "processData:false,"
  "xhr: function() {"
  "var xhr = new window.XMLHttpRequest();"
  "xhr.upload.addEventListener('progress', function(evt) {"
  "if (evt.lengthComputable) {"
  "var per = evt.loaded / evt.total;"
  "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
  "}"
  "}, false);"
  "return xhr;"
  "},"
  "success:function(d, s) {"
  "console.log('success!')" 
 "},"
 "error: function (a, b, c) {"
 "}"
 "});"
 "});"
 "</script>";

/*
 * setup function
 */
void setup(void) {
  pinMode(led, OUTPUT);
  
  Serial.begin(115200);

  // Connect to WiFi network
  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());

  /*use mdns for host name resolution*/
  if (!MDNS.begin(host)) { //http://esp32.local
    Serial.println("Error setting up MDNS responder!");
    while (1) {
      delay(1000);
    }
  }
  Serial.println("mDNS responder started");
  /*return index page which is stored in serverIndex */
  server.on("/", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", loginIndex);
  });
  server.on("/serverIndex", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", serverIndex);
  });
  /*handling uploading firmware file */
  server.on("/update", HTTP_POST, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
    ESP.restart();
  }, []() {
    HTTPUpload& upload = server.upload();
    if (upload.status == UPLOAD_FILE_START) {
      Serial.printf("Update: %sn", upload.filename.c_str());
      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { //start with max available size
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_WRITE) {
      /* flashing firmware to ESP*/
      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_END) {
      if (Update.end(true)) { //true to set the size to the current progress
        Serial.printf("Update Success: %unRebooting...n", upload.totalSize);
      } else {
        Update.printError(Serial);
      }
    }
  });
  server.begin();
}

void loop(void) {
  server.handleClient();
  delay(1);

  //loop to blink without delay
  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= interval) {
    // save the last time you blinked the LED
    previousMillis = currentMillis;

    // if the LED is off turn it on and vice-versa:
    ledState = not(ledState);

    // set the LED with the ledState of the variable:
    digitalWrite(led, ledState);
  }
}

Ver código sin formato

Como puede ver, agregamos el código «flash sin demora» al código OTAWebUpdater para que podamos realizar actualizaciones más tarde.

Después de copiar el código en su IDE de Arduino, debería tener un .Envase Archivo.

Generar un archivo .bin en el IDE de Arduino

Guarda tu boceto como LED_Web_Updater.

A uno .Envase Archivo de tu boceto, ve a Bosquejo > Exportar binario compilado

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Se debe crear un nuevo archivo en la carpeta Sketch. Ir a Bosquejo > Mostrar boceto Carpeta. Deberías tener dos archivos en tu carpeta Sketch: el .en O y eso .Envase Archivo. deberías el .Envase Archivo con el actualizador web OTA.

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

Sube un nuevo boceto al ESP32 de forma inalámbrica

Haga clic en la página ESP32 OTA Web Updater en su navegador Elija el archivo Haga clic en el botón .Envase archivo generado previamente y luego haga clic en Actualizar.

Después de unos segundos, el código debería cargarse correctamente.

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

El LED integrado del ESP32 debería parpadear.

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

¡Felicidades! Has subido un nuevo código de forma inalámbrica a tu ESP32.

Envolver

Las actualizaciones inalámbricas son útiles para cargar código nuevo a su placa ESP32 cuando no es fácilmente accesible. El código OTA Web Updater crea un servidor web al que puede acceder a través de un navegador web en su red local para cargar un nuevo código en su placa ESP32.

Esperamos que este artículo te haya resultado interesante. Si te gusta ESP32, también te puede gustar:

  • Curso de aprendizaje de ESP32 con Arduino IDE
  • Servidor web ESP32 con SPIFFS (SPI Flash File System)
  • Dirección IP estática/fija ESP32
  • Cómo configurar un punto de acceso (AP) ESP32 para un servidor web
Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE

La programación OTA es una forma útil de actualizar el código en placas ESP32 que no son fácilmente accesibles. En este artículo, aprenderás cómo hacer la programación OTA con el ESP32 utilizando el Actualizador Web OTA en Arduino IDE. Este método te permite actualizar/subir nuevo código a tu ESP32 utilizando un navegador, sin necesidad de hacer una conexión serial entre el ESP32 y tu computadora.

¿Cómo funciona el Actualizador Web OTA?

El primer sketch debe ser subido a través del puerto serial. Este sketch debe contener el código para crear el Actualizador Web OTA, para que puedas subir código más tarde utilizando tu navegador. El sketch del Actualizador Web OTA crea un servidor web al que puedes acceder para subir un nuevo sketch a través de un navegador web. Luego, debes implementar rutinas OTA en cada sketch que subas, para que puedas hacer las próximas actualizaciones/subidas de manera inalámbrica. Si subes un código sin una rutina OTA, ya no podrás acceder al servidor web y subir un nuevo sketch de manera inalámbrica.

Requisitos previos:

  1. Antes de proceder con este tutorial, debes tener el complemento ESP32 instalado en tu Arduino IDE. Sigue uno de los siguientes tutoriales para instalar el ESP32 en el Arduino IDE, si aún no lo has hecho:

Actualizador Web OTA ESP32

Cuando instalas el complemento ESP32 para el Arduino IDE, se instalará automáticamente la biblioteca ArduinoOTA. Ve a Archivo > Ejemplos > ArduinoOTA > OTAWebUpdater. El siguiente código debería cargarse:

Añadir el código aquí

Debes modificar las siguientes líneas en el código para incluir tus propias credenciales de red:

Añadir el código aquí

El ejemplo OTAWebUpdater para el ESP32 crea un servidor web asíncrono donde puedes subir un nuevo código a tu placa sin necesidad de una conexión serial. Sube el código anterior a tu placa ESP32. No olvides ingresar tus credenciales de red y seleccionar el board y el puerto serial correcto.

Después de subir el código, abre el Monitor Serial a una velocidad de baudios de 115200, presiona el botón de habilitar el ESP32 y deberías obtener la dirección IP del ESP32.

Ahora, puedes subir código a tu ESP32 de manera inalámbrica utilizando un navegador en tu red local.

Continuar leyendo en la fuente de información.

1 comentario en «Programación inalámbrica ESP32 (OTA): actualizador web Arduino IDE»

Deja un comentario