Sharing how I am using Hershey fonts on badger and inky

Discussion
1

The Pimoroni team describe how to use hershey fonts here [pimoroni-pico/README.md at main · pimoroni/pimoroni-pico · GitHub].

These fonts look amazing and are a great alternative to bitmap fonts.
There is some complexity to using them, but it is worth it.

badger
badger1920×1164 94.3 KB

inky4.0
inky4.02849×2376 456 KB

My post includes photos with the same text displayed with bitmap8 and hershey fonts ‘sans’ and ‘serif’. Excuse the glare.

And here is my code for badger2040w.

import badger2040w

display = badger2040w.Badger2040W()

WIDTH, HEIGHT = display.get_bounds()

display.set_pen(15) # white
display.clear()

# Draw some horizontal lines at the top and bottom of the text
display.set_pen(0) # black
display.line(0, 38, WIDTH, 38, 2)
display.line(0, 74, WIDTH, 74, 2)

def display_message(message, x, y, scale) :
    width = display.measure_text(message, scale)
    display.text(message, x, y, width+2, scale)
    return width

message = "#Qj4 "
display.set_font("bitmap8")
bitmap_width = display_message(message, 0, 40, 4.0)

display.set_thickness(2)
display.set_font("sans")
sans_width=display_message(message, bitmap_width, 56, 1.0)

display.set_font("serif")
serif_width=display_message(message, bitmap_width+sans_width, 56, 1.0)

display.update()

And inky frame 4.0.

from picographics import PicoGraphics, DISPLAY_INKY_FRAME_4 as DISPLAY

display = PicoGraphics(DISPLAY)

WIDTH, HEIGHT = display.get_bounds()

display.set_pen(1) # white
display.clear()

# Draw some horizontal lines at the top and bottom of the text
display.set_pen(6) # orange
display.line(0, 38, WIDTH, 38, 2)
display.line(0, 106, WIDTH, 106, 2)

def display_message(message, x, y, scale) :
    width = display.measure_text(message, scale)
    display.text(message, x, y, width+2, scale)
    return width

display.set_pen(0) #black
message = "#{Qj4 "
display.set_font("bitmap8")
bitmap_width = display_message(message, 0, 40, 8.0)

display.set_thickness(3)
display.set_font("sans")
sans_width=display_message(message, bitmap_width, 72, 2.0)

display.set_font("serif")
serif_width=display_message(message, bitmap_width+sans_width, 72, 2.0)

display.update()

There are some magic numbers in my code.
Bitmap8 characters are 8 pixels high.
The X/Y coordinate for the first character is the upper left corner of that character.

Hershey fonts are 32 pixels high.
The X/Y coordinate for the first character is the middle of the left side of the character position.

For the badger code bitmap8 is drawn with a scale of 4.0 and the hershey fonts use a scale of 1.0. The vertical size for both is32 pixels (8*4 for bitmap8).

On inky frame I used larger fonts (since there are more pixels:-).
Bitmap8 scale is 8.0 and hershey is 2.0.
The resulting characters are 64 pixels high.

To get the bitmap8 and hershey text to line up I need to take the different origins.
In the badger sample code the Y coordinate (56) for the hershey fonts is 16 larger than the bitmap font.

In most cases using the hershey fonts you will want to call display.set_thickness().
To me values of 2.0 to 4.0 look best. I recommend you experiment.

Note the hershey fonts are slower than bitmap fonts.
In my examples the call to display.text() using ‘bitmap8’ is about 3 milliseconds.
For ‘sans’ about 6 milliseconds and ‘serif’ is about 10 milliseconds.
But, this is much faster than updating the display (3 or 4 seconds for badger and around 30 seconds for inky).

4 Likes
2

More sharing.

Here are pictures of my temperature monitoring app using bitmap8 font and hershey ‘sans’ font.

temperature_bitmap8
temperature_bitmap81480×877 113 KB

temperature_hershey
temperature_hershey1360×790 92.7 KB

I took these pictures outside in direct sunlight (with no flash).
So you see the badger2040 screen at its best.

Some people may prefer the retro look of the bitmap8 font.
But, I like the hershey fonts.

I spent quite a bit of time fiddling with font sizes and pen thickness to get the best looking result using the hershey fonts.

If you are interested, I uploaded my app to github.
You can find it here GitHub - cpottle9/badger2040w-temperature-sensor: Micropython app for Pimoroni Badger2040W to read temperature sensor and update MQTT.

The branch ‘first-code-submission’ uses bitmap8 font and the branch ‘use-hershey-fonts’ uses hershey fonts. All the changes for hershey fonts are in main.py.

I think you may have problems using hershey fonts with older micropython versions.
I recommend you get the install latest version from Pimoroni using the instructions in README.md on github .

or

Have fun!

2 Likes
3

Thank you so much so sharing (just found this entry now…). This is definetively also on my agenda to play around with hershey fonts. Your examples look really good and primising…

Can you also indicate memory usage while loading fonts?
I think of using multiple fonts for different purposes…

4

Hi m1cr0py7h0n,

It has been a long time since I looked at this.
But, I don’t think you need to worry about memory.
The hershey fonts are compiled in the micropython interpreters provided by Pimoroni for the Badger and InkyFrame.

I’m sure some RAM is consumed when you use hershey fonts, but probably not much more than the bitmap fonts.

Good luck with your project.

1 Like