Introduction: Diffused LED Strip Sign With Arduino/Bluetooth

By Becky Stern
About: Making and sharing are my two biggest passions! In total I've published hundreds of tutorials about everything from microcontrollers to knitting. I'm a New York City motorcyclist and unrepentant dog mom. My wo…

I created this sign for the DJ booth at the 8th annual Interactive Show at my local hackerspace, NYC Resistor. The theme this year was The Running Man, the chintzy 1987 sci-fi movie, which takes place in the year 2017. The sign is built from foamcore board and the pixel strip inside is diffused with plain printer paper. The sign's colors and animations can be controlled with a phone/tablet app over bluetooth.

This Instructable details the construction, programming, and use of this simple sign using Arduino and the Adafruit Feather Bluefruit 32u4 microcontroller and its companion Bluefruit LE Connect app for iOS/Android. You could easily scale back the wireless control aspect and use an Arduino Uno and a physical switch to change the animation, as in my free introductory Arduino Class, or control the sign from the internet by switching the microcontroller for a wifi board like the Feather Huzzah ESP8266, which you can learn to do in my free Internet of Things Class.

Materials and tools used for this project:

To keep up with what I'm working on, follow me on YouTube, Instagram, Twitter, Pinterest, and subscribe to my newsletter. As an Amazon Associate I earn from qualifying purchases you make using my affiliate links.

Attachments

Step 1: Print & Transfer Template

This sign doesn't require any hard-to-find tools, but does require some manual layout and precise knifework. You're welcome to substitute the next two steps with the use of a laser cutter for faster, more accurate cuts. Just make sure the material you choose is acceptable for use with your laser (foamcore catches fire easily in laser cutters and is therefore sometimes prohibited, and the laser cutter can easily cut materials like thin wood and acrylics that are difficult to cut by hand).

Print out the included template or create your own, and tape it to the center of a piece of foamcore board measuring three inches larger than your artwork in each dimension (14.5" x 7" or 37cm x 18cm if using the 2017 template). Use an awl, T-pin, thumbtack, or other sharp tool to poke small holes along the contours of the graphic. For straight lines, it is only necessary to mark the corners. After removing the paper template, use a ruler and pencil to create the straight lines, and freehand connect-the-dots to sketch out the contoured lines. These pencil lines make it easier to see where you plan to cut. Identify which shapes will become waste, and which might be needed, such as the center of the number 0.

Step 2: Cut Front Panel

Protect your work surface with a cutting mat or multiple layers of scrap cardboard. Protect yourself from a trip to the Emergency Room by exercising caution and good judgement around your sharp tools. Use a small craft knife to carefully cut out the curved lines, and use a ruler and larger knife for the straight lines. Like most folks who went to art school, I learned these techniques the hard way (through a gruesome ruler-hopping injury). Please don't let that be you:

  • Don't use sharp knives when you're tired
  • Metal rulers are safer to cut against than plastic
  • Work in a well lit space on a stable surface (the floor works if nothing else)
  • Always press the ruler and the blade straight down, not at weird angles or either might slide/jump
  • Double check your fingers aren't bulging out over the edge of the ruler or they will get sliced off
  • Watch the blade and the space in front of its path throughout the cut (don't get distracted or cut where you're not looking)
  • Make a number of shallow passes rather than trying to cut through the entire thickness with one go.

Be careful not to overdraw the knife, which would make your corners sloppy. When you've cut most of the way through, you can flip the piece over and touch up any spots where the knife didn't pierce the back paper, then pop out the interior waste. Save any necessary bits like the center of the number 0!

Step 3: Add Paper Diffusion

I used a glue stick and piece of plain printer paper to mask over the cutouts in the front panel, and even used it to support the center 0 shape. I cut off the extra overhanging paper with a utility knife after the glue was dry.

Step 4: Assemble Box Sides

While the glue on the front panel was drying, I got to making the rest of the box. The back is the same size as the front, and I also cut two of each size side panel and top/bottom panels. The depth of the box is four inches (10cm), which provides plenty of room inside for the LED strip, circuit, and distance for the light to diffuse as well as overall stability when the sign is resting on a flat surface.

To dress it up a bit, I created lap joints all around the front of the box by slicing a thin margin that only pierces one layer of paper and the center foam layer, which results in a joint with no visible foam. I used hot glue to assemble the box, but regular white glue or wood glue would work fine as well. After the glue set up, I put a bit of white tape around the inside edges to help block any light from leaking out the seam (the lap joint helps with this as well).

We'll put the back of the box on after the circuit is inside.

Step 5: Solder LED Strip & Microcontroller Circuit

I cut a meter of 60/m RGBW NeoPixel strip in half, and soldered the two pieces in parallel. This makes it easy to code up LED animations that traverse the sign from one corner/edge to another because whatever one strip does, the other mirrors it. Wire up the circuit with stranded wire and heat shrink tubing according to the circuit diagram, adjusting the number of pixels to fit your sign if it's a different size.

I soldered stacking headers onto my Feather so I can easily pull it out and use it for a different project. By soldering female headers onto a perma-proto board, I can easily swap in a different Feather board, such as a plain 32u4, Huzzah ESP8266 with wifi, etc. Be sure to check out the Feather 32u4 Bluefruit board official guide for more details, a pinout diagram, and Arduino IDE setup instructions.

This circuit includes the recommended signal line resistors and power capacitor to mitigate risk of pixel damage from power supply fluctuations. For more info, I suggest reading over the other info and best practices in the PhilB's Adafruit NeoPixel Uberguide.

To get away with a 2A power supply, the code throttles the brightness of the pixels, since 60 pixels * 80mA max current each (20mA each for red, green, blue, and white LEDs inside) = 4.8A (not counting the microcontroller and bluetooth radio). If you want to use more pixels or make them brighter than this sample code, do a little math to see how much you'll need to upgrade your power supply.

You don't have to use a lipoly battery, and if you do, you don't have to solder a switch to it. But if you do solder a switch, be very careful while doing so, and put the switch on the red wire so that the Neopixels never have power connected without ground, which can damage them.

Attachments

Step 6: Programming With Arduino

It's important to test each individual component before combining them. Start out by following the Arduino IDE setup and test procedure with a simple Blink sketch (built-in LED is wired to pin 13) to verify that your Arduino software is configured properly to program your microcontroller board. Then try out some simple NeoPixel test code (you'll need the library if you don't already have it installed), but make sure to add a brightness command in the setup to bring the power consumption way down during testing, since your computer's USB ports can only deliver 500mA max.

void setup() {
  strip.setBrightness(50); // 0-255
  strip.begin();
  strip.show(); // Initialize all pixels to 'off'
}

Here's a modified version of the RGBWstrandtest sample sketch you may copy/paste, then upload to your Feather 32u4 Bluefruit:

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
  #include <avr/power.h>
#endif

#define PIN 11

#define NUM_LEDS 30

#define BRIGHTNESS 50

// Parameter 1 = number of pixels in strip
// Parameter 2 = Arduino pin number (most are valid)
// Parameter 3 = pixel type flags, add together as needed
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, PIN, NEO_GRBW + NEO_KHZ800);

void setup() {
  strip.setBrightness(BRIGHTNESS);
  strip.begin();
  strip.show(); // Initialize all pixels to 'off'
}

void loop() {
  // Some example procedures showing how to display to the pixels:
  colorWipe(strip.Color(255, 0, 0), 50); // Red
  colorWipe(strip.Color(0, 0, 0), 50); // Off
  colorWipe(strip.Color(0, 255, 0), 50); // Green
  colorWipe(strip.Color(0, 0, 0), 50); // Off
  colorWipe(strip.Color(0, 0, 255), 50); // Blue
  colorWipe(strip.Color(0, 0, 0), 50); // Off
  colorWipe(strip.Color(0, 0, 0, 255), 50); // White
  colorWipe(strip.Color(0, 0, 0), 50); // Off
}

// Fill the dots one after the other with a color
void colorWipe(uint32_t c, uint8_t wait) {
  for(uint16_t i=0; i<strip.numPixels(); i++) {
    strip.setPixelColor(i, c);
    strip.show();
    delay(wait);
  }
}

If your board upload is successful and your pixel strips animate through their component colors in sync without any errors, flickers, dead pixels, or other problems, hurray! Proceed to download and program your board with the bluetooth enabled code for this project, which is based on its (required) library sample.

If you're stuck, retrace your testing steps to troubleshoot:

  • Is Arduino IDE set up properly with added boards, neopixel library, bluefruit library, and drivers if necessary? Test: program with simple Blink sketch
  • Is your USB cable data-capable, or a "charge only" cable? To program, you'll need a USB cable with data connections inside. Test: use the cable to connect another data device to your computer such as a phone or tablet, and see if devices recognize a connection or just charge
  • Do you have the right board and port selected from the Arduino Tools menu?
  • Does your code specify the same data pin that your pixels are physically connected to? The Feather labels are very close together and it's easy to accidentally wire it "one pin over" from where you intended. The labels are a bit easier to match to their pins on the back of the board.

The bluetooth code for this project has a default white color wipe animation when it first starts up, before a device has connected to it. At this point you can proceed to install the circuit inside the box, or skip ahead to connect over bluetooth and control the pixels with your phone or tablet.

Attachments

Step 7: Final Assembly With Circuit

I positioned my circuit at the bottom of the box, and cut a hole through which to plug a USB cable. I also positioned my battery's power switch nearby to this opening, and used hot glue to hold everything in place.

Next it's time to glue the NeoPixel strip to the inside perimeter of the back of the box. The LEDs face inwards and are a nice distance from the front panel, providing great diffusion and even light output. I started my strips at one corner and wound each one around one long side and one short side. This will make my animations have a diagonal effect without any extra coding on my part.

If your sign is not at risk of beverage spills, you may wish to remove the pixels from their silicone sheathing, as it is difficult to glue (only because hardly anything sticks to it). Since this is a lightweight project that won't see much abuse, I used hot glue to wrap all the way around the silicone sheathing, essentially forming a blobular mounting bracket every couple of inches. For permanent installations of this stuff, use my favorite fumey/smelly, slow-drying silicone adhesive: Permatex 66B. Clothespins make great clamps for projects like this.

I lined the inside of the box back with more white tape to help reflect more light inside.

Something I noticed later: the blue light indicating the BLE connection is visible through the front panel. You may consider covering it and the other onboard LEDs up with a piece of black tape. To attach the back panel, I used black gaff tape.

Step 8: Use It!

To control the sign, download the Adafruit Bluefruit LE Connect app for iOS or Android, open it up, and select the device called "Adafruit Bluefruit LE," then select "Controller" as the connection type, and finally "Color Picker" from the Interface list (you may have to scroll to see it as an option). Now choose a color and click SEND and your sign should perform a color wipe animation with the color you specified. You can change the color as many times as you like, and the sign will repeat the animation with whatever color it last received, even if you disconnect your device's bluetooth connection.

Once you've got that working, explore the other baked in feature I cobbled together for your further development: animation modes! Switch from the Color Picker to the Control Pad, and select a button to switch to a different animation. This code is just a proof of concept and has one major downside, which is it doesn't recognize the button press to change the animation mode until the current animation finishes its cycle, which in some cases is seconds. To make this code nice and simple to read (without using interrupts), a little patience on the controller is an acceptable tradeoff to make, in my opinion. If you're a rockstar coder and wand to make the most responsive bluetooth sign code, please go for it and let us know!

You can modify the modes to include up to 8 different animations. I did a similar project once with a NeoPixel Matrix and snowflakes.

Thanks for reading and I'd love to see your versions in the comments or in their own Instructables. If you liked this project, you might like some of my other work: