Introduction: Tetris Time Clock on a RGB Matrix With ESP8266

I had this RGB LED matrix lying around for a while. I used it with a arduino mega (works good but no easy internet connection) and raspberry pi (flexible, but a big overhead and long startup time). So I was looking for a better solution and I found it when I saw this article on hackaday: https://hackaday.com/2017/11/28/a-minimalist-weath...

Dominic Buchstaller built a neat library for the ESP8266 to drive these RGB LEDs matrices. So connecting to the internet for NTP sync is no problem anymore. It also boots up instantly and can be powered off without shutting the system down before.

I had the idea to build a NTP synced clock and was looking for a creative way to display the time using available colors. After some googling I found a monocrome version of the tetris clock in some china shops. So I decided to build something similar using colors.

Step 1: Parts List

For this build you need the following parts:

  • Wood strip 9 x 20 mm from the local DIY store (link)
  • Acrylic glass 22 x 13 cm from the local DIY store (link)
  • One-way mirror foil for windows (grey) (link)
  • NodeMCU ESP8266 board (e.g. LoLin) (link)
  • Micro USB <--> USB cable, maybe you have one spare from your phone
  • USB power supply with at least 2 A power to drive the matrix
  • Adafruit 32x16 RGB LED Matrix (link) or a cheaper version from china (link)
    Please note: These matrices exist in different pitch sizes P10 means 10mm and results in 32x16 cm panels. The latest build is based on a P6 matrix that is roughly 20x10 cm in size.
  • Dupont jumper cable female to female (link)
  • 3D printed parts from https://www.thingiverse.com/thing:2846368 (Fitting for a P6 matrix)
    • Matrix grid
    • Grid clamps
    • Left and right stand
    • ESP8266 holder
  • M3 screws
  • Optional: Piece of paper as diffusor

Step 2: Optional: Making the Matrix Flat

In the first version I wasn't very happy with the clearness of the pixels. The matrix isn't flat, because the front plate has thin horizontal ridges the lat the light flow to neighbor pixels.

Dominic Buchstaller gave me a hint:
You can loosen all the screws of the panels (see images) so that the front plate can be taken away. Then you have two options:

  1. Leave the front plate and just rescrew the matrix. Then the LEDs fit nicely into the printed grid.
    The drawback is that you can't use a diffusor between matrix and printed grid.
  2. Turn the front plate around so that a flat surface is created and then resrcew it.
    I chose this option and it looks much better.

Step 3: Hardware Assembly

For assembly follow the next steps as shown in the images above:

  1. Cut the wood strip to two pieces of 23,5 cm and two pieces 14,5 cm length with 45 degrees angles.
  2. Glue the pieces together with wood glue to get a wood frame that's big enough for the matrix.
  3. Cut the acrylic glass to size.
  4. Apply the mirror foil to the glass.
  5. Hot glue the glass to the frame.
  6. Hot glue the printed matrix grid to the glass
  7. Optional: Cut a piece of paper to the size of the matrix as diffusor.
  8. Put the LED matrix into the grid.
  9. Hot glue the clamps to fix the matrix into the grid.
  10. Screw the stands to the LED matrix using the M3 screws.
    Be careful that you don't hit the PCB with the screws if they are too long.
  11. Screw the ESP holder to the LED matrix.
  12. Wire everything up with dupont cables. You find instructions on the wiring in the PxMatrix library description. Depending on the type of the board (black or green PCB) the labeling my be different.

For the power supply of the matrix I took the power directly from the ESP and soldered a dupont wire directly to the power input of the matrix. These two cables can then be connected to "GND" and "Vin / VV / 5V" of the NodeMCU board.

Step 4: Software Setup

This project is built on platform.io. All dependencies are automatically installed, if you buildit. I recommend to use it together with Visual Studio Code and the PlatformIO extension. It's also possible to use the Arduino IDE, then you have to install the required libraries manually (see tetris_clock.ino).

Install Arduino IDE with ESP8266 core

If you have not already installed it, download and install the arduino IDE from here.Then open the preferences and enter http://arduino.esp8266.com/stable/package_esp8266... into Additional Board Manager URLs field.Open the Boards Manager via "Tools > Board" menu and install esp8266.

Install Visual Studio Code and PlatformIO IDE extension

  1. Download and install official Microsoft Visual Studio Code. PlatformIO IDE is built on top of it.
  2. Open the VSCode Package Manager
  3. Search for and install the official "platformio-ide" extension.

You find detailed instructions here: http://docs.platformio.org/en/latest/ide/vscode.h...

To configure PlatformIO IDE, select your board type and COM port as shown in the screenshot.

Flashing the software

You can get the tetris clock software here: https://github.com/toblum/esp_p10_tetris_clock/ Download it as ZIP or clone it via git.

Open the project in Visual Studio Code and build it with the check mark in the bottom bar. All needed dependencies should be installed automatically. When the build succeeds, click the right-arrow sign to start uploading. If everything is correct, the upload terminates succesfully.

Wifi connection

The project uses the great WiFiManager library. So you can setup the Wifi connection very easy. If you boot it up the ESP opens a own hotspot with the name "tetris_clock". Use a device to connect to that hotspot. Use the wifi password "tetromino". Then open the address "http://192.168.4.1" in your browser. This opens up a configuration page. Enter here your home wifi credentials. The ESP reboots and is now connected to the internet.

Step 5: What's Next?

There are many possible extensions for the future:

  • Temperature / humidity sensor
  • Weather station
  • Youtube counter
  • Alternative watchface
  • Configuration page

Do you have further ideas or want to contribute? Let me know.

Step 6: Step 6: Extend It

Extend the project as you like:
In 2020 I built a version with a 32x32 matrix that fits perfectly in a IKEA Ribba frame. I used Brians D1 matrix board to make cabling more reliable: https://www.tindie.com/products/brianlough/d1-mini-matrix-shield/ Have a look at the boards he's offering.