ESP32 Relay Web Server, Part Two

It's been a while; today we'll look at serialization using the ArduinoJSON library.

Favorited Favorite 1

As with everything regarding this particular moment in history, the ESP32 web server project I planned on finishing months ago has been delayed. With that said, I've found some time between working at home and taking care of my little scamp to put some work into deserializing and serializing relay states and WiFi credentials.

If you weren't here months ago when this project started, then let me give you a short rundown on the ESP32 Relay Web Server. The project started with two Infrared transmitter/receiver pairs to count the number of people entering and exiting a room, and triggering a relay to turn the lights on or off as needed. ESP32 web server projects tend to have simple web pages, but I wanted something with a bit of color, some images maybe, to just look better so I did a post on utilizing Cascading Style Sheets and Bootstrap, which brings us to today!

So for the latest installment we're looking at serialzing and de-serializing information regarding WiFi Settings and Relay states. Serializing refers to the process of turning data into a format that can be stored. In this project specifically, I'm utilizing ArduinoJSON to serialize or deserialize information from a JSON file to be loaded into the Arduino sketch. Remember JSON is a great tool for storing information in a standard format and can be easily scaled up within the limits of the memory available to the ESP32.

ESP32 Relay Web Server

September 10, 2019

The goal of this project is to have a website hosted on an ESP32 that controls any relay controlled device connected to a local network and keeps a dynamically updated state of those devices.

This project is too large for a single blog post, so it's hosted as an ongoing tutorial. Below is the running TO DO list I have for the project. This list is updated up to today's post, which strikes item number three and eight from the list.

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.

Comments 4 comments

  • Member #134773 / about 4 years ago / 1

    Another item for your "To Do" list for the Tutorial: switch from the retired COM-15102 to its replacement the COM-16566.

    I've been toying with the idea of using something like this to control an IoT Power Relay (to turn off a light once I'm in bed). (The IoT Power Relay isn't a "QWIIC" thing, just connect to a GPIO pin and GND.)

    • Elias The Sparkiest / about 4 years ago / 1

      Good catch, fixed. Yeah as a bonus this would accomplish that. For other rooms in the house I could monitor and turn off lights as needed.

  • North Alabama PC / about 4 years ago / 1

    Can this be login protected and accessed from the web?

    • Elias The Sparkiest / about 4 years ago / 1

      Yes it can be login protected, but I'm not so sure about accessing it from the web.

Related Posts

Under Pressure

Recent Posts


All Tags