LED-Matrix With Web Server

In my first Instructable we will build a 16x16 LED matrix. In the end you will have

• obviously a LED matrix with 256 LEDs that are all individually controllable
• a web page hosted on a microcontroller which allows you to
  • create pixel art live from the web page on the matrix
  • save creations
  • display all previous creations in a loop

I started this project in October 2020, I bought all the parts and was looking forward to laser cutting the wood in my local FabLab. Unfortunately there were new lock downs due to the pandemic in my country and later I almost lost sight of the project. But this summer break I finally got started!

If you just want to see the instructions and materials skip to step 8 :)

For this project I decided to use a WS2815 LED-strip with 60 LEDs/m.

• Each LED has a small IC, so we can control every LED's color and brightness individually using the data lines and an Arduino library like "FastLED"
• With the LEDs being in a strip we basically don't have to solder
• They are supplied with 12V DC. This is better than cheaper alternatives like the WS2812B because you need a power supply with less amperage (more in the next step)
• There is a backup data line, if a LED breaks

If you find a suitable power supply (see next step) you could theoretically also use the cheaper WS2812B LED-strip. This has the advantage, that you can power the microcontroller directly and don't need a buck converter for that, but I would recommend using WS2815 so I based my code and instructions on them.

Well, these small LEDs will draw quite a lot of current when using white color and full brightness. According to the manufacturer one LED will need around 0.3 Watts max. Having 16*16=256 LED's, we need a power supply with 256*0.3W=76.8 Watts. With a voltage of 12V this means one with 76.8W/12V=6.4A. To have some safety margin I picked up a laptop style power supply with 12V 7A. You could probably get away with much less when limiting the brightness in the software, but I prefer being on the safe side.

To come back to the WS2812B stripes, they also consume around 0.3 Watts per LED. When we divide our 76.8 Watt by 5V to get the required current we see that this would be around 15.36A!

I used a NodeMCU board for this project. It has WiFi, USB to UART (you can program it via USB), and an on-board voltage regulator, so it's fairly easy to work with it. Unfortunately it can't be powered by 12V, so I needed a buck converter to regulate the voltage. In my cased I used one with an USB-output, so i can just use a USB-cable to connect the board.

Along with the NodeMCU I used a SD-card with the corresponding reader to store:

• the HTML/CSS/js of the web page
• the saved pixel arts that I created using the web app
• the names of the pixel arts so I can select them on the web page

To finish the list of materials I needed to test two things:

• what to use as a diffuser for the LEDs
• distance from the LED to the diffuser plate

First I tested 3 mm thick opal polystyrene. But as you can see on the first photo, the lines of the grid were blurry and not as sharp as I hoped. I then tried 1 mm thick normal polystyrene, it looked great, but it absorbed the light too much so we would have to have the LEDs on full brightness all the time.(2nd photo) In the end I bought some acrylic glass and used very fine sandpaper to make it look frosted.(4th photo) In my opinion it looked the best from all.

Having the right distance between LED and diffuser is crucial. If the distance is too big, we lose brightness, if the distance is too small the pixel will not be filled out completely and have round edges in the corners. I 3D printed some test pieces and really liked the look of the one with 14 mm distance (2nd from left).

Based on this design choices and some additional measurements I designed the whole matrix in Fusion 360. If you want to edit something yourself or just want to see how it looks you can find the file in the google drive link with the rest of the necessary files I will provide during this Instructable.

Finally we can make our list of materials and start building!

Electronics:

• NodeMCU v3
• SD card (size doesn't matter ^^)
• SD card reader
• 256 WS2815 LEDs in a 60 LEDs/m stripe
• power supply 12V 7A
• DC jack
• 12V to 5V buck converter
• connection clips for the LEDs (if you don't want to solder the led strips)
• some (jumper) cables

Materials from hardware store:

• 3 mm thick MDF for the box (size depends on the working space of the laser cutter and the arrangement)
• 3 mm thick MDF for the spacer (30 cm x 30 cm)
• 3 mm thick MDF for the grid (30 cm x 30 cm)
• 2x 4 mm thick MDF for the grid (30 cm x 30 cm)
• frosted glass (29 cm x 29 cm please refer to "Diffuser" step)
• some 1 cm x 1 cm squared wood

Tools:

• soldering iron
• laser cutter (maybe get in contact with your local FabLab/ hackerspace/ laser cut service)
• 3D printer

Files:

• https://drive.google.com/drive/folders/1Cn6OVuhtlu...

You will need just 3 files:

1. 1x The led spacer will hold the led strips in place (3 mm MDF)
2. 2x the grid which will give us the tested distance between led and diffuser (4mm MDF)
3. 1x the grid with a black coating (I used 3mm), so the bars you see through the frosted glass are dark. You can also use 4mm normal MDF again.
4. Box (3 mm MDF)

I used a 60W laser with a working space of 60x40 cm at full power. For 4 mm MDF it needed 2-3 repetitions.

Now start by laying the front part of the box down and put the side panels on. Unfortunately they weren't very tight, so I took some wood glue to secure them to each other. We will deal with the back panel later, so let's give the glue time to dry and move on to the next step for now.

Start by cutting the LED strip in 16 parts with 16 LEDs each. Then use the connectors to link the strips. It is much easier to insert them if you bend the pins of the connector up a bit. When you don't have the connectors you would have to solder the strips now. Be aware that they have to be connected in the right direction. A little arrow next to each led tells you the direction of the dataline. It has to be continuous in a serpentine/snake like shape and start in the bottom left corner, else the code won't work (photo). Be careful no to short anything, the connectors aren't color coded right.

After that start in the bottom left corner to put the LEDs in the holes. I used some tape to hold them down. This process can be a bit fiddly, but after this a big part is already done.

I recommend soldering two wires to + and - on the top of the strip (marked on the photo with a black arrow) so we are feeding current in on the top and bottom for even brightness and less problems with heating up of the LEDs and wires.

The case is designed very tight (it isn't a bug, it's a feature) so we can't fit the plate with the connectors in right now, because the cables of the connectors are in the way. For that i designed a small 3D printed part that we glue the connectors on at an angle. Start by securing the 3D printed part to the wood and then use some (hot) glue to secure the connectors. By doing this the plate with the LEDs will finally fit into the case and the LED strips are secured.

I have a rather large 3D printer so I was able to print the 29cm part in one go, but I also included a file where it is split in two smaller parts.

Finaaaally we can put all these laser cut/printed parts together. Start by inserting the laser cut pieces in the following order into the box:

1. frosted glass
2. grid with black coating (3mm)
3. grid (4mm)
4. grid (4mm)
5. led spacer with the glued on led strips

To hold these parts in place I used some 1 cm quadratic wood pieces and hot glue. (photo)

That's the hardware part all done, so let's look at the electronics:

I split the electronics part into connecting the SD card to the NodeMCU and connecting the power supply with the LEDs.

We will connect the SD card as follows:

• SD card ➞ NodeMCU
• GND ➞ GND
• 3.3V ➞ 3V
• CS ➞ D8
• MOSI ➞ D7
• SCK ➞ D5
• MISO ➞ D6

I used female - female jumper cables for the connections.

Let's deal with the LEDs. Connecting them is pretty straight forward:

12V to the + terminal of the DC-Jack

GND to the - terminal of the DC-Jack and GND of the NodeMCU

DI (Data In) and BI (Backup In) to Pin 3 of the NodeMCU

Important: Make sure that the NodeMCU and the LEDs have a common ground, else the data signal won't work because you know, closed circuit etc. That's why we connect the GND of the LEDs to GND of the NodeMCU.

To mount the DC Jack in the case I drilled a hole in the case and inserted it. Where you drill the hole is up to your use case. I drilled it on the bottom, because i want to hang it on a wall, but if you want to let it stand on the desk you can also drill it in the back.

To power the NodeMCU directly you would need a 3.3V supply. The other way is to power it via 5V on the microUSB port. Either way we will need a step down. I chose the second option and went with a HW-676 featuring an USB output. I connected the + to the 12V of the supply , - to GND and used a short USB cable to connect the NodeMCU.

This already rounds up the electronics part (see the mess i created on the picture above), which only leaves us one thing:

Yeyyyyy, coding time... I started by thinking about a design for the website and the functionality it should have. Using this article on how to make a pixel art editor as a starting point I was able to work from that. I tried to comment the HTML/CSS/javascript/arduino code as good as I can and add some explanation if you want to take a look at the code or add functionality later. Then I used the ESP8266Webserver library to code a simple web server, which can parse POST and GET requests from the js of the website and control the LEDs according to that. After googling trivial things, visiting StackOverflow not only once and many many chrome tabs I really liked the result even if it is improvable a lot.

Preparing the SD card is very simple: just copy the index.html (can't upload it here, so please use the drive link) into the root directory of the SD card. Flashing is not that straight forward:

1. Because the NodeMCU is no official Arduino board you have to add external boardmanagers. If you never used an ESP8266 before or don't even have the ArduinoIDE yet, follow this tutorial: https://create.arduino.cc/projecthub/najad/using-...
2. Open the sketch and change the SSID and the password on the top to your WIFI credentials
3. Choose the right port under "tools" and hit flash!
4. Check the serial monitor for the IP address under which you can find the web app.
5. If you encounter any errors feel free to comment, I'll answer asap

When you open the website on the given port you will see this UI. I will give a short explanation of the buttons and functions:

• pen: left click to draw a pixel with the selected color
• eraser: left click to erase a pixel
• bucket: left click to fill areas of the same color with the selected color (wait till it's finished on the matrix before using it again)
• bin: clears the canvas
• save: click to save the current picture
• WIFI: toggles between two modes:
  • sync drawing on the web app live to the canvas
  • don't sync drawing and display all saved pictures in a loop
• load: select a pattern to be loaded on the web app and matrix
• delete a pattern from the SD card

Now you only have to glue the back plate on the case and we are ready!

Now it's you turn, if you want to expand your matrix , here are a few ideas:

• make it faaaster
• make it responsible and compatible for touch devices
• add a feature to make animations
• add a feature to play games like snake
• let it display something according to the weather
• make it a statusbar for octoprint
• add a motion sensor
• and what else comes to your mind!

At the end i want to thank Werner and Nigel from my local FabLab for helping me with this project. Especially for processing the same part with the laser over and over again, because it wasn't cut through yet...

I hope you liked this project and my Instructable. If you have feedback or questions feel free to leave a comment. It's my first Instructable so feedback is much appreciated. Thanks guys for reading through this and see you next time!