Introduction: Talking Tetris Clock

By

This is my take on a large digital clock

Supplies


Step 1: Completing the PCB

I had my PCB produced by PCBWay, they offer great service at a good price. You can buy the PCB at my Tindie store Most components are included. You only have to solder on the ESP32 devkit, the I2s Audioboard. I highly recommend that you don't solder the EPS32 board directly onto the pcb. Use single Row headers or a socket instead! That way, you can always remove the ESP32 if needed.

Make sure you place the ESP32 in the correct orientation. See photo for example.


Step 2: Using the Arduino IDE to Program the Arduino

There are two options to program your ARDUINO ESP32

  1. Use Arduino IDE
  2. Use the webinterface (Only Limited changed to program possible)

The Webinterface will be explained in the next step. First we take a look at the Arduino IDE

If you haven't already, you can download it here and install it.

But wait, we are not there yet...after installing, we need to install the files for using the ESP32 and we need to install some libraries.

Installing the ESP32 plugin

Start the Arduino IDE software and use the menu to click: File->Preferences.

A new window will popup. Look for the line that says: Additional Boards Manager URLs: and enter the following link:

https://dl.espressif.com/dl/package_esp32_index.json

Now, press OK to close the window. Again use the menu to click: Tools->Board:xxx->Boards Manager. Again, a new window will appear. inter ESP32 in the textbox to find the ESP32 boards and press install

Installing the libraries:

Install the following libraries from the library manager. Use the menu: Sketch->include library-> Manage Libraries-> add Zipfile

Display Driver (V2.05) Must be this version and not a new release!

Tetris animation

Time library

Audio Driver

Install the following libraries from the library manager. Use the menu: Sketch->include library-> Manage Libraries

Fastled Neomatrix (V1.1 )


Loading the Sketch

Create a folder on your harddrive named "mark_tetris.ino", download the 4 files needed and save them to that folder:

index.h , logo.h , mark_tetris.ino and settings.h

Download files

Now click on the file on your harddrive named: mark_tetris.ino. Arduino Ide will start and the sketch will open. You will see 4 tabs, 1 tab per file.

Before you compile your sketch, make sure you have selected the correct board. Use the menu: Tools-->Board-->ESP32 Arduino->Doit ESP32 Devkit V1

Now you should be able to compile all successfully and you can upload it to your ESP32 board.

Make sure the board is connected and that you have selected the correct COM port from the menu: Tools->Port

If you like, you can change some settings in the settings.h tab. However, the settings for your display will be done using the webinterface later. Make sure to recompile and upload again if you change these settings.


In case you run into compatibility problems with the libraries, this is what I used:

  • Using library FastLED_NeoMatrix at version 1.1
  • Using library Framebuffer_GFX at version 1.0
  • Using library FastLED at version 3.4.0
  • Using library Adafruit_GFX_Library at version 1.10.4
  • Using library WebSockets at version 2.1.4
  • Using library ArduinoJson at version 6.19.1
  • Using library ESP32_HUB75_LED_MATRIX_PANEL_DMA_Display at version 2.0.5
  • Using library TetrisAnimation at version 1.1.0
  • Using library ezTime at version 0.8.3
  • Using library ESP32-audioI2S-master at version 2.0.0
  • Using library Adafruit_BusIO at version 1.7.1


Part of the ESP32 framework

  • Using library WiFi at version 1.0
  • Using library WebServer at version 1.0
  • Using library WiFiClientSecure at version 1.0
  • Using library FS at version 1.0
  • Using library SPIFFS at version 1.0
  • Using library SPI at version 1.0
  • Using library SD at version 1.0.5
  • Using library SD_MMC at version 1.0
  • Using library FFat at version 1.0
  • Using library Wire at version 1.0.1
  • Using library EEPROM at version 1.0.3




Step 3: Alternative Programming Without Arduino IDE

Maybe Arduino IDE , installing the right libraries etc. is not your thing. luckely, there is another way.

You can not program your ESP32 without have to use the Arduino Ide, using a web browser but there are some limitations.

  • Not all browsers are supported, use Edge or Chrome
  • You cannot make modifications to the sketch.
  • it is pre-compiled with the settings I used for my clock
  • you can change the type and number of displays using the access point later.

To use this feature, use Chrome or Edge browser and go to:

https://donnersm.github.io/TalkingClock/flash.html


Step 4: Completing the Wires

It's not complicated to wire up this setup.

Connect a small speaker to connector on the I2s Audio board.

Connect the flatcable between Hub75 display and circuit board

Connect the power cable for the display ( if you are planning to use the display on a high brightness, use an external power supply of 5V

Connect your external power supply and pay attention to the polarity

Step 5: Preparing the SD Card

In order to play sounds, you will need to use an micro SD card.

Format the card and copy all the audio file to the root directory of the card

So you want different sounds? There are two ways:

Option 1

you can change the names of the files in settings.h and also the time that the sounds are triggered. However, this is not an option if you are using the precompiled version that you'll program with the webbrowser

Option 2

use your own files but use the same filenames. The player can play wav and mp3 but don't mix them up. If a file is names 1100.mp3, you cannot change it to 1100.wav.

Also, to keep the clock running smootly, I use 16bit wave files and mp3 with a bitrate of no more then 115Kbps. But you can always try....


Attachments

Step 6: Operating the Clock

Setting up the clock the first time.

When you first start the clock, it doesn't know your WIFI credentials and it will boot into Access Point Mode.

It will act as a WIFI Point. Use you cellphone tablet, or other WIFI enabled device to connect to that access point. The name of the accesspoint is GeniusWeb and the password is Genius

Once you are connected to that Wifi point, the clock will start a webserver that you can access.

If you boot while a serial monitor is connected, it will show you the IP number you need to access. If not, you'll have to check your router to find out what IP address to use.

Changing the settings with the webinterface

First thing you should change is the display setup, Select the hardware you have and press "confirm display type" You might have to change this on trial and error because there are many variations in displays and those are not very consistent

Next, you should change the WIFI credentials to give the clock access to your wifi network. You will have to reboot the clock once you changed it.

If the reboot gives the clock a successful access to your WIFI network, the time and date will be updated automatically. However, make sure you set it to the correct Timezone.

The timezone is a text format, more info here: Timezones


O No...no wifi?

If you don't have WIFI or your WIFI's policy doesn't allow the clock to make a connection, it's not ideal..but you can still use the clock. After it boots as an access point, go to the webinterface and set the time manually. In this version, the date will not be updated, it will be set to my birthday instead.

So what else?

On the top there are buttons, each button is programmed with a sound.Press it and your sound will come out of the speaker.

There are sliders to change volume, brightness, speed of animation, speed of each (news)ticker.

There are two tickers to display a scrolling message. Each ticker can hold a maximum of 100 characters.

Step 7: Show and Tell

You want to see the video? Here it is! Remember, if you build this, I would love to see your video too.