ESP32 - Webserver auf einer MicroSD-Karte
In diesem Tutorial erfahren wir, wie man einen ESP32-Webserver erstellt, der auf der MicroSD-Karte gehostet wird. Die HTML-, CSS-, JavaScript- und Bilddateien werden auf der MicroSD-Karte gespeichert.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 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 ESP32 und Webserver
Wenn du mit ESP32 und Webserver, MicroSD-Karte (einschließlich Pinbelegung, Funktionsweise und Programmierung) nicht vertraut bist, kannst du durch die folgenden Tutorials mehr darüber erfahren:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.
HTML-Inhalte auf die MicroSD-Karte kopieren
- Bitte stellen Sie sicher, dass Ihre microSD-Karte im FAT32-Format formatiert ist, wie unten beschrieben (unter Windows-Betriebssystem, 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>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>
- Erstellen Sie eine CSS-Datei styles.css und fügen Sie 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.
- Alle Dateien in das Stammverzeichnis der MicroSD-Karte legen, wie in den unten gezeigten Bildern:
Bitte beachten Sie, dass Sie auch andere Dateien hinzufügen können, z. B. JavaScript-Dateien, TXT-Dateien, CSV-Dateien...
ESP32-Code - Webserver auf MicroSD-Karte
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser 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/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
}
Schnelle Schritte
- Wenn Sie ESP32 zum ersten Mal verwenden, sehen Sie sich wie man die Umgebung für ESP32 in der Arduino IDE einrichtet an.
- Verbinden Sie das ESP32-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Bibliotheks-Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, und finden Sie den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Installieren-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 in der Arduino IDE
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Sehen Sie sich das Ergebnis im seriellen Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Sie sehen eine IP-Adresse im seriellen Monitor, zum Beispiel: 192.168.0.3
- Geben Sie die IP-Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Bitte beachten Sie, dass Sie die 192.168.0.3 durch die IP-Adresse ersetzen müssen, die Sie im seriellen Monitor erhalten haben.
- Sie sehen eine Seite, die HTML, CSS und Bilder von der SD-Karte lädt.
- Wie Sie sehen können, wurden HTML-, CSS- und Bilddateien, die auf der SD-Karte gespeichert waren, vom Webbrowser geladen.
Jetzt können Sie den HTML- und CSS-Code bearbeiten, weitere Bilder hinzufügen und JavaScript verwenden, um Ihre eigene Webseite zu erstellen.