LED Matrix

In short, the LEDs were chained up in a long strip that was shown above. (Row by row, and the end of 1 row connected to the start of the next row)

(Ignore the missing 4 LEDs, I ran out of LEDs. They do not make a huge difference anyway)

After that, the LED strip was connected to a microcontroller (ESP8266)

6 More Images

2 pieces of black acrylic were cut (with a knife), bent(using a soldering iron) and hot glued together(with a wooden stick as support) to form the sides of the matrix

A clear piece of acrylic and tracing paper behind it was used as the front screen, put in front of the matrix to diffuse the LEDs and protect the electronics.

Wooden sticks were cut in such a way that they can fit together and form dividers between the LEDs. This prevents the colours from the LEDs from diffusing into one another can ruin the clarity

After that, put the LED matrix, divider and clear acrylic in the black acrylic side piece

I used the Adafruit NeoMatrix Library, the NeoMatrix GFX Demo.

You could code other software to connect the ESP8266 to Wifi and gather data.

(This is a Work in Progress)

In the end, I put a Raspberry Pi (1B) in the LED Matrix. I also programmed and configured it to show Pixel Art (and maybe Animations) over Wifi.

I connected the data pin of the LEDs to Pin 18 of the Raspberry Pi. Moreover, the 5V and Ground Pins of the LEDs were connected to an external Power Supply (Like another USB Charger), separate from the Raspberry Pi. This is to ensure the LEDs have enough Power to Light Up.

The Client Side WebApp is written entirely in Pure vanilla HTML, CSS and Javascript. The Server Program is a Flask Application, and uses the Adafruit Neopixel Library. Since it uses the Adafruit Library, the LEDs may take longer to update (and not show animations properly etc.) The code is available on GitHub here, and the program is set to run on boot (using /etc/rc.local as stated in GitHub)