Serveur Web Arduino Nano ESP32 sur carte MicroSD
Dans ce tutoriel, nous explorerons le processus de création d'un serveur web Arduino Nano ESP32 hébergé sur une carte MicroSD. Tous les fichiers HTML, CSS, JavaScript et les images nécessaires seront stockés sur la carte MicroSD.
Préparation du matériel
| 1 | × | Arduino Nano ESP32 | |
| 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) Screw Terminal Adapter for Arduino Nano |
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 Arduino Nano ESP32 et du serveur Web
Nous avons des tutoriels spécifiques sur l'Arduino Nano ESP32 et le serveur web, la carte MicroSD. Chaque tutoriel contient des informations détaillées et des instructions étape par étape sur le brochage des composants, le principe de fonctionnement, la connexion des câbles à l'Arduino Nano ESP32, le code Arduino Nano ESP32... Pour en savoir plus, consultez les liens suivants :
Diagramme de câblage
This image is created using Fritzing. Click to enlarge image
Copiez le contenu HTML sur la carte MicroSD
- Veuillez vous assurer que votre carte Micro SD est formatée en format FAT32 comme ci-dessous (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>Arduino Nano 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 :
- (Optionnel) 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 le montrent les images ci-dessous :
Veuillez noter que vous pouvez ajouter d'autres fichiers tels que JavaScript, txt, csv...
Code Arduino Nano ESP32 - Serveur Web sur carte MicroSD
/*
* Ce code Arduino Nano ESP32 a été développé par newbiely.fr
* Ce code Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-web-server-on-sd-card
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS D4 // The Arduino Nano ESP32 pin connected to the CS pin of SD card module
// 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 l'ESP32, consultez comment configurer l'environnement pour Arduino Nano ESP32 sur Arduino IDE.
- Connectez la carte Arduino Nano ESP32 à votre PC via un câble micro USB.
- Ouvrez l'Arduino IDE sur votre PC.
- Sélectionnez la bonne carte Arduino Nano ESP32 (par exemple Arduino Nano 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 l'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
- Modifiez 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 téléverser 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
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Lorsque vous accédez au moniteur série, vous rencontrerez une adresse IP, telle que : 192.168.0.3.
- Saisissez l'adresse IP fournie dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- N'oubliez pas de remplacer '192.168.0.3' par l'adresse IP affichée sur le moniteur série.
- Lorsque vous entrez l'adresse IP, une page chargera le HTML, le CSS et les images depuis la carte SD.
- Lors de l'inspection, vous remarquerez que le navigateur web charge avec succès les fichiers HTML, CSS et les images stockées sur la carte SD.
N'hésitez pas à personnaliser le HTML, le CSS, à inclure des images supplémentaires et du JavaScript pour créer votre propre page web unique.