I love LED pixels: bright, easy to control, cheap, and so versatile. My last project was an Ambilight TV backlight, but generally I’m just in love with intelligent lighting. Today, we’ll be turning them into a big pixel display that can be hung on the wall of your office; either to serve a useful purpose, or just look incredibly pretty.
This is a relatively simple project that just takes time to construct, but can be a little fiddly when connecting the strands of LEDs. The basic idea is laying down strips of LED pixels in snake pattern on the back of the photo frame. The front will be frosted to help diffuse the light.
From there, it’s mostly a question of which software to use, depending on your needs – I’ll get you started with some demo code and pointers, then revisit the software angle in a later article as we figure out how to pull information like notifications and stock prices onto the display.
Step 0: You Will Need
- 10-meter strip (sold in two 5-meter reels) of LED pixels – I’ve used WS2812B because they’re cheap. You can buy double density strips at 60 LEDs/meter too, if you’d like a higher resolution.
- 5V 10A power supply. The model I used takes 240V AC input to some screw terminals. If you need complete safety, purchase an enclosed model.
- Arduino UNO.
- Numerous lengths of thick wire; I used the offcuts from an old computer PSU.
- Ikea RIBBA deep photo frame, 50cm x 50cm.
- Glass frosting spray and white paint.
The total cost should be under $100. In terms of tools, you’ll also need:
- Soldering iron and solder
- Hot glue gun
- Knife or scissors
- Wire stripper
Be sure to read through our Electronics Skills for Beginners guide first!
Step 1: Do the Math
If you’ve purchased the same 50cm x 50cm Ikea photo frame and LED strands as me, you should be able to fit 15 strands of 15 LEDs. However, there’s nothing to stop you using a different sized frame. Each LED is spaced about an inch apart, so I was aiming for roughly inch squared pixels on the display – yes, that’s 1 DPI. Not exactly Retina graphics.
Do the math, and draw some guide lines on the frame backing. Measure twice, and double check: I must have left a small difference between lines, because by the time it came to sticking everything down, I realised I could only fit 14 strands of 15 LEDs. No matter, the software is easy to adjust for a different number of pixels with varying row lengths and number of rows. Go ahead and cut your LEDs into appropriate lengths. Unfortunately, I found 15 pixels per strand coincided exactly with the soldered joints on one of my reels, so I was forced to de-solder them. On the plus side, at least these were then pre-soldered.
Step 2: Frost the Glass
To help diffuse the light from the LEDs, I decided to use some basic glass frosting spray on both sides. Do this outdoors as the fumes are dangerous, and try to spray as evenly as possible. The frosting is surprisingly hard wearing once it’s dried, but you need to ensure an even coating first, and avoid scratches at all costs.
While you’re outside, spray the back of the photo frame white too – this will reflect the light of the LED back out. We won’t be using the white cardboard photo surround. Cut off one of the corners for the power and signal wires.
Step 3:Attach LEDs to the Board
Use a strong adhesive or superglue. I tried with double-sided tape, only to find it slipped off a few weeks later; the hot glue gun is even worse for this when both sides are non-porous. The exact positioning shouldn’t matter too much if you’ve purchased strands enclosed in a rubber case – they can move freely within that for repositioning.
Remember that the signal will snake around from the start to finish, and that there is a specific direction to each strand. Lay one with the arrow pointing right, then the following strand going to the left, and repeat. Double check this before gluing them down!
Step 4: Soldering
Connecting each strand will require 3 lengths of wire of slightly different lengths. In each case, you’ll be connecting the inner two pads with the shortest length of wire; then the middle two; then the outer two with the longest length. The inner pad will alternate between the +5V line, and the GND line, depending on which side of the frame you’re currently working on.
Make sure both the pads and the wire are pre-soldered. This is the most time consuming part of the project, but it’s crucial you don’t rush and double check you’re connecting the correct lines!
Step 5: Secure all Strands
Finally, if you’ve used the power and input wires that came attached to your strand, you may find that constantly moving around the board has pulled the first strand free. I decided to drill two small holes and thread through a white cable tie to secure this part. If you’re having trouble sourcing strong glue, you might want to consider this for securing all the strands at both ends.
Step 6 Wiring Test
The wiring is simple: pin 6 on the Arduino is used as the signal pin to control the LEDs; while the 5V power into the LEDs should come directly from your external power supply. Connect a common ground wire between the strand, your Arduino, and the power supply. Do not attempt to power the strand directly from your Arduino, or to connect the 5V power supply directly to the Arduino when USB is connected (as it will be to upload the test code).
Download and add the Adafruit NeoPixel library to your Arduino libraries folder, then launch the Arduino. Perform an initial strand test using the example strandtest code included in the library. Adjust the number of LEDs you have in the first parameter of the following line (change 60 to however many):
Adafruit_NeoPixel strip = Adafruit_NeoPixel(60, PIN, NEO_GRB + NEO_KHZ800);
If the animation stops at a particular row, unplug it immediately and check the wiring. You’ve either got the strand in the wrong direction; the wires are crossed; or you accidentally soldered the +5V to the GND.
Step 7: Place into the Frame
Since I’m using a deeper recess than the frame was designed to allow, I first used the hot glue gun to seal the glass to the frame. I’ve then added some short pieces of rubber packaging around the outer edge of the frame to create the required depth, before placing the LEDs back. After a final test of the LEDs, I used the hot glue gun again to seal everything into place.
You may also want to cut a small notch in the corner of the frame to accommodate the thick cable.
That’s it in terms of constructing the actual display, though you’ll probably want to hide the power supply and Arduino in a project box eventually. The rest is down to software.
For parties or use in a professional club setting, Glediator from SolderLab.de is the king of LED matrix control, capable of driving up to 512 WS2812/NeoPixels at 24 frames per second. It allows you to create live or pre-recorded mixes of LED animations, and can even add GIFs (yes, I’m looking at you Nyan Cat); and just like DJ software, includes a fader to smoothly mix between animations.
To get started with Glediator, load this firmware onto your Arduino UNO, and ensure the signal cable is on pin 6. Don’t forget to adjust the variable that says how many LEDs you have.
Within Glediator running, open the options and change the matrix size and output. Adjust Pixel Order if your layout is different, but unfortunately there’s very little documentation for this step, so it’s mostly trial and error. If your output doesn’t match up with what’s being shown on screen, try a different setting. HS_BL worked for me, which I suspect means “horizontal snake, starting bottom left”.
Glediator is a pro-level app, so while I may cover it in future, for now I’ll leave you to explore the interface and play around. Try loading a different animation on the left and right side, then sliding the fader between the two; or you’ll find a ready-made playlist of sequences on the far right, which is shown in the demo video above.
Adafruit NeoMatrix and GFX Library
Adafruit has produced a stunningly useful library for working with these kind of pixel matrices. The first is called the Adafruit GFX library, originally designed for working with TFT and LCD displays; the NeoMatrix library is a modification to this which makes all the functions work with NeoPixel LED matrices. With your matrix defined, this opens up a huge range of simple-to-use functions such as outputting text or display a bitmap sprite graphic.
If you’ve made the project exactly as I did, you’ll find this sample code helpful. The most important part of the code is here:
#define XSIZE 15 #define YSIZE 14 #define PIN 6 Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(XSIZE, YSIZE, PIN, NEO_MATRIX_BOTTOM + NEO_MATRIX_LEFT + NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG, NEO_GRB + NEO_KHZ800);
The first few few lines should be self-explanatory. The bottom three tell the graphics library about the layout – in this case, my first pixel is located in the bottom left, and it’s arranged in rows, with the rows following a zigzag pattern. Check the library documentation if you’ve oriented it in a different way.
I’ve defined a few sprites in the code already (though only the smiley face is used). To create your own sprites, you’ll find an Img2Code Java application within the GFX library download.
In a future article, we’ll look at using the library to display useful information such as stock quotes or Twitter streams, but for now you should be able to play around with my sample code and load your own images.
That’s all for the tutorial this time. You’ve made a giant LED display, now it’s just a case of figuring out what to do with it. Consider making a mini lightning cloud lamp with the leftover LEDs. Questions or problems? Ask in the the comments – it’s a fairly complex project but I’ll do my best to help.