Při tvorbě webového serveru na ESP32 se často HTML a CSS zapisují přímo do Arduino kódu jako textový řetězec. To ale může být nepřehledné a obtížně upravitelné. Lepší řešení je uložit webové soubory přímo do interní flash paměti mikrokontroléru pomocí SPIFFS (SPI Flash File System).
V tomto návodu si ukážeme, jak vytvořit webový server na ESP32, který načítá HTML a CSS soubory uložené ve flash paměti. Webová stránka bude obsahovat tlačítka pro zapnutí a vypnutí LED diody a zobrazí aktuální stav výstupu.
Tento přístup je vhodný například pro IoT projekty, webové rozhraní zařízení nebo zobrazování dat ze senzorů.
Jak projekt funguje
Princip projektu je jednoduchý:
ESP32 spustí webový server pomocí knihovny ESPAsyncWebServer. HTML a CSS soubory jsou uložené v interní flash paměti zařízení pomocí souborového systému SPIFFS. Když uživatel otevře IP adresu ESP32 v prohlížeči, zařízení odešle HTML stránku uloženou ve flash paměti.
Na stránce jsou tlačítka ON a OFF, která mění stav výstupu na mikrokontroléru. Pokud uživatel klikne například na tlačítko ON, prohlížeč odešle požadavek na adresu /on, ESP32 zapne GPIO pin a znovu načte stránku.
Na stránce se také zobrazuje aktuální stav výstupu.
Co je SPIFFS
SPIFFS je jednoduchý souborový systém určený pro mikrokontroléry. Umožňuje ukládat soubory přímo do flash paměti zařízení a pracovat s nimi podobně jako s běžnými soubory v počítači.
Díky tomu můžete na ESP32 ukládat například:
- HTML stránky
- CSS a JavaScript soubory
- obrázky a ikony
- konfigurační soubory
- uložená data ze senzorů
To umožňuje vytvořit přehledné webové rozhraní bez nutnosti vkládat celý HTML kód přímo do programu.
Struktura souborů
HTML soubor
HTML soubor obsahuje jednoduchou webovou stránku s nadpisem, informací o stavu GPIO a dvěma tlačítky pro ovládání LED.
1<!DOCTYPE html>
2<html>
3<head>
4<title>ESP32 Web Server</title>
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<link rel="stylesheet" type="text/css" href="style.css">
7</head>
8
9<body>
10
11<h1>ESP32 Web Server</h1>
12
13<p>GPIO state: <strong>%STATE%</strong></p>
14
15<p><a href="/on"><button class="button">ON</button></a></p>
16
17<p><a href="/off"><button class="button button2">OFF</button></a></p>
18
19</body>
20</html>Na místě %STATE% je tzv. placeholder, který se při odeslání stránky nahradí skutečným stavem GPIO pinu.
CSS soubor
Soubor style.css upravuje vzhled webové stránky.
1html{
2font-family: Helvetica;
3display: inline-block;
4margin: 0 auto;
5text-align: center;
6}
7
8h1{
9color:#0F3376;
10padding:2vh;
11}
12
13p{
14font-size:1.5rem;
15}
16
17.button{
18background-color:#008CBA;
19border:none;
20border-radius:4px;
21color:white;
22padding:16px 40px;
23font-size:30px;
24margin:2px;
25cursor:pointer;
26}
27
28.button2{
29background-color:#f44336;
30}Tento soubor pouze nastavuje font, velikost textu a styl tlačítek.
Program pro ESP32
Níže je základní kód pro spuštění webového serveru.
1#include "WiFi.h"
2#include "ESPAsyncWebServer.h"
3#include "SPIFFS.h"
4
5const char* ssid = "YOUR_SSID";
6const char* password = "YOUR_PASSWORD";
7
8const int ledPin = 2;
9String ledState;
10
11AsyncWebServer server(80);
12
13String processor(const String& var){
14 if(var == "STATE"){
15 if(digitalRead(ledPin)){
16 ledState = "ON";
17 } else {
18 ledState = "OFF";
19 }
20 return ledState;
21 }
22 return String();
23}
24
25void setup(){
26
27 Serial.begin(115200);
28 pinMode(ledPin, OUTPUT);
29
30 if(!SPIFFS.begin(true)){
31 Serial.println("SPIFFS error");
32 return;
33 }
34
35 WiFi.begin(ssid, password);
36
37 while(WiFi.status() != WL_CONNECTED){
38 delay(1000);
39 Serial.println("Connecting to WiFi...");
40 }
41
42 Serial.println(WiFi.localIP());
43
44 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
45 request->send(SPIFFS, "/index.html", String(), false, processor);
46 });
47
48 server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
49 request->send(SPIFFS, "/style.css", "text/css");
50 });
51
52 server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
53 digitalWrite(ledPin, HIGH);
54 request->send(SPIFFS, "/index.html", String(), false, processor);
55 });
56
57 server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
58 digitalWrite(ledPin, LOW);
59 request->send(SPIFFS, "/index.html", String(), false, processor);
60 });
61
62 server.begin();
63}
64
65void loop(){}Jak nahrát soubory do SPIFFS
Postup je následující:
- Ve složce projektu vytvořte složku data
- Do této složky uložte soubory
index.htmlastyle.css - Nahrajte program do ESP32
- V Arduino IDE zvolte Tools → ESP32 Data Sketch Upload
Tím se HTML a CSS soubory nahrají do interní flash paměti zařízení.
Jak projekt vyzkoušet
Po nahrání programu otevřete Serial Monitor a nastavte rychlost 115200. ESP32 vypíše svou IP adresu.
Tuto adresu zadejte do webového prohlížeče například:
http://192.168.1.150
Zobrazí se webová stránka s tlačítky ON a OFF. Kliknutím na tlačítka můžete ovládat LED diodu připojenou k ESP32.
Výhody použití SPIFFS
Použití SPIFFS má několik výhod:
HTML, CSS a JavaScript lze upravovat odděleně od programu, což zjednodušuje vývoj. Webové soubory lze také snadno aktualizovat bez změny hlavního programu.
Díky tomu je možné vytvořit komplexnější webové rozhraní například pro IoT zařízení, domácí automatizaci nebo zobrazování dat ze senzorů.
Shrnutí
SPIFFS umožňuje ukládat webové soubory přímo do flash paměti ESP32 a vytvářet tak přehledné webové rozhraní. Díky tomu není nutné zapisovat HTML a CSS přímo do Arduino kódu.
Ve spojení s knihovnou ESPAsyncWebServer lze velmi snadno vytvořit rychlý a flexibilní webový server pro IoT projekty.