How to display two-digit numbers on a 5×5 LED Matrix with LEGO SPIKE Prime or Robot Inventor

I found counting up to 10 very limiting on the led matrix display of the new SPIKE and MINDSTORMS hubs. I racked my head and came up with a way to display the numbers 0-99 on a single display. In this article, I’ll show you how to display two-digit numbers on a 5×5 light matrix in Word Blocks and Python. I shared a complete Python code you can copy to get you started.

For my Persistence of Vision clock, I wanted to set the time just before running the robot. I could run the clock from the app and configure the time there, but I also wanted to set it stand-alone. This challenge made me think: how can I show hours and minutes on the hub’s display? That’s when I came up with the idea to show the tens in a different shade than the units. Here’s a video to show you how that works.

Using numbers to control the pixel brightness in Word Blocks

I developed this project in Python first and then ported it to Word Blocks. For the sake of this how-to, we’ll start with Word Blocks. The trick I’m using is the ability to send strings to the display. A string of 25 numbers is enough to set the brightness of all 25 pixels. 

Each group of five numbers describes the brightness of a row of pixels. A nine is the brightest and a zero is off. In the example below I have set the top row to off, brightest, off, brightest, off.

Display two-digit numbers up to 99 in Word Blocks/Scratch on a SPIKE Hub

To display two-digit numbers, I first generated the pixels for all 100 possibilities in Python. You can import the numbers as a list in word blocks by opening the variables tray. If you have created a list-type variable, it shows up there. In the top-right of the dark orange block, there are three dots. The three dots open a menu where you can import a text file with list values.

Sadly LEGO decided not to add the three dots in the MINDSTORMS app. So if you have MINDSTORMS Robot Inventor, your only option is Python!

After you have imported the images for all numbers op to 99, you can select them from the list and show them on the matrix with a simple program. Below is a program that counts up to 99 with one-second intervals.

Download the txt file with all numbers up to 99 to display them on a SPIKE or MINDSTORMS matrix

If you also want to do this in Word Blocks, you can download my txt file with the images below. Note that lists in word blocks are not zero-indexed. If you want to display 5, you need to select the 6th element in the list!

Creating images in Python on the SPIKE Prime and MINDSTORMS hubs

For the Python version of this program, I used a less ‘brute-force’ approach. I started by drawing the tens and the units. To make things graphic, I used nested lists. They are somewhat like matrices. For variable names I used _ and B, which create some kind of ASCII art when used together.

B = 9
_ = 0

2 = [
    [B,B,B],
    [_,_,B],
    [B,B,B],
    [B,_,_],
    [B,B,B]
]

Python dictionaries to access the pictures you created

After drawing all the numbers, I put the nested lists inside two dictionaries: tens_px and units_px. A Python dictionary works just like a regular dictionary. You have a key, the word you want to look up, and a value. The value is the translation or explanation in standard dictionaries. In these Python dictionaries, I am translating integer numbers to matrices with painted versions of these numbers.

_ = 0
O = 8
B = 9

units_px = {
    0 : [
        [B,B,B],
        [B,_,B],
        [B,_,B],
        [B,_,B],
        [B,B,B]
    ],
    1 : [
        [_,B,_],
        [B,B,_],
        [_,B,_],
        [_,B,_],
        [B,B,B]
    ],
    2 : [
        [B,B,B],
        [_,_,B],
        [B,B,B],
        [B,_,_],
        [B,B,B]
    ],
    3 : [
        [B,B,B],
        [_,_,B],
        [B,B,B],
        [_,_,B],
        [B,B,B]
    ],
}

Once I finished both dictionaries, I had to zip the tens from one dictionary together with the units from the other dictionary. The code below returns a 5×5 matrix with a combination of tens and units.

def image_99(number):
    number = int(number)
    if not 0 <= number <= 99:
        # Return an error cross
        return "00000:09090:00900:09090:00000"
    else:
        units = number % 10
        tens = number // 10
        # Join matrices
        result_px = []
        for i in range(5):
            result_px += [tens_px[tens][i] + units_px[units][i]]
        result_str = ":".join(["".join([str(n) for n in row]) for row in result_px])
        return result_str

Converting 5×5 matrices into strings with a nested list comprehension

The last step is to convert these matrices into strings of numbers that the LEGO Mindstorms and SPIKE Prime hubs can turn into images. To make this conversion, I used a nested list comprehension. In Python, list comprehensions are an easy way of iterating over a list and creating a new list with updated elements. Since my matrices are nested lists, I can process them with a nested list comprehension. 

If I would do the same with for-loops, I would probably need twenty lines of code. That means more typing and more bugs to snipe.

result_str = ":".join(["".join([str(n) for n in row]) for row in result_px])

Display two-digit numbers on a SPIKE hub with Python code

Finally, I can output the result to a text file for use in Scratch or show it on the matrix display. In the code below, I connected a crank to the hub. It rotates through the numbers, just like the Scratch code.

This is the last part of the program you see in the video. It runs a control loop and checks if the crank has changed more than 10 degrees. In that case it plays a click and updates the current number.

crank = hub.port.F.motor

last_number = 0
while True:
    counted = crank.get()[1]
    number = (counted // 10) % 100
    number_img = hub.Image(image_99(number))
    hub.display.show(number_img)
    if last_number != number:
        hub.sound.play('sounds/menu_fastback')
    last_number = number

Configuring the MINDSTORMS Robot Inventor POV clock with hours and minutes

In the POV clock model, I used one motor to switch between hours and minutes and a second motor to set the values. Once the time is set, you can tap the POV clock on the side and it wil start spinning.

Persistence of Vision (POV) Clock with 51515

Build a Persistence of Vision (POV) Clock with one kit of MINDSTORMS 51515. This model prints the time in the air while rotating real fast! The 51515 POV clock uses only the middle row of the LED matrix on the hub. It times precisely when the lights turn on. This way it can write any number or text in the air. The included pr…

€7.50

Shop now

Support my work & Don’t Miss any updates

I hope you enjoyed this article. It took me a few days to write it and collect the image materials. If you appreciated it, consider supporting me on Patreon. Supporters get free monthly building instructions.

If you have more questions, feel free to ask them in the comments. If you follow me on Facebook, Instagram, and YouTube, these social media platforms will notify you of new articles and tutorials as I make them. 

Resources for displaying two-digit numbers on a 5×5 matrix

Here’s the link to the numbers text file again:

The full Python code is in my Github repository with boilerplate code for SPIKE and MINDSTORMS robot Inventor.