Differences

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

--- informatica:arduino:esp32:ejemplos [2025/05/02 19:28] – created jose
+++ informatica:arduino:esp32:ejemplos [2025/05/02 20:23] (current) – [Versión 1] jose
@@ Line 127: / Line 127: @@
   delay(5000); // bomba apagada 5 segundos
 }
+</code>
+====== Encender LED desde página WEB ======
+<code>
+#include <WiFi.h>
+#include <WebServer.h>
+#include <Update.h>
+// =================== HTMLS ===================
+const char* mainPage = R"rawliteral(
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Control ESP32</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      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; }
+      .btn { 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:hover { background-color: #45a049; }
+      .btn-off { background-color: #f44336; }
+      .btn-off:hover { background-color: #d32f2f; }
+      .btn-auto { background-color: #2196F3; }
+      .btn-auto:hover { background-color: #0b7dda; }
+      .status { padding: 10px; margin: 10px 0; border-radius: 4px; text-align: center; }
+      .on { background-color: #dff0d8; color: #3c763d; }
+      .off { background-color: #f2dede; color: #a94442; }
+    </style>
+    <script>
+      function toggleLED() {
+        fetch("/toggle").then(() => location.reload());
+      }
+      function toggleAuto() {
+        fetch("/auto").then(() => location.reload());
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Control ESP32</h1>
+    <div class="card">
+      <h2>Control del LED</h2>
+      <div class="status %LED_STATUS%">Estado actual: %LED_STATE%</div>
+      <button class="btn %BTN_ON_CLASS%" onclick="toggleLED()">%BTN_TEXT%</button>
+      <button class="btn btn-auto" onclick="toggleAuto()">%AUTO_TEXT%</button>
+    </div>
+    <div class="card">
+      <h2>Actualización OTA</h2>
+      <form method="POST" action="/update" enctype="multipart/form-data">
+        <input type="file" name="update">
+        <input type="submit" value="Actualizar firmware">
+      </form>
+    </div>
+  </body>
+</html>
+)rawliteral";
+const char* successPage = R"rawliteral(
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Actualización exitosa</title>
+    <meta http-equiv="refresh" content="5;url=/" />
+  </head>
+  <body style="font-family: sans-serif; background-color: #f4f4f4; padding: 30px;">
+    <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc;">
+      <h1>✅ Actualización exitosa</h1>
+      <p>El ESP32 se reiniciará automáticamente en unos segundos...</p>
+    </div>
+  </body>
+</html>
+)rawliteral";
+// Configuración WiFi
+const char* ssid = "XXXXXX";
+const char* password = "XXXXXXXX";
+// IP estática (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);
+#define RELAY_PIN 13
+WebServer server(80);
+bool ledState = false;
+bool autoBlink = true;
+unsigned long previousMillis = 0;
+const unsigned long interval = 500;
+void setup() {
+  Serial.begin(115200);
+  pinMode(RELAY_PIN, OUTPUT);
+  digitalWrite(RELAY_PIN, LOW);
+  WiFi.config(ip, gateway, subnet, dns);
+  WiFi.begin(ssid, password);
+  while (WiFi.status() != WL_CONNECTED) delay(100);
+  Serial.print("Conectado: "); Serial.println(WiFi.localIP());
+  server.on("/", []() {
+    String html = mainPage;
+    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);
+  });
+  server.on("/toggle", []() {
+    ledState = !ledState;
+    autoBlink = false;
+    digitalWrite(RELAY_PIN, ledState);
+    server.send(200, "text/plain", "OK");
+  });
+  server.on("/auto", []() {
+    autoBlink = !autoBlink;
+    server.send(200, "text/plain", "OK");
+  });
+  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();
+}
+void loop() {
+  server.handleClient();
+  if (autoBlink) {
+    unsigned long currentMillis = millis();
+    if (currentMillis - previousMillis >= interval) {
+      previousMillis = currentMillis;
+      ledState = !ledState;
+      digitalWrite(RELAY_PIN, ledState);
+    }
+  }
+}
 </code>