Introduction: WiFi RGB Case Lighting
I recently finished building a new desktop computer, and seeing how popular (not to mention nice looking!) RGB case lighting is, I thought I'd try my hand at a DIY solution. After working on this project for several months, I'm pleased enough with its progress that I want to share it with anyone interested in giving it a try themselves!
Unlike traditional RGB case lights, the LED strips in this project use individually addressable LEDs, which means each light in the strip can be programmed to show a range of different colors at the same time!
Other features include:
- An intuitive web-based control system
- Up to 16 colors per animation
- 5 stock animations (more to come!)
I've tried to make this project as simple as possible for anyone to try, but I do assume that you have:
- Basic soldering knowledge. If you've never used a soldering iron before, check out the tutorials on Sparkfun or Adafruit (or even just YouTube) for some help. I'm no soldering whiz myself, so don't be discouraged! We won't be doing anything fancy here.
- A 2.4 GHz WiFi network in your home that the lights can connect to. Basically all routers support this, so unless you've disabled the 2.4 GHz setting entirely, this will be a non-issue.
A computer case with a glass or acrylic window to show off your finished project!
Step 1: Gather Materials
- Sparkfun ESP8266 Thing Dev Board
- Make sure it's the "Dev Board" version (not this one). We'll need the built-in USB to UART adapter for easy programming!
- 1-Meter addressable RGB light strip (30 LEDs)
- I recommend a strip that uses APA102C LEDs, but a full list of compatible chipsets is on the FastLED website. If you can, get a strip that has a silicone sheathing--this will prevent accidentally shorting your LEDs on the metal walls of your case.
- Adafruit Dotstar
- Pololu APA102C
- Any other WS2812B or APA102C LED strip
- A phone charger rated at 5v 2a output (10 watts or more). I recommend this one from CanaKit. This Anker one would work also, but you'd need to provide your own USB cable.
- A Micro USB cable
- Double-Sided Tape
- Electrical Tape
- A Soldering Iron & Solder
- Scissors / Wire Snippers
- Wire Strippers (With a little patience, you can make do without these)
- 22-Gauge solid-core wire (Approx. 12 inches)
- A 3x3 inch sheet of cardboard, construction paper, or plastic
- Zip-ties, scotch tape, or glue
A Word on Power
The LED strips we'll be using consume about 7-9 watts per 30 LEDs at full brightness. This means that you MUST buy a strip with only 30 LEDs on it if you'd like to power them from a conventional phone charger. Any more than that is still possible, but you'll need to resort to more exotic means of powering them that are outside the scope of this project.
WARNING: Attempting to power more than 30 LEDs from a standard 10w phone charger could result in the charger overheating or even catching fire. You have been warned.
Step 2: Arduino IDE Setup
To program your ESP8266 board, we'll need to download the Arduino IDE. Head on over to https://www.arduino.cc/en/Main/Software to download the appropriate package for your system and install it.
Download the ESP8266 Components
When the installation is finished, open the Arduino IDE and go to [File > Preferences]
Now, go to https://github.com/esp8266/Arduino#installing-wit... Copy and paste the "Boards Manager Link" into the "Additional Board Manager URLs" field of your IDE's Preferences window. This will let us download the components we need to program an ESP8266.
Next, go to [Tools > Board > Boards Manager]. In the search bar, type "ESP8266" and select "ESP8266 by ESP8266 Community." Click "Install" to download and install the necessary components. This may take a little while.
Test Your ESP8266 Board
It's time to try programming your board! Make sure the little switch is set to ON and plug the board into one of the USB ports on your computer. A little red power LED should light up indicating that it's on.
In the Arduino IDE, go to [File > Examples > ESP8266 > Blink] to open a test program.
Next, select [Tools > Board > Sparkfun ESP8266 Thing Dev] to tell the IDE that we want to program an ESP8266.
Finally, click "Upload" in the top left of the Arduino IDE. The sketch should compile and upload to the board, and the little blue LED should be slowly blinking!
If Your Program Failed to Upload
Try again. Seriously. The ESP8266 uploader is a bit finicky, and sometimes it simply fails to upload on the first go.
Go to [Tools > Board] and double check that yours reads "Sparkfun ESP8266 Thing Dev"
- Go to [Tools > Port] and see which serial ports are available. If there are multiple ones (For example, mine's on COM4), try uploading to each of them.
- If you're using Windows, search for "Device Manager" and expand the "Ports" section. Your ESP8266 board should appear as a "USB Serial Port." If nothing is present, you may need to install drivers for the FTDI
FT231X Serial to USB chip.
- [Tools > CPU Frequency] should be "80 Mhz"
- [Tools > Upload Speed] should be "115200"
- If you still can't figure out what's going on, Google is your friend! The ESP8266 is a popular MCU with a large community, and it's likely that somebody's had the same problem as you.
Step 3: Firmware Installation and Setup
Now that you can program the ESP8266 board, it's time to download the firmware for controlling and animating the LEDs. Head over to https://github.com/Oreocat/esp8266_rgb and click "Clone or Download" > "Download Zip." Extract it somewhere convenient and open it.
Navigate to [esp8266_rgb-master/arduino] and copy the contents of this folder to your Arduino IDE Sketchbook location (below). When prompted, say yes to "Replace files in the destination".
When the files have finished copying, restart the Arduino IDE. If everything copied correctly, you should be able to navigate to [File > Sketchbook] and open the project titled "firmware."
Edit the Firmware File
If your LED strip contains Adafruit NeoPixels or any chipset other than APA102s, you'll need to edit a line of the firmware. Scroll down to the area labeled "#define Constants." and look at the line that begins with:
#define FASTLED_SETUP FastLED.addLeds ...
Change APA102 to the kind of chip on your LED strip. If you're unsure of what to change it to, consult this page.
If your LED strip has only 3 wires instead of 4, delete "CLK_PIN," from this line as well.
Compile and Upload
You should now be able to upload the firmware to your ESP8266 board. Make sure that [Tools > Board] and [Tools > Port] are the same as earlier and click "Upload" in the top left corner.
If the Firmware Fails to Upload or Compile
Try again and double-check everything from earlier.
- Check to see that all of the files were successfully copied from the firmware's zip to "Documents/Arduino"
- Leave a comment on this Instructable. I'll try my best to help with the error.
Step 4: Connect to WiFi
Now that the firmware is uploaded, open the Arduino IDE and go to [Tools > Serial Monitor]. In the bottom right, set "No line ending" to "Newline" and "9600 Baud" to "115200 Baud." You should now be able to see the following message:
Starting WiFiManager... *WM: *WM: AutoConnect *WM: Connecting as wifi client... *WM: Using last saved values, should be faster *WM: Connection result: *WM: 1 *WM: SET AP STA *WM: *WM: Configuring access point... *WM: RGB_LIGHTS *WM: Invalid AccessPoint password. Ignoring *WM: *WM: AP IP address: *WM: 192.168.4.1 *WM: HTTP server started
If not, flip the ESP8266 board's switch from ON to OFF to ON with the Serial Monitor open.
Keep this window open for later.
The ESP8266 board should have created a new WiFi network named "RGB_LIGHTS." Use a phone or computer to connect to this network. You should be prompted to "Log In", but if not, open a web browser and type "192.168.4.1" in the search bar.
You will be greeted by the pictured login page. Click or tap "Configure WiFi," select your network, and type in its password if it has one.
NOTE: Sometimes the firmware hangs after switching networks. To solve this, just unplug the board and plug it back in again.
If your board connected successfully, the Serial Monitor should now show the following message:
Starting WiFiManager... *WM: *WM: AutoConnect *WM: Connecting as wifi client... *WM: Using last saved values, should be faster *WM: Connection result: *WM: 3 *WM: IP Address: *WM: 10.251.128.194 Exited WiFiManager mDNS responder started
The board is now connected to your home WiFi! To test things out, open a web browser and type the new IP address into the search bar (in this case, "10.251.128.194"). The Configurator screen should come up, indicating that your board is ready to go!
Step 5: Prepare the LED Strip
Finally, we can put the software aside and focus on putting this project together! We're going to begin by cutting off the male connector at the end of the LED strip so we can easily unplug the strip for maintenance in the future.
Begin by using your scissors or wire cutters to cut off the connector as shown, leaving 3 or 4 inches of wire to work with and cover the exposed end with electrical tape. Use a wire stripper to strip the ends of each wire on the connector end so that roughly 1/4 inch is showing.
If your LED strip has extra Power and Ground wires like mine, cover them with electrical tape as well.
Next, cut the 22AWG wire into four 3-4 inch sections (3 if your LED strip only has 3 wires) and strip both ends in the same fashion. Solder each of the 22AWG wires to the leads on the male connector and wrap the joint in electrical tape.
Finally, identify which wires are 5V, GND, DATA, and CLOCK (ignore CLOCK if your strip has 3 wires). These are usually marked on the LED strip.
In my case:
- Red is VCC (5V)
- Black is GND
- Yellow is CLOCK
- Green is DATA
Step 6: Solder the Connector to the ESP8266 Board
Solder the leads of your connector to the ESP8266 Board as follows:
- DATA to PIN 2
- CLOCK to PIN 14
- VCC to 5V
- GND to GND
Needless to say, this step is VERY IMPORTANT. Double and Triple check your wiring, especially VCC and GND.
That being said, you can remap or swap the DATA and CLOCK pins in the firmware later if necessary.
Step 7: Test Out the LEDs!
We're almost done! Plug the connector into the LED strip and plug the ESP8266 into your phone charger. The lights should spring to life!
Don't worry if the lights are dim to start with --this is a safety feature to keep them from damaging things if you plug them into a computer.
If You Swapped DATA and CLOCK
If the lights are flickering/not turning on at all, double check which wires are DATA and CLOCK. If you got them backwards, open the Arduino IDE and go to [File > Sketchbook > firmware]. Scroll down to the "#define Constants" section again and look for the following lines:
#define DATA_PIN 2 #define CLK_PIN 14
Swap 2 and 14 so the lines look like this:
#define DATA_PIN 14 #define CLK_PIN 2
Re-upload the firmware.
Step 8: Attach the LEDs to Your Case
I used some double-sided tape to attach my LEDs, but feel free to use zip ties or any other means you prefer to affix them to your case.
The silicone sheathing protects the LEDs from shorting on the metal of your computer case, but the ESP8266 board is unprotected. To fix this, use some hot glue, tape, or zip ties to wrap a piece of plastic, cardboard, or even construction paper around your board.
Finally, unscrew one of the PCI brackets from your case to make a hole to thread your USB power cord through.
Step 9: Conclusion and Suggestions
Your lights are all finished, congratulations!
However, I do have some final suggestions:
- The lights will automatically connect to your WiFi network when powered on, but are not guaranteed to always have the same IP address. There are a couple of ways to solve this:
- The firmware implements a protocol called mDNS (Otherwise known as Avahi or Bonjour) which allows devices on the network to find and talk to them. Download and install Bonjour Browser (or another Bonjour/Avahi browser) and use it to find the IP address of your LEDs.
- Go into your router's settings and assign your lights a static IP address. This is the better solution, but of course it won't work if you don't have access to your router's settings (At a business, college, apartment, etc.)
We have a be nice policy.
Please be positive and constructive.