Internet Controlled LED Lights

How would YOU like to control the light strip hanging in my living room? Well, as long as the LED strip is plugged in, you now can! For this project, I created a web-based GUI that updates the color of my 50 pixel WS2811 strip in real time.

Try it for yourself here.

The first step in this project was creating the web page through which users could select different colors to be displayed on the LED strip. I started by using a generic HTML/CSS template that I developed for my site, which includes the basic formatting to create a background, a navigation menu, and a page title. The next step was creating the GUI to control the lights with. I knew that the GUI would be composed of multiple buttons with each button signifying a differnt color to select.

At this stage, I had two options; the first option was the use an HTML button with an onclick event that calls a JavaScript function for each color. All of these JavaScript functions would then use JQuery to create Ajax calls to a PHP script. The PHP script would transfer the user input into a MySql database. The second option was to use an HTML form that would 'post' data to a PHP script, which would then transfer the user input into a MySql database.

Because the second method was much more accessible to someone like me (who has never used JQuery or Ajax), I landed on using that one. However, learning about Ajax is next up on my list of web development priorities.

Shown below [left] is the very simple HTML GUI that I created. Also below [right] is an excerpt from the PHP script that I created to save the user input into a table in a MySql database. Depending on which button is clicked, a different function runs, and each function saves a unique 8-bit RGB value into the MySql table. For example, if the user clicks the 'Blue' button, then the PHP script saves the RGB values ('0', '0', '255') into the table.

After that was done, the only remaining server side work was to create another PHP script that would allow me to then access the database to read what is stored there. The simple PHP shown below responds to an HTTP GET request by returning all of the 8-bit RGB data stored in the MySql table.

Next, I needed to figure out how to use that data to control the LED lights. Because I use Arduinos all the time, I decided to mix it up and use my Raspberry Pi Model 4 to control the light strip. As naturally follows, I decided to use Python 3 to facilitate the data retrieving and LED control process. I used the 'requests' library to send HTTP GET requests and retrieve the RGB data, and the Adafruit 'neopixel' library to control the LED strip after I had retrieved the RGB data. Shown below are two excerpts from the Pyhton script; the code on the left is the data retrieval process, and the image on the right is the LED controlling process.

NOTE: Creating an HTTP GET request was not my first idea for retrieving the data. At first, I used a MySQL Python library to remotely connect to my MySQL server and retrieve the data directly from the table. However, this required constantly connecting and reconnecting from the MySQL host server, so I changed to HTTP GET requests instead to speed up the entire data retrieval process.

After that, all I needed to do was hook up the light strip to my Pi and it was done! The average latency between when the web page button is clicked and when the lights are updated is around 1/2 second, which is quite impressive for how much that data has to move around in order to reach the Pi.

NOTE: After a few days, I got tired of needing to use a keyboard and mouse with the Pi. So, I rewrote some of the code in C++ and now use an ESP8266 module to control the lights. The functionality is the same, but I used the 'HTTPClient' library to make the HTTP requests.

Check out the Python code for this project here.