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
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.
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.
Page last edited March 08, 2024
Text editor powered by tinymce.
