📁 صفحه‌ی وب از فایل SPIFFS روی ESP32

صفحه و CSS در فایل‌های حافظه‌ی برد هستند، نه در کد؛ در تب «مرورگر» دکمه‌ی data را بزن و صفحه را خودت عوض کن. هر بار روشن‌کردن LED در log.txt نوشته می‌شود.

سطح: چالشی ⭐⭐⭐ · مود: آردوینو (سه‌بعدی + کد)

قطعات لازم

کد کامل پروژه

// ESP32 + SPIFFS: the web page lives in a FILE on the board, not in the sketch.
// On a real board you put index.html and style.css in the sketch's data/ folder
// and upload them with "ESP32 Sketch Data Upload". Here: open the «مرورگر» tab and
// press "data" to see and edit the files. The first time, setup() writes starter files.
#include <WiFi.h>
#include <SPIFFS.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

const char* ssid = "MyHome";
const char* password = "12345678";
const int LED = 4;
bool ledOn = false;

AsyncWebServer server(80);

const char starter_html[] PROGMEM = R"rawliteral(<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css"></head>
<body><h2>Page from SPIFFS</h2>
<p>LED: <b>%STATE%</b></p>
<p><a class="btn" href="/toggle">Toggle the LED</a></p>
<p><a href="/log.txt">See the log file</a></p>
<p class="tip">Edit me in the data panel, then reload!</p>
</body></html>
)rawliteral";

const char starter_css[] PROGMEM = R"rawliteral(body { font-family: sans-serif; text-align: center; background: #f0f7ff; }
.btn { display: inline-block; padding: 10px 24px; background: #0284c7; color: white; border-radius: 8px; text-decoration: none; }
.tip { color: #888; }
)rawliteral";

String processor(const String& var) {
  if (var == "STATE") return ledOn ? "ON" : "OFF";
  return String();
}

void writeFile(const char* path, const char* text) {
  File f = SPIFFS.open(path, FILE_WRITE);
  if (!f) {
    Serial.println("could not write the file");
    return;
  }
  f.print(text);
  f.close();
}

void listFiles() {
  Serial.println("Files on SPIFFS:");
  File root = SPIFFS.open("/");
  File file = root.openNextFile();
  while (file) {
    Serial.printf("  %s  (%d bytes)\n", file.name(), file.size());
    file = root.openNextFile();
  }
}

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  if (!SPIFFS.begin(true)) {
    Serial.println("SPIFFS failed");
    return;
  }
  if (!SPIFFS.exists("/index.html")) writeFile("/index.html", starter_html);
  if (!SPIFFS.exists("/style.css")) writeFile("/style.css", starter_css);
  listFiles();

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(200);
  Serial.println(WiFi.localIP());

  // The home page comes from the file; %STATE% is filled in by processor().
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(SPIFFS, "/index.html", "text/html", false, processor);
  });
  server.on("/toggle", HTTP_GET, [](AsyncWebServerRequest *request) {
    ledOn = !ledOn;
    digitalWrite(LED, ledOn ? HIGH : LOW);
    File log = SPIFFS.open("/log.txt", FILE_APPEND);   // add one line to the log
    log.printf("%lu ms: LED %s\n", millis(), ledOn ? "ON" : "OFF");
    log.close();
    request->redirect("/");
  });
  // Every other file (style.css, log.txt, ...) straight from SPIFFS.
  server.serveStatic("/", SPIFFS, "/");
  server.begin();
}

void loop() {
}

چطور اجرایش کنم؟

  1. شبیه‌ساز تینکرکد فارسی را باز کن و «مود آردوینو» را انتخاب کن.
  2. از پنل «نمونه‌ها»، «صفحه‌ی وب از فایل SPIFFS روی ESP32» را بارگذاری کن — مدار و کد با هم می‌آیند.
  3. دکمه‌ی اجرا ▶ را بزن و خروجی Serial و رفتار قطعات را تماشا کن.
  4. حالا کد را تغییر بده — عددها، پین‌ها، ترتیب — و دوباره اجرا کن!
این پروژه را رایگان در شبیه‌ساز اجرا کن 🤖