Welcome to my tutorial on how to build a Wi-Fi controlled Led Matrix!

I have entered this Instructable into a few competitions that I think it is applicable too. If you feel it is worth a vote into the above contests, please do click the vote button. Thank you!

As there are many LED Matrix guides out there, I have made this one as easy to follow and build as possible. The objective is to build an LED Matrix that can be controlled remotely via Wi-Fi.

I wanted to create a LED Matrix that can display many animations or patterns and is controlled by an Arduino, as there are many libraries for it. However, most Arduinos do not have enough memory to hold enough patterns. A solution to this problem is to use an Arduino Due. The Arduino Due has 512KB of Flash Memory, much more than an Arduino Uno, for example, which has 32KB of Flash Memory. As well as this, I wanted to be able to control what patterns it displays. To do this I opted to use an ESP-8266 - a cheap Wi-Fi enabled micro-controller that can be programmed in the Arduino IDE. The ESP-8266 and Arduino Due communicate by using the I2C bus.

To have the wireless functionality, an ESP-8266 is used as a wireless access point, where any tablet, smartphone, computer or such device can connect to it. The matrix has 11 rows and 11 columns of individual RGB LED's giving a total of 121 addressable cells. You can then use the connected device to control what image or animation is displayed on the matrix.

I have been lucky enough to have access to a laser cutter, so I have used this to fabricate the cut parts for the Matrix. This makes assembly so much easier, quicker and neater. I will provide the PDF plans used for this project later on in this Instructable. If you do not have access to a laser cutter, you can still use the PDF as a guide to cut out the pieces. Foam is a good material to use as it is easy to cut by hand, but do not cut foam in a laser cutter.

This project has been published 'as is' and therefore I accept no responsibility for any loss or damage.

So, with that out he way, on with the build...

Step 1: Principle

The Matrix Principle:

The matrix works by using 121 Individually Addressable LEDs (WS2812), which are arranged in 11 vertical columns of 11 LEDs in each column. A grid layer then sits on top of these to separate and mask each LED so that it acts as an individual pixel. A layer of paper and clear Acrylic sheet sits on top of this to diffuse the emitted light.

The patterns or images to be displayed are first created using Tyler Jones's 'LED Matrix Control Software', an easy-to use software application. The resulting images or patterns are then imported into an Arduino Sketch for preloading to an Arduino Due and ESP-8266. These images are then addressable via a URL on the connected device.

i.e. The user connects to a web page on the ESP-8266. The user then picks a pattern from a displayed webpage and enters it as a URL in the connected devices web browser. The ESP-8266 then sends this web page as an integer value to the Arduino Due, which in turn displays the selected image or animation.

Step 2: Parts List - Electrical Components

1) LinkSprite ESP-8266 board - Wi-Fi access point for connecting to Arduino Due via I2C.

2) Arduino Due - Stores created images and animations.

3) Wire - 22AWG Stranded Hook-Up Wire. 22AWG single core Hook-Up Wire (not shown)

4) Power Supply - 230v to 5v - 2.5 Amp Center Positive and compatible DC Barrel Jack (not illustrated).

5) WS2812 RGB LEDs - Individually addressable RGB LED Strip, 60 LEDs per metre, 5050 package w\ intergrated chip. (Adafruit Neopixel or similar).

6) Logic Level Shiftier - SN74LVC245A (Mounted on Veroboard)

Any suitable power switch (i.e toggle or latching) and a 2 way terminal strip.

Step 3: Parts List - Case Components

7) Diffuser Matrix cut from 6mm MDF.

8) 2x Acrylic plates for mounting the LED strips, the Arduino, the ESP-8266 and other components.

9) 3x Acrylic side panels.

10) 1x Side Panel with a gap for your Barrel Jack. If you do not want to use this, just cut an extra Standard Side Panel (9) and drill a hole for your jack.

11) Clear Acrylic plate cut to the same dimension as the MDF Diffuser Matrix (I had difficulty photographing this so it is not illustrated).

The full details for the above are contained in the respective PDF files at the end of the instructable.

Step 4: Tool's Used

1) Wire strippers - I used automatic side feed wire strippers.

2) Wire cutters.

3) Tweezers.

4) Soldering/ solder-station and solder.

5) Pillar drill or other suitable drill - bit size 2.5mm and suitable bit for your switch and barrel connector.

Miscellaneous

Insulation tape.

Heat shrink tubing - 3mm diameter.

Silicon sealant and gun.

Hot glue gun.

Sheet of A4 printer paper, cut to fit over the MDF diffuser matrix to actually diffuse the light.

Sticky-back vinyl.

Hole punch.

Step 5: Assembly - LED Backplate

First cut 11 strips of 11 LEDs from the LED reel. You need to cut on the white lines in the middle of the copper pads (Note :- there are three pads separating each LED). I found using scissors gave the best results as you get a nice clean cut. Keep the orientation of each strip the same as this makes assembly much easier later.

Step 6:

Align the MDF matrix grid to the back-plate, make sure the corners line up correctly.

Step 7:

Making sure that the MDF doesn't move, draw around the inside of the left, centre and right cell for each row of the MDF grid matrix.

Step 8:

You should end up with the acrylic LED mounting plate marked as above.

Step 9:

Mount each LED strip to the LED mounting plate, aligning the first, sixth and eleventh LED to the squares drawn in the previous step. Use the hot glue gun to stick each LED strip to the mounting plate, ensuring that the 'din' or data in pad at the end of each strip is aligned to the same edge of the mounting plate.

Step 10:

You should end up with the LEDs stuck to the LED mounting plate as above.

On the first strip of the above array drill three 2.5mm holes at the DIN, 5v and ground pads. You will be able to see these clearly marked on the cut LED strips. You then need to drill 2.5mm holes to the bottom right and the top left of each LED strip. These holes will be used to chain the LEDs to a single strip.

Step 11:

Use the hole-punch to punch out around 30 pads from the sticky-back vinyl. Then use these pads to make a +5v rail by covering the ground and data pads across all 11 LED strips. Then solder a stripped length of 22AWG single core wire to each exposed +5v pad. Do similar to create a ground rail by covering the +5v and data pads.

During the LED strip manufacturing process, LEDs are soldered together. If you encounter this join, bypass it as shown in the photograph.

Step 12:

Using a suitable length of 22AWG multi-core wire, strip one end, feed it through a hole at one end of the LED strip and solder it to the data pad. Feed the other end of the wire through the hole at the other end of the LED strip, cut, strip and solder it to the data pad of the next LED strip. This will ensure that the connected strips act as one continuous length which is important when programming the LEDs.

Note:- I found that if you strip about 2mm of the end of the wire, the remaining insulation will cover any exposed pad.

Step 13:

Using the three holes that you drilled at one end of the first LED strip, solder wires for DIN, +5v and GND.

In the above image, you can also see the wires (blue) used to daisy chain each LED strip from the previous step.

Step 14: Mount Arduino Due and ESP-8266.

Position the Arduino Due and ESP-8266 on the bottom mounting plate and use the silicon sealant to hold in place. I used silicon sealant as I wanted to cut down on the overall height of the project box.

Step 15:

Solder the logic level converter (SN74LVC245A) to a suitable piece of veroboard. Solder suitable lengths of wire to the pins on the chip such that pins 1, 20 are connected to the 5v output pin on the Arduino Due. Pins 10, 19 are connected to the GND pin of the Arduino Due. Pin 11 connects to the DIN on the LED Matrix and pin 9 connects to pin 9 on the Arduino Due. Use insulation tape to hold the wires.

Connect the I2C bus by connecting D15 (SCK) (The upper one) on the ESP8266 to pin 20(SCK) on the Arduino Due. Also connect D14 (SDA) of the ESP-8266 to pin21 (SDA) of the Arduino Due.

Arduino ESP-8266

20 ---------------> D15

21 ---------------> D14

Step 16: Programming

ESP-8266:-

Install the ESP-8266's board definition in the Arduino IDE as detailed by Sparkfun using this link: https://learn.sparkfun.com/tutorials/esp8266-thing-hookup-guide/installing-the-esp8266-arduino-addon.

During setting up the board definitions as detailed above, ensure that in Tools > Board Menu, you select 'Adafruit HUZZAH' instead of 'Sparkfun ESP-8266 Thing'. You can then upload the attached sketch to the ESP-8266. ---------UPLOAD FILE

After completing the board definitions and uploading the above sketch, unplug the ESP-8266.

Arduino Due:-

Connect the PC or laptop to the programming USB port (the one closest to the DC jack) on the Arduino Due. You may have to go into the boards manager (Tools > Boards > Boards Manager) and search for the Arduino Due. After installing it, make sure you have the programming port selected under Tools > Board Menu > Arduino Due (Programming Port).

Upload the included sketch to the Arduino Due and disconnect it from the computer.

Also install the relevant library's through the library manager. (Sketch> Include Library> Library Manager):

Adafruit_GFX

Adafruit_NeoPixel

Adafruit_NeoMatrix

FastLED

As well as this, please note that some devices may not accept the password 'led' for the ESP-8266 as they deem it to short. If this happens, enter a password of a suitable length where shown in the code.

Step 17: Soldering the Last Components.

To finish soldering, strip some more 22AWG multi-core wire. Solder one piece to the centre pin's (positive) terminal on your DC Jack, often the pad at the end of the cylinder. Then solder another wire to the Ground pad, often opposite the afore mentioned positive terminal. This is shown in the above picture; a red wire denoting positive and a black wire as negative. I then threaded the other ends of the wire through the heat-shrink tubing and applied it to the contacts.

Note:- There is another pad that detects when a plug is inserted to the jack. Do not solder to this one as the circuit will not work. This pad is often a different orientation from the rest and close to the edge of the case. Also note that this is not shown in the above picture.

Step 18:

Cut off a suitable length of heat-shrink tubing and thread the wire through it. Solder the positive wire from your DC Barrel Jack to your switch. As well as this solder another wire to the switch. Afterwards apply heat-shrink tubing to this contact.

Step 19: Final Assenbly

To conclude assembly, first put the side panel that has the gap for the barrel jack in place. Now, line up your barrel jack so that it is flush with the outside of the case. I used hot glue to stick it down, as it is quick and very efficient. I also put some wooden blocks that were left over from the laser cutting behind the jack to reinforce it.

Then glue in the 2-Way terminal block close to the DC jack.

Step 20:

Drill a suitable hole for your switch on the side panel, above the DC jack's gap on the side panel.

Step 21:

Mount the switch according to your switch type. I had to screw mine in with a nut on the other side.

Note:- I used two switches - one for power and one to turn the ESP-8266 on or off.

Step 22:

To finish wiring, connect the ground wire from the DC jack to one terminal on the terminal block, and the positive wire from the power switch to another terminal on the block.

Now connect the V-IN pin from the ESP-8266 and the V-IN pin from the Arduino Due to the other end of the positive terminal. Also connect the +5V from the LED strip to this as well.

Connect the GND pin from the ESP-8266, the GND pin from the Arduino Due and the GND wire from the LED strips to the ground connection on the terminal block.

Make sure all the wires going to the terminal block have stripped ends and that the screws are tight.

Step 23: Wrapping It Up...

Before you put everything together its a good idea to test everything.

To do this plug in your power supply to the jack and turn on your switch. The LEDs on the ESP-8266 should light up as well as the LEDs on the Arduino Due. On an internet enabled device (i.e a tablet or phone), go into your Wi-Fi settings and click on 'Sparkfun ESP-8266 Thing'. Enter the password 'led' and your device should report that you are connected. If you have to extend your password, do so now.

Now, open a web-browser and type 192.168.1.4 (the ESP-8266's IP address) in the address bar. Text will appear showing you how to use the Matrix. Now type this: '\test' after the IP address.

You should see the LEDs light up and the Matrix do a self test. When you are happy that everything works, disconnect the power.

Step 24:

To conclude assembly, assemble all four sides around the LED back plate. Apply silicon sealant into the corners and along the sides to hold the sides together. If the wires are not long enough, just rotate the back plate away from the corners of which you want to glue as shown above.

After the glue has set, you can put the outer cover on. If you used a similar jack to mine, and made the jack flush, you will have to insert the plate at an angle. Once the top teeth are properly flush, rotate the plate down so it fits flat. You can adhere this with silicon on the inside (before you fit it) or use tape. I used the latter so I can access it again if needed.

Step 25: Done!

Plug in the matrix and switch it on.

Connect to the ESP-8266 with your device as mentioned before, and go to the homepage (192.168.4.1/home) and select your desired pattern.

You can now use the Matrix and change the pattern whenever you want! Beware that the pattern may take a while to change as it must finish its cycle in the code.

Thank you for reading this Instructable, and I hope you have enjoyed reading it :)

Files are attached below...