Universitatea Tehnică din Cluj-Napoca

Departamentul Calculatoare

Proiectarea cu Micro-Procesoare

Lector: Mihai Negru

An 3 – Calculatoare și Tehnologia Informației
Seria B
Curs 12: Micro-controller-ul ESP32 – Wi-Fi și SPIFFS

https://mihai.utcluj.ro/
 ESP32 – moduri de funcționare Wi-Fi

Punct de acces (Access Point – AP)

- Crează propria rețea Wi-Fi
- Definește un SSID – Service Set Identifier
(numele rețelei)
- Definește o parolă de acces (optional)
- Are rol de server (de obicei)

Station (Client)
• Se conectează la o rețea Wi-Fi existentă
• SSID și parola trebuie cunoscute
• Poate funcționa ca și client sau server

https://randomnerdtutorials.com/esp32-access-point-ap-web-server/

2024 Cluj-Napoca 2
 ESP32 – moduri de funcționare Wi-Fi
• Mod de funcționare Wi-Fi  Punct de acces (Access Point – AP)
WiFi.softAP(ssid, password);

WiFi.softAP(const char* ssid, const char* password, int channel, int ssid_hidden, int
max_connection)

– SSID: nume retea, maxim 63 caractere

– password: minim 8 caractere, NULL  fără parolă
– channel: numărul canalului Wi-Fi (1-13)
– ssid_hidden: (0 = broadcast SSID, 1 = hide SSID)
– max_connection: numărul maxim de clienți conectați (1-4)

• Obținerea adresei IP a punctului de acces :

IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);

2024 Cluj-Napoca 3
 ESP32 – moduri de funcționare Wi-Fi
• Conectarea la AP – configurație automată
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }

Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());

• Conectarea la AP – configurație manulă

IPAddress local_IP(192, 168, 1, 184); // Set your Static IP address
IPAddress gateway(192, 168, 1, 1); // Set your Gateway IP address
IPAddress subnet(255, 255, 0, 0); // Subnet mask
IPAddress primaryDNS(8, 8, 8, 8); // DNS, optional
IPAddress secondaryDNS(8, 8, 4, 4); // DNS 2, optional

if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {

Serial.println("STA Failed to configure"); }

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
2024 Cluj-Napoca 4
 TCP: Server și client

• TCP Server

WiFiServer server (port) // creates a TCP server on specified port

server.begin(); // Starts listening for incoming connections

WiFiClient client = server.available(); // returns connected client or NULL if no

client wants to connect

• TCP Client
WiFiClient client = server.available(); // on the server side

WiFiClient client; // on the client side

client.connect (servername, port);
Or
client.connect (IP, port);

client.stop() // disconnects from server

2024 Cluj-Napoca 5
 TCP: Transfer date

• Transferul datelor se realizează prin intermediul clasei WiFiClient, atât la client

cât și la server

client.available() // Returns the number of bytes available for reading.

client.read() // Read the next available byte received after the last call to read()

client.write (byte b) // writes a byte

client.write (byte *buf, size) // writes a byte buffer

client.print(data) // prints data in a human-readable form

client.print(data, BASE) // optional, you can specify the base (DEC, HEX, OCT)

client.println (data) // Print data, followed by a carriage return and newline

client.flush() // Discard any bytes that have been written to the client but not yet
read.

2024 Cluj-Napoca 6
 Applicație Wi-Fi și server Web
#include <WiFi.h>
#include <WiFiAP.h>
#include <WiFiClient.h>

// MESSAGE STRINGS
const String SETUP_INIT = "SETUP: Initializing ESP32 dev board";
const String SETUP_ERROR = "!!ERROR!! SETUP: Unable to start SoftAP mode";
const String SETUP_SERVER_START = "SETUP: HTTP server started --> IP addr: ";
const String SETUP_SERVER_PORT = " on port: ";
const String INFO_NEW_CLIENT = "New client connected";
const String INFO_DISCONNECT_CLIENT = "Client disconnected";

// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
const String HTTP_HEADER = "HTTP/1.1 200 OK\r\nContent-type:text/html\r\n\r\n";
const String HTML_WELCOME = "<h1>Welcome to your ESP32 Web Server!</h1>";

// BASIC WIFI CONFIGURATION CONSTANTS

// The SSID (Service Set IDentifier), in other words, the network's name
const char *SSID = "<your_unique_SSID>";
// Password for the network
// By default the ESP32 uses WPA / WPA2-Personal security, therefore the
// the password MUST be between 8 and 63 ASCII characters
const char *PASS = "<your_password_here>";

2024 Cluj-Napoca 7
 Applicație Wi-Fi și server Web
// The default port (both TCP & UDP) of a WWW HTTP server number according to
// RFC1340 is 80
const int HTTP_PORT_NO = 80;

// Initialize the HTTP server on the ESP32 board

WiFiServer HttpServer(HTTP_PORT_NO);

void setup() {
Serial.begin(9600);

if (!WiFi.softAP(SSID, PASS)) {
Serial.println(SETUP_ERROR);
// Lock system in infinite loop in order to prevent further execution
while (1)
;
}

// Get AP's IP address for info message

const IPAddress accessPointIP = WiFi.softAPIP();
const String webServerInfoMessage = SETUP_SERVER_START +
accessPointIP.toString() + SETUP_SERVER_PORT + HTTP_PORT_NO;

// Start the HTTP server

HttpServer.begin();
Serial.println(webServerInfoMessage);
}

2024 Cluj-Napoca 8
 Applicație Wi-Fi și server Web
void loop() {
WiFiClient client = HttpServer.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println(INFO_NEW_CLIENT); // print a message out the serial port
String currentLine = ""; // make a String to hold request from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
const char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, that's the end of the client request
if (currentLine.length() == 0) {
// Send welcome page to the client
printWelcomePage(client);
break;
} else currentLine = "";
} else if (c != '\r') { // if not carriage return
currentLine += c; // add it to the end of the currentLine
}
}
}
// close the connection:
client.stop();
Serial.println(INFO_DISCONNECT_CLIENT);
Serial.println();
}
}
2024 Cluj-Napoca 9
 Applicație Wi-Fi și server Web

void printWelcomePage(WiFiClient client) {

// Always start the response to the client with the proper headers
client.println(HTTP_HEADER);

// Send the relevant HTML

client.print(HTML_WELCOME);

// The HTTP response ends with another blank line

client.println();
}

2024 Cluj-Napoca 10
 Cerere pagina web – pagină index

http://192.168.4.1
Welcome to the index page!

This will show the ESP32

filesystem capabilities, and
the web server capabilities.

The File System

The Web Server

2024 Cluj-Napoca 11
 Cerere pagina web – fără nume de fișier

GET / HTTP/1.1
Host: 192.168.4.1
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/120.0.0.0 Mobile Safari/537.36
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/ap
ng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: ro-RO,ro;q=0.9,en-US;q=0.8,en;q=0.7,pt;q=0.6,de;q=0.5

2024 Cluj-Napoca 12
 Cerere pagina web – cu nume fișier

GET /filesystem.html HTTP/1.1

Host: 192.168.4.1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/120.0.0.0 Mobile Safari/537.36
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/ap
ng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Referer: http://192.168.4.1/
Accept-Encoding: gzip, deflate
Accept-Language: ro-RO,ro;q=0.9,en-US;q=0.8,en;q=0.7,pt;q=0.6,de;q=0.5

2024 Cluj-Napoca 13
 Sistemul de fișiere SPIFFS
• SPIFFS – SPI Flash File Storage
– Un sistem de fișiere pentru memoria flash a micro-controller-ului ESP32
– O parte a memoriei flash poate fi folosită pentru a stoca fișiere
– Adresa și dimensiunea memoriei flash se gasește in folder-ul ESP32 din
mediul de dezvoltare Arduino

/System/Volumes/Data/Users/admin/Library/Arduino15/packages/esp32/hard
ware/esp32/2.0.11/tools/partitions/default.csv
# Name, Type, SubType, Offset, Size, Flags
nvs, data, nvs, 0x9000, 0x5000,
otadata, data, ota, 0xe000, 0x2000,
app0, app, ota_0, 0x10000, 0x140000,
app1, app, ota_1, 0x150000,0x140000,
spiffs, data, spiffs, 0x290000,0x160000,
coredump, data, coredump,0x3F0000,0x10000,

2024 Cluj-Napoca 14
 Sistemul de fișiere SPIFFS
• Se pot crea fișiere din programul ESP32
• Se pot muta fișiere de pe PC
– În acest caz trebuie creat un fișier imagine:

mkspiffs -c /Users/admin/Documents/Arduino/mySite -p 256 -b 4096 -s 0x160000 test.bin

Calea către folder Dimensiunea Dimensiunea

paginii si a blocului fișierului

# Name, Type, SubType, Offset, Size, Flags

nvs, data, nvs, 0x9000, 0x5000,
otadata, data, ota, 0xe000, 0x2000,
app0, app, ota_0, 0x10000, 0x140000,
app1, app, ota_1, 0x150000,0x140000,
spiffs, data, spiffs, 0x290000,0x160000,
coredump, data, coredump,0x3F0000,0x10000,

2024 Cluj-Napoca 15
 Sistemul de fișiere SPIFFS
• După ce fișierul imagine a fost creat esptool este folosit pentru a il scrie in
memoria flash a ESP32

esptool --chip esp32 --port /dev/cu.usbserial-0001 --baud 921600 --before default_reset --

after hard_reset write_flash --flash_freq 80m --flash_size 4MB 0x290000 test.bin

Portul serial Adresa de scriere

# Name, Type, SubType, Offset, Size, Flags

nvs, data, nvs, 0x9000, 0x5000,
otadata, data, ota, 0xe000, 0x2000,
app0, app, ota_0, 0x10000, 0x140000,
app1, app, ota_1, 0x150000,0x140000,
spiffs, data, spiffs, 0x290000,0x160000,
coredump, data, coredump,0x3F0000,0x10000,

2024 Cluj-Napoca 16
 Sistemul de fișiere SPIFFS
// list the files in the directory
void listDir(fs::FS &fs, const char * dirname, uint8_t levels){
File root = fs.open(dirname);
if(!root){
Serial.println("- failed to open directory");
return;
}
if(!root.isDirectory()){
Serial.println(" - not a directory");
return;
}
File file = root.openNextFile();
while(file){
if(file.isDirectory()){
Serial.print(" DIR : "); Serial.println(file.name());
if(levels){
listDir(fs, file.name(), levels -1);
}
} else {
Serial.print(" FILE: "); Serial.print(file.name());
Serial.print("\tSIZE: "); Serial.println(file.size());
}
file = root.openNextFile();
} https://www.tutorialspoint.com/esp32_for_iot/esp32_for_iot_spiffs_storage.htm

}
2024 Cluj-Napoca 17
 Sistemul de fișiere SPIFFS

// read the content of a file into a string

String readFileString(fs::FS &fs, const char * path){

String s;
File file = fs.open(path);

if(!file || file.isDirectory()){
return "";
}

while(file.available()){
s = s + (char)file.read();
}
file.close();

return s;
}

2024 Cluj-Napoca 18
 Sistemul de fișiere SPIFFS
// write a String to a file
void writeFile(fs::FS &fs, const char * path, String message){

Serial.printf("Writing file: %s\r\n", path);

File file = fs.open(path, FILE_WRITE);
if(!file){
Serial.println("- failed to open file for writing");
return;
}

if(file.print(message)){
Serial.println("- file written");
} else {
Serial.println("- write failed");
}

file.close();

2024 Cluj-Napoca 19
 Server Web folosind SPIFFS

#include "FS.h"
#include "SPIFFS.h"

#include <WiFi.h>
#include <WiFiAP.h>
#include <WiFiClient.h>

// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
const String HTTP_HEADER = "HTTP/1.1 200 OK\r\nContent-type:text/html\r\n\r\n";

// BASIC WIFI CONFIGURATION CONSTANTS

// The SSID (Service Set IDentifier), in other words, the network's name
const char *SSID = "ESP32 web server";

// The Server object

WiFiServer HttpServer(80);

2024 Cluj-Napoca 20
 Server Web folosind SPIFFS
// File system setting - do not format if fail
#define FORMAT_SPIFFS_IF_FAILED false
void setup(){
Serial.begin(115200);

// Initialize SPIFFS file system

if(!SPIFFS.begin(FORMAT_SPIFFS_IF_FAILED)){
Serial.println("SPIFFS Mount Failed");
while (1) ; // Freeze here
} else Serial.println ("SPIFFS Mount OK");

// set up the access point

if (!WiFi.softAP(SSID)) {
Serial.println("Failed to set up access point");
while (1) ; // Freeze here
}

// Get AP's IP address for info message

const IPAddress accessPointIP = WiFi.softAPIP();
// Start the HTTP server
HttpServer.begin();
const String webServerInfoMessage = "Access point set up " +
accessPointIP.toString() + " and web server on port 80";

Serial.println(webServerInfoMessage);
}

2024 Cluj-Napoca 21
 Server Web folosind SPIFFS
void printPage(WiFiClient client, String page)
{
// Always start the response to the client with the proper headers
client.println(HTTP_HEADER);

String fname = "/index.html"; // default file name if none specified

if (page.indexOf("htm") >= 0)
fname = "/“ + page; // real file name if specified

// Send the relevant HTML

String HTML_WELCOME = readFileString (SPIFFS, fname.c_str());

client.print(HTML_WELCOME);

// The HTTP response ends with another blank line

client.println();
}

2024 Cluj-Napoca 22
 Server Web folosind SPIFFS
String getRequestFileName (String& request)
{

String fname = "";

// parse request
int g = request.indexOf ("GET /");
if (g >= 0) {
String afterGet = request.substring(g+5);

int h = afterGet.indexOf (" HTTP/");

if (h >= 0)
fname = afterGet.substring(0, h);
}

return fname;
}

GET / HTTP/1.1

GET /filesystem.html HTTP/1.1

2024 Cluj-Napoca 23
 Server Web folosing SPIFFS
void loop(){
WiFiClient client = HttpServer.available(); // listen for incoming clients
if (client) { // if you get a client,
String request; // this contains the request from the client
Serial.println("New client connected"); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
const char c = client.read(); // read a byte, then
request = request + c; // add it to the request string
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, end of request, send response.
if (currentLine.length() == 0) {
String fname = getRequestFileName(request);
Serial.println ("The client wants the file: "+ fname);
printPage(client, fname); // Send welcome page to the client
break;
} else currentLine = "";
} else if (c != '\r’) {
currentLine += c; // add read character to current line
}
}
}
client.stop(); // close the connection:
Serial.println("Client disconnected."); Serial.println();
}
2024 Cluj-Napoca 24
 Capabilități CSS

index.html

Va fi setată din cod (ESP32)

style.css
2024 Cluj-Napoca 25
 Capabilități CSS

const String CSS_HEADER = "HTTP/1.1 200 OK\r\nContent-type:text/css\r\n\r\n";

void printPage(WiFiClient client, String page) {

// Always start the response to the client with the proper headers

if (page.indexOf("css") > 0)
client.println(CSS_HEADER);
else
client.println(HTTP_HEADER);

String fname = "/index.html";

if (page.indexOf("htm") >= 0 || page.indexOf("css") >= 0)

fname = "/" + page;

// Send the relevant HTML

String HTML_WELCOME = readFileString (SPIFFS, fname.c_str());

client.print(HTML_WELCOME);

// The HTTP response ends with another blank line

client.println();
}

2024 Cluj-Napoca 26
 Capabilități CSS

Fără CSS Cu CSS

2024 Cluj-Napoca 27
 Librăria ESP Async Web Sever
• ESP Async Web Server
– Ascultă după cereri de conexiune
– Încapsulează clienți noi într-un Request
– Ține evidența clienților și se ocupă de ”curățarea” memoriei
– Server-ul poate accepta noi conexiuni in timp ce deservește Request-urile existente
– Viteză mare de procesare
– API ușor de folosi, HTTP basic și authetificare Digest MD5
– Ușor de extins pentru a accepta orice tip de conținut

https://github.com/me-no-dev/ESPAsyncWebServer
https://github.com/me-no-dev/AsyncTCP

2024 Cluj-Napoca 28
 Librăria ESP Async Web Sever

// Import required libraries

#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h"

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

// Set LED GPIO

const int ledPin = 2;
// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/

2024 Cluj-Napoca 29
 Librăria ESP Async Web Sever
void setup(){
Serial.begin(115200); // Serial port for debugging purposes
pinMode(ledPin, OUTPUT);
if(!SPIFFS.begin(true)) {// Initialize SPIFFS
Serial.println("An Error has occurred while mounting SPIFFS"); return; }
// set up the access point
if (!WiFi.softAP(ssid)) {
Serial.println("Failed to set up access point");
while (1); }
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", String(), false, processor); });
// Route to load style.css file
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/style.css", "text/css"); });
// Route to set GPIO to HIGH
server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, HIGH);
request->send(SPIFFS, "/index.html", String(), false, processor); });
// Route to set GPIO to LOW
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, LOW);
request->send(SPIFFS, "/index.html", String(), false, processor); });
// Start server
server.begin();
}
2024 Cluj-Napoca 30
 Librăria ESP Async Web Sever
// The processor() function is what will attribute a value to the placeholder
// we’ve created on the HTML file. It accepts as argument the placeholder and
// should return a String that will replace the placeholder.

String processor(const String& var){

Serial.println(var);
if(var == "STATE"){
if(digitalRead(ledPin)){
ledState = "ON";
}
else{
ledState = "OFF";
}
Serial.print(ledState);
return ledState;
}
return String();
}

void loop ()
{
// nothing in the loop
}

2024 Cluj-Napoca 31
 Concluzii ESP32 Wi-Fi & SPIFFS
• ESP32 poate fi configurat atât ca AP cât și ca client Wi-Fi
• Un server TCP poate fi configurat pe un anumit port
• Un client TCP se conecteaza pe o adresă IP și un port specific
• Comunicarea este realizată prin intermediul clasei WiFiClient
• SPIFFS poate stoca fișiere  oferă posibilitatea de a crea aplicații mai complexe
• Librăria ESP Async Web Server poate fi folosită pentru a seta pagini web
complexe care deservesc multiple conexiuni simultane

2024 Cluj-Napoca 32
 Referințe
1. https://randomnerdtutorials.com/esp32-access-point-ap-web-server/
2. https://docs.espressif.com/projects/esp-idf/en/v4.2.5/esp32/api-
reference/storage/spiffs.html
3. https://www.tutorialspoint.com/esp32_for_iot/esp32_for_iot_spiffs_storage.htm
4. https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/
5. https://github.com/me-no-dev/ESPAsyncWebServer
6. https://github.com/me-no-dev/AsyncTCP

2024 Cluj-Napoca 33