A LED controller

Controlling all the RGB via the web!

Posted on May 6, 2020

This is a project I've been wanting to do for a very long time, but never had the time or knowledge to finish it properly. The idea of a simple color wheel with which I could control a RGB LEDstrip has been on my mind since I got my first ESP8266 module. When attempting this project I ran into the project of finding a suitable color picker as I knew nothing about javascript. But when my sister asked me to make some LEDstrips so she could attach them to her ceiling I knew the time had come to finally make it real. The complete project can be found here on my GitHub page.

How does it work?

This project is based around a simple HTML page served to a connecting client which then communicates via GET and POST requests with the host, an ESP8266 module. The color wheel is made using this brilliant library which made the color picking a whole lot easier. By implementing one of the event triggers it was possible to send a message to the ESP8266 when a color was chosen. A picked color is stored and send in a JSON format. This made it easy to extract on the host's side. Beneath you find a functional example of the webpage.

On the ESP8266's side I made use of the excellent WebServer library available. I registered two functions to be called when a POST or GET request was received on /led. For any other files the SPIFFS file system was used. When a message was received that was not registered to a function, the ESP8266 would look in its file system if that file existed and otherwise send a 404 error. This made it easy to upload new files without erasing the firmware.

The POST request accepted a JSON message containing the R, G, and B values. These got extracted and stored in a global variable. When a GET request was received, these global variables were repackaged in a JSON message and returned to the client. This made it possible to set the color wheel to the current color when a new client connected. The last thing to do was write the globals to the PWM outputs in the main loop.

When implementing this controller in my sisters room I ran into a problem. At first I had configured the color wheel to send a new color on every change. This meant that a ton of messages were send to the ESP8266 as you slide over the wheel. This made the module hang and eventually reboot. By changing this to only sending a color on the last choice it is much more stable.

Update: Sockets make it better!

After finishing this project I started using this technique of controlling projects via a webpage more often. But one thing kept bothering me and that is the long time it took to perform the GET/POST request. Trying to find a way to speed things up I stumbled upon WebSockets. This concept seemed perfect for the usage in my projects.

The newest release of the LED controller firmware now includes a websocket server (courtesy of Gilmaimon) and a simple CSV parsing structure. This way I can reliably send packages of data to the ESP module.

To get this new feature to work properly I had to make sure that the webpage closed the websocket client before reloading or closing the page. If this was left to the browser, in my case Google Chrome, it would flood the ESP module with closing requests resulting in a crash. To counter this the following was added to the javascript:

window.onbeforeunload = function () {
  socket.close();
  window.location.reload(true);
};

This tells the browser to close the WebSocket client named socket and to reload the page. The latter does the same as the refresh button but in my testing I found that this was necessary to counteract the closing requests "bug".