Arduino Nano ESP32 - Webserver auf der MicroSD-Karte
In diesem Tutorial werden wir den Prozess der Erstellung eines Arduino Nano ESP32-Webservers untersuchen, der auf einer MicroSD-Karte gehostet wird. Alle erforderlichen HTML-, CSS-, JavaScript- und Bilddateien befinden sich auf der MicroSD-Karte.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Über Arduino Nano ESP32 und Webserver
Wir haben spezielle Tutorials zum Arduino Nano ESP32 sowie zu Webservern und zur MicroSD-Karte. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Hardware-Pinbelegung, Funktionsweise, Verkabelung mit dem Arduino Nano ESP32 und Arduino-Nano-ESP32-Code... Weitere Informationen dazu finden Sie in den folgenden Links:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
HTML-Inhalte auf die MicroSD-Karte kopieren
- Bitte stellen Sie sicher, dass Ihre Micro-SD-Karte im FAT32-Format formatiert ist, wie unten beschrieben (unter Windows, Rechtsklick → Formatieren):
- Erstellen Sie eine HTML-Datei index.html und fügen Sie den folgenden Code hinzu:
<!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>
- Erstelle eine CSS-Datei styles.css und füge den folgenden Code hinzu:
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;
}
- Bereiten Sie ein Bild vor. Dieses Tutorial verwendet luffy.jpg, das im HTML-Code verwendet wird. Sie können dieses Bild hier herunterladen:
- (Optional) Favicon-Bild vorbereiten. Dieses Tutorial verwendet diese favicon.ico-Datei
- Legen Sie alle Dateien im Stammverzeichnis der MicroSD-Karte ab, wie in den unten gezeigten Abbildungen:
Bitte beachten Sie, dass Sie weitere Dateien hinzufügen können, z. B. JavaScript-Dateien, TXT-Dateien und CSV-Dateien...
Arduino Nano ESP32-Code - Webserver auf der MicroSD-Karte
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/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
}
Schnelle Schritte
- Wenn Sie ESP32 zum ersten Mal verwenden, sehen Sie sich Wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet an.
- Schließen Sie das Arduino Nano ESP32-Board über ein Micro-USB-Kabel an Ihren PC an.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das Arduino Nano ESP32-Board und den COM-Port aus.
- Öffnen Sie das Symbol Library Manager in der linken Navigationsleiste der Arduino IDE, indem Sie darauf klicken.
- Suchen Sie „ESPAsyncWebServer“, und finden Sie dann den von lacamera erstellten ESPAsyncWebServer.
- Klicken Sie auf die Install-Schaltfläche, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino-IDE
- Ändern Sie im Code die WLAN-Informationen (SSID und Passwort) auf Ihre eigenen
- Klicken Sie in der Arduino-IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Überprüfen Sie das Ergebnis im seriellen Monitor
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
- Beim Zugriff auf den Serial Monitor wird Ihnen eine IP-Adresse angezeigt, zum Beispiel: 192.168.0.3.
- Geben Sie die angegebene IP-Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Denken Sie daran, '192.168.0.3' durch die IP-Adresse zu ersetzen, die im Serial Monitor angezeigt wird.
- Beim Aufrufen der IP-Adresse lädt die Seite HTML, CSS und Bilder von der SD-Karte.
- Beim Prüfen werden Sie feststellen, dass der Webbrowser HTML-, CSS- und Bilddateien, die auf der SD-Karte gespeichert sind, erfolgreich lädt.
Gern können Sie den HTML- und CSS-Code anpassen und zusätzliche Bilder sowie JavaScript hinzufügen, um Ihre eigene einzigartige Webseite zu gestalten.