En este post vamos a construir un servidor web ESP32 para servir archivos desde una tarjeta microSD usando un módulo de tarjeta microSD, el cual se comunicara usando el protocolo SPI sirviendo sus archivos HTML, CSS, JavaScript, imágenes y otros activos guardados en la tarjeta microSD. Esto puede ser especialmente útil si sus archivos son demasiado grandes para caber en el sistema de archivos (SPIFFS), o también puede ser más conveniente según su proyecto. Para construir el servidor web, usaremos la biblioteca ESPAsyncWebServer.
Descripción del proyecto
Para mostrarle cómo crear un servidor web con archivos de una tarjeta microSD, crearemos una página HTML simple que muestra texto formateado con CSS. También serviremos un favicon. La siguiente imagen muestra la página web que serviremos:
- El servidor web se construye utilizando la biblioteca ESPAsyncWebServer ;
- Los archivos HTML, CSS y favicon se guardan en la tarjeta microSD;
- La tarjeta microSD se comunica con el ESP32 a través del protocolo de comunicación SPI;
- Cuando el cliente realiza una solicitud al ESP32, este sirve los archivos guardados en la tarjeta microSD;
Módulo de tarjeta MicroSD
Existen diferentes módulos de tarjetas microSD compatibles con el ESP32. Estamos utilizando el módulo de tarjeta microSD que se muestra en la siguiente figura el cual se comunica mediante el protocolo de comunicación SPI. Puede usar cualquier otro módulo de tarjeta microSD con una interfaz SPI.
Asignación de pines del módulo de la tarjeta MicroSD
El módulo de la tarjeta microSD se comunica mediante el protocolo de comunicación SPI. Usaremos los pines SPI ESP32 predeterminados como se muestra en la siguiente tabla:
| módulo de tarjeta microSD | ESP32 |
| 3V3 | 3,3 V |
| CS | GPIO5 |
| MOSI | GPIO23 |
| CLK | GPIO18 |
| MISO | GPIO19 |
| TIERRA | TIERRA |
Preparación de la tarjeta MicroSD
Antes de continuar , asegúrese de formatear su tarjeta microSD como FAT32 . Siga las siguientes instrucciones para formatear su tarjeta microSD o use una herramienta de software como SD Card Formater (compatible con Windows y Mac OS).
1. Inserte la tarjeta microSD en su computadora. Vaya a Mi PC y haga clic derecho en la tarjeta SD. Seleccione Formato como se muestra en la figura a continuación.
2. Aparece una nueva ventana. Seleccione FAT32 , presione Iniciar para iniciar el proceso de formateo y siga las instrucciones en pantalla.
Después de formatear la tarjeta microSD, puede pegar allí los archivos utilizados para construir el servidor web, moveremos los ficheros index.html,estilo.css, y favicon.png a allí. Siga la siguiente sección para obtener sus archivos.
Archivo HTML
Crea un archivo llamado index.html con el siguiente contenido:
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<title>ESP Web Server</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This page was built with files from a microSD card.</p>
</body>
</html>
Archivo CSS
Crea un archivo llamado style.css con el siguiente contenido:
html {
font-family: Arial;
text-align: center;
}
body {
max-width: 400px;
margin:0px auto;
}
icono de favoritos
También serviremos un favicon. Es una imagen png de 15×15 píxeles. Puede usar el mismo favicon que el nuestro, o su propio ícono, o ningún favicon.
Puede hacer clic en el siguiente enlace para descargar el favicon:
- Descargar archivo favicon.png
Copiar archivos a la tarjeta MicroSD
Después de tener todos los archivos preparados, abra el directorio de la tarjeta microSD y pegue los archivos.
Piezas necesarias
Para este cometido necesitamos las siguientes partes:
- ESP32
- Módulo de tarjeta microSD
- Tarjeta micro SD
- Tablero de circuitos
- Cables puente
Diagrama esquemático
Conecte el módulo de la tarjeta microSD al ESP32 como se muestra en el siguiente diagrama esquemático, donde como vemos alimentamos desde el ESP32 al lector de tarjetas y usaremos los pines SPI del ESP32 predeterminados ( GPIOS 5,23,18 Y 19) tal y como se ha expuesto en la sección anterior.
Código
Copie el siguiente código en su IDE de Arduino.
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp32-web-server-microsd-card/
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 Software.
*/
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "FS.h"
#include "SD.h"
#include "SPI.h"
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
void initSDCard(){
if(!SD.begin()){
Serial.println("Card Mount Failed");
return;
}
uint8_t cardType = SD.cardType();
if(cardType == CARD_NONE){
Serial.println("No SD card attached");
return;
}
Serial.print("SD Card Type: ");
if(cardType == CARD_MMC){
Serial.println("MMC");
} else if(cardType == CARD_SD){
Serial.println("SDSC");
} else if(cardType == CARD_SDHC){
Serial.println("SDHC");
} else {
Serial.println("UNKNOWN");
}
uint64_t cardSize = SD.cardSize() / (1024 * 1024);
Serial.printf("SD Card Size: %lluMB\n", cardSize);
}
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
void setup() {
Serial.begin(115200);
initWiFi();
initSDCard();
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}
void loop() {
}
Obviamente debe insertar sus credenciales de red en las siguientes variables y el código debería funcionar de inmediato:
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Cómo funciona el código
Primero, asegúrese de incluir las bibliotecas FS.h,SD.h y SPI. h para poder comunicarse con la tarjeta microSD y manejar archivos.
#include "FS.h"
#include "SD.h"
#include "SPI.h"
Inicializar tarjeta MicroSD
losinitSDCard() es la función que inicializa la tarjeta microSD en los pines SPI predeterminados.
void initSDCard(){
if(!SD.begin()){
Serial.println("Card Mount Failed");
return;
}
uint8_t cardType = SD.cardType();
if(cardType == CARD_NONE){
Serial.println("No SD card attached");
return;
}
Serial.print("SD Card Type: ");
if(cardType == CARD_MMC){
Serial.println("MMC");
} else if(cardType == CARD_SD){
Serial.println("SDSC");
} else if(cardType == CARD_SDHC){
Serial.println("SDHC");
} else {
Serial.println("UNKNOWN");
}
uint64_t cardSize = SD.cardSize() / (1024 * 1024);
Serial.printf("SD Card Size: %lluMB\n", cardSize);
}
Luego, debe llamar a esta función en la configuración():
initSDCard();
Servir archivos desde la tarjeta microSD
Cuando accede a la dirección IP ESP32 en la raíz (/) URL, envíe el archivo HTML guardado en la tarjeta microSD.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SD, "/index.html", "text/html");
});
El primer argumento de la función de enviar() es el sistema de archivos donde se guardan los archivos. En este caso, se guarda en la tarjeta SD. El segundo argumento es la ruta donde se encuentra el archivo.(/index.html). El tercer argumento se refiere al tipo de contenido (texto/html).
Cuando el archivo HTML se cargue en su navegador, solicitará los archivos CSS y favicon. Estos son archivos estáticos guardados en el mismo directorio . Podemos agregar la siguiente línea para servir archivos estáticos en un directorio cuando lo solicite la URL raíz. Sirve los archivos CSS y favicon automáticamente.
server.serveStatic("/", SD, "/");
Si su servidor web necesita manejar más rutas, puede agregarlas a la configuración(). No olvide configurar SD como primer argumento de la función enviar(). De esta forma, buscará los archivos en la tarjeta microSD.
Es tan simple como esto. Esto se puede aplicar a cualquier otro proyecto de servidor web.
Demostración
Después de cargar el código, abra el monitor en serie a una velocidad de transmisión de 115200. Presione el botón RST integrado.
Debería obtener algo similar en el Serial Monitor: la dirección IP ESP32 e información sobre la tarjeta microSD.
Abra un navegador en su red local y pegue la dirección IP ESP32. Cargará la siguiente página web con los archivos guardados en la tarjeta microSD. Observe el icono de favoritos en la barra de título del navegador web.
Soloelectronicos.com 
Debe estar conectado para enviar un comentario.