This project describes an easy way to control a strip or ring of WS2812 LEDs via a web page. It was originally based on the Arduino FastLED library.
Although the FastLed library code gives us a great example of how to control NeoPixel rings and strips, it doesn’t provide for user interaction. So it was decided to add the ability to control the device by wi-fi, and also have a touch switch for local control.
Materials required A Wemos D1 Mini module was used as it consisted of a low-cost ESP8266 wifi chip and antenna, and it can be programmed by the familiar Arduino software. The Wemos module sits in a socket which is soldered to a matrix circuit board. This allows the module to be swapped out if needed, and also makes it easier to connect the touch-switch and neopixel wires.
A touch switch module was chosen rather than a discrete push-switch as it can be hidden behind the acrylic case and should also provide more reliable switching. The 100 x100 x 25mm square case was laser cut from 3mm acrylic, and was designed using the makercase on-line designer. This is the quickest software for making simple boxes. An extra 100mm square piece was cut for the front, with two circular cuts to accommodate the neopixel ring so it can lie flush with the front surface. Later, the touch-switch hole was cut so the sensor sits behind only one thickness of acrylic.
Laser cut acrylic case
The components fitted easily inside the box – it has plenty of room for a battery pack if you wanted to make it totally portable.
The touch switch sits in a rectangular cut-out.
Here is a view before the centre cover is glued on.
Software overview. The project uses websockets so that any web browsers connected can control (and be controlled) by the device. The touch-switch also controls the software and the settings are communicated to all connected browsers via websockets in real time.
User settings are stored in an object, derived from the ‘userDataClass’. This object stores settings for the brightness, colour, active pattern, demo pattern, provides functions for brightness gamma correction, etc.
The touch-switch code decides whether the switch received a tap or long press. A tap changes the pattern and a long press increases/decreases the brightness. Debouncing the switch was achieved by using a 32 bit integer and bit-shifting each switch reading into it. This method has both the advantage of being able to check for a steady switch state, and to discriminate between a short or long press. A future article will explain exactly how this is done.
Here’s a video of it working.