I wanted to have a remote controlled RGB light because my baby daughter likes to look at the lights in our house and the color (yellow for morning/day, blue for evening/night) has given her a routine. I could have got a Philips Hue but I wouldn't have learned anything in the process. I decided to build a very basic WiFi controlled RGB LED lamp using a string of 8 WS2812 and an ESP8266.
The hardware uses a ESP8266-01, a 3.3V linear regulator (L4931CZ33), some decoupling capacitors and a string of 8 WS2812 LEDs. Everything is housed in a white paper lantern using an old tape reel box. Power is coming from a 5V/2.4A wall adapter.
GPIO0 of the ESP8266 is used to drive the WS2812.
The ESP is powered under 3.3V using the linear regulator. The WS2812 is powered directly off the 5V.
The code is written for the Arduino interface for the ESP8266 because it provided the fastest idea to working system turnaround. I am not using Nodemcu. The code compiled by the Arduino environment is running directly on the ESP8266. It is using the following libraries:
- ESP8266 Web Server
- Adafruit NeoPixel
The client side uses a HTML5/Javasript based color picker. The HTML code is converted into a C header file that becomes a string of characters constant.
The Javascript code returns the R, G, B components via a form-based interface. I initially started with three sliders to directly control the RGB components but I didn't like the look of it.
A web search lead me to an image in Wikimedia Commons https://commons.wikimedia.org/wiki/File:RGB_color_wheel_360.svg. This is the work of László Németh and much closer to what I had in mind.
The RGB components are read by the server side code and directly converted into integers that are fed to the WS2812.
I developped the Javascript code separately from the ESP code. You can find it in the file colorwheel.html. The html file is converted into a C "header" file via the following command:
cat colorwheel.html | sed -e "s/\"/'/g" | sed -e '/^\s*$/d' | sed -e 's/.*/\"&\"/g' > colorwheel.hThis replace all double quotes with single quotes, removes empty lines and encloses each line in double quotes. The resulting file is then copied as html_header.h and the following is added at the begining to make it a constant definition:
const char* html_header =A semicolon has to be added at the end.
This is the user interface as displayed in Safari on an iPhone:
The ESP8266 is connected to a small piece of prototyping board via a 2 rows of 4 pins connector. The board houses the regulator and the two decoupling capacitors. The 8 WS2812 come preassembled on a PCB. Wires are soldered directly on the PCB to connect it to the prototyping board. The base (an old tape reel box) has few holes drilled into it to accecpt the screws to attach the lantern, the prototyping board and the LED string. Once the electronics is assembled it looks like that:
There is a big slot to allow the lantern holder to sit in. The lantern is attached using two screws+nuts and these special toothed washers (can't remember where I found them):
Lantern attached but not expanded:
At the bottom, I've added a ON/OFF switch and a barrel connector for the power supply:
Final product:
This is not a very bright lamp on purpose. Here are three pictures showing how it glows. I took the picture looking down but the lamp is meant to be sitting at the top of a shelf (or at the top of an Ikea lamp) where the glow of the LED isn't visible unlike on the follwing pictures.
This work is licensed under a [Creative Commons Attribution 4.0 International License] (http://creativecommons.org/licenses/by/4.0/)