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 Belotta Text typeface found with the Google Fonts search page. I then converted it to a single bitmap font in a size that works for the 64x32 pixel matrix display. Here is the .bdf font:

To use it, download and uncompress the zip file and then drag it onto the board's CIRCUITPY drive. In CircuitPython we'll load the font 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 our converted 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.

Shape Graphics

In order to draw some stylish graphic elements (a frame and some wings) we'll use the display_shapes library's Rectangle and Polygon code.

With the Rectangle code, we'll draw six shapes to create the border frame (it has cutouts, otherwise we could make a single rectangle with a black fill and a white outline).

rect1 = Rect(0, 0, 2, 32, fill=0x444444)
rect2 = Rect(62, 0, 2, 32, fill=0x444444)
rect3 = Rect(2, 0, 9, 2, fill=0x444444)
rect4 = Rect(53, 0, 9, 2, fill=0x444444)
rect5 = Rect(2, 30, 12, 2, fill=0x444444)
rect6 = Rect(50, 30, 12, 2, fill=0x444444)

These each set a starting coordinate point pair on x- and y-axes, and an ending point pair, as well as specify the color.

This guide was first published on Aug 11, 2020. It was last updated on Jul 20, 2020.

This page (Font and Graphics) was last updated on Aug 04, 2020.

Text editor powered by tinymce.