Legido Wiki

User Tools

Site Tools

Trace:
informatica:arduino:esp32:ejemplos

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
informatica:arduino:esp32:ejemplos [2025/05/02 19:40] – joseinformatica:arduino:esp32:ejemplos [2025/05/02 20:23] (current) – [Versión 1] jose
Line 135: Line 135:
 #include <Update.h> #include <Update.h>
  
-// Config WiFi +// =================== HTMLS ===================
-const char* ssid = "pitufina"; +
-const char* password = "reyvisigodo";+
  
-#define RELAY_PIN  13  // Pin del LED/Relé 
- 
-// Variables de estado 
-bool ledState = false; 
-bool autoBlink = true; // Estado del parpadeo automático 
- 
-// IP fija (opcional) 
-IPAddress ip(192, 168, 1, 112); 
-IPAddress gateway(192, 168, 1, 1); 
-IPAddress subnet(255, 255, 255, 0); 
-IPAddress dns(8, 8, 8, 8); 
- 
-WebServer server(80); 
- 
-// HTML para la página principal con control del LED 
 const char* mainPage = R"rawliteral( const char* mainPage = R"rawliteral(
 <!DOCTYPE html> <!DOCTYPE html>
Line 164: Line 147:
       body { font-family: sans-serif; background-color: #f4f4f4; padding: 30px; max-width: 600px; margin: 0 auto; }       body { font-family: sans-serif; background-color: #f4f4f4; padding: 30px; max-width: 600px; margin: 0 auto; }
       .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc; margin-bottom: 20px; }       .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc; margin-bottom: 20px; }
-      .btn {  +      .btn { padding: 10px 20px; border: none; border-radius: 4px; color: white; font-size: 16px; cursor: pointer; transition: background-color 0.3s; }
-        padding: 10px 20px;  +
-        border: none;  +
-        border-radius: 4px;  +
-        color: white;  +
-        font-size: 16px;  +
-        cursor: pointer; +
-        transition: background-color 0.3s; +
-      }+
       .btn-on { background-color: #4CAF50; }       .btn-on { background-color: #4CAF50; }
       .btn-on:hover { background-color: #45a049; }       .btn-on:hover { background-color: #45a049; }
Line 179: Line 154:
       .btn-auto { background-color: #2196F3; }       .btn-auto { background-color: #2196F3; }
       .btn-auto:hover { background-color: #0b7dda; }       .btn-auto:hover { background-color: #0b7dda; }
-      .status {  +      .status { padding: 10px; margin: 10px 0; border-radius: 4px; text-align: center; }
-        padding: 10px;  +
-        margin: 10px 0;  +
-        border-radius: 4px;  +
-        text-align: center; +
-      }+
       .on { background-color: #dff0d8; color: #3c763d; }       .on { background-color: #dff0d8; color: #3c763d; }
       .off { background-color: #f2dede; color: #a94442; }       .off { background-color: #f2dede; color: #a94442; }
-      h2 { color: #333; } 
-      a { color: #2196F3; text-decoration: none; } 
-      a:hover { text-decoration: underline; } 
     </style>     </style>
     <script>     <script>
       function toggleLED() {       function toggleLED() {
-        var xhr = new XMLHttpRequest(); +        fetch("/toggle").then(() => location.reload());
-        xhr.open("GET", "/toggle", true); +
-        xhr.send(); +
-        setTimeout(function(){ location.reload(); }, 300);+
       }       }
-       
       function toggleAuto() {       function toggleAuto() {
-        var xhr = new XMLHttpRequest(); +        fetch("/auto").then(() => location.reload());
-        xhr.open("GET", "/auto", true); +
-        xhr.send(); +
-        setTimeout(function(){ location.reload(); }, 300);+
       }       }
     </script>     </script>
Line 209: Line 169:
   <body>   <body>
     <h1>Control ESP32</h1>     <h1>Control ESP32</h1>
-     
     <div class="card">     <div class="card">
       <h2>Control del LED</h2>       <h2>Control del LED</h2>
Line 216: Line 175:
       <button class="btn btn-auto" onclick="toggleAuto()">%AUTO_TEXT%</button>       <button class="btn btn-auto" onclick="toggleAuto()">%AUTO_TEXT%</button>
     </div>     </div>
-     
     <div class="card">     <div class="card">
       <h2>Actualización OTA</h2>       <h2>Actualización OTA</h2>
-      <p>Para actualizar el firmware, visita <a href="/update">la página de actualización</a></p>+      <form method="POST" action="/update" enctype="multipart/form-data"> 
 +        <input type="file" name="update"> 
 +        <input type="submit" value="Actualizar firmware"> 
 +      </form>
     </div>     </div>
   </body>   </body>
Line 225: Line 186:
 )rawliteral"; )rawliteral";
  
-// HTML para la página OTA +const char* successPage = R"rawliteral(
-const char* otaForm = R"rawliteral(+
 <!DOCTYPE html> <!DOCTYPE html>
 <html> <html>
   <head>   <head>
-    <title>ESP32 OTA Update</title> 
     <meta charset="utf-8">     <meta charset="utf-8">
-    <style> +    <title>Actualización exitosa</title> 
-      body { font-family: sans-serif; background-color: #f4f4f4; padding: 30px; } +    <meta http-equiv="refresh" content="5;url=/" />
-      form { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc; } +
-      input[type="submit"] { padding: 10px 20px; } +
-    </style>+
   </head>   </head>
-  <body> +  <body style="font-family: sans-serif; background-color: #f4f4f4; padding: 30px;"> 
-    <h2>ESP32 OTA Firmware Update</h2> +    <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc;"> 
-    <form method="POST" action="/update" enctype="multipart/form-data"> +      <h1>✅ Actualización exitosa</h1> 
-      <input type="file" name="update"> +      <p>El ESP32 se reiniciará automáticamente en unos segundos...</p> 
-      <input type="submit" value="Subir firmware"> +    </div>
-    </form> +
-    <p><a href="/">Volver al control principal</a></p>+
   </body>   </body>
 </html> </html>
 )rawliteral"; )rawliteral";
  
-String getMainPage() { 
-  String page = mainPage; 
-   
-  // Reemplazar placeholders según el estado actual 
-  page.replace("%LED_STATUS%", ledState ? "on" : "off"); 
-  page.replace("%LED_STATE%", ledState ? "ENCENDIDO" : "APAGADO"); 
-  page.replace("%BTN_TEXT%", ledState ? "Apagar LED" : "Encender LED"); 
-  page.replace("%BTN_ON_CLASS%", ledState ? "btn-off" : "btn-on"); 
-  page.replace("%AUTO_TEXT%", autoBlink ? "Desactivar parpadeo automático" : "Activar parpadeo automático"); 
-   
-  return page; 
-} 
  
-void handleRoot() { +// Configuración WiFi 
-  server.send(200, "text/html", getMainPage()); +const char* ssid = "XXXXXX"; 
-}+const char* password = "XXXXXXXX";
  
-void handleToggle() { +// IP estática (opcional) 
-  ledState = !ledState; +IPAddress ip(192, 168, 1, 112); 
-  digitalWrite(RELAY_PIN, ledState ? HIGH : LOW); +IPAddress gateway(192, 168, 1, 1); 
-  autoBlink = false; // Al control manual, desactivamos el parpadeo automático +IPAddress subnet(255, 255, 255, 0); 
-  server.send(200, "text/plain", "OK"); +IPAddress dns(8, 8, 8, 8);
-}+
  
-void handleAuto() { +#define RELAY_PIN 13
-  autoBlink = !autoBlink; +
-  server.send(200, "text/plain", "OK"); +
-}+
  
-void handleUpdateForm() { +WebServer server(80);
-  server.sendHeader("Connection", "close"); +
-  server.send(200, "text/html", otaForm); +
-}+
  
-void handleUpdateUpload() { +bool ledState = false; 
-  HTTPUpload& upload = server.upload();+bool autoBlink = true;
  
-  if (upload.status == UPLOAD_FILE_START) { +unsigned long previousMillis = 0; 
-    Serial.printf("\nIniciando actualización: %s\n", upload.filename.c_str()); +const unsigned long interval = 500;
-    if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { +
-      Update.printError(Serial); +
-    } +
-  } else if (upload.status == UPLOAD_FILE_WRITE) { +
-    if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) { +
-      Update.printError(Serial); +
-    } +
-    Serial.print("."); +
-  } else if (upload.status == UPLOAD_FILE_END) { +
-    if (Update.end(true)) { +
-      Serial.printf("\nActualización completa: %u bytes\n", upload.totalSize); +
-    } else { +
-      Update.printError(Serial); +
-    } +
-  } +
-  yield(); +
-} +
- +
-void handleUpdateFinished() { +
-  if (Update.hasError()) { +
-    server.send(200, "text/html", "<h1>❌ Fallo en la actualización</h1><p>Revisa la consola serie para más detalles.</p><p><a href='/'>Volver al control principal</a></p>"); +
-  } else { +
-    server.send(200, "text/html", "<h1>✅ Actualización exitosa</h1><p>Reiniciando en 5 segundos...</p>"); +
-    server.client().stop(); // cerrar conexión limpiamente +
-    delay(5000); +
-    ESP.restart(); +
-  } +
-}+
  
 void setup() { void setup() {
 +  Serial.begin(115200);
   pinMode(RELAY_PIN, OUTPUT);   pinMode(RELAY_PIN, OUTPUT);
-  digitalWrite(RELAY_PIN, LOW); // asegúrate de que esté apagado al inicio +  digitalWrite(RELAY_PIN, LOW);
-  Serial.begin(115200); +
-  delay(1000);+
  
-  // WiFi 
   WiFi.config(ip, gateway, subnet, dns);   WiFi.config(ip, gateway, subnet, dns);
   WiFi.begin(ssid, password);   WiFi.begin(ssid, password);
-  Serial.print("Conectando a WiFi");+  while (WiFi.status() != WL_CONNECTED) delay(100); 
 +  Serial.print("Conectado: "); Serial.println(WiFi.localIP());
  
-  while (WiFi.status() != WL_CONNECTED) { +  server.on("/", []() { 
-    delay(500); +    String html = mainPage; 
-    Serial.print("."); +    html.replace("%LED_STATE%", ledState ? "ENCENDIDO" : "APAGADO"); 
-  }+    html.replace("%LED_STATUS%", ledState ? "on" : "off"); 
 +    html.replace("%BTN_TEXT%", ledState ? "Apagar" : "Encender"); 
 +    html.replace("%BTN_ON_CLASS%", ledState ? "btn-off" : "btn-on"); 
 +    html.replace("%AUTO_TEXT%", autoBlink ? "Auto: ON" : "Auto: OFF"); 
 +    server.send(200, "text/html; charset=utf-8", html); 
 +  });
  
-  Serial.println("\nWiFi conectado. IP: "); +  server.on("/toggle", []() { 
-  Serial.println(WiFi.localIP());+    ledState = !ledState; 
 +    autoBlink = false; 
 +    digitalWrite(RELAY_PIN, ledState); 
 +    server.send(200, "text/plain", "OK"); 
 +  });
  
-  // Rutas web +  server.on("/auto", []() { 
-  server.on("/", handleRoot); +    autoBlink = !autoBlink; 
-  server.on("/toggle", handleToggle); +    server.send(200, "text/plain", "OK"); 
-  server.on("/auto", handleAuto); +  }); 
-  server.on("/update", HTTP_GET, handleUpdateForm); + 
-  server.on("/update", HTTP_POST, handleUpdateFinished, handleUpdateUpload);+  server.on("/update", HTTP_POST, []() { 
 +    server.sendHeader("Connection", "close"); 
 +    server.send(200, "text/html; charset=utf-8", successPage); 
 +    delay(2000); 
 +    ESP.restart(); 
 +  }, []() { 
 +    HTTPUpload& upload = server.upload(); 
 +    if (upload.status == UPLOAD_FILE_START) { 
 +      Serial.printf("OTA iniciada: %s\n", upload.filename.c_str()); 
 +      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) Update.printError(Serial); 
 +    } else if (upload.status == UPLOAD_FILE_WRITE) { 
 +      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) Update.printError(Serial); 
 +    } else if (upload.status == UPLOAD_FILE_END) { 
 +      if (Update.end(true)) Serial.println("OTA finalizada correctamente"); 
 +      else Update.printError(Serial); 
 +    } 
 +  });
  
   server.begin();   server.begin();
-  Serial.println("Servidor web iniciado"); 
 } }
  
 void loop() { void loop() {
   server.handleClient();   server.handleClient();
-  +
   if (autoBlink) {   if (autoBlink) {
-    // Solo parpadea si está en modo automático +    unsigned long currentMillis = millis(); 
-    Serial.println("Encendiendo Led (automático)"); +    if (currentMillis - previousMillis >= interval) { 
-    digitalWrite(RELAY_PIN, HIGH); +      previousMillis = currentMillis; 
-    ledState = true; +      ledState = !ledState; 
-    delay(5000); +      digitalWrite(RELAY_PIN, ledState); 
-     +    }
-    Serial.println("Apagando Led (automático)"); +
-    digitalWrite(RELAY_PIN, LOW); +
-    ledState = false; +
-    delay(5000); +
-  } else { +
-    // Pequeña pausa para no saturar el procesador +
-    delay(100);+
   }   }
 } }
 +
 </code> </code>
informatica/arduino/esp32/ejemplos.1746214849.txt.gz · Last modified: 2025/05/02 19:40 by jose