I recently purchased several new lights for an auxiliary workspace in my room, but there was a problem: it took far too long to turn the lights on and off. I also wanted to add some colored ambient lighting, and that also needed a way to be controlled, so I decided to create a web-based controller and WiFi-connected hardware to adjust the lights.
First and foremost, there had to be a webserver running the necessary services, such as MySQL, NodeJS, and Apache. I have published a guide on how to convert an old PC into a home server that can run all of these, which can be viewed here. If you don’t wish to use an entire PC, a simple Raspberry Pi can work, albeit quite a lot slower.
The hardware includes a relay that is rated for up to 120V AC @ 10A for the primary lights, an analog LED strip, a few MOSFETs, and finally, an ESP32 for the brain.
I chose to use SparkFun’s ESP32 Thing board, but almost any ESP32 board variant should suffice.
I began the project by first diagramming what exactly I wanted the DB to capture, including the state, color, and location of each light involved. I accomplished this by making an ER (entity-relationship) diagram as follows, and it shows that each Light has an ID, on/off value, and location.
Additionally, RGB lights inherit the traits above, but also have an RGB value as well. The tables closely mirror the ER diagram, and they were set up like so:
Finally, I added two lights to the DB: one regular Light, and one RGB Light.Node.JS Backend Webserver
In order to facilitate communication between the web client, DB, and ESP32, I needed to add a webserver into the stack. At a basic level, it takes in requests via an API to change the color/state of the lights, which get stored in the DB via queries. Clients are also able to access the current values of two of the lights via an API, and they receive a JSON object back, which contains the RGB and state values.
Credentials for the MySQL DB are stored in the config.js file, along with the IDs of the lights being controlled and the port the service is running on.
The lights are controlled by a webpage that is hosted on an Apache webserver. It features a sliding switch, preview window, RGB sliders, and a few preset buttons. Whenever the user changes the color, it sends that data to the NodeJS server.
It also gets the current value from the server every few seconds, which allows for multiple users to have concurrent access.The ESP32 Program
Lastly, the ESP32 runs a program that fetches the current values from the NodeJS webserver, parses them, and displays them on the lights. In the setup() function, the board connects to the WiFi AP, the RGB pins are attached to three PWM timers, and the relay pin is set as an output.
The loop() function first checks if the board has a connection to the AP, and if it does, it sends a GET request to the server, and gets a response in the form of a String. That payload is then parsed into a JSON object using the ArduinoJSON library, and then the values are sent to their respective functions to change the states of the lights.
In the future, I would like to modify the web interface to allow for new lights to be added, as well as select multiple ones from a list. That way, the entire system can scale easily. Imagine, clicking on a light that is inside of a lamp, knowing that it’s toggleable, and being able to change it by clicking a button on your phone from bed.