2024-05-28 | By Adafruit Industries

License: See Original Project LED Matrix LED Strips Wifi ESP32 Adafruit Feather

Courtesy of Adafruit

Guide by Erin St Blaine

Overview

 

Make a statement for your home or office that pulses with furry, ‎glowy goodness. It's pettable, programmable, and controllable with ‎your phone or any internet-enabled device, including Alexa or a ‎Philips Hue Bridge. The WLED software is easy to install and set up ‎and comes with dozens of premade animations that can be ‎customized for nearly unlimited color and pattern variations. ‎

We're using a Feather ESP32 V2, which connects to your phone or ‎computer via your WiFi network, so everyone in your home can take ‎control and create their own presets and patterns. ‎

The software for this project is easy, but there is a fair bit of tricky ‎soldering involved. Hang in there -- you will love your new furry ‎friend in the end.‎

• Adafruit ESP32 Feather V2 - 8MB Flash + 2 MB PSRAM‎
• Adafruit DotStar Digital LED Strip - White 30 LED - Per Meter
• Silicone Cover Stranded-Core Ribbon Cable - 4 Wires 1 Meter Long
• ‎‎1 x USB Type A to Type C Cable
• ‎1 x Stemma Connector
• ‎1 x Heat Shrink

A power switch is optional since you can turn this on and off with ‎your phone, but it's a nice feature to have. We have a USB-A power ‎switch in the shop. If you prefer USB C, here's the one I used from ‎Amazon.‎

• ‎1 x USB Switch

Additional Materials

• White or light-colored fun fur -- you can find this at most fabric ‎stores or online for around $25/yard ‎
• A piece of foam core for backing -- find this at the craft store
• Clear packing tape
• ‎1/2" Heat shrink‎
• A picture frame that's around 2" deep, or some scrap wood to ‎make your own
• A USB cable for power
• Tools: Soldering iron & accessories, hot glue gun, heat gun, ‎staple gun

Wiring Diagram

We'll use the Feather's onboard STEMMA QT port to connect the ‎LEDs and the Ground wire. The red wire will connect to the USB pin. ‎Do not use the red STEMMA wire to connect to the LED strips -- it's ‎rated at 3.3v and the power coming in from our USB cable is 5v. ‎Instead, connect the red wire to the USB pin on the Feather.‎

Since we have a lot of lights, it's not a good idea to pull power ‎through the USB port on the Feather -- too much current could ‎damage the board. This setup brings power to the DotStar strips first, ‎then feeds it out to the Feather from there.‎

• DotStar VCC --> Feather USB
• DotStar CL --> STEMMA Yellow
• DotStar DATA --> STEMMA Blue
• DotStar G --> STEMMA Black

‎Dotstar strips are connected in a serpentine array, and power and ‎ground are connected at both ends.‎

Electronics Assembly

Stemma Adapter

First, you'll need to make an adapter so you can plug the LED strip ‎into the Feather using the STEMMA QT port.‎

Cut the 4-pin male connector off the OUT end of your LED strip. If ‎yours doesn't have one, we have them in the shop but they aren't so ‎handily color-coded.‎

Trim the red wire on your STEMMA QT connector so it's out of your ‎way. This wire carries a 3.3v current and will damage the Feather if ‎you connect it to the 5v DotStar strips.‎

Strip 1/4" of shielding off the other 3 wires of your STEMMA QT ‎connector and your 4-pin male connector. Match up the colors and ‎solder the wires together: Yellow to yellow, green to blue, and black ‎to black. ‎

Solder the remaining red wire on the JST connector to the USB pin ‎on the Feather.‎

Power Switch

Cut the male end off your power switch tail and strip the shielding ‎back by about 1/2". Inside, you'll find 4 wires: two data wires, a power, ‎and ground. They should be color-coded: the power wires are red ‎and black, and the data wires are colored.‎

We're going to ignore the data wires since this cable is used for ‎powering our project.‎

Extend the power wires by splicing on a few inches of red and black ‎wire to the little red and black wires on the switch. ‎

Cover the connection with a big piece of heat shrink.‎

Solder the red and black power wires at the beginning of your ‎DotStar strip to the power wires on the switch, matching red and ‎black.‎

Plug the JST connector into your JST/stemma adapter.‎

We have safely powered our project without pulling all the power we ‎need for the DotStars through the Feather.‎

Later on in the project, I ended up cutting and re-attaching these ‎power and ground wires, so they pass through a hole drilled in the ‎frame. At that time, I also added a second power and ground wire to ‎the far end of the LED matrix to "inject" power at both ends and ‎avoid having the strip dim from the voltage drop that happens when ‎the power flows down a long strip of LEDs. Check the wiring ‎diagram page to see the final wiring layout. For now, you just need a ‎solid power connection to the IN end so you can test each strip as ‎you go.‎

Plug a USB cable into the other end of your switch and into power. ‎Your light strip should come on in yellow. Did it? Hooray! Time to ‎wire up the rest of the strips.‎

If it didn't come on, see below for some troubleshooting tips. You ‎really want to get this working before moving forward, since testing ‎is essential for the next portion.‎

Troubleshooting

If your lights didn't come on, here are a few things to try:‎

1. Reseat the STEMMA QT connector and the JST connector and ‎make sure they're tight.
2. Flip your on/off switch. Was it just turned off?‎‎
3. Check to be sure you've connected to the IN end of the strip. ‎Look for little arrows pointing in the direction of data flow and ‎make sure the arrows are pointing AWAY from the connection ‎you made.‎‎
4. Head back to WLED and check your pinout configuration ‎under LED Preferences. Be sure the settings here match the ‎screenshot on that page. It's easy to get the numbers crossed.
5. If you're getting lights but strange behavior (odd colors or ‎patterns), be sure WLED is configured for APA102 lights -- it ‎defaults to WS2812 (NeoPixels) but we're using DotStars here.‎

WLED Software

Install WLED

These next steps require a WebSerial-compatible browser. As of ‎this writing, that ‎means Google Chrome, Microsoft Edge, or Opera “desktop” ‎browsers. Other browsers (Safari, Firefox, Explorer, ‎and anything mobile) won’t work.‎

Visit https://install.wled.me/‎

Plug your microcontroller into your computer with a known good ‎USB cable. Click "Install" and select the port for your board.‎

Depending on the USB-to-serial bridge chip on the board, you might ‎see one or two serial ports. On Mac, for instance, there might be both ‎‎“/dev/cu.usbmodem[number]” and “/dev/cu.wchusbserial[number].” ‎Use the “wchusbserial” one.‎

After successful installation, enter your WiFi network name and ‎password when prompted. This must be a 2.4 GHz WiFi network; ‎ESP32 does not support 5 GHz networks. If it can’t connect, then as a ‎fallback WLED will create its own 2.4 GHz WiFi access point.‎

Setup & Preferences

WiFi Setup

Head to the WiFi Setup screen under Config and create a good URL ‎so you can control your project from any web-enabled device. I ‎called mine http://monster.local -- this is what I type into any web ‎browser on my WiFi network in order to connect to my project.‎

LED Preferences

Next, head to the LED Preferences tab under the Config menu.‎

Brightness Limiter

WLED automatically limits the brightness of your project, so your ‎power supply doesn't get over-taxed. The default amperage is 850, ‎which is a little low for most power supplies.‎

Make this number match your setup. If you're using a 2A USB power ‎brick, change this number to 2000mA. ‎

Hardware Setup

Scroll down to Hardware Setup. If you're using DotStar LEDs, change ‎the LED type to APA102. Put your total number of LEDs into the ‎‎"Length" field and change the Data and Clock pin fields to 22 and 20. ‎These are the pin numbers associated with the yellow and blue ‎wires on the stemma connector. ‎

Find this info on the pinout card for the Feather V2.‎

Matrix Setup

WLED has a handy 2d-matrix setup feature that will take care of the ‎mapping for you on a rectangular matrix. Go back to Config and ‎choose the 2D Configuration tab.‎

Change the dropdown to read 2d Matrix, and additional options will ‎appear. If you want to sync more than one panel, you can do it here. ‎

Set up your layout numbers to match the number of rows and ‎columns in your project. You can also change orientation here - my ‎pixels start in the lower left corner and finish in the upper right.‎

Use It

Now you can use any computer or handheld device to control your ‎LEDs. ‎

Make sure your device is on the same WiFi network as your board. ‎Navigate to your custom URL (http://monster.local/ for me) in a web ‎browser. You'll see a color picker above a whole bunch of color ‎palette choices.‎

Choose a color, choose an effect, and watch your lights animate and ‎glow! Save your favorite combinations as presets, create playlists, ‎control the speed and intensity of the animations and lots more. This ‎web app is incredibly intuitive and easy to use.‎

Head over to the WLED wiki at https://kno.wled.ge/ to delve into all the ‎particulars.‎

Matrix Effects

WLED has a hefty number of matrix effects that appear in the list ‎when you've got your 2d matrix set up. Click the little square in the ‎‎"filters" popup to see only the 2d matrix effects. Many of them can be ‎customized with speed and intensity sliders, or different color ‎palettes. Go wild!‎

LED Strip Setup

Decide what size you want to make your matrix. Mine is 21x14: 21 ‎pixels wide and 14 strips high. I like the 3:2 ratio; it's pleasing to my ‎eye, and I think this is a great size for wall art. It's big enough to show ‎some good detail without being too demanding. My finished piece is ‎just over 30"x20" including the frame.‎

This setup used 10m of pixels just about perfectly. The total came to ‎‎294 pixels, which can be comfortably powered with a USB 2A/5V ‎power supply and gave me a little bit of margin for error with cutting.‎

Cut your strips to length and lay them out on a piece of foam board ‎or poster board. Put LED 0 (with the connector) at the bottom left. ‎Then, lay out the strips in a zigzag, or serpentine pattern, with the ‎data flow switching directions with every other strip.‎

To get a perfect grid, I used a strip of LEDs and laid them ‎perpendicularly across the strips, matching up the pixels. This made ‎it easy to get the spacing as even as possible.‎

Once you're happy with the layout, use clear packing tape to fix the ‎strips to the foam core. Leave about an inch of LED strip at each end ‎un-taped.‎

Cut the silicone sleeve of each of the strips at both ends in order to ‎expose the copper pads. Give yourself plenty of room to get your ‎soldering iron in there.‎

‎

Use a hot soldering iron and some solder to tin all the pads on all the ‎strips at both ends. Be sure there's a nice blob of solder on there, but ‎not so much that you're in danger of bridging the pads together.‎

Grab your silicone stranded ribbon cable wire. Strip off one of the 4 ‎wires so the cable is now made of just 3 wires. Cut a 3" section of ‎ribbon cable and strip around 1/8" of shielding off each wire at both ‎ends. You want just enough wire to fit on the solder pads you tinned. ‎Getting the exposed wire to match neatly with the pads will save ‎you a lot of heartache while soldering the strips together.‎

Use your soldering iron to tin all 6 wire ends neatly, trim them to be ‎tidy, then repeat. You'll need one fewer ribbon cable than your ‎number of strips (so I needed 13, with 14 strips).‎

Plug your microcontroller in and turn the switch to "on". Your first ‎strip should light up. Turn the switch back to "off" before proceeding ‎‎-- you NEVER want to solder strips while the circuit is live. The ‎chances of bridging the pins while soldering is very high, and that's a ‎great way to fry your microcontroller.‎

Slip a couple pieces of 1/2" heat shrink onto your first connector wire ‎and solder the OUT end of your first strip to the IN end of your ‎second strip, which should be conveniently located next-door. Be ‎sure to get the wires in the correct order: + goes to +, G goes to G, ‎and OUT goes to IN for the clock and data wires.‎

Turn the switch back on and test this strip before proceeding. Then ‎turn it off again, head to the other end, and solder the next ‎connection. Continue zigzagging back and forth and be sure each ‎strip lights up as you go.‎

Slide the heat shrink into place over each of your strips, covering the ‎exposed pads but not blocking the first light.‎

The lights may have slid around inside the silicone sleeves as you ‎were soldering, so use a ruler to line them up again. Once you're sure ‎all the connections are good and the alignment is right, seal the ‎ends by squirting a little hot glue inside the heat shrink, then ‎shrinking the heat shrink in place with a heat gun.‎

Be a bit careful here -- the packing tape and foam core are both ‎subject to melting and/or catching fire if you use too much heat gun ‎on them! Use a low setting and take your time.‎

Frame Assembly

The fun fur we're using makes a great diffuser, but if it's laid directly ‎on the pixels, you will still see individual pixels in a grid through the ‎fur. I wanted a more diffused look, with bands of color instead of ‎discernible pixels. The cheapest and easiest way to add more ‎diffusion is with open space. Holding the fur an inch or two above ‎the pixels creates an unbeatable layer of diffusion.‎

Check out our NeoPixel Diffusion guide for more ideas.‎

To achieve this, I stretched the fun fur across a 2" deep frame that we ‎made in our garage wood shop. The frame is fully covered by the fur, ‎so we used ugly scrap wood for the edges and repurposed a sheet of ‎‎1/4" birch plywood for the backing. ‎

If you don't have your own wood shop, it's not hard to find deep-set ‎picture frames at thrift stores. My local Goodwill has an incredible ‎selection of pictures with frames for around $5, and they already ‎come with hanging hardware.

The frame is made from 2" x 1" pieces of scrap wood, screwed into a ‎box. We got a little fancy and ran them through the table saw at ‎about 1/4" depth, to make a slot for the plywood backing.‎

The foam core is mounted inside the frame using a staple gun.‎

We used a palm router to rout out a hole for the switch, so that it sits ‎flush with the outer edge of the frame. It will be covered by the fun ‎fur, but still accessible by feel. ‎

There is a hole drilled all the way through on one side, to feed the ‎power cables through.‎

We routed another hole in the back of the frame where the Feather ‎is going to be mounted. This wiring layout doesn't allow ‎reprogramming through the USB power cable, so this hole will allow ‎access to the Feather's USB port for reprogramming without taking ‎the whole piece apart.‎

Some final wiring is needed to get the power switch on the outside ‎of the frame. Cut the two power wires coming from the switch, ‎thread them through the hole, then reconnect them.‎

If your pixels seem a bit dim at the top of the matrix, this is a good ‎time to splice in another red and black wire and connect it to the far ‎end of your strip (mine's in the upper left corner). Power flows both ‎directions through these strips, while data has to go from IN to OUT. ‎Connecting power and ground at both ends of the strip will give you ‎a more even power distribution and correct for any dimness caused ‎by voltage drop across a long run of LEDs. ‎

Here's the switch nestled into its hole. I finished by gluing the ‎Feather board against the frame with hot glue, making sure the USB ‎port is accessible through the hole in the back of the frame, then ‎used a few dabs of hot glue to manage the wires so they don't cast ‎any shadows on the fur.‎

The USB power cable plugs into the switch at the corner, which is ‎handy because now I can hang the piece either horizontally or ‎vertically and the cable will drop from the corner instead of the side.‎

When laying out your fun fur, give some thought to the orientation. ‎This stuff is directional -- there's one way you can smooth it down, so ‎it looks neat and tidy. I've found it looks best when it's hung so that it ‎‎"pets" downward. ‎

Cut the fun fur from the back side with a sharp utility knife to ‎minimize fuzz bunnies. Make it a few inches larger than your frame ‎on all sides. Stretch it tightly across the frame and secure it with a ‎staple gun. ‎

Be careful to ONLY staple around the wooden frame and NOT ‎through the plywood backing. If a staple hit one of your strips it ‎could damage it or short it out, which would be very sad and ‎frustrating at this point in the project. Stick to the edge, all you staple ‎fiends.‎

Cut a little slit for the USB cable. It can also be helpful to grade out ‎the corners a bit if they seem too bulky.‎

There's an art to hiding the power cords for light-up art pieces.‎

• Use a white USB cable
• Use a wire cover system
• If the cord really bugs you, this LED Floor guide shows you how to ‎poke a hole in the wall and drop the cable down inside, then ‎fish it out of a second hole near the outlet with a coat hanger. ‎

Related Content