Customizable LED Display Hat

If you're tired of buying different hats for every occasion, if you're constantly switching between favorite sports teams, or if you want a flashy, versatile, and unique hat that no one else has, then we'll show you how to make a relatively easy, customizable hat that can display any combination of colors, images, and animations that you can fit into an 8x8 LED display.

Check out this video to get a taste of what the hat can do, and for a demonstration of how to make it:

Create a Screen

Step 1: Display Template

You'll need to make a template of the LED matrix to size the area to cut from the screen material, and from the hat. The template should be about 1/4" wider on each side of the square so there is enough room for a border and attachment to the hat.

Step 2: Cut Out the Screen

You can make a protective screen cover for the display that protects the LED matrix and helps to hide the LED matrix circuit board. This screen will be applied on the outside of the hat. Place the paper template on the center of the full-face sun visor, and trace the border with a marker. The contour of this sun visor matches well with the contour of the hat. Cut the traced-out area with a pair of sharp scissors.

Step 3: Cut Border Material

The screen will not look very good if applied directly on the hat, so we borrowed some material from the inside flap of the hat to create a border around the screen. Use a VERY sharp pair of fabric shears to cut this strip of material out. We didn't have any shears, so we used a pair of tin snips. Make sure to leave a few inches of the flap in the hat. We'll use this flap to tuck the electronics in later. With this particular hat, we started the cut on one end about an inch away from the label.

Step 4: Drill Screen Holes

You'll need to sew the material you just cut out to the border of the screen. But since it's really hard to get a needle through the plastic, take a small drill bit and drill holes about 5 to 8 millimeters apart along all four sides.

Step 5: Sew Border

Next, cut the border material into 4 strips, each the length of one side of the screen. Then, taking a sewing needle and thread, sew the material around the border using the pre-drilled holes. We used a running stitch pattern. It’s okay if the corners have some overlap; it’ll look fine once it’s attached to the hat.

That's it for the screen. Next, after preparing the hat, we'll attach it to the front of the hat using the cloth border we just put on it.

Modifying the Hat

Step 6: Trace Display Hole

Since the LED matrix and electronics will be mounted to the inside of the hat, we need to cut out a hole from the hat for the display. Take the same paper template made earlier, and center it very carefully on the inside of the hat. Trace the template with a maker, and cut out the area. We found a box cutter with a sawing motion worked quite well and created fairly clean cuts. Don't worry if the edges aren't very clean; they will be covered up by the borders of the screen.

Step 7: Clean Up Edges (Optional)

If you would like to clean up the edges a little, you can take a lighter and burn off all the loose threads hanging around the border.

Step 8: Sew Screen On Hat

We can now attach the screen to the hat. Simply sew the screen onto the hat using the cloth border (you don't have to puncture the plastic material). We used the same running stitch sewing pattern.

Mount Electronics

Step 9: Tape LED Matrix Into Hat

Now the hat is finally ready for the LED matrix. Luckily there's no more sewing involved. Carefully center the 8x8 RGB Flexible LED Matrix behind the square hole with the wires facing towards the flap of material you left to house the electronics. Then take some Gorilla tape and apply it to the border of the LED matrix.

You'll also want to remove the top two sets of wires from the back of the LED matrix before taping it to the hat. You can do this by heating up the contacts where the wires are attached with a soldering iron. The above picture shows the silver electrical contacts where the wires used to be attached.

Step 10: Cover All Electrical Contacts

To prevent anything from inadvertently shorting the electrical connections on the back of the LED matrix, take three small strips of electrical tape and cover up all the contacts.

Step 11: Connect Wearable Electronics Platform

The display is controlled by a small Flora Wearable Electronics Platform from Adafruit. You'll need to solder on some wire extensions to the leads coming out of the display so that the electronics platform can be attached. Use enough wire to extend to the inside of the flap left in the hat at step 3.

Next, solder the other ends to the contacts on the platform shown in the picture below: white wire to ground, green wire to #6, and red wire to VBATT.

Step 12: Mount Electronics Platform and Battery

Tape down the wires along the inside of the hat running towards the flap using Gorilla tape. Connect the Adafruit 3.7V 500mAh Lithium Ion Polymer Battery to the electronics platform. Then tuck both the battery and electronics platform into the flap. We found that the components stayed in there pretty well without any assistance.

Software

Step 13: Program and Load Software

To program the display, plug the Flora electronics platform into your computer using a USB cable. The platform can be programmed using the Arduino IDE. You can download the code and view the full setup instructions in our GitHub repository linked below.

Finished

Step 14: Wear It

Now go show it off!

Cheers,

Davis @ Hacker Shack