×
SparkFun will be closed on Tuesday, November 5th to support our team in being able to go out and vote! Orders placed after 2 pm MT Monday, November 4th will ship on Wednesday, November 6th. Thanks for your patience and understanding.
Enginursday: ESP32 Relay Web Server, Part One
This is the third post in my ongoing ESP32 Relay Web Server project.
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 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:
Thanks for sharing the tutorial of Relay Web server working. :)
Awesome tutorial! Thanks!
It's encouraging to know that people are taking a look, thanks for the comment!