Build a beautiful, modern digital clock with a retro flair using CircuitPython, Metro M4 Airlift, RGB Matrix shield, and a 64 x 32 LED RGB pixel matrix display.

WiFi connectivity with the Metro M4 Airlift keeps your clock in sync with internet time using Adafruit IO!

Features

The METRO Matrix Clock displays the time in the IBM Plex mono typeface, using a neon green hue for daytime hours, and red for nighttime hours.

You can also enable or disable the blinking seconds colon in code.

But that's it! Just a nice, minimal clock!

Parts

64x32 RGB LED Matrix - 4mm pitch
Bring a little bit of Times Square into your home with this sweet 64 x 32 square RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them...
$39.95
In Stock
Adafruit Metro M4 Express AirLift (WiFi) - Lite
Give your next project a lift with AirLift - our witty name for the ESP32 co-processor that graces this Metro M4. You already know about the Adafruit Metro...
$34.95
In Stock
Adafruit RGB Matrix Shield for Arduino
Our RGB matricies are dazzling, with their hundreds or even thousands of individual RGB LEDs. Compared to NeoPixels, they've got great density, power usage and the...
$5.95
In Stock
Black LED Diffusion Acrylic Panel 12" x 12" - 0.1" / 2.6mm thick
A nice whoppin' slab of some lovely black acrylic to add some extra diffusion to your LED Matrix project. This material is 2.6mm (0.1") thick and is made of special cast...
$9.95
In Stock
5V 2A (2000mA) switching power supply - UL Listed
This is a FCC/CE certified and UL listed power supply. Need a lot of 5V power? This switching supply gives a clean regulated 5V output at up to 2000mA. 110 or 240 input, so it works in...
$7.95
In Stock
Adjustable Bent-Wire Stand - up to 7" Tablets and Small Screens
This handy bent-wire display stand was originally designed to hold up 7" tablets but the rubberized design is great for general purpose electronics & TFT holding. We use it to...
Out of Stock
USB cable - USB A to Micro-B
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or...
$2.95
In Stock

If you have a Metro M4 AirLift, you can build this project easily - you just need an RGB Matrix shield to help connect!

You will need a Metro M4 Airlift, matrix shield and matrix

Adafruit Metro M4 Express AirLift (WiFi) - Lite
Give your next project a lift with AirLift - our witty name for the ESP32 co-processor that graces this Metro M4. You already know about the Adafruit Metro...
$34.95
In Stock
Adafruit RGB Matrix Shield for Arduino
Our RGB matricies are dazzling, with their hundreds or even thousands of individual RGB LEDs. Compared to NeoPixels, they've got great density, power usage and the...
$5.95
In Stock
64x32 RGB LED Matrix - 4mm pitch
Bring a little bit of Times Square into your home with this sweet 64 x 32 square RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them...
$39.95
In Stock

CircuitPython is a derivative of MicroPython designed to simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the CIRCUITPY drive to iterate.

Set up CircuitPython Quick Start!

Follow this quick step-by-step for super-fast Python power :)

Further Information

For more detailed info on installing CircuitPython, check out Installing CircuitPython.

Click the link above and download the latest UF2 file.

Download and save it to your desktop (or wherever is handy).

Plug your Metro M4 into your computer using a known-good USB cable.

A lot of people end up using charge-only USB cables and it is very frustrating! So make sure you have a USB cable you know is good for data sync.

Double-click the Reset button next to the USB connector on your board, and you will see the NeoPixel RGB LED (indicated by the arrow) turn green. If it turns red, check the USB cable, try another USB port, etc.

If double-clicking doesn't work the first time, try again. Sometimes it can take a few tries to get the rhythm right!

You will see a new disk drive appear called METROM4BOOT.

 

Drag the adafruit_circuitpython_etc.uf2 file to METROM4BOOT.

The LED will flash. Then, the METROM4BOOT drive will disappear and a new disk drive called CIRCUITPY will appear.

That's it, you're done! :)

Assembly

Talking to an LED matrix display can be tricky! The 64 x 32 LED used here has a whopping 2,048 pixels, and each can display RGB colors, which makes for a whole lot of data to sling around. Thankfully, our RGB Matrix shield paired with the Metro M4 Airlift does most of the heavy lifting.

Let's assemble the boards and the display so we can get things running!

Shields Up

First, add the male headers, screw terminal block, and the 8x2-pin socket to the Matrix shield, by following this guide. Be careful to match the socket polarity to the silkscreen image on the board.

Be sure to also perform the clock pin mod as shown here.

Then plug the shield into the Metro M4 Airlift.

Power Connections

To provide power, we'll screw the wiring harness connectors to the screw terminal blocks of the shield. Be sure to match the black wire to GND and the red wire to +5Vout.

Now, simply plug the other end into the panel's power header. It can only go in one way.

Data Cable

Plug in the two ends of the ribbon cable, note that the connectors are keyed to only fit in the correct orientation.

Wall Adapter

We'll power the Metro M4 from the 5V 4A DC wall adapter plugged into the barrel jack. Even though USB can provide power to the board, the current isn't adequate for lighting up hundreds and thousands of LEDs!

You can build this project with an all-in-one Matrix Portal board, its definitely the easiest and least-expensive way to go about it.

You will need a matrix portal, matrix, and USB C power/data cable

Adafruit Matrix Portal - CircuitPython Powered Internet Display
Folks love our wide selection of RGB matrices and accessories, for making custom colorful LED displays... and our RGB Matrix Shields...
$24.95
In Stock
64x32 RGB LED Matrix - 4mm pitch
Bring a little bit of Times Square into your home with this sweet 64 x 32 square RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them...
$39.95
In Stock
USB Type A to Type C Cable - approx 1 meter / 3 ft long
As technology changes and adapts, so does Adafruit. This  USB Type A to Type C cable will help you with the transition to USB C, even if you're still...
$4.95
In Stock

Power Prep

The MatrixPortal supplies power to the matrix display panel via two standoffs. These come with protective tape applied (part of our manufacturing process) which MUST BE REMOVED!

Use some tweezers or a fingernail to remove the two amber circles.

Power Terminals

Next, screw in the spade connectors to the corresponding standoff.

  • red wire goes to +5V 
  • black wire goes to GND

Panel Power

Plug either one of the four-conductor power plugs into the power connector pins on the panel. The plug can only go in one way, and that way is marked on the board's silkscreen.

Board Connection

Now, plug the board into the left side shrouded 8x2 connector as shown. The orientation matters, so take a moment to confirm that the white indicator arrow on the matrix panel is oriented pointing up and right as seen here and the MatrixPortal overhangs the edge of the panel when connected. This allows you to use the edge buttons from the front side.

 

Check nothing is impeding the board from plugging in firmly. If there's a plastic nub on the matrix that's keeping the Portal from sitting flat, cut it off with diagonal cutters

For info on adding LED diffusion acrylic, see the page LED Matrix Diffuser.

CircuitPython is a derivative of MicroPython designed to simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the CIRCUITPY drive to iterate.

Set up CircuitPython Quick Start!

Follow this quick step-by-step for super-fast Python power :)

Further Information

For more detailed info on installing CircuitPython, check out Installing CircuitPython.

Click the link above and download the latest UF2 file.

Download and save it to your desktop (or wherever is handy).

Plug your MatrixPortal M4 into your computer using a known-good USB cable.

A lot of people end up using charge-only USB cables and it is very frustrating! So make sure you have a USB cable you know is good for data sync.

Double-click the Reset button (indicated by the green arrow) on your board, and you will see the NeoPixel RGB LED (indicated by the magenta arrow) turn green. If it turns red, check the USB cable, try another USB port, etc.

If double-clicking doesn't work the first time, try again. Sometimes it can take a few tries to get the rhythm right!

You will see a new disk drive appear called MATRIXBOOT.

 

Drag the adafruit_circuitpython_etc.uf2 file to MATRIXBOOT.

The LED will flash. Then, the MATRIXBOOT drive will disappear and a new disk drive called CIRCUITPY will appear.

That's it, you're done! :)

Instead of the default Terminal typeface, we'll use a lovely typeface converted to a bitmap font for use on the matrix display.

In case you want to make your own font, this excellent guide shows how to use FontForge to do just that!

I selected the IBM Plex Mono Medium typeface. I then converted it to a single bitmap font in a size that works for the 64x32 pixel matrix display, and hand kerned the colon and space characters. Here is the modified .bdf font:

To use it, download and uncompress the zip file and then drag it onto the board's CIRCUITPY drive. In CircuitPython, the font is loaded so it can be used for text display.

Glyph Bitmap Distribution Format

Side note about Glyph Bitmap Distribution Format (BDF) fonts -- they are stored as text files that are human and computer readable, and you can even edit them by hand if you feel like getting super particular!

Here's what the letter 'A' glyph looks like in a typical converted .bdf font:

STARTCHAR A
ENCODING 65
SWIDTH 681 0
DWIDTH 14 0
BBX 13 15 1 0
BITMAP
0200
0600
0700
0F00
0F00
0980
1980
18C0
30C0
3FC0
7FE0
6060
6030
C030
C018
ENDCHAR

Each of those lines after the word BITMAP is a hexidecimal pixel mapping of a row of the glyph. Here's what that looks like converted to binary, with each row padded to 16-bits:

0000001000000000
0000011000000000
0000011100000000
0000111100000000
0000111100000000
0000100110000000
0001100110000000
0001100011000000
0011000011000000
0011111111000000
0111111111100000
0110000001100000
0110000000110000
1100000000110000
1100000000011000

Here's what that 'A' looks like rendered on the 64x32 3mm pitch matrix display.

Glyph Tweaks

In case you wanted to add a stylish hat on top of your 'A', you could change the first row to: 1fc0 which is 0001111111000000 in binary.

This would result it the image to the left.

Now, that's a bit of a silly example, but the great thing about this is that you can fine-tune your glyphs beyond what may be easily accomplished during the conversion process.

Libraries

We'll need to make sure we have these libraries installed. (Check out this link on installing libraries if needed.)

  • adafruit_bitmap_font
  • adafruit_bus_device
  • adafruit_display_text
  • adafruit_fakerequests.mpy
  • adafruit_portalbase
  • adafruit_matrixportal
  • adafruit_esp32spi
  • adafruit_io
  • adafruit_matrixportal
  • adafruit_requests.mpy
  • neopixel.mpy

Connect to the Internet

Once you have CircuitPython setup and libraries installed we can get your board connected to the Internet. The process for connecting can be found here. This includes important info on the secrets.py file, adafruit IO keys, and more!

Text Editor

Adafruit recommends using the Mu editor for editing your CircuitPython code. You can get more info in this guide including info on how to use the REPL/serial terminal.

Alternatively, you can use any text editor that saves simple text files.

Code

Copy the code from the code-block below and paste it into the Mu editor and save it to your Metro M4 Airlift as code.py (or copy code.py from the zip file and place on the CIRCUITPY drive).

# Metro Matrix Clock
# Runs on Airlift Metro M4 with 64x32 RGB Matrix display & shield

import time
import board
import displayio
import terminalio
from adafruit_display_text.label import Label
from adafruit_bitmap_font import bitmap_font
from adafruit_matrixportal.network import Network
from adafruit_matrixportal.matrix import Matrix

BLINK = True
DEBUG = False

# Get wifi details and more from a secrets.py file
try:
    from secrets import secrets
except ImportError:
    print("WiFi secrets are kept in secrets.py, please add them there!")
    raise
print("    Metro Minimal Clock")
print("Time will be set for {}".format(secrets["timezone"]))

# --- Display setup ---
matrix = Matrix()
display = matrix.display
network = Network(status_neopixel=board.NEOPIXEL, debug=False)

# --- Drawing setup ---
group = displayio.Group(max_size=4)  # Create a Group
bitmap = displayio.Bitmap(64, 32, 2)  # Create a bitmap object,width, height, bit depth
color = displayio.Palette(4)  # Create a color palette
color[0] = 0x000000  # black background
color[1] = 0xFF0000  # red
color[2] = 0xCC4000  # amber
color[3] = 0x85FF00  # greenish

# Create a TileGrid using the Bitmap and Palette
tile_grid = displayio.TileGrid(bitmap, pixel_shader=color)
group.append(tile_grid)  # Add the TileGrid to the Group
display.show(group)

if not DEBUG:
    font = bitmap_font.load_font("/IBMPlexMono-Medium-24_jep.bdf")
else:
    font = terminalio.FONT

clock_label = Label(font, max_glyphs=6)


def update_time(*, hours=None, minutes=None, show_colon=False):
    now = time.localtime()  # Get the time values we need
    if hours is None:
        hours = now[3]
    if hours >= 18 or hours < 6:  # evening hours to morning
        clock_label.color = color[1]
    else:
        clock_label.color = color[3]  # daylight hours
    if hours > 12:  # Handle times later than 12:59
        hours -= 12
    elif not hours:  # Handle times between 0:00 and 0:59
        hours = 12

    if minutes is None:
        minutes = now[4]

    if BLINK:
        colon = ":" if show_colon or now[5] % 2 else " "
    else:
        colon = ":"

    clock_label.text = "{hours}{colon}{minutes:02d}".format(
        hours=hours, minutes=minutes, colon=colon
    )
    bbx, bby, bbwidth, bbh = clock_label.bounding_box
    # Center the label
    clock_label.x = round(display.width / 2 - bbwidth / 2)
    clock_label.y = display.height // 2
    if DEBUG:
        print("Label bounding box: {},{},{},{}".format(bbx, bby, bbwidth, bbh))
        print("Label x: {} y: {}".format(clock_label.x, clock_label.y))


last_check = None
update_time(show_colon=True)  # Display whatever time is on the board
group.append(clock_label)  # add the clock label to the group

while True:
    if last_check is None or time.monotonic() > last_check + 3600:
        try:
            update_time(
                show_colon=True
            )  # Make sure a colon is displayed while updating
            network.get_local_time()  # Synchronize Board's clock to Internet
            last_check = time.monotonic()
        except RuntimeError as e:
            print("Some error occured, retrying! -", e)

    update_time()
    time.sleep(1)

Using the WiFi and Adafruit IO credentials you entered into the secrets.py file and copied to the CIRCUITPY drive, your sign will connect to your WiFi, connect to Adafruit IO to get the time, and display it!

How it Works

Libraries

First we import the libraries we'll need, including time, for timekeeping, board for pin definitions on the Metro M4 Airlift, and displayio and terminalio for some of the display and basic font features.

The adafruit_display_text.label and adafruit_bitmap_font libraries are imported so we can use the text label commands and incorporate a bitmap font.

Finally adafruit_matrixportal.network and adafruit_matrixportal.matrix are imported to handle getting online through the WiFi access point to check the Adafruit IO timeserver, and to handle the lower level matrix display tasks.

Settings

Two user set variables are created next:

BLINK = True
DEBUG = False

These are at the top of the program where it's easy to change them if needed. The BLINK variable sets weather or not the colon ':' glyph will blink on and off each second.

DEBUG can be set True in order to switch from the bitmap font to the simpler terminalio font, as well as to print label bounding box and x, y coordinate values to the serial output, which is helpful when fine-tuning size and position of a bitmap font.

Check for Secrets

Next, the program checks to make sure there is SSID and password info stored in the secrets.py file that will be needed to go online. If this fails it will print an error message to the serial output.

Display & Network Setup

The matrix display and matrix objects are created next with these commands:

matrix = Matrix()
display = matrix.display
network = Network(status_neopixel=board.NEOPIXEL, debug=False)

The displayio Group, Bitmap, Palette, and TileGrid are created so we have the proper objects and hierarchy to display the time on the display. For info on this, check out the excellent displayio guide!

BDF Font Load

Now we'll load the BDF font glyphs from the Metro M4 Airlift's storage, in this case the lovely IBM Plex Mono medium in 24 point. (If we're in DEBUG mode, the terminalio font is used instead.)

The clock_label text object is created using the font so we have an object to display the time.

Update Time

The update_time() function will do all of the heavy lifting of parsing the current time value into discreet hours, minutes, and optional colon chunks that can be fed as arguments into the clock_label.text command.

This function also handles the blinking logic for the second hand colon, and sets the color of the text label to day vs. evening hours.

Text Centering

There's a very handy command we'll use for centering the text on the display: clock_label.bounding_box. This returns the x- and y-positions of the label, as well as the width and height of it's bounding box (an imaginary rectangle that encompasses the label).

With this we can then use a couple of simple formulas to set the label's x and y coordinates to be centered on the display. These essentially divide the display in half an the label in half to find their centers.

# Center the label
    clock_label.x = round(display.width / 2 - bbwidth / 2)
    clock_label.y = display.height // 2

Initial Display

The last_check variable is created to keep track of the state of time elapsed since last lookup of Adafruit IO timeserver time.

The update_time() function is called, and then the clock_label is appended to the display group so it will appear. At first this will be based on the Metro M4 time, which will be 12:00 when first powered on. But soon, we'll run the network time check to get accurate!

Main Loop

After all of that setup, it's time to get the time! This is the main loop of the program that runs over and over. The first thing to do is check the time if the last_check variable is either None or one hour has elapsed (3600 seconds).

The network.get_local_time() command uses the WiFi connection to synchronize to Adafruit IO timeserver time. Then the last_check value is reset to the current time.monotonic() (think of it as a continuously running ticker).

The display is then refreshed with the current time, and the process is repeated every second, taking a look each hour at the timeserver.

LED Diffusion Acrylic

You can add an LED diffusion acrylic faceplate to the your LED matrix display. (Pictured here with the ON AIR project)

This can help protect the LEDs as well as enhance the look of the sign both indoors and out by reducing glare and specular highlights of the plastic matrix grid.

Measure and Cut the Plastic

You can use the sign to measure and mark cut lines on the paper backing of the acrylic sheet.

Then, use a tablesaw or bandsaw with a fine toothed blade and a guide or sled to make the cuts.

Note: it is possible to score and snap acrylic, but it can be very tricky to get an even snap without proper clamping.

Peel away the paper backing from both sides and set the acrylic onto your matrix display.

Uglu Dashes

The best method we've found for adhering acrylic to the matrix display is to use Uglu Dashes clear adhesive rectangles from Pro Tapes. They are incredibly strong (although can be removed if necessary), easy to apply, and are invisible once attached.

Use one at each corner and one each at the halfway point of the long edges, then press the acrylic and matrix panel together for about 20 seconds.

Here you can see the impact of using the diffusion acrylic. (Pictured here with the ON AIR sign project)

Stand

A very simple and attractive way to display your matrix is with the adjustable bent-wire stand.

Alternately, you can use a frame, 3D printed brackets, tape, glue, or even large binder clips to secure the acrylic to the sign and then mount it on on a wall, shelf, or display cabinet.

These mini-magnet feet can be used to stick the sign to a ferrous surface.

This guide was first published on Aug 19, 2020. It was last updated on Aug 19, 2020.