Acoptex.com

members

Basics: Project 070h

Project name: ESP32 Development board - Web Server with SPIFFS

Tags: EESP32 Dev Module, ESP32 development board, ESP32 Development board with WiFi and Bluetooth, ESP32-DevKitC V4 development board, ESP-WROOM-32 module with ESP32‑D0WDQ6 chip, Espressif Systems, ESP32-based development board, ESP32 modules, ESP32-WROOM-32, ESP32-WROOM-32U, ESP32-WROOM-32D, ESP32-SOLO-1, USB-UART bridge, IOT, ESP-WROOM-32 Dev Module, ESP32 DEVKITV1, Installing the ESP32 Board in Arduino IDE, Uploading sketch, ESP32 Development board Filesystem Uploader, Serial Peripheral Interface Flash File System, SPIFFS, Web Server with SPIFFS, web server

Attachments: library1, library2, sketch1

In this project, you need these parts :

1. ESP32 development board with WiFi and Bluetooth and USB A / micro USB B cable 1 pc

2. Arduino IDE ( you can download it from here  )

3.Jumper cables F-M, M-M

4. Resistor 2 pcs (220 Ohm)

5.LED 2 pcs (can be of different color)

6. Breadboard 1 pc

General

We will learn how to create a standalone web server with an ESP32 development board to switch ON/OFF two LEDs. HTML and CSS files stored on the ESP32 filesystem.

Project notes:

1. The web server you’ll build controls two LEDs connected to the ESP32 Development board GPIO 22 and GPIO 23;
2. The web server page shows two buttons for each LED: ON and OFF – to turn the corresponding GPIO (22 or 23) on and off;
3. The web server page also shows the current GPIO 22 and GPIO 23 state;
4. The ESP32 Development board runs a web server code;
5. The HTML and CSS files are stored on the ESP32 Development board's SPIFFS;
6. When you make a request on a specific URL using your browser, the ESP32 Development board responds with the requested files;
7. When you click the ON button - the LED is turned ON;
8. When you click the OFF button - the LED is turned off;
9. There is the GPIO state on the web page (located in  the HTML file between % signs).

Understanding the SPIFFS

The ESP32 development board contains a Serial Peripheral Interface Flash File System (SPIFFS). SPIFFS is a lightweight filesystem created for microcontrollers with a flash chip, which are connected by SPI bus, like the ESP32 development board's  flash memory.

SPIFFS lets you access the flash memory like you would do in a normal filesystem in your computer, but simpler and more limited. You can read, write, close, and delete files. SPIFFS doesn’t support directories.

Using SPIFFS with the ESP32 Development board is specially useful to:

• Create configuration files with settings;
• Save data permanently;
• Create files to save small amounts of data instead of using a microSD card;
• Save HTML and CSS files to build a web server;
• And so on.

You can write the HTML and CSS used for the web server in a separated file and save them on the ESP32 Development board's filesystem with SPIFFS. It's very useful as in most of our web server DIY projects we have written the HTML code for the web server as a String directly in an Arduino sketch.

There is a plugin for the Arduino IDE that allows you to upload files directly to the ESP32 Development board's filesystem from a folder in your computer. This makes it really easy and simple to work with files as you do not need to type the content of your files in the Arduino sketch.

Understanding the ESP32 Development board with WiFi and Bluetooth

You can read more about it here.

Signals and connections of the ESP32 Development board with WiFi and Bluetooth

Wiring

The ESP32 is currently being integrated with the Arduino IDE like it was done for the ESP8266. There’s an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language.

1. Installing ESP32 add-on in the Arduino IDE (Windows 10 OS)

1. Download and install the latest Arduino IDE Windows Installer from arduino.cc
2. Download and install Git and Git GUI from git-scm.com
3. Search for Git GUI, right-click the icon and select “Run as administrator“
4. 
5. Select the Clone Existing Repository option.
6. 
7. Select source and destination. Source Location: https://github.com/espressif/arduino-esp32.git
8. Target Directory:C:/Users/[YOUR_USER_NAME]/Documents/Arduino/hardware/espressif/esp32
9. Do not create the espressif/esp32 folders, because they will be created automatically.
10. 
11. Click Clone to start cloning the repository.Wait a few seconds while the repository is being cloned.
12. 
13. 
14. Open the folder: C:/Users/[YOUR_USER_NAME]/Documents/Arduino/hardware/espressif/esp32/tools
15. Right-click the get.exe file and select “Run as administrator“.
16. 
17. You will see that necessary files will be downloaded and upzipped. It will take some time.
18. 
19. When get.exe finishes, you should see the following files in the directory.
20. 

2. Installing the Arduino ESP32 Filesystem Uploader

1. Download the ESP32FSv0.1.zip file. Home page on Github.
2. Go to the Arduino IDE directory and open the Tools folder.
3. 
4. Restart your Arduino IDE.
5. Open your Arduino IDE. Go to Tools menu. If you have the option ESP32 Sketch Data Upload Arduino ESP32 filesystem uploader was successfully installed.
6. 

3. Uploading files using the Arduino ESP32 Filesystem Uploader

1. Do wiring.
2. Plug the ESP32 development board to your PC and wait for the drivers to install (or install manually any that might be required).
3. Open Boards manager. Go to Tools -> Board -> Boards Manager… (in our case it’s the DOIT ESP32 DEVKIT V1)
4. Select COM port that the board is attached to (if you don’t see the COM Port in your Arduino IDE, you need to install the ESP32 CP210x USB to UART Bridge VCP Drivers)
5. 
6. You need three different files to build the web server: Arduino sketch, HTML file and CSS file. HTML and CSS files should be saved inside a subfolder with name data inside the Arduino sketch folder.
7. Creating the HTML File
   The HTML for this project is very simple. We just need to create a heading for the web page, a paragraph to display the GPIO state and two buttons.
   Make the HTML and CSS files. CSS, HTML and sketch are in this .zip file sketch1.
8. Open the ESP32WebServerSpiffs.ino sketch, modify SSID and password for your network and save it.
9. Open the sketch folder. Go to Sketch -> Show Sketch Folder. You will open the folder where your sketch is saved.
10. 
11. Make sure that you have subfolder with name data inside of this folder which contains two files - HTML and CSS.
12. 
13. 
14. Go to Tools -> ESP32 Sketch Data Upload to upload the files.
15. If everything went as expected, you should see a “SPIFFS Image Uploaded” message. (You need to hold the ESP32 on-board Boot button while uploading).
16. 
    
17. Press the ESP32 on-board EN button to reboot it. 
    
18. Compile ESP32WebServerSpiffs.ino sketch and upload it to your ESP32 development board. If everything went as expected, you should see a “Done uploading” message. (You need to hold the ESP32 on-board Boot button while uploading).
19. Press the ESP32 on-board EN button to reboot it.
20. Open the Serial Monitor at a baud rate of 115200. 
21. When your ESP32 development board restarts, you will see the IP address of your ESP32 development board in Serial monitor (we had 192.168.0.116)
22. 
23. You can access your web server, if you type your ESP32 development board IP address in your browser. In our case - http://192.168.0.116. You can easily switch on/off two LEDs connected to your ESP32 development board now. 
24. 
    

Code

We include the necessary libraries, define SSID and password for our network, create variables that refers to GPIO 22 and GPIO23 called led1 and led2, and a String variables to hold the leds state: led1State, led2state, result, create an AsynWebServer object called server that is listening on port 80.

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. This function first checks if the placeholder is the STATE we’ve created on the HTML file. If it is, then, accordingly to the led1 and led2 state, we set the led1State and led2State variables to either ON or OFF. Finally, we return the result variable. This replaces the placeholder with the result string value.

In the setup() we start by initializing the Serial Monitor and setting the GPIO 22 and GPIO 23 as an output.Then initialize SPIFFS, connect to Wi-Fi and print the ESP32 IP address.

The ESPAsyncWebServer library allows us to configure the routes where the server will be listening for incoming HTTP requests and execute functions when a request is received on that route. For that, use the on() method on the server object as follows:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

  request->send(SPIFFS, "/index.html", String(), false, processor);

});

When the server receives a request on the root / URL, it will send the index.html file to the client. The last argument of the send() function is the processor, so that we are able to replace the placeholder for the value we want – in this case the result.

Because we’ve referenced the CSS file on the HTML file, the client will make a request for the CSS file. When that happens, the CSS file is sent to the client:

server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){

  request->send(SPIFFS, "/style.css","text/css");

});

Finally, you need to define what happens on the /on1 , /off1 routes and /on2 , /off2 routes. When a request is made on those routes, the LED1 or LED2 is either turned on or off, and the ESP32 serves the HTML file.

We use the begin() method on the server object, so that the server starts listening for incoming clients.

Because this is an asynchronous web server, you can define all the requests in the setup(). Then, you can add other code to the loop() while the server is listening for incoming clients.

Summary

We have learnt how to create a standalone web server with an ESP32 development board to switch ON/OFF two LEDs. HTML and CSS files stored on the ESP32 filesystem.

Libraries

• All libraries attached on the begining of this project description.
• ESPAsyncWebServer library included. Download, unzip  and add to libraries in our PC, for example C:\Users\toshiba\Documents\Arduino\libraries. This link you can find in Preferences of Adruino IDE program which installed in your PC. You can read more about it here.
• Async TCP library included. Download, unzip  and add to libraries in our PC, for example C:\Users\toshiba\Documents\Arduino\libraries. This link you can find in Preferences of Adruino IDE program which installed in your PC. You can read more about it here.

Sketch

• See attachments on the begining of this project