ESP32 Web Server with OLED Display
Using SPIFFS
Introduction
This
project uses an ESP32 to create a web server that allows users to send
text via a webpage. The received text is displayed on an OLED screen
(SSD1306). The project also utilizes SPIFFS (SPI Flash File System)
to store the webpage.
Code
#include <WiFi.h>
#include <WebServer.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "SPIFFS.h"
const char* ssid = "SSID";
const char* password = "PASSWORD";
WebServer server(80);
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(115200);
// Initialize SPIFFS
if (!SPIFFS.begin(true)) {
Serial.println("SPIFFS
initialization failed!");
return;
}
// Initialize OLED display
if
(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306
allocation failed"));
while (true);
}
display.display();
delay(1000);
// Connect to WiFi
WiFi.begin(ssid, password);
while (WiFi.status() !=
WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
Serial.print("Connected to
WiFi. IP address: ");
Serial.println(WiFi.localIP());;
// Start web server
server.on("/",
HTTP_GET, handleRoot);
server.on("/submit",
HTTP_POST, handleFormSubmit);
server.begin();
Serial.println("HTTP server
started");
}
void loop() {
server.handleClient();
}
void handleRoot() {
File htmlFile =
SPIFFS.open("/index.html", "r");
if (htmlFile) {
server.streamFile(htmlFile,
"text/html");
htmlFile.close();
} else {
server.send(404,
"text/plain", "File Not Found");
}
}
void handleFormSubmit() {
if
(server.hasArg("user-text")) {
String userText =
server.arg("user-text");
display.clearDisplay();
display.setTextSize(2);
display.setTextColor(SSD1306_WHITE);
display.setCursor(0, 0);
display.println(userText);
display.display();
server.send(200,
"text/html", "Text received and displayed on OLED");
} else {
server.send(400,
"text/html", "Bad Request");
}
}
Working Principle
The
process involves the following steps:
1.
WiFi
Connection:
The ESP32 connects to a WiFi network using predefined credentials.
2.
Web
Server Setup: A
web server runs on port 80, handling HTTP requests.
3.
Serving
Web Page:
The ESP32 serves an HTML form stored in SPIFFS. Users access it by
entering the ESP32's IP address in a browser.
4.
User
Input Handling:
When a user submits text, the ESP32 receives it and displays it on the OLED
screen.
5.
Continuous
Operation:
The server continuously listens for new requests while updating the OLED
display.
Managing the index.html
File for ESP32 Web Server
The index.html file is stored in the SPIFFS (SPI Flash File System) of the ESP32. This file creates a simple web interface for users to send text that gets displayed on the OLED screen.
Explanation of index.html
The HTML file consists of a form with a text input field
and a submit button:
1. Page Title & Header:
·
The title "ESP32 OLED Display"
appears on the browser tab.
·
A header (<h2>) instructs users to
enter text.
2. Form Structure:
·
The form has an input field where users type
the text.
·
The submit button sends the text to
the ESP32.
·
The form uses the POST method to send data to the
/submit
route on the ESP32 web server.
How to Manage index.html
in SPIFFS
Creating the File
Write the HTML content in a file
named index.html.
Uploading to SPIFFS
To store the file on the ESP32, follow these steps:
·
Install the ESP32 SPIFFS Plugin for Arduino
IDE.
·
Place index.html inside a "data" folder in your
Arduino project.
·
Upload it to SPIFFS using the SPIFFS uploader tool.
Serving the File
The ESP32 reads index.html from SPIFFS and sends
it to the client when they visit /. If the file is missing, a 404 error is
returned.
Why Use SPIFFS for HTML?
·
Keeps the code clean by separating the
web page from the Arduino sketch.
·
Allows easy modification of the webpage
without changing the firmware.
·
Reduces
memory usage, as SPIFFS can store large HTML
files efficiently.
By managing the webpage in
SPIFFS, you create a scalable and maintainable
ESP32 web interface.
Key Components
The
main components include:
·
ESP32 for WiFi and web server
functionality.
·
OLED
Display (SSD1306, I2C)
for visual output.
·
SPIFFS for storing the webpage.
·
Web
Interface
for user input.
Application Ideas
Consider
these application ideas:
·
IoT
message boards.
·
Wireless
display systems.
·
Smart
home text displays.
This project showcases how ESP32 can be used
for interactive IoT applications with web-based control and real-time
display.
… Thank You …