I set out to create a simple kit for 9 year olds. I wanted them to learn basic soldering techniques, as well as be able to modify the software to extend the project.

The ESP8266 captivated me. It is available for $4 from wemos.cc and when using the Arduino ide is easy to program and very easy to make something web controlled.

Luckily the NeoPixelBus library includes code to run the WS2812b neopixels using DMA. This gives us processor time for the web and our gif decoder, scrolling text, etc.

Parts:

Wemos mini or d1 board
Ws2812 pixels (64 in our example)
Laser cut wood for the case
clear acrylic
velum
3.3 to 5v power converter

Step 1: Create Case

Either use a mill or a laser cutter and cut out the wood pieces for the case and the diffuser.

The current drawings are on github. The CDR file is the original, I am not sure if the others will work as well.

Step 2: Mount Pixels and Solder

Cut 8, 8 pixel long strips. This will give us an 8x8 or 64 pixel display. Arrange the pixel strip in alternating rows so that we can solder the connections with short wires in the next step. The top row data goes from left to right, next it goes from right to left and continues to alternate.

Step 3: Wire Electronics

The LED strips have 3 connections. Power, Ground, and Data. The Data pin goes from the ESP8266 RX pin (through the voltage converter), to the DI (Data input) pin of the first LED. Each LED also has an output pin (DO). This should be wired to the next input pin. The strips come prewired, but we need to reattach the power, ground, and data in the places where we cut the strips. The strips alternate, so that the data flows from left to right on the top row, and then right to left on the next row. This continues until the last row. We found it best to drill holes (or laser cut them) in the board, and have the wires go through to gather in the back. It fits together better.

The circuit board connects the RX pin on the esp8266 with the 3-5v converter. The 3-5v converter also needs 3v and 5v power from the esp8266. The outputs are hooked to connectors on the board that go to the led strip.

Step 4: Upload Software

The software WebPixelFrame software is available on github. The esp8266 is programmed with the Arduino IDE. wemos has instructions. The SPIFFS file system can be built from the data directory in the github repository. Install this tool - SPIFFS file uploader to upload the data directory to the board. Beware, it will erase everything. you can use the upload script in the tools directory to reupload the important scripts after the initial install. If you create some pixel designs on the board, you will lose them when you reupload the entire SPIFFs system.

In the github README.md you will find some extra libraries that need to be installed to get the sketch to compile.

Step 5: Software Features

The software includes:

Async Web Server
Async Captive Portal
A clock display using NTP
Piskel ported to the display for a real-time pixel editor
Animated gif player (8x8)
Scrolling Text

There is a lot of room for improvement.

Step 6: Early Design Iterations

I originally wanted to create a display with ping pong balls. The led strips cut down on the soldering, but finding balls that were the right size to fit on the strip was difficult. It also didn't look great.

We cut a diffuser out of paper, and had a thick piece of white acrylic. It looked better, but clear acrylic, velum, and a laser cut grid turned out to be best.