ESP32 Thing Plus, Bootstrap, SPIFFs, and ESPAsync

Pages
Contributors: Elias The Sparkiest
Favorited Favorite 0

Introduction

This tutorial details how to turn an ESP32 Thing Plus into a good looking and responsive Web Server that controls four relays via I²C. The web page's theme and its' scalability from desktop to mobile phone will be made possible with Bootstrap - a toolkit for HTML, JS, and CSS. The Arduino Sketch is modified from the the ESPAsync File System Browser example code from the ESPAsync library and is used in conjunction with SPIFFS (SPI Flash File System) which turns your ESP32 into a hard drive that can hold all the dependent files for Bootstrap and the functions for turning on and off relays. This tutorial is based off a series of blog posts that share the intent and pit falls of this project as it grew. The first two in the series can be found here: Infrared tripwires to automate light switching and The ESP32 Web Server. Even if you decide to not use this to automate your lights, you can still use the information to create a good looking web page for your ESP32 that does something awesome; just make sure to leave a comment.

What's next?

You can check back here to see what's next to be updated, this will be updated as the tutorial grows. If you have any questions or suggestions, place them in the comments below.

To Do

  1. Update the Tutorial with the ESP32 Web Server section. Everything up to loading HTML, Bootstrap, and JS scripts onto ESP32 Thing Plus, this includes installing ESPAsync library and detailing what is needed in Bootstrap, resources for installing various requirements.
  2. Update tutorial with the Infrared tripwires Arduino Sketch and fill in details on the hardware hookup.
  3. Return to the ESP32 Web Server and introduce AJAX requests in place of straight GET requests.
  4. Implement I²C functions for relays.
  5. Add JSON files to store data related to WiFi settings and the state of each individual relay.
  6. Add a separate login web page when default WiFi settings don't connect to WiFi.
  7. Add trouble-shooting section to tutorial.

Hardware - FSBrowser Web Server

Hardware for the web server:

SparkFun Thing Plus - ESP32 WROOM

SparkFun Thing Plus - ESP32 WROOM

WRL-14689
$20.95
6
SparkFun Qwiic Quad Relay

SparkFun Qwiic Quad Relay

COM-15102
$29.95
1
Qwiic Cable - 200mm

Qwiic Cable - 200mm

PRT-14428
$1.50

Hardware Assembly - FSBrowser Web Server

Hardware - Infrared Trip Wires

Hardware for the Infrared Tripwires:

Resistor Kit - 1/4W (500 total)

Resistor Kit - 1/4W (500 total)

COM-10969
$7.95
157
Jumper Wires - Connected 6" (M/M, 20 pack)

Jumper Wires - Connected 6" (M/M, 20 pack)

PRT-12795
$1.95
2
SparkFun ESP8266 Thing - Dev Board

SparkFun ESP8266 Thing - Dev Board

WRL-13711
$16.95
69
Transistor - NPN, 50V 800mA (BC337)

Transistor - NPN, 50V 800mA (BC337)

COM-13689
$0.50
IR Receiver Diode - TSOP38238

IR Receiver Diode - TSOP38238

SEN-10266
$1.95
LED - Infrared 950nm

LED - Infrared 950nm

COM-09349
$0.95
2

Hardware Assembly - Infrared Trip Wire

This image shows a Fritzing diagram that outlines the circuits connections.

Libraries and necessary Software