ESP32 - Webserver op MicroSD-kaart
In deze handleiding gaan we ontdekken hoe u een ESP32 webserver maakt die gehost wordt op een MicroSD-kaart. De HTML, CSS, JavaScript- en afbeeldingsbestanden worden opgeslagen op de MicroSD-kaart.
Hardware benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Over ESP32 en Webserver
Als u nog niet bekend bent met de ESP32 en webservers, MicroSD-kaart (inclusief pinout, werking en programmeren), kunt u hierover leren met de volgende tutorials:
Bedradingsschema
This image is created using Fritzing. Click to enlarge image
Kopieer HTML-inhoud naar MicroSD-kaart
- Zorg ervoor dat uw Micro SD-kaart geformatteerd is in het FAT32-formaat zoals hieronder (in Windows OS: rechtermuisklik → formatteren):
- Maak een HTML-bestand aan met de naam index.html en voeg de volgende code toe:
<!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>Webpagina gehost op MicroSD-kaart</h1>
<img src="luffy.jpg" alt="Een mooie afbeelding">
<p>Gesponsord door <a href="https://amazon.com/diyables">DIYables</a></p>
</div>
</body>
</html>
- Maak een CSS-bestand aan met de naam styles.css en voeg de volgende code toe:
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;
}
- Bereid een afbeelding voor. In deze tutorial wordt luffy.jpg gebruikt, zoals ook in de HTML-code. U kunt deze afbeelding hier downloaden:
- (Optioneel) Bereid een favicon-afbeelding voor. Deze tutorial gebruikt deze favicon.ico
- Plaats alle bestanden in de hoofdmap van de MicroSD-kaart, zoals in onderstaande afbeeldingen:
Let op: u kunt ook andere bestanden toevoegen, zoals JavaScript, txt, csv...
ESP32 Code - Webserver op MicroSD-kaart
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-web-server-on-sd-card
*/
#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);
// 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();
}
=================
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Snelle stappen
- Als u voor het eerst met ESP32 werkt, bekijk dan hoe u de omgeving instelt voor ESP32 in Arduino IDE.
- Verbind het ESP32-bord met uw pc via een micro USB-kabel.
- Open Arduino IDE op uw pc.
- Selecteer het juiste ESP32-bord (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
- Open de Library Manager door te klikken op het Library Manager icoon in de linker navigatiebalk van Arduino IDE.
- Zoek op “DIYables ESP32 WebServer” en vind de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Installeren knop om de Web Server bibliotheek te installeren.
- Kopieer bovenstaande code en open deze in Arduino IDE.
- Pas de wifi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen netwerk.
- Klik op de Uploaden knop in Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- U ziet een IP-adres in de Seriële Monitor, bijvoorbeeld: 192.168.0.3
- Typ dit IP-adres in de adresbalk van een webbrowser op uw smartphone of pc.
- Let op dat u 192.168.0.3 vervangt door het IP-adres dat u in de Seriële Monitor krijgt.
- U zult een pagina zien die HTML, CSS en afbeeldingen van de SD-kaart laadt.
- Zoals u ziet worden de HTML, CSS en afbeeldingen die op de SD-kaart staan, geladen door de webbrowser.
Nu kunt u de HTML- en CSS-code aanpassen, meer afbeeldingen en JavaScript toevoegen om uw eigen webpagina te maken.