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.
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).
