ESP32 Relay Web Server

Pages
Contributors: Elias The Sparkiest
Favorited Favorite 11

Source Files

Download the Source Files

After installing the Libraries detailed above you can now download the source files here or clink the button below. From here you can modify the wifi credentials within the home.json file and then move onto the Hardware section. However, let's look at the overall file structure within the zip file.

What's inside the Source Files?

alt text
Screenshot of the Source Files

At the top you can see the Home directory. This directory has the scripts, images, and style sheets that control the main web page. Below that is the IR_Switch Directory which has the sketch that controls the IR tripwires. Let's look inside the home directory.

alt text
Inside the home directory

Here home.ino is supported by two other .ino scripts. If you open home.ino in Arduino you'll see a few tabs that include the other two Arduino sketches: manage_config_file.ino and relayFunctions.ino. The sketch was split into separate files for better organization because home.ino was simply too long to easily navigate. When you upload these onto the ESP32 all three of the sketches will be uploaded as one single sketch. The data folder here holds the files that will be uploaded to the ESP32 module using the ESP32 upload tool. This is different then uploading a sketch.

alt text
ESP32 SPIFFS upload in the "data" Directory

The name of the folder is specifically named data because the ESP32 upload tool looks for a "data" folder in the home directory of the currently opened sketch: home.ino. The contents of data are placed onto the ESP32 as a file system allowing us to access them for our webpage. Many of the pages here are simply the supporting cast members of the webpage - more on that in the Explanation of the Webpage Files below, with the exception of home.json which has the wifi credentials and the states of the relay.