ESP32 - Servidor web en tarjeta microSD
En este tutorial, descubriremos cómo crear un servidor web ESP32 alojado en una tarjeta microSD. Los archivos HTML, CSS, JavaScript y las imágenes se almacenarán en la tarjeta microSD.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Acerca de ESP32 y el servidor web
Si no estás familiarizado con ESP32 y con el servidor web, la tarjeta MicroSD (incluyendo el pinout, cómo funciona y la programación), puedes aprender sobre ellos a través de los siguientes tutoriales:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Si no sabe c\u00f3mo alimentar ESP32 y otros componentes, encuentre instrucciones en el siguiente tutorial: C\u00f3mo alimentar ESP32.
Copiar contenidos HTML a la tarjeta microSD
- Por favor, asegúrese de que su tarjeta microSD esté formateada en formato FAT32 como se indica a continuación (en Windows, haga clic derecho → Formatear):
- Crea un archivo HTML index.html y agrega el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 Web Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Web Page hosted on MicroSD Card</h1>
<img src="luffy.jpg" alt="A beautiful image">
<p>Sponsored by <a href="https://amazon.com/diyables">DIYables</a></p>
</div>
</body>
</html>
- Crea un archivo CSS styles.css y añade el siguiente código:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
h1 {
font-size: 28px;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
img {
max-width: 80%;
height: auto;
display: block;
margin: 20px auto;
}
- Prepara una imagen. Este tutorial utiliza luffy.jpg, que se utiliza en código HTML. Puedes descargar esta imagen aquí:
- (Opcional) Preparar la imagen de favicon. Este tutorial utiliza este favicon.ico
- Coloque todos los archivos en el directorio raíz de la tarjeta MicroSD, como en las imágenes a continuación:
Por favor, tenga en cuenta que puede agregar otros archivos como JavaScript, txt, csv...
Código ESP32 - Servidor web en una tarjeta microSD
/*
* Este código de ESP32 fue desarrollado por es.newbiely.com
* Este código de ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp32/esp32-web-server-on-sd-card
*/
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS 5 // The ESP32 pin GPIO5
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// init MicroSD Card
if (!SD.begin(PIN_SPI_CS)) {
while (1) {
Serial.println(F("SD CARD FAILED, OR NOT PRESENT!"));
delay(1000);
}
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}
=================
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Pasos R\u00e1pidos
- Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en Arduino IDE.
- Conecta la placa ESP32 a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en la barra de navegación izquierda del Arduino IDE.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server.
- Copie el código anterior y ábralo con el IDE de Arduino
- Cambie la información de WiFi (SSID y contraseña) en el código por la suya
- Haga clic en el botón Subir en el IDE de Arduino para subir el código al ESP32
- Abra el Monitor Serial
- Consulte el resultado en el Monitor Serial
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Verás una dirección IP en el Monitor serie, por ejemplo: 192.168.0.3
- Escribe la dirección IP en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Ten en cuenta que debes cambiar 192.168.0.3 por la dirección IP que obtuviste en el Monitor serie.
- Verás una página que carga HTML, CSS e imágenes desde la tarjeta SD.
- Como puedes ver, los archivos HTML, CSS y las imágenes almacenadas en la tarjeta SD fueron cargados por el navegador web.
Ahora puedes modificar el código HTML y CSS, añadir más imágenes y JavaScript para crear tu propia página web.