ESP32 - Serveur Web sur carte MicroSD
Dans ce tutoriel, nous découvrirons comment créer un serveur web ESP32 hébergé sur une carte MicroSD. Les fichiers HTML, CSS, JavaScript et les images seront stockés sur la carte MicroSD.
Préparation du matériel
| 1 | × | ESP-WROOM-32 Dev Module | |
| 1 | × | USB Cable Type-C | |
| 1 | × | Micro SD Card | |
| 1 | × | Micro SD Card Module | |
| 1 | × | Jumper Wires | |
| 1 | × | Breadboard | |
| 1 | × | USB 3.0 SD Card Reader | |
| 1 | × | (Recommended) ESP32 Screw Terminal Adapter |
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
À propos de ESP32 et du serveur Web
Si vous n'êtes pas familier avec l'ESP32 et le serveur Web, la carte MicroSD (y compris le schéma des broches, son fonctionnement et sa programmation), vous pouvez en apprendre davantage à leur sujet grâce aux tutoriels suivants :
Diagramme de câblage
This image is created using Fritzing. Click to enlarge image
Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, vous pouvez trouver des conseils dans le tutoriel suivant : Comment alimenter l'ESP32.
Copier le contenu HTML sur la carte MicroSD
- Assurez-vous que votre carte Micro SD est formatée en FAT32 comme suit (sous Windows OS, clic droit → formater) :
- Créez un fichier HTML index.html et ajoutez le code suivant :
<!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>
- Créez un fichier CSS styles.css et ajoutez le code suivant :
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;
}
- Préparez une image. Ce tutoriel utilise luffy.jpg, qui est utilisé dans le code HTML. Vous pouvez télécharger cette image ici :
- (Facultatif) Préparez l'image favicon. Ce tutoriel utilise ce favicon.ico
- Placez tous les fichiers dans le répertoire racine de la carte MicroSD, comme sur les images ci-dessous :
Veuillez noter que vous pouvez ajouter d'autres fichiers tels que JavaScript, txt, csv...
Code ESP32 - Serveur web sur carte MicroSD
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32/esp32-web-server-on-sd-card
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#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);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// 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();
}
void loop() {
// Your code here
}
Étapes rapides
- Si c'est la première fois que vous utilisez un ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Connectez la carte ESP32 à votre PC via un câble micro USB.
- Ouvrez Arduino IDE sur votre PC.
- Sélectionnez la bonne carte ESP32 (par exemple, Module de développement ESP32) et le port COM.
- Ouvrez le gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques dans la barre de navigation gauche de l'Arduino IDE.
- Recherchez “ESPAsyncWebServer”, puis trouvez ESPAsyncWebServer créé par lacamera.
- Cliquez sur le bouton Install pour installer la bibliothèque ESPAsyncWebServer.
- Vous serez invité à installer la dépendance. Cliquez sur le bouton Install All.
- Copiez le code ci-dessus et ouvrez-le avec l'IDE Arduino.
- Changez les informations wifi (SSID et mot de passe) dans le code par les vôtres.
- Cliquez sur le bouton Upload de l'IDE Arduino pour charger le code sur l'ESP32.
- Ouvrez le moniteur série.
- Vérifiez le résultat sur le moniteur série.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Vous verrez une adresse IP sur le moniteur série, par exemple : 192.168.0.3
- Tapez l'adresse IP dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- Veuillez noter que vous devez changer le 192.168.0.3 par l'adresse IP que vous avez obtenue sur le moniteur série.
- Vous verrez une page charger HTML, CSS, images depuis la carte SD.
- Comme vous pouvez le voir, le HTML, CSS, les images stockées sur la carte SD ont été chargées par le navigateur web.
Vous pouvez maintenant modifier le code HTML, CSS, ajouter plus d'images, du JavaScript pour créer votre propre page web.