Introduction: RGB LED Pixel Shades

By Github

Hi everyone, in this Instructable I'm going to show you how to make a pair of LED pixel shades. Originally I created these to wear around the house at Christmas / New Years, sort of as a mobile ornament, but they ended up being a bit more cyberpunk than I anticipated, so they should be fun to wear at other events too!

The shades use 76 WS2812b LEDs (aka Neopixels). The LEDs only project their light in one direction, so you can see through the shades without blinding yourself. WS2812b's are individually addressable, meaning that you control the color of each led. This lets you create almost any effect you can imagine (as long as you can code it). If you're not sure what effects you might like, or don't want to write a bunch of code, don't worry; I've written code to control the shades, including 40 different effects. The shades also include connections for a MAX4466 mic (for audio reactive effects) and a HC-05 Bluetooth breakout board, although my code currently doesn't incorporate either of them.

The LEDs are controlled using a Wemos D1 Mini, an Arduino compatible micro-controller featuring an ESP8266 as the processor. This gives you plenty of space and power to run as many effects as you'd like. It also gives you access to WiFi functionality ( although not currently implemented in my code). The shades are powered externally via a 3.5mm DC jack to USB cable connected to any common 5v power bank.

Both the LEDs and the Wemos are mounted on custom PCBs, which also form the frame of the shades. Soldering each of the 76 LEDs (and their decoupling capacitors) is a lot of work. Likewise, WS2812b's can be quite easily damaged by hand soldering. To avoid both these issues, I'm going to show you how you can order the PCB pre-assembled with the LEDs and capacitors.

Note that only the shades PCB is intended to be pre-assembled. You will still need to solder components to the Right Temple PCB(the ear arm). This will require some SMD soldering, but nothing smaller than 0805, which can be soldered by hand with a fine-tip iron.

Finally, you will need access to a 3D printer to make a few mechanical components.

You can find all the relevant files here: https://github.com/AlbertGBarber/Pixel-Shades

If you have any questions, please leave a comment, and I'll get back to you.

Supplies

(You might be able to find most of the parts for lower cost at places like Aliexpress, Ebay, Banggood, etc)

PCBs:

Each pair of shades requires three PCBs: a Left Temple, Right Temple and a Shades PCB. You can find the zipped Gerber PCB files at the Github depository linked above. I'll go over how to order the PCBs later in this Instructable.

Electronic Parts:

The link below should take you to a pre-filled bill of materials (BOM) that contains all the parts needed for one pair of shades. I recommend ordering extra of each part to account for any mishaps during assembly. Note that you will need a Digikey account to access the BOM.

https://www.digikey.com/BOM/Create/CreateSharedBom...

If the link doesn't work please see the list of parts below, including part numbers:

The micro-controller:

  • One Wemos D1 Mini v3.1.0 Link

If you're choosing to solder the shades PCB yourself, you'll also need:

  • 76 WS2812b LEDs: Link (you can find them elsewhere: Aliexpress, Ebay, etc)
  • One 1N4148W, SOT-123 diode: 1N4148W-TP
  • 71 0.1µF, 0402, capacitors: CL05B104KO5NNNC

If you want to use either the Bluetooth or microphone inputs:

Other Parts:

  • 130mm of 10mm Dia. black heat shrink Link
  • ~5mm of 3mm Dia. heat shrink (any color than black, optional)
  • One lobster claw necklace clasp Link
  • One 1" Dia. key-ring ring Link
  • 22Ga silicone wire Link (for repeated flexing)
  • Two 5mm M2 screws
  • Six 4mm M2 Screws
  • One USB power bank (pretty much any will work, should have 1A out minimum)
  • One USB to 3.5mm DC jack cable Link (I'm 6ft tall and a 4ft cable is comfortable for me, but 3ft might be better if you're shorter)
  • One nose support piece Link
  • 76 1/4" round white stickers Link (Ideally they'd be 4mm in Dia, but I cannot find any) (optional)

Tools:

  • 3D printer + 1.75mm filament
  • Wire strippers
  • Wire cutters
  • Wire crimper for JST terminals Link
  • Heat gun
  • Soldering iron w/ fine tip
  • PH0 screwdriver
  • Scissors
  • Small needle-nosed pliers (like for bead work)
  • Tweezers (for SMD placement/soldering)

Step 1: PCB Notes

Reading this step is optional. Some notes on the PCBs and the general shades design:

  • If you'd like to tweak or inspect the PCBs, you can find them here.
  • I designed the outlines of the shades using Fusion 360, modeling them after a pair of safety glasses. I then 3D printed them to test their fit. Once I was happy, I exported a DXF of each part, and then imported them into EasyEDA as the board outline.
  • Using EasyEDA was somewhat tedious, as it doesn't seem to have a way to lay parts out in a pattern, so I had to had to place all the LEDs and capacitors by hand. Likewise, I also used a user made LED footprint for the first layout, which had to be replaced for BOM and pick & place to work. This, and a couple of similar mistakes, caused me to have to redo the layout a few times.
  • I chose a Wemos D1 Mini as the micro-controller for three reasons:
    1. It has plenty of memory and processing power to store and run patterns.
    2. It's fairly small and cheap.
    3. You can program it using the Arduino IDE.

The fact that it can potentially use WIFI is a bonus.

  • Unfortunately, the Wemos uses 3.3v logic level, while WS2812 LEDs are strictly 5v. Using this guide, I was able to avoid using a logic level converter, and replace it with a single diode. The diode is connected only to the power input of the first LED. This reduces the input voltage by about 0.6v, just enough to use the 3.3v logic from the Wemos. Meanwhile, the logic out of the LED is high enough to talk to the rest of the LEDs. Technically, the brightness of the first LED is reduced, but in practice it's not noticeable.
  • I considered powering the shades from an on-board LiPo battery, but I decided it would add too much bulk. Likewise, running the shades from an external power bank is safer, and gives some flexibility in capacity to the user.
  • Modern power banks shut down unless a minimum amount of current is drawn every so often. Although the shades should draw enough passively (~1ma from each LED when off, and ~30ma from the Wemos) I added a keep-alive circuit just to be safe.The circuit consists of an NPN transistor connected through a 22ohm resistor to ground. The transistor is controlled by the Wemos using a timer interrupt, allowing ~225ma of current to be drawn from power bank at regular intervals.
  • The maximum current draw from each LED is ~60ma, meaning that at full white and max brightness, the shades would draw ~4.5A. This is beyond the rating of most power banks and the also the shades connectors. Thankfully, due to human perception of light being non-linear, the shades look almost as bright at half brightness as they do at full, which is what I set the cap to in my code.
  • Each of the shades three buttons have a debounce circuit. Theory on the circuit can be found here. I could have just debounced in software, but I decided it was easier to add a couple of components, and then not have to worry about it at all.
  • I had a few spare pins on the Wemos, so I decided to add pinouts for a common microphone and Bluetooth breakout board. I figured that these could add some useful functionality for people, even though I didn't plan on using them myself.

Step 2: Ordering the Temple PCBs

You'll need to order both the Temple PCBs from a PCB prototype manufacture. You can find them both at my Github ( "Gerber_Temple Left_20191124153844.zip" and "Gerber_Temple Right ESP8266_20191124153834.zip"). If you've never purchased a custom PCB before, it's very straight forward; most companies have an automated quoting system that accepts zipped Gerber files. I can recommend JLC PCB, Seeedstudio, AllPCB, or OSH Park, although I'm sure most others will work as well. All the default board specs from these manufactures will work fine, but make sure to set the board thickness to 1.6mm (should be the default). Board color is your preference. In the next step we'll order the shades PCB to be assembled. You don't need to order the shades and the temple PCBs from the same manufacturer, but it may help save on shipping.

Step 3: Ordering the Shades PCB Part 1

The Shades PCB is intended to be assembled by a PCB manufacturer. If you'd like to assemble the PCBs by yourself, you can skip this step. Be warned, the capacitors on the board are 0402 sized, so they are tricky to solder by hand. Likewise, the WS2812b LEDs are fairly sensitive to soldering temperatures.

Most prototype PCB manufactures offer an assembly service, but I choose to use JLC PCB due to their low cost. In this next set of steps I'll guide you through ordering the PCB from JLC PCB. These steps should translate to other manufactures as well. As of writing, JLC's PCB assembly service is fairly new, and seems to be targeted at hobbyists. The upside of this is that the service is extremely cheap compared to other manufactures (~$50 USD for 5 five shades assembled), but with the caveats that:

  • They only assemble on a single side.
  • The components must be be available from their own internal parts supply.
  • Through-hole components will be ignored.
  • Only 2&4 layers.
  • ≤50pcs per order.
  • Orders are accepted in multiples of 5.
  • 1.0mm/1.2mm/1.6mm thickness only.
  • Only board color available is green.
  • 1oz is the maximum copper weight.

I've designed the Shades PCB around these requirements. Unfortunately you will need to order at least 5 shades, and you're stuck with a green PCB.

Step 4: Ordering the Shades PCB Part 2

Starting on the JLC quote page, upload the Gerber zip file attached to this step or found at my Github (Gerber_Shades Ws2812B_20191124153856.zip). The PCB is big, so it may take awhile to process. If it fails to input the board dimensions, they are: 41 x 156mm. You don't need to adjust any of the other PCB options.

Scroll down to section labeled "SMT Assembly". Activate it and then select the top side for assembly. Fill in the other options as per the image above. Note that their UI/options may change in the future (it's changed since I started this project!), so if your not sure about something, let me know and I'll try to help.

Once you're ready, hit confirm.

Step 5: Ordering the Shades PCB Part 3

After hitting confirm, you should be taken to a page to upload the BOM and Pick and Place files. These files tell the system what parts to use on the PCB and where the place them. Download the files from this step or from my Github ( "BOM_Shutter Shades WS2812B Ver_20191203151413.csv" and "PickAndPlace_Lenses Ws2812B_20191203151443.csv" ) and upload them to JLC. Your page should look like the image above. When ready, hit Next.

Attachments

Step 6: Ordering the Shades PCB Part 4

On this page you confirm the parts to be placed on the PCB.

You should see a list of three components:

  • One 1N4148W, SOT23 diode
  • 76 WS2812C, LED-5050_4P LEDs
  • 71 0.1µf, C0402 capacitors

All of these parts should be confirmed, like in the image above. Although unlikely, should any of the parts be missing, or can't be confirmed, JLC either doesn't stock them anymore, or they're obsolete. If you leave a comment, I'll try to help update the PCB with a replacement parts. Alternatively, you can copy the PCB and adjust it yourself here. You can change missing parts by updating the BOM; as long as they have the same SMD footprint, there shouldn't be a problem.

When you're ready, hit Next.

Step 7: Ordering the Shades PCB Part 5

This the last ordering step. You should be given a preview of the assembled PCB. Make sure that the component placement matches the image above. Note the red dots on the LEDs indicate pin 1. If everything looks good, you can place the order and return here when it arrives.

Step 8: Shades PCB Assembly:

We'll begin the assembly by soldering the power, ground and signal wires to the Shades PCB. Start by cutting three ~67mm lengths of the silicone wire; two of black and one of red. Strip a small portion of one end of each of the wires and attach a female JST crimp terminal using your crimping tool. Then strip ~10mm from the other end of each of the wires. Tin just the tip of this end with solder. You want just enough solder to stop the wire from fraying without increasing the wire's thickness. In the end, each wire should match the first image above.

Optionally, you can add a short length of colored (I used green) heat shrink to one of the black wires to label it as the signal wire.

Next, insert each wire through the outer holes of the Shades PCB (on the side with three holes). The red wire should go through the upper-most hole. Bend the stripped portion of the wire into a hook shape, and then push it into the corresponding hole on the PCB. Use needle-nosed pliers to help. You want to end up with a bit of the wire's sheath coming out of the PCBs holes, this will let the wire act as strain/bending relief.

This is probably a bit confusing, but hopefully the pictures will guide you.

Next, solder the wires into place. You may want to offer up the wires with the Right Temple PCB (the one that the buttons and Wemos D1 mini will be mounted to) to make sure they're long enough. Also, the power and ground connections will require more heat than the signal, so you may want to bump up your soldering iron temperature if able.

Finally, insert the female JST crimp connectors into your female JST housing. Make sure the wire order matches the image. The order should be power, signal, then ground starting from the top of the connector (taken from it's alignment when attached to the Right Temple PCB).

We're done with the shades PCB for now, so you can set it aside.

Step 9: Temple PCB Assembly Part 1

Now we're going to assemble the Temple PCBs. Although both the PCBs have markings for components, we're mainly going to focus on the Right Temple (the one that the buttons and Wemos D1 mini are mounted to) The component spots on the Left Temple PCB are for redundancy.

First we're to solder the SMD components to the PCB. If you've never soldered SMD parts before here's a guide to help you get started: Link. All of the parts are 0805 or larger, so hand soldering should be fairly straight forward.

First solder the components to the rear of the PCB, these include:

  • Three 100k resistors
  • Four 1k resistors
  • Five 1µf capacitors
  • One 22 Ohm resistor
  • One MCP1755 Voltage regulator
  • One MMBT2222 NPN transistor

Their placements are all labeled on the PCB.

Your end result should look like the first image above.

Next, flip the PCB over and solder the three push buttons in place, as shown in the second image.

Step 10: Temple PCB Assembly Part 2

Now we'll add some heat shrink to both the Temple PCBs and the power connector. This helps protect your ears from the rough PCB edges.

First cut two 65mm lengths of the 10mm Dia. heat shrink. Slip a piece of head shrink along the arm of each PCB.

Before shrinking the heat shrink, solder the 3.5mm DC jack connector to the rear of the Right Temple PCB as pictured. Note that you can solder it to either side. I choose the rear side, as that was most comfortable for me. When soldering, slide the heat shrink along the arm to prevent it from heating up too much.

Once the jack connector is attached, slip the heat shrink back down over the jack, as pictured, and shrink the heat shrink on both the temple PCBs using a heat gun.

Finally, solder the right-angle, male JST connector to the rear side of the Right Temple PCB, as pictured.

Step 11: Temple PCB Assembly Part 3

Now we're going to solder the Wemos D1 Mini to the temple PCB.

Before you do this, you should confirm that you can program the Wemos, and that it's working correctly.

Begin by following the instructions here to install the ESP8266 core for the Arduino IDE. This allows you to program the Wemos as if it was an Arduino.

Once installed open the IDE and connect the Wemos to your computer using a micro-USB cable. Under tools->board, select "LOLIN(WEMOS) D1 R2 & Mini". Also select the port the Wemos is connected to under tools. Try uploading blink (or your own favorite test program). If everything's OK, the Wemos's LED should start blinking once a second.

Once you've confirmed you can upload code to the Wemos, solder it to the Right Temple PCB using male headers, as pictured. Make sure you solder it to the side with the buttons, the pin labels on the Wemos should match those on the PCB. Trim any excess length from the headers.

At this point all the PCBs are full assembled, and we're ready to put all the pieces together.

If you'd like to use a Max4466 Mic, or an HC-05 Bluetooth module, now is the time to attach them to the PCB. Their locations are labeled, make sure the pins match so you get their orientations correct.

Step 12: Shades Final Assembly Part 1

Using a 3D printer, print out two pairs of hinges (two of "hinge 1.stl" and "hinge 2.stl" attached to this step, also found at my Github). Assemble the hinges by inserting a length of 1.75mm filament through both hinge parts, joining them together.

Then, as pictured, attach the hinges to the Shades PCB using four 4mm M2 screws.

You can also attach the nose support, using the groove on the support, simply slide it into the nose area of the PCB. It should fit snugly into place.

Attachments

Step 13: Shades Final Assembly Part 2

3D print the "Ear Cover.stl" attached to this step. Slide the cover over the Wemos. The cover's holes should align with those on the Right Temple PCB.

Using two 5mm M2 screws, attach the cover and Right Temple PCB to the right hinge of the Shades PCB. Insert the female JST connector into the male housing on the Right Temple PCB.

Take the Left Temple PCB and a lobster claw necklace clamp. Insert the clamp through the hole at the end of the PCBs arm. Then attach a key-chain ring to the lobster claw's loop as pictured.

Finally, using two 4mm M2 screws, attach the Left Temple PCB to the left hinge of the shades PCB.

At this point the shades assembly is complete.

Attachments

Step 14: Shades Final Assembly Part 3(optional):

In this step we'll add dot stickers to the shades to help diffuse the LEDs. This step is optional, I think it makes the shades look better, but it does lead to a small amount of light reflection.

Generally, WS2812b LEDs look better when they are diffused through a material. This helps scatter the light source, making it easier on your eyes, while also making the colors more visible. The issue with the shades is that we do not want to reflect the led light back towards our eyes. We cannot use a thick diffuser, because any light scattered from the sides of the diffuser will bounce back towards us.

Instead we'll use thin dot stickers (see Intro for link). Of all the methods I tested, these diffused the LEDs just enough to be acceptable, while also minimizing light reflections. However, they must be applied in a specific way.

Although the stickers are thin, if applied so that the sticker covers the whole LED square, they still cause a noticeable reflection for LEDs that are above or below your central line of vision. This is because, when wearing the shades, and looking straight ahead, your eyes are level with the central bar of the shades, while the other bars are at an angle from your eyes. This angle means the edge of the stickers is visible to you, and any light passing through the edge will also be visible.

We want to minimize the edge we can see. Since the stickers are round, and when wearing the shades we only see one edge of each LED (either the bottom or top), we can place the stickers so only a small portion of the stickers edge is actually at the edge of the LED body that we see. You can see this in the image above if you look carefully (sorry about the quality).

In other words, you should place the stickers so that they barely cover up each LEDs lens (the part the light actually comes out of), with the extra part of the sticker being closer to the closest top or bottom outer edge of the shades. You then trim the extra part away using a pair of scissors.

This will diffuse the LED light, but in very dark conditions you will still see some reflections.

Step 15: The Code

I've written code for the shades that includes 40 different effects. It can be found at my Github in the folder "Shades_Code". Before you can upload the code to the Wemos, you'll need two libraries:

  • My "PixelStrip" library
  • The Adafruit Neopixel library

You can download the PixelStrip library from here. Download all the files and place them in a folder named "PixelStrip" in the libraries folder of your Arduino install directory.

You can install the Adafruit Neopixel library using the Arduino IDE's library manager.

Once you've installed both libraries you can open Shades_Code.ino and upload it to the Wemos. If everything's good, the shades should begin cycling effects. Your shades are now complete! :)

If something's wrong, please head to my troubleshooting step.

At this point you can move on to the next step, where I'll go over the button functions of the shades, and how to wear them. If you want to disable or modify any effects, I'll go over that below.

Changing Effects:

If you'd like to disable an effect you'll first need to find it in the Shades_Code.ino file. It will be in the large switch statement in the main void loop(). The effects aren't individually labeled, as it's hard to describe them with just comments, so you might have to do a bit of hunting. Once you've found the effect, you just need to change the case number to anything higher than the total number of effects (99 for ex) to disable it.

You're also welcome to modify or add your own effects. To add an effect, add it to the switch statement in the main void loop(), and increase the "numEffects" var.

My library is capable of doing a wide range of effects, but it is a bit difficult to work with. It originally began as just a small storehouse for effects, but I later extended it to run effects across odd shapes of pixels (rings, stars, etc), so it's become a bit jumbled. At this point I have an architecture for the library, and I fully intend to re-write it in the future. In the meantime, the current library is fully commented and bug free (look in segmentSet.h for comments about segments), but you'll probably have to do some experimentation to understand how each effect works.

Additionally, the LEDs are laid out in a zig-zag format. Their numbers are on the rear of the Shades PCB.

Step 16: Wearing and Using the Shades

To wear the shades, pass the 3.5mm jack cable through the key-ring ring, and plug it into the connector at the end of the right temple. Passing the cable through the key-ring makes it act as a strap, keeping the shades secure on your face. Power the shades using any 5V power bank.

Buttons:

The shades have three buttons. When using my code, they do the following things:

(these functions are also listed on the Left Temple PCB)

  • Button 1: Next Effect (or restarts current effect if effect rotation is off)
  • Button 2: Effect Rotation on/off. This makes the current effect repeat indefinitely
  • Button 1+2 (at the same time): Shades on/off. Just stops the effects, doesn't turn the power off.
  • Button 3: Brightness cycle. You can adjust the increments by changing the "brightnessLevels" array in my code.

If you've made it this far, thanks for reading! I hope you have fun with your shades. If you have any questions, please leave a comment and I'll get back to you.

Step 17: Troubleshooting:

If you're here, then the shades aren't behaving properly. Below I'll go over some possible problems and solutions. If you don't see anything that addresses your issue, please leave a comment and I'll try to help.

  • The shades don't show anything when plugged in.
    • Try plugging a micro USB into the Wemos. The shades should turn on.
      • If they do, something's wrong with your power bank.
      • If they don't, try uploading any code to the Wemos (such as blink)
        • If it works, something's wrong with the connection between the shades and the Temple PCB. Double check your JST connection. The wires should be in order from the top: Power, Data, Ground.
          • If the connection's good, try commenting out the button functions in my code, it's possible one of the buttons is malfunctioning.
        • If it doesn't work, either the Wemos is dead, or it's being reset repeatedly. Open the Arduino Serial monitor (set Baud to 115200) and watch for any reset codes. If you get a code, you'll have to do some googling to find out what's wrong. If you don't get any codes, the Wemos is probably dead.
  • The shades work, but some pixels flicker (this happened on 2 of the 5 PCBs I ordered)
    • This is probably a problem with the first pixel (Top right when wearing the shades). You'll need to replace the pixel. First, remove it using a fine tipped pair of wire cutters to snip the pixel's connections to the PCB. Be careful not to pull the solder pads off the PCB. Then, you'll need to buy some WS2812 LEDs here, and solder one in place. Be sure to orient the pixel to match the others on the row.
Fashion Contest

Runner Up in the
Fashion Contest