Introduction: SmartMatrix - Dynamic LED Art Display

By Find out more about Pixelmatix
About: Pixelmatix makes the SmartMatrix series of open source hardware products, and the SmartMatrix Library for Teensy 3.1.

Hi, I'm Louis, and I designed the hardware on the open source SmartMatrix Display. This instructable shows how I built the first prototype for SmartMatrix that has all the functionality of the SmartMatrix Display, but can be made from easily available parts. The finished SmartMatrix Display has all the electronics integrated into a custom board, includes a laser cut frame, and is pre-soldered so it assembles quickly with just a screwdriver. For those of you (like me) that would rather built it yourself, and want to easily customize the hardware or firmware, this DIY option is for you.

I hope you enjoy SmartMatrix!

What is SmartMatrix?

SmartMatrix is a beautiful music visualizer, dynamic art display, video game art display, and more. It’s controllable, customizable, and extendable, allowing you to display your own animations and messages.

Customize what's on the screen with the remote control: choose what's playing, show a clock or message on top, and change settings, all from the remote. You don't need a computer or phone to control what's on the screen.

Patterns are generated on the fly by SmartMatrix and can be customized by selecting a color palette to match your decor or mood. Over 32 patterns are built into SmartMatrix.

Audio patterns react to music connected via a headphone-style cable. Cycle through the included patterns along with your favorite color palette. Connect SmartMatrix to the line-out port of your stereo or sound card, or use the included Y-adapter to tap into the signal between your audio source and speakers.

Play 32x32 pixel GIF Animations on SmartMatrix. Find, convert or create your own 32x32 pixel GIF with any software that outputs GIF files and drag it to the SmartMatrix USB drive to add new animations. It's quite easy to use free online tools to convert large videos and GIFs into 32x32 pixel size, and we're sharing a growing collection on our website.

On top of any content (Patterns, Audio Patterns, Animations), you can display a clock or scrolling message. A built in Real Time Clock module keeps track of the time, with battery backup to keep time even when unplugged.

This project can be completed in a few hours.

Project Cost Estimate

The source list was optimized to reduce suppliers to save on shipping (shipping estimates are to zipcode 10065, tax is not included):

  • Electronics from Adafruit - $124.30 + $9.10 shipping
  • Optional electronics from Adafruit - $9.00
  • MSGEQ7 Dev Board from madeatrade on eBay - $12.95 + $2.95 shipping
  • Frosted Acrylic from Acrylite Shop - $12.62 + $17.99 shipping
  • Optional cable from Pololu - $2.04 + $3.95 shipping
  • Frame from Amazon or other sources - price varies, $19.76 is price as of publishing, shipping varies
  • M3 screws from local hardware store or computer parts store - estimating $1

Base parts + shipping: $170.63 + $30.04 shipping = $200.67
With all optional electronics: $181.67 + $33.99 shipping = $215.66

Tools and Skills Needed:
This tutorial uses mostly common tools, though a special knife is needed for cutting acrylic.

The SmartMatrix Shield kit can be assembled with basic soldering skills, and uses all through hole components. The pads on the Teensy for the watch crystal are close together and may be challenging for a beginner. The watch crystal can be replaced with the optional RTC module as an alternative to keep track of time.

Full List of Tools

For SmartMatrix Shield assembly:

  • Needle Nose Pliers
  • Soldering Iron
  • Solder
  • Diagonal Cutters
  • Wire Strippers
  • Small Flathead Screwdriver
  • X-Acto or similar Knife
  • Recommended: Multimeter

For cutting acrylic:

  • Acrylic Knife
  • Stainless Steel Ruler
  • Thin Marker (like fine point Sharpie)

For cutting MDF back panel:

  • Scissors
  • Hobby Knife
  • Utility Knife
  • Stainless Steel Ruler
  • Tape
  • Drill
  • Small drill bit (around 1/16")
  • 3/8" or 3mm drill

Step 1: Part Selection

Major Components

32x32 RGB LED Matrix Panel

A 32x32 RGB LED Matrix Panel is an affordable way to add over a thousand bright pixels to your project. Compared to a Neopixel matrix, these panels use smaller LEDs which are bright, but not blinding, and have a higher pixel density. Unlike a Neopixel matrix, the panel requires a microcontroller to refresh the LEDs continuously to display an image. It takes about 40% of the CPU time and most of the memory of an Arduino Uno just to refresh a panel, and that's with a low refresh rate and a limited 12-bit color palette. To get a better image quality, we will use a more powerful microcontroller.

Teensy 3.1

Despite its small size, the Teensy 3.1 packs a lot of horsepower as it uses an ARM Cortex M4 CPU that runs at 72MHz and has 64kB of RAM. This is more than enough power and memory to refresh the display with a high refresh rate and full color palette. Even better, the processor in the Teensy 3.1 comes with a DMA engine that can move data from memory to pins to allow refreshing the display in the background, so the main program can run without as many interruptions. The Teensy 3.1 is programmable using a modified Arduino IDE, and uses many of the same libraries as normal Arduino boards, so it should be familiar to program for anyone that has written an Arduino sketch before.

SmartMatrix Shield and Library

The SmartMatrix Shield is the best way to connect the Teensy 3.1 to the RGB LED Matrix Panel. The shield takes care of routing the 13 signals needed to refresh the display, adds convenient connectors for power, and brings the unused signals out to a convenient expansion header. The SmartMatrix Library includes code that refreshes the display in the background, and provides functions that make it easy to draw to the display and scroll text on top of the drawing.

Shadowbox Picture Frame

The 8"x8" size Shadowbox Picture Frame is a common size frame, at least in the US. The frames have a glass front with a divider around the outside separating the glass from the back of the frame, with enough space to mount the panel inside.

Frosted Acrylic

Acrylite makes a specialty frosted acrylic sheet that is made for lighting applications. It passes >80% of light through the sheet but diffuses the light, with a matte finish that won't reflect much outside light when the display is off. Diffusing the light lets you see subtle variations in color better, and is more pleasant to look at than bare LEDs. Swapping out the glass in the frame for this acrylic will give you a much better looking display, though in a pinch you can just add a sheet of copy paper behind the glass for a makeshift diffusion screen.

This part is unfortunately not easy to source. It is available direct from the manufacturer online, but their minimum size cut in the US is 12"x12" so they won't cut it down to the 8"x8" size needed, and their shipping costs are high for just one sheet.

Evonik sells a similar sheet under the Plexglas brand name outside the US, though we haven't sourced this for testing. Click on the country in the upper right of their site to find their global sites and search for "0D010" to find the equivalent sheet in 3mm thickness.

You may be able to find this sheet in your local plastics shop. We found this sheet at Canal Plastics in NYC. Not all frosted acrylic is the same, you should test a sample with your panel before ordering a larger sheet if you are unsure if it is an exact match for the recommended Acrylite Satinice sheet. A frosted acrylic made for privacy will not look nearly as good as one made for lighting.

Screws

The panels use M3 screws for mounting. In the US M3 screws are not so easy to find, but are commonly used in computer assembly for attaching optical and smaller hard drives to computer cases. You may have better luck looking for M3 screws at a computer store store than a hardware store. There are eight mounting holes on these panels, though attaching four screws to the corners should be more than enough to hold the panel in place.

Parts List

Adafruit

eBay

Acrylite Shop

Pololu - (Optional) Better cable for connecting IR sensor

Amazon, other online stores, possibly local stores

  • 8"x8" Shadowbox Picture Frame
    • MCS part number 40393 is the frame used for the SmartMatrix product on Kickstarter. It is a 1” deep frame that gives a pixelated effect when used with the frosted acrylic. It’s available from Amazon.com, and other online stores, and may be available at local stores.
    • Note that Walmart sells a MCS frame with the same number 40393, but it seems to be a custom part with inferior quality and is not recommended.

Local Hardware Store or computer parts store

  • M3 screws

Step 2: Prepare Acrylic

Tools

  • Acrylic Knife
  • Stainless Steel Ruler
  • Thin Marker (like ultra fine point Sharpie)

Start with the sheet you need to cut down to size. Keep the backing paper on until all the cuts are done.

Measure 8" from the edge on two sides and mark with a pen.

Align the stainless steel ruler against the two marks, keeping the ruler on top of the acrylic that will become the square (and not the scrap) in case the knife strays and makes a mark. I prefer to flip rulers with a cork back over so the steel is directly on top of the acrylic giving the knife less room to stray. You may want to set the side of the acrylic closest to you right off the edge of your table, so you can pull the knife off the end of the cut without damaging your table.

The acrylic knife cuts by dragging the end of the sharp edge toward you, as shown in the picture.

Starting from the far end, drag the knife toward you in a smooth fast motion while pressing down against the acrylic. If you’re cutting correctly you should hear a unpleasant high-pitched squeal and the knife should pull off a thin strand of acrylic. Keep the ruler in place and repeat. About five good cuts on each side is all it takes to score the acrylic enough that it will snap.

Flip the acrylic over and use the notch created by the knife as a reference, and mark the other side with a pen on both ends of the line. Repeat the cuts on the back side of the acrylic.

Bend the acrylic against the table and it should snap without too much effort. If it’s not snapping, cut a few more times on each side and try again.

Repeat the measuring, cutting, and snapping again to get a square piece.

Step 3: Prepare Frame

Bend back the tabs on the back of the frame to remove the MDF back panel.

Remove the paper from inside, we won't need it anymore.

Remove the divider, then carefully remove the glass as it has sharp edges. We won’t need the glass anymore.

Remove the protective film from both sides of the frosted acrylic. It may be difficult to start peeling the film, you can use the edge of a knife to separate the film from the acrylic at one of the corners to get started. Set the acrylic into the frame.

Hold the acrylic up to some light to look for any dust that will show up when backlit from the LEDs. Clean off any dust before closing everything back up.

Add the divider back to the frame.

Step 4: Cut MDF

Tools required

  • Scissors
  • Hobby Knife
  • Utility Knife
  • Stainless Steel Ruler
  • Tape
  • Drill
  • Small drill bit (around 1/16")
  • 3/8" or 3mm drill

Print out the template that matches the back of your LED panel. Make sure when you print the scale is 1:1 so the dimensions on the template are accurate. You may want to double check with a ruler that the panel outline on the template is 192mm across, and the 8" square is actually 8" across.

The outer squares may be too large to print on your printer. You will be able to see two out of the four outer lines at a minimum, and you can center the template on the MDF if the lines are missing on one or two sides.

It's possible none of the provided templates will match your frame. See the note from the Adafruit product page: "These panels are remainder stock from factories that make huge light boards. For that reason, the look and size might vary from batch to batch". Post in the comments with a picture if your panel doesn't match.

If you are unsure the template matches your display, you can make a couple holes in the template with your knife matching the polarizing pins and mounting holes on the panel, then slide the template over the panel and make sure the holes line up. Cut out the rectangles for the power connector and the input data connector and make sure they are in the right place so the power cable and SmartMatrix Shield can fit in place. Once you've verified you can print a new copy to do the actual cuts and drilling.

Cut the excess paper around the template to match the 8"x8" MDF, and tape it to the MDF on the side that faces out. If the 8"x8" square didn't fully print, estimate or measure where you think the unprinted lines would be and cut a square.

Protect your work surface with something that can't easily be drilled through and you don't mind getting marked up. I used a scrap sheet of acrylic. Add a thick out of date catalog or magazine on top that you don't mind ruining.

Put a small bit in your drill to make pilot holes which will be easier to make accurately than a larger bit. I used a 1/16" bit. You should be able to feel when you get through the MDF and start drilling into the catalog so you don't drill too deep.

Now switch to a 1/8" or 3mm drill bit and drill through the pilot holes to widen them. It should only take a few turns of the bit to go through the MDF. Be careful not to drill too much as it's difficult to feel when you've gone through the MDF and into the paper.

Use an X-Acto knife and stainless steel ruler to score the rectangles where the SmartMatrix Shield and power cable will come through the MDF. The goal here isn't to cut through the MDF, but to make deep enough cuts that a heavier duty knife can follow and finish up. Keep the ruler on the outside of the rectangle so if your knife flexes and strays from the straight line the extra cut will be on the MDF that gets thrown away.

Remove the template so you can see the MDF.

Switch to the utility knife and make some harder cuts that should start going through the back of the MDF. Start your cuts from one corner and cut to just past the middle of the line, then rotate the MDF around and cut from the opposite corner so you cut the corners cleanly without going too far.

The small rectangle for the power connector will be more difficult to cut through as there isn't much room for the knife to move. You may have better luck using the point of the knife in the corners and pushing down to cut the short edges of the rectangle.

Flip the MDF over and check to see if the knife is cutting through. When you can see the outline of the box on the reverse side including all corners, you can start cutting from the reverse side to complete the cuts and push out the rectangular pieces from the MDF.

Clean the dust off the MDF, then press the MDF onto the panel. The polarizing pins should hold it in place for attaching the screws.

Add the four corner screws

Step 5: Assemble SmartMatrix Shield

SmartMatrix SD Shield

We'll start with an assembled SmartMatrix SD Shield. Refer to the instructions here to assemble the shield.

Add the 1x3 pin connector to the upper left to get access to the A14, 3V3 and GND signals. Break the 1x5 right angle header included with the kit in half. Solder the 3-pin piece to the upper left of the board.

Connect SmartMatrix SD Shield to Panel

Push the SmartMatrix Shield onto the panel's data input connector through the rectangular hole. Connect up the power cable. You may want to tape down the power cable to keep it out of the way.

(Note picture is of the original SmartMatrix Shield - will update this later with new photos)

Test Soldering

You may want to skip ahead to the "Programming Aurora Sketch" step and program the Teensy to make sure you can display graphics on the panel before continuing, as it's easier to troubleshoot now than later. You can program the Aurora sketch and make sure you see graphics and scrolling text before continuing. If some rows aren't being shown or some colors aren't being displays, you should recheck all the solder joints.

Add to Frame

Carefully drop the LED panel attached to the MDF onto the divider. Close the tabs to hold everything together.

Step 6: Connect IR Sensor

Using Adafruit Jumper Wires

There are two options for connecting the IR Receiver Cable. If you ordered the cable from Pololu or purchased the SmartMatrix Bundle, skip to the next section

You can insert the three pins of the IR sensor into the female-female Jumper Wires, but the connection will likely be a little loose.

To make for a more secure connection, use needle nose pliers to bend the end of the sensor pins back on themselves to double up the thickness.

Now when you insert the pins into the jumper wires, the connection will be snug, and it may not be possible to pull the pins out again without damaging the jumper wires

The sensor connects to power (3V3), ground, and the IR signal connects to an input pin (Teensy pin 18) marked IR. Use the rounded side of the sensor and this picture to identify the three pins.

Connect the sensor to the SmartMatrix Shield, and mount the sensor with the dome side facing out so it can receive signals from the IR remote. You can mount the sensor on the side of the panel or in another location it is likely to receive the infrared light from the remote. If you are mounting the panel inside an enclosure, you may want to use a longer cable to bring the IR sensor out of the enclosure. I used black gaffers tape to mount the sensor in the picture.

(This picture shows pinouts using the Pololu cable, this picture will be updated in the next rev of the tutorial)

Using Pololu cable

This cable is easier to route and makes for a cleaner install

The red/black/white leads line up to 3V3/Gnd/Data pins on the IR Receiver. Use the pictures to make sure the receiver is inserted the right way.

It can be difficult to tell how far the leads are inserted into the connector. This sensor has the leads covered with a black marker to the depth of the connector, about .19". When inserted properly, you can’t see the black marker anymore. This can be a good way to tell if the sensor is inserted far enough.

It’s much easier to insert the sensor when the leads are at an angle. Point the leads so they are facing the all-white wall of the connector, not the side with the silver contacts visible. Pointed this way, it should only take a little pressure and wiggling of the sensor before it goes in. The leads will move in noticeably when positioned correctly.

It’s possible to push the sensor in too far, so the leads are sticking out the other side. This will work, but is more of a risk for shorting something out or damaging the cable.

You can trim the leads before sliding into the connector if you want the sensor to be closer to the connector.

You can braid the cable to keep it tidier.

Insert the loose ends into the 3-pin housing in the same Red/Black/White order as the other end of the cable.

Use the colors to add the IR receiver cable to the correct pins on the SmartMatrix SD Shield.
(Red = 3V3, Black = GND, White = IR)

Step 7: Add Remaining Electronics

EQ Breakout Board

The EQ breakout connects to power, ground, and A14 on one side of the board, and TX/RX on the other side.

It makes for a cleaner install to route the cable underneath the SmartMatrix Shield to reach A14, power and ground.

You can attach the breakout board to the MDF using double stick foam tape.

Watch Crystal

This page on the PJRC website shows the placement of the watch crystal

Note that the crystal sold by Adafruit is larger than the ones recommended by PJRC. It may be better to mount the crystal sideways, taking care to keep the metal from shorting any pads on the Teensy, and making sure the leads of the crystal don't touch each other.

No photo yet, will be in next rev of tutorial

(Optional) RTC Module

Any RTC module with a DS1307, DS1337 or DS3231 is supported. Connect to the I2C section of the expansion header which has pins labeled for SDA, SCL, 3V3, and GND.

No photo yet, will be in next rev of tutorial

Step 8: Programming Aurora Sketch

If you just want to run Aurora without changing any code, you can download a pre-compiled release version of Aurora and a simple software tool to load it onto the Teensy 3.1. If you want to be able to compile Aurora to add your own patterns or tweak how it works, see the instructions here.

Compiled Aurora Sketch

Download the compiled version of the latest Aurora release from GitHub.

Extract the zip file.

There is an “sd” folder, which can be loaded onto a microSD card if you installed the microSD reader earlier. You can put the “aurora”, “gifs”, and “messages” folders into the root directory of the microSD card.

Find the Aurora.hex file in the “bin” folder. We will use this file with the Teensy Loader

Teensy Loader

To load a compiled sketch onto the Teensy 3.1 you need the Teensy Loader tool, which is available for Windows, OSX, and Linux here.

Install following the instructions for your platform.

Once the Teensy Loader is installed and running, choose “Open Hex File” under the “File” menu, and locate the Aurora.hex file.

Connect the Teensy 3.1 via a USB cable to your computer, and power on the display. Press the button on the Teensy 3.1 to program the Aurora sketch.

You should now see a menu displayed on the LED panel, which can be controlled with the IR remote.

Using Aurora

Visit the Aurora Wiki on GitHub for more details on how to use and customize Aurora, including button mapping for the Adafruit remote.

Step 9: Troubleshooting

Nothing is displayed

Make sure the sketch uploads successfully to the Teensy 3.1 Check the soldering on the SmartMatrix Shield

“No SD card” message

Make sure the microSD card is inserted in the reader, and is formatted properly Check your soldering on the expansion connector and Teensy Check the wires, make sure none are loose or connected to the wrong pins Try another microSD card

GIFs aren’t playing

See Troubleshooting section in the SmartMatrix GIF Player guide https://learn.adafruit.com/smartmatrix-animated-g...

Sketch does not respond to IR remote

Make sure the battery still has charge Test that your remote is actually transmitting by viewing the remote’s LED through a digital camera http://www.wikihow.com/Check-if-a-Remote-Control-... Check the wires, make sure none are loose or connected to the wrong pins If you are compiling the Aurora sketch yourself, make sure the CPU Speed is set to 48MHz or 96MHz (not 72MHz). You can first make sure the compiled Aurora.hex works on your display. If you’re not sure if your IR sensor or remote is working, try wiring it up to an LED to test: http://www.wikihow.com/Check-if-a-Remote-Control-...

“No Clock” message

The clock overlay requires a separate RTC module with one of these chips: DS1307, DS1337 and DS3231. Adafruit’s DS1307 breakout and the ChronoDot should work with the sketch. The wiring is more complicated as you will have to share the GND and power pins. SDA connects to SmartMatrix Shield pin 17, SCL to pin 16. Make sure I2C pull-up resistors are installed either on the SmartMatrix Shield or RTC board. https://www.adafruit.com/products/255

https://www.adafruit.com/products/264

Step 10: Appendix: Build SmartMatrix From the SmartMatrix Bundle

We created the SmartMatrix bundle make it easier and cheaper to create a project based on SmartMatrix. It includes pre-cut acrylic and a back for the picture frame, and consolidates the core parts of SmartMatrix so they could be purchased from one supplier to save on shipping costs. The SmartMatrix bundle was released well before we had finalized the features for the SmartMatrix product on Kickstarter, so a few extra parts need to be purchased to complete the display.

Project Cost Estimate

  • Electronics from Hackaday - $146.87 + free shipping
  • MSGEQ7 Dev Board from madeatrade on eBay - $12.95 + $2.95 shipping
  • Frame from Amazon or other sources - price varies, $19.76 is price as of publishing, shipping varies
  • Wire or headers and jumper wires to connect RTC breakout to SmartMatrix Shield

Total cost estimate: $168.34 + $2.95 shipping

(shipping estimates are to zipcode 10065, tax is not included):

Tools and Skills Needed:

The SmartMatrix Shield kit can be assembled with basic soldering skills, and uses all through hole components

Full List of Tools
For SmartMatrix Shield assembly:

  • Needle Nose Pliers
  • Soldering Iron Solder
  • Diagonal Cutters
  • Wire Strippers
  • Small Flathead Screwdriver
  • X-Acto or similar Knife
  • Recommended: Multimeter

Parts List

Hackaday

http://store.hackaday.com/collections/products-toy...

http://store.hackaday.com/products/sparkfun-rtc

http://store.hackaday.com/products/teensy-3-1

eBay

http://www.ebay.com/itm/MSGEQ7-breakout-board-7-ba...

Amazon, other online stores, possibly local stores

  • 8"x8" Shadowbox Picture Frame
    • MCS part number 40393 is the frame used for the SmartMatrix product on Kickstarter. It is a 1” deep frame that gives a pixelated effect when used with the frosted acrylic. It’s available from Amazon.com, and other online stores, and may be available at local stores.
    • Note that Walmart sells a MCS frame with the same number 40393, but it seems to be a custom part with inferior quality and is not recommended.

Assembly

Follow the normal instructions to assemble the SmartMatrix Bundle

The MSGEQ7 and RTC breakout boards can be attached following the instructions in Step 7 of this tutorial.

Programming

The instructions are the same as Step 8 of this tutorial.