How To Build It!

Hey there! Ready to dive into an exciting project that’s as fun as it is educational? I’m here to guide you through creating a 12×12 pixel display panel that’s so straightforward, even a third grader can tackle it with just a bit of help. Inspired by a STEM project my third grader showcased, this adventure into building and coding isn’t just about making something cool—it’s about sparking a love for STEM. With over 20 years as a software engineer, I’ve simplified everything to make this project doable on a budget of less than $50. Whether you want to light up your room with a custom nightlight or create digital art, this project is for you. We’ll walk through downloading files, 3D printing components, laying out LED strips, connecting everything without soldering (with a small exception for the ESP8266), testing your setup, and finally bringing your panel to life with custom designs. By the end, you’ll have not only a cool LED panel but also a deeper understanding of electronics, programming, and creative design, all key STEM skills. Let’s get started and light up your creativity!

You can see the talent show blog post here: https://justreed.com/led-stem/killer-coders-project/

Disclaimer on Soldering

While this project primarily avoids the need for soldering, there’s a small exception if you purchase the ESP8266 microcontroller from certain suppliers. Often these chips come without header pins attached, requiring you to solder at least 3 pins for this project. Don’t worry; it’s a simple process, and there are plenty of tutorials available. Plus, soldering all the header pins opens up possibilities for expanding your project with additional components like buttons in the future.

Enjoying this guide? Support future projects by purchasing your supplies via our affiliate links. A small portion of each sale helps fund upcoming projects at no extra cost to you, ensuring a steady stream of creative DIY adventures. Thank you for your support and for being an integral part of our creative community!

Materials:

• WS2812b LED Strip (5m, 30P/m, 150 Pixels): This flexible LED strip is the canvas for your display, capable of showing a wide spectrum of colors. (White or Black version will work)
• ESP8266 Microcontroller (3 pack): The brain of your display, this microcontroller allows you to program and control the LEDs. Recommend having a spare just in case.
• Light-Diffusing Cloth: Softens and evenly distributes the light from your LEDs.
• Cardboard Sheet (16×20 inch): Serves as the mounting board for your LED strips. An Amazon box cut-to-size will do.
• 2x – 3-Pin Light Strip Clips (20 pack): Enables a solder-free connection between LED strip segments. You will have 18 left of these. There are other options available, but typically at a higher per-clip cost.
• Jumper Wires: These will connect the ESP8266 to the LED strips.
• 22awg Colored Flexible Wire: Flexible wire for making connections.

Tools & Other Supplies:

• 3D Printer: For creating the custom frame for your LED panel.
• If you don’t have access to one, consider cutting slotted cardboard as an alternative, though it’s less durable and more time-consuming.
• Many local libraries and schools offer access to 3D printers.
• Interestingly, the cost of the 3D printer I used for this project is competitive with many traditional color paper printers, making it a worthwhile investment for enthusiasts and a great time to get into the hobby.
• Black PLA Filament (1kg): Used for 3D printing the frame that holds your LED panel.
• USB-A Cable: High speed USB data cable. Note: This must be a data cable and not just a charging cable.
• Low Voltage Wire Snaps: Offers a simple way to connect wires without soldering.
• Tape, Glue, Stapler: For assembling and securing the components of your display.

Before diving into the physical assembly, the first step is to gather all the digital resources you’ll need. This includes the design files for 3D printing, the code to program your LED display, and examples to inspire your designs.

Visit the Project Repository: Head over to my github page to find all necessary files.

• 3D Printing Files (STLs): These files are used to print the frame for your LED panel. For this project, you’ll specifically need the ‘6×6.stl’ file.

• Arduino Setup: Contains the FastLED Library and Windows Drivers for the microcontroller (only if you need them).

• Design Examples: To get your creativity flowing, we’ve included examples of designs that you can display on your panel.

• Setup Link (esp-package-link.txt): This file has an important URL to help you set up your Arduino environment for programming the ESP8266.

Important Note: If you encounter any issues accessing or using these files, just drop me a note in the comments. Also remember that the online community is an excellent resource for troubleshooting. Forums, FAQs, and tutorials can provide valuable assistance.

With your digital files ready, it’s time to bring the physical components of your project to life through 3D printing.

• Printing Your Tiles: You’ll need to print 4 of the ‘6×6.stl’ files to create the frame for your 12×12 pixel display. Depending on your printer, this can take some time. The printer I linked above took me just under 12 hours per tile.

• 3D Printing Alternatives: If you don’t have access to a 3D printer, you can manually cut slotted cardboard to create a makeshift frame. This method requires patience and precision and may not offer the same durability or aesthetics as 3D printed parts. However, it’s a viable alternative that ensures everyone can participate in this project regardless of their access to a 3D printer.

Now, let’s start building the heart of your display by laying out the LED strips on the cardboard base.

• Prepare the Cardboard: Cut your cardboard to a size of 16×20 inches. This gives you extra space around the edges for easier handling and adjustments. You can trim it to 16×16 if you’d like, in that case you’ll just need to fold your wires behind the cardboard and tape them down.

• Cutting LED Strips: Divide your 5m LED strip into twelve 12-pixel segments. This will form the rows of your display.

• Arranging the Strips: Use two strips as spacing guides at each end of the cardboard. Starting from the lower left corner, adhere the LED strips onto the cardboard,

Very important: Alternate the direction of each strip to create a seamless flow of LEDs. You will notice arrows on the strips the indicate the direction of the flow of current. This alternating pattern is crucial for programming the display later.

After laying out your LED strips, the next step is to connect them to form a cohesive display. This process is designed to be solder-free for the LED strips, making it accessible for younger builders or those without soldering equipment. However, remember the soldering disclaimer for the ESP8266 microcontroller, as you may need to add header pins.

• Preparing Wires: Cut 33 pieces of 4-inch wires. Using different colors for 5V, GND, and Data lines is highly recommended to avoid confusion so that the same copper connection at the end of each row matches the same labeled connection on the next row.

• Using Light Strip Clips: Attach the 3-pin light strip clips to the ends of each LED strip segment. Ensure that the clips are oriented correctly so that the 5V, GND, and Data lines match up between each segment.

• Creating a Snake Pattern: Connect the LED strips in a snaking pattern. This means the end of one strip connects to the beginning of the next, and so forth, ensuring the flow of data across the entire display. Using pliers to secure the clips can help ensure a solid connection. Follow the arrows to ensure the proper direction, as they should alternate direction with each row.

• Microcontroller Preparation: If your ESP8266 came without header pins attached, solder at least three pins for the 5V, GND, and the D4 pin to the header pins that came with the board. This is relatively simple for adults and an excellent introduction to soldering if you’re new to it.

• Final Connections: Use the female-ended jumper wires to connect the ESP8266 to the starting point of your LED strip display. The low voltage wire snaps can be used for a secure connection without soldering, or you can twist the wires together with electrical tape like I did. Starting from the light strip, follow the red wire to 5v on the micro controller, white to gnd, and green to the D4 pin. All 3 pins are right next to each other on the microcontroller.

Disclaimer on Soldering for ESP8266

• Soldering Requirement: If you’ve purchased an ESP8266 microcontroller that doesn’t have header pins pre-attached, you’ll need to solder at least three pins to connect it to your display. This minor soldering task is a simple yet essential step to ensure your microcontroller can communicate with the LED strips.

Before proceeding to the final assembly, lets test your setup to ensure all connections are correct and the LED strips light up as expected.

Installing the Arduino IDE and Preparing Your Environment

1. Download the Arduino IDE: https://www.arduino.cc/en/software
2. Navigate to the Arduino website and download the Arduino Integrated Development Environment (IDE) suitable for your operating system.
3. Configure the IDE for ESP8266:
4. After downloading, open the Arduino IDE.
5. From the project files you’ve downloaded in Step 1, locate and open link.txt. This file contains a URL for the ESP8266 board manager.
6. In the Arduino IDE, go to File > Preferences.
7. Find the field labeled Additional Board Manager URLs and paste the URL from link.txt into this field. If there are already URLs present, add the new one by inserting a comma.
8. Install the ESP8266 Board Package:

• Navigate to Tools > Board > Boards Manager….
• Search for ESP8266 and install the package. This will allow the Arduino IDE to compile and upload code to your ESP8266 microcontroller.

Adding Libraries and Loading Your Test Sketch

1. Install the FastLED Library:
2. Go to Tools > Manage Libraries….
3. In the Library Manager, search for FastLED. Find the FastLED library in the list and click Install.
4. Open the Test Sketch:
5. From the Step 1 project files, locate and open FastLED_Test.ino. This Arduino sketch is designed to test the LED strip functionality.

Configuring and Uploading the Sketch

1. Select Your ESP8266 Board:
2. With the FastLED library installed and your test sketch open, go to Tools > Board and select LOLIN(WEMOS) D1 R2 & mini or the specific board you’re using. If using a different ESP8266 model, select the corresponding board name.
3. Connect and Select the Correct Port:
4. Connect your ESP8266 to your computer using a micro USB cable.
5. Go back to Tools > Port. You may need to close and reopen the Arduino IDE to refresh the port list. Select the new port that appears, which corresponds to your ESP8266.
6. Upload the Sketch:
7. Click the Upload button (the right arrow icon) in the Arduino IDE. This will compile and upload the FastLED_Test.ino sketch to your ESP8266.
8. Once uploaded, the ESP8266 will automatically run the sketch, and you should see a pattern of red LEDs moving up and down your strip, indicating that the installation and setup are correct.

Troubleshooting

LEDs Not Lighting Up Correctly:

• If some LEDs do not light up or the pattern isn’t as expected, check your connections between the LED strip segments and ensure they are secure.
• Verify that the data, power, and ground connections between the ESP8266 and the first LED strip are correctly made and that the orientation of the data flow matches the direction indicated on the LED strip.

With your LED strips tested and working, the next step is to assemble the display panel by attaching the 3D printed tiles and diffuser.

• Assembling the Frame: Arrange the 3D printed tiles (or your cardboard alternative) around the LED strips, using hot glue or another strong adhesive to secure them in place. When my son did this, he used Elmer’s school glue, which worked perfectly fine. Remember the diffuser will holder it in place to the cardboard as well. This frame not only adds stability to the display but also enhances its appearance.

• Adding the Diffuser: Lay the light-diffusing cloth over the LED strips and frame. Carefully staple the cloth to the backside of the cardboard, pulling it taut to ensure an even distribution of light across the panel. The diffuser helps soften the LEDs’ brightness, creating a more visually appealing display.

Now that your display panel is assembled, it’s time to bring it to life with custom designs and animations.

• Exploring AI Tools: Utilize AI tools like ChatGPT or Bard to generate creative designs or text animations for your display. These tools can offer coding snippets or design ideas that can be adapted for the LED panel. There are additional test files that we had AI create that are in the projects file.

Tips:

1. Always give AI some sample code before you tell it what kind of design you want.
2. If it doesn’t get your design right the first time, tell it what went wrong, and it will try to correct itself. This includes compiler errors or designs that look nothing like what you intended. Just explain what happened to the AI.
3. If your design gets too complicated, you can ask AI to give you the comprehensive code spanning multiple responses, which will work past some limits, but eventually, if it gets too complicated, you’ll have to integrate it yourself (copy and paste to the right sections of the code).

• Implementing Designs: Follow the guide provided in the project files to implement your AI-generated designs. This might involve modifying the Arduino code to display specific patterns, animations, or messages on your LED panel.

I created a pre-tuned AI here you can check out that doesn’t require sample code because it’s already been pre-configured.

https://justreed.com/led-stem/ai-how-to-code/

Congratulations on completing your 12×12 pixel display panel! This project not only serves as a unique piece of technology for your space but also as a hands-on learning experience in electronics, programming, and creative design.

• Reflecting on the Journey: Take a moment to appreciate the skills you’ve developed through this project. From understanding the basics of LED programming to getting a taste of soldering and exploring the potential of AI in design, you’ve taken significant steps in your STEM journey.
• Looking Ahead: The possibilities for expanding and customizing your display panel are endless. Consider integrating sensors, buttons, or even connecting your panel to the internet for dynamic content updates. Stay curious, and keep building!

Remember, every step in this project has contributed to your growth in STEM. Share your creation with friends, family, or online communities, and inspire others with your achievement. Happy building, and here’s to many more projects in your future!