SECRET OF CSS

Building an Internet-Controllable LED Strip | by Michael K | Sep, 2022


What happens when you let your coworkers control your lighting

Picture of my office’s backdrop which consists of a bookcase with lots of books/knick knacks on it

I wanted to spruce up the backdrop in my office by adding some lighting, and I figured what would be better than controllable RGB LEDs? I also thought it would be funny and potentially interesting to give my coworkers the ability to change the color of my lighting — I guess until we get too distracted in a meeting.

At first, I thought to do a polling approach where I would poll the server and see what the latest color selection was and then update the DotStar locally. My main gripe with this idea was how inefficient this method would be since it would take seconds to see the change reflected (both locally and for other potential Users).

The best method, in my opinion, was to use a WebSocket. This way, the changes could be instantly reflected for everyone and remove any delay. This also simplified the server-side setup since I would just have to host a simple WebSocket server, with no database or routes required.

Using the WebSocket, whenever a User sends a new color the server takes this message and validates the color, and then rebroadcasts it to the other WebSocket clients so they know about the new color that’s been chosen.

GIF showing how the system works

Hardware setup

The DotStar strip I chose came with JST SM connectors on each end so I purchased the matching connectors as well to make connecting to my device easier. I soldered and crimped female DuPont connectors on the end so that I could easily remove the device from the install if I needed to correct some code for example.

JST-SM connector with female DuPont connectors + a D1 Mini with Male headers soldered onto it
JST-SM connector with female DuPont connectors + a D1 Mini with Male headers soldered onto it

Since DotStar supports SPI, I opted to hook it up this way — Adafruit mentions this is the preferred method regardless since it is quicker than the bit-bang approach. I’m using a D1 Mini (ESP8266), so I hooked up the SCLK (Yellow) to D5 and the MOSI (Green) to D7 but this will vary depending on the device you are using.

Power requirements

Since we have so many LEDs, a good power supply with enough amperage is required since the microcontroller won’t supply enough current. Adafruit suggests estimating 60 milliamps peak draw per DotStar if you have it at full white with full brightness. The strip I purchased has 60 LEDs so in total, so at most I’ll only need 3.6A.

Adafruit sells a 12V 5A power supply that I will use to power the project, but we’ll need a step-down regulator to convert the 12V supply to 5V as DotStars only take 5V. I found this converter on Amazon which has worked great so far and will also give me some room to add additional segments if desired. Adafruit also sells a screw terminal adapter so you can easily hook up your power supply to your project, which I also picked up for this project.

A regulator is shown on a table with wires hooked up to it from each terminal
12V to 5V step-down regulator

Software setup

As covered in one of my previous articles, we are able to use MicroPython on the ESP8266 so I opted to use it once again for this project. Luckily for me, a WebSocket library and DotStar library have already been created for MicroPython, so I was able to load these easily which sped up my development greatly.

Server

I set up a simple WebSocket server using the ws library in Node.JS. Using systemd, I set the server up as a service so that it will run indefinitely and collect the logs for us as well. When a User first connects, the server will relay whatever the last color that was chosen, this way all Users are synced. As only my microcontroller will be using the non-secure server, the messages from this connection are not rebroadcasted to the secure server.

Microcontroller

The script first handles connecting to the network and starting the WebSocket client. It attempts to read a message every five seconds and will timeout if it fails to help prevent it from getting stuck waiting for a message if the server hiccups for some reason. Regardless of whether or not it gets a message, it’ll also send an empty message back to the server to help keep the connection alive and help sniff out any connection issues and reconnect if needed.

User interface

The user interface was quite simple since it doesn’t do too much so I used Angular and ngx-color to provide the color swatch component. It connects to the same WebSocket server and takes the colors picked and converts them to the RGB value (as this is what the DotStar uses ultimately). This also makes validation much easier as we know the values can only be in a particular format between certain numbers (0–255).

A screenshot of a web application is shown with a color picker interface shown with lots of preset colors as well.
The color swatch is shown to Users to help them pick a new color

While this project went quickly, it was still super fun! There’s lots of room for expansion with this project, such as blending colors, patterns, color history, and much more. I’ll keep tinkering with this idea but I’d be interested to hear any ideas for this you may have!



News Credit

%d bloggers like this: