×

We are still shipping! However, order processing may take longer than usual and we cannot guarantee same day shipments due to staffing guidelines from the CDC. Please see all COVID-19 updates here. Thank you for your continued support.

Enginursday: ESP32 Relay Web Server, Part One

This is the third post in my ongoing ESP32 Relay Web Server project.

Favorited Favorite 3

Hello dear customers and Happy Holidays! I have a short post for you today, and an update to my ongoing tutorial that I've been working on. This is officially the third post that refers to this project, the other two can be found here and here.

This image shows a picture of SparkFun's ESP32 thing Plus and Quad Relay connected together with a Qwiic connector, each being powered through a wall wart.

This project-turned-tutorial demonstrates how to start with an ESP32 Thing Plus and load the appropriate files, libraries and tools to turn the ESP32 into a web server that controls relays.

The tutorial does not just show you how to piece the hardware and software together, it explains how each individual component works. For example, the latest installment focuses on HTML, Cascading Style Sheets (CSS), Javacript (JS), and the Bootstrap toolkit. Within the tutorial are explanations of how these markup and programming languages interact to make a website and what Bootstrap provides as a toolkit.

Additionally, with regards to the ESP32, it also explains which pre-built Bootstrap CSS and JS files represent the smallest memory impact option. There is only 16MB of Flash Memory (eye roll) to store all the necessary files for an entire web server on an ESP32 after all!

As a final note this project is ongoing, which means it's not complete. I used my best judgment when deciding which topics were too distracting from the project, but if you feel an urge to leave a comment about what you'd like to see, then capitalize on that impulse, dear reader! Lastly, I've included a timeline under the section title What next? that outlines what needs to be added and what has been added. Here's the outline as it stands right now.

To Do

1. Add section on Bootstrap fies: bootstrap.min.CSS and bootstrap.min.JS. What are they and what do they do?
2. Add section on the ESP32 File Structure and where files live.
3. Add section on JSON files and Arduino JSON to store data related to WiFi settings and the state of each individual relay.
4. Add section on AJAX requests and Websockets in place of straight GET requests.
5. Add relay control function to our requests.
6. Add Hardware Section for ESP32 and Relay.
7. Add troubleshooting section to tutorial.
8. Update tutorial with the Infrared tripwires Arduino Sketch and fill in details on the hardware hookup.

As I've already mentioned if there is something you'd like to see that isn't already covered in the tutorial and isn't on this list, please leave a comment down below. Ah, and of course, a link for the tutorial:


Comments 3 comments

Related Posts

Recent Posts

Tags


All Tags