Tag Archives: Ajax


ColorRing Short Demo – Just the Fun Stuff – Part 1  (5 min):
Bare LED strips. Light shows.

ColorRing Short Demo – Fun Stuff – Part 2  (2 min):
LED strips around a plexiglass ring. Also demos CLOCK functions.

Music tracks obtained from A-M Classical

ColorRing Short Demo – Fun Stuff – Part 3  (2 min):
Final(ish) hardware. More light shows. Also demo’s “audio visualizer” and “audio level” and “clap for time”:

ColorRing Full Demo (32 min):


I’ve been working on a fun, little project & it’s finally starting to come alive. Though I’d write about it in hopes to help others to do similar projects & also in hopes to get feedback from people to improve upon it. I’m calling it “ColorRing”.  (Ok, not the most creative name. Any other ideas?!)

In a nutshell, it’s 2 strips of 60 RGB (individually addressable) LED’s each, in a circle – 1 facing inwards, the other (more densely populated) facing outwards. The strips are controlled serially (SPI) via an Arduino Mega 2560 board.  The code I wrote for the microprocessor makes the LED’s dance (animaed) in all kinds of fun colors & patterns.

But to add 1 more layer of fun & creativity, I added a Adafruit CC3000 WiFi Shield to the Arduino board. And added some code to listen for input from abroad (Wi-Fi).  Now, one can open a browser on their tablet, smartphone, laptop, etc, and change the strips’ colors and patterns in real time! (How fun is that?!)

The code contains some “building blocks”, to try to help you create any kind of colors and patters and animations you want.  So you can build your “light show” in your browser, and immediately see what it looks like on the ColorRing!

So, for those interested, let me give some details so you can make your own!

Parts List:

Arduino Mega 2560 R3
Adafruit CC3000 WiFi Shield or CC3000 WiFi Breakout
Adafruit NeoPixel Digital RGB LED Strip 144 LEDs / meter
Adafruit NeoPixel Digital RGB LED Strip 60 LEDs / meter
5V 10A DC Power supply
1x 1000uF, 6.3V (or larger) Capacitor
2x 470 ohm resistor
Your current home WiFi Router

Arduino IDE – to upload the code to the Arduino Mega 2560 R3

Other Useful Resources:

Adafruit NeoPixel Überguide
Adafruit CC3000 WiFi

For most of the parts you don’t have to use the exact items I mentioned, though using similar items will probably be helpful.  It’s probably useful to note here that you probably need the Arduino Mega 2560 (or anything similar or bigger).  The Arduino Uno (for example) doesn’t have enough Flash space or SRAM to handle everything this project requires.

 How everything fits together:

ColorRing Big Picture
ColorRing Big Picture (click to enlarge)

The connections are all pretty straight forward.  Though it might be worth mentioning that it DOESN’T matter which end of the strip you connect the +5V and GND too, but it DOES matter which end you connect Data In (DI) to. Depending on the strip, it will either say “DI” or show an arrow in the direction the serial data must flow.  Don’t connect to DO (Data Out).


I did everything on a Mac, but this project should work easily on Windows & Linux just as well.

The Code

All the real magic is done in the code.  The code for this entire project can be found here:

ColorRing (Arduino Code)
ColorRing CC (Local Website Code) [CC => Command Center]

Download the .zip files from the links above, or:

git clone https://github.com/briggsm/colorring.git
git clone https://github.com/briggsm/colorringcc.git


You will also need to install these libraries (place them in the “libraries” folder of your Arduino workspace):

Adafruit NeoPixel Library
ColorRing CC3000 Library (based off of Arduino CC3000 Library)
ColorRing CC3000 MDNS Library (based off of Arduino CC3000 MDNS Library)
StandardCplusplus Library
ffft.h Library, which can be found from the Piccolo project.

Upload ColorRing code to the Arduino

  • Copy the ColorRing code to where the Arduino IDE can find it (on the Mac, the default location is “Documents/Arduino/”.  So you should have a folder named: “Documents/Arduino/ColorRing”
  • Open Arduino IDE
  • Open the ColorRing project (<File> <Sketchbook> <ColorRing>)
  • Compile it
  • Upload it to the Arduino
  • Right after upload is finished, open the Serial Monitor (not necessary, but very helpful for debugging)
  • On the Serial Monitor, after about 10 seconds, you should see something similar to the following:
Initializing the CC3000...

Deleting old connection profiles

Attempting to connect to Tercume
Request DHCP

IP Addr:
END of udpServer::begin() _socket: 2
Server(s) Listening for connections...


XAMPP is a cross-platform (meaning it works with Windows / Mac / Linux) web server that you can run locally on your own computer (basically).  To download & setup XAMPP, follow the instructions on their website.

Open ColorRing CC in a browser

Once XAMPP is installed you can copy the ColorRing CC code into the “htdocs/colorringcc” directory of XAMPP.  Then in a browser open: http://localhost/colorringcc

Communication between ColorRing CC and ColorRing

To “talk” to the ColorRing (Arduino) from your local website (http://localhost/colorringcc),  both your computer (web server) and the ColorRing must be connected to the same local WiFi Network, and you must know the IP Address of your Arduino.

By default, the Arduino code uses DHCP to get an IP Address for the ColorRing.  I told my Wi-Fi Router (which uses DHCP to hand out IP Addresses) to always assign my ColorRing the same IP Address (, in my case). That way I can refer to the ColorRing’s IP Address directly, when communicating to it from the local website (see file: ColorRingConnectionInfo.php).


To ensure your computer can “see” the ColorRing, open a Terminal and “ping” your ColorRing.  If you get a response, you’re computer can see the ColorRing!  If not, double check you’re both on the same network & make sure all the settings in these files appear correct:

AllDefs.h (WLAN_SECURITY is probably all you need to check in this file)

The SSID & Network Key for the Arduino to connect to are located in pw.h.

Note: Sometimes for me, even with everything setup correctly, the ping doesn’t work – but after rebooting the Arduino it works again.

 The “ping” must work, otherwise the ColorRing CC will not be able to communicate with the ColorRing!

 Start Sending Commands!

Once the “ping” is working, refresh your website (http://localhost/colorringcc) if you already have it open.  When everything’s working properly, it takes a few seconds for the website to load (because it gathering data & all the current commands from the Arduino as the page loads).

Note: The first time all this code is run, the EEPROM is probably all 0xFF’s (or other random data), so no “Internal” commands will run initially.  The LED strips will  just be showing black.

What I’d start with, for a good test:

  • Set the OpMode for the Outside Strip to External.
  • Set Out External Ctrl Mode:
    • Mode: 0
    • Speed: Any value
    • Num Sections: Any value
  • Click on the “Outside External Ctrl Mode Color” color swatch, and drag around to change the color.
    • This should be sending the color data to the ColorRing (Arduino), and the Arduino should be showing the colors on the outside strip in real-time.


If the above test doesn’t work, the problem(s) could be almost anywhere in the process.  First, double check that the “ping” test works.  If so, you know the local website can communicate to the Arduino.

If the “ping” test passes, you might want to use a Network Packet Sniffer tool, such as Wireshark, to verify that the packets are indeed traveling from your computer to your Arduino, when you change the color on the color swatch, or when you submit commands.

If you’re sure the packets are getting to the ColorRing (Arduino), then there’s likely a problem with powering the LED strips or connecting the Arduino pins (6 & 7) to the Data In lines of the LED strips.  I would highly recommend downloading the Adafruit NeoPixel library, uploading the “strandtest” example from that library, and making sure that works.  Also read their wonderful Arduino NeoPixel Library Guide if you need help in setting up the NeoPixel LED strips.

If the “strandtest” works, then you know everything’s wired up properly & the Arduino can successfully control the LED Strips.  The “strandtest” must work before you can have any hope that ColorRing CC and ColorRing will work.

 Final Thoughts

This is a pretty big complicated project. And I’m not a great communicator. I’d love to get feedback from you (leave comments below). And please feel free to fork the github repository, make improvements, and share them with me. I would love to see this project move forward with your help!


I would definitely like to say thanks to those who have helped me get this far:

Adafruit – for providing great products, great libraries, great documentation, & great support!

Tony DiCola (from Adafruit) – for helping me a lot with setting up the UDP Server (UDP Server Example).

Bill & Mike (from Adafruit) – for helping me with Powering NeoPixel Strips from a Distance. And Powering Arduino & NeoPixel Strips from same Power Supply.

Marko Schwartz – for the work on his aREST library. It was a great starting point for me to send commands to the Arduino.