Dans ce didacticiel, vous apprendrez à créer un serveur Web ESP32 pour diffuser des fichiers à partir d’une carte microSD à l’aide d’un module de carte microSD qui communique à l’aide du protocole SPI. Vous apprendrez à servir vos fichiers HTML, CSS, JavaScript, vos images et autres éléments enregistrés sur la carte microSD. Cela peut être particulièrement utile si vos fichiers sont trop volumineux pour tenir sur le système de fichiers (SPIFFS), ou cela peut également être plus pratique en fonction de votre projet. Pour construire le serveur Web, nous utiliserons la bibliothèque ESPAsyncWebServer.
Si vous souhaitez créer un serveur Web avec des fichiers provenant de SPIFFS, suivez plutôt le didacticiel suivant :
Aperçu du projet
Pour vous montrer comment créer un serveur Web avec des fichiers à partir d’une carte microSD, nous allons créer une simple page HTML qui affiche du texte formaté avec CSS. Nous servirons également un favicon. L’image suivante montre la page Web que nous allons servir :
- Le serveur Web est construit à l’aide de Bibliothèque ESPAsyncWebServer;
- Les fichiers HTML, CSS et favicon sont enregistrés sur la carte microSD ;
- La carte microSD communique avec l’ESP32 via le protocole de communication SPI ;
- Lorsque le client fait une demande à l’ESP32, il sert les fichiers enregistrés sur la carte microSD ;
- Vous pouvez appliquer ce que vous apprendrez ici à n’importe quel projet de serveur Web sur lequel vous travaillez.
Module de carte microSD
Il existe différents modules de carte microSD compatibles avec l’ESP32. Nous utilisons le module de carte microSD illustré dans la figure suivante – il communique à l’aide du protocole de communication SPI. Vous pouvez utiliser n’importe quel autre module de carte microSD avec une interface SPI.
Où acheter?
Vous pouvez cliquer sur le lien ci-dessous pour vérifier les différents magasins où vous pouvez obtenir le module de carte microSD :
Brochage du module de carte MicroSD
Le module de carte microSD communique à l’aide du protocole de communication SPI. Nous utiliserons les broches ESP32 SPI par défaut, comme indiqué dans le tableau suivant :
| Module de carte microSD | ESP32 |
| 3V3 | 3.3V |
| CS | GPIO 5 |
| MOSI | GPIO 23 |
| CLK | GPIO 18 |
| MISO | GPIO 19 |
| Terre | Terre |
Lecture recommandée : Référence de brochage ESP32 : Quelles broches GPIO devez-vous utiliser ?
Préparation de la carte MicroSD
Avant de poursuivre le didacticiel, assurez-vous que vous formatez votre carte microSD en FAT32. Suivez les instructions suivantes pour formater votre carte microSD ou utilisez un outil logiciel comme Formateur de carte SD (compatible avec Windows et Mac OS).
1. Insérez la carte microSD dans votre ordinateur. Aller à Mon ordinateur et faites un clic droit sur la carte SD. Sélectionner Format comme indiqué dans la figure ci-dessous.
2. Une nouvelle fenêtre apparaît. Sélectionner FAT32, presse Démarrer pour initialiser le processus de formatage et suivez les instructions à l’écran.
Après avoir formaté la carte microSD, vous pouvez y coller les fichiers utilisés pour construire le serveur Web. Nous déplacerons le index.html, style.css, et favicon.png fichiers là-dedans. Suivez la section suivante pour obtenir vos fichiers.
Fichier HTML
Créer un fichier nommé index.html avec le contenu suivant :
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/esp32-web-server-microsd-card/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>
Fichier CSS
Créer un fichier nommé style.css avec le contenu suivant :
html {
font-family: Arial;
text-align: center;
}
body {
max-width: 400px;
margin:0px auto;
}Icône de favori
Nous servirons également un favicon. Il s’agit d’une image png de 15×15 pixels. Vous pouvez utiliser le même favicon que le nôtre, ou votre propre icône, ou aucun favicon du tout.
Vous pouvez cliquer sur le lien suivant pour télécharger le favicon :
Copier des fichiers sur une carte MicroSD
Après avoir préparé tous les fichiers, ouvrez le répertoire de la carte microSD et collez les fichiers.
Pièces requises
Pour ce tutoriel, vous avez besoin des pièces suivantes :
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Diagramme schématique
Câblez le module de carte microSD à l’ESP32 comme indiqué dans le schéma suivant. Nous utilisons les broches ESP32 SPI par défaut.
Code
Copiez le code suivant dans votre IDE Arduino.
/*
Rui Santos
Complete project details at https://Raspberryme.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: %lluMBn", 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() {
}
Insérez vos informations d’identification réseau dans les variables suivantes et le code devrait fonctionner immédiatement :
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Comment fonctionne le code
Nous avons expliqué comment créer un serveur Web avec l’ESP32 dans les didacticiels précédents. Nous allons donc simplement jeter un œil aux parties pertinentes de ce didacticiel.
Bibliothèques
Tout d’abord, assurez-vous d’inclure le FS.h, SD.h et SPI.h bibliothèques pour pouvoir communiquer avec la carte microSD et gérer les fichiers.
#include "FS.h"
#include "SD.h"
#include "SPI.h"Initialiser la carte MicroSD
le initSDCard() La fonction initialise la carte microSD sur les broches SPI par défaut.
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: %lluMBn", cardSize);
}Ensuite, vous devez appeler cette fonction dans le mettre en place():
initSDCard();Servir des fichiers depuis une carte microSD
Lorsque vous accédez à l’adresse IP ESP32 à la root (/) URL, envoyez le fichier HTML enregistré sur la carte microSD.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SD, "/index.html", "text/html");
});Le premier argument du envoyer() function est le système de fichiers où les fichiers sont enregistrés. Dans ce cas, il est enregistré sur la carte SD (Dakota du Sud). Le deuxième argument est le chemin où se trouve le fichier /index.html). Le troisième argument fait référence au type de contenu (texte/html).
Lorsque le fichier HTML se charge sur votre navigateur, il demandera les fichiers CSS et favicon. Ce sont des fichiers statiques enregistrés dans le même répertoire (Dakota du Sud). Nous pouvons ajouter la ligne suivante pour servir des fichiers statiques dans un répertoire à la demande de l’URL root. Il sert automatiquement les fichiers CSS et favicon.
server.serveStatic("/", SD, "/");Si votre serveur Web doit gérer plus de routes, vous pouvez les ajouter au mettre en place(). N’oubliez pas de régler Dakota du Sud comme premier argument du envoyer() une fonction. De cette façon, il recherchera les fichiers dans la carte microSD.
C’est aussi simple que cela. Cela peut être appliqué à tout autre projet de serveur Web.
Manifestation
Après avoir téléchargé le code, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton RST intégré.
Vous devriez obtenir quelque chose de similaire sur le Serial Monitor : l’adresse IP ESP32 et des informations sur la carte microSD.
Ouvrez un navigateur sur votre réseau local et collez l’adresse IP ESP32. Il chargera la page Web suivante avec les fichiers enregistrés sur la carte microSD. Remarquez le favicon sur la barre de titre du navigateur Web.
Conclusion
Dans ce didacticiel, vous avez appris à créer un serveur Web avec l’ESP32 avec des fichiers enregistrés sur la carte microSD. Au lieu d’écrire le texte HTML, CSS et JavaScript directement sur l’esquisse Arduino, vous pouvez les enregistrer dans des fichiers séparés sur une carte microSD. Cela peut également être utile pour stocker d’autres données que vous pourriez souhaiter afficher sur votre serveur Web.
Si vous n’avez pas de module de carte microSD, vous pouvez enregistrer les fichiers sur le système de fichiers ESP32 (SPIFFS) s’ils conviennent. Vous pourriez aussi aimer:
Nous espérons que vous avez trouvé ce tutoriel utile.
En savoir plus sur l’ESP32 avec nos ressources :