PicoVector custom fonts for micropython 1.20.5 update

I noticed the new release of pimoroni-tufty2040-v1.20.5-micropython.uf2. In the release notes, it’s mentioned that almost any font could be converted to .af file format and then rendered {Followed by an example.}

Does any one know the documentation of PicoVector or how to use picovector to show your own fonts? Any one figured that out yet?

Not sure if this is what your looking for?
Might be worth a look see anyway.

lowfatcode/pretty-poly (github.com)

lowfatcode/alright-fonts: The font format designed for embedded and low resource platforms. (github.com)

I found the git for alright-fonts and pretty-poly earlier, but they’ve added PicoVector as a library as part of the latest build. There isn’t any reference functions that tells us how to use PicoVector. Soo, just having trouble implementing the custom fonts part.

If someone can create a working example, then this would be quite a gamechanger tbh.

I had a feeling that would be the case.

I’m thinking a tutorial is being worked on, likely by Hel Gibbons @hel or Phil Howard @gadgetoid

I see a few Pico Vector Examples have been added by @gadgetoid.
If the clock one is what I saw on Twitter, it’s pretty cool. =)
pimoroni-pico/micropython/examples/tufty2040 at main · pimoroni/pimoroni-pico (github.com)

Here is another clock @gadgetoid created (prefer this one, more minimalist, I just changed the colours, and extended the hour and minute hands) →

import time
import math
import random
from picographics import PicoGraphics, DISPLAY_TUFTY_2040, PEN_RGB332
from picovector import PicoVector, Polygon, RegularPolygon, Rectangle, ANTIALIAS_NONE, ANTIALIAS_X4, ANTIALIAS_X16

display = PicoGraphics(DISPLAY_TUFTY_2040, pen_type=PEN_RGB332)

vector = PicoVector(display)

RED = display.create_pen(255, 0, 0)
ORANGE = display.create_pen(255, 128, 0)
YELLOW = display.create_pen(255, 255, 0)
GREEN = display.create_pen(0, 255, 0)
BLUE = display.create_pen(0, 0, 255)
VIOLET = display.create_pen(255, 0, 255)

BLACK = display.create_pen(0, 0, 0)
GREY = display.create_pen(128, 128, 128)
WHITE = display.create_pen(255, 255, 255)
#result = vector.set_font("/AdvRe.af", 30)

WIDTH, HEIGHT = display.get_bounds()

def random_polygon(length, x, y, w, h):
    for i in range(length):
        yield random.randint(x, x + w), random.randint(y, y + h)

hub = RegularPolygon(int(WIDTH / 2), int(HEIGHT / 2), 36, 5)
hub2 = RegularPolygon(int(WIDTH / 2), int(HEIGHT / 2), 36, 10)

#p = RegularPolygon(0, 0, 6, 100)
a = 0


while True:
    year, month, day, hour, minute, second, _, _ = time.localtime()

    #p = Polygon(*random_polygon(10, 0, 0, WIDTH, HEIGHT))

    tick_mark = Rectangle(int(WIDTH / 2) - 1, 0, 2, 10)
    for _ in range(12):
        vector.rotate(tick_mark, 360 / 12.0, int(WIDTH / 2), int(HEIGHT / 2))

    angle_second = second * 6
    second_hand = Rectangle(-1, -100, 2, 100)
    vector.rotate(second_hand, angle_second, 0, 0)
    vector.translate(second_hand, int(WIDTH / 2), int(HEIGHT / 2))

    angle_minute = minute * 6
    angle_minute += second / 10.0
    minute_hand = Rectangle(-2, -70, 4, 70)
    vector.rotate(minute_hand, angle_minute, 0, 0)
    vector.translate(minute_hand, int(WIDTH / 2), int(HEIGHT / 2))

    angle_hour = (hour % 12) * 30
    angle_hour += minute / 2
    hour_hand = Rectangle(-3, -40, 6, 40)
    vector.rotate(hour_hand, angle_hour, 0, 0)
    vector.translate(hour_hand, int(WIDTH / 2), int(HEIGHT / 2))

    vector.draw(second_hand,minute_hand, hour_hand)
    time.sleep(1.0 / 30)
    a += 1

Appreciate the mad help @alphanumeric & @Mad_Monk. I have the .af fonts working.

Here is a simplistic code to get it working.
Resources: Sample .af fonts

from picographics import PicoGraphics, DISPLAY_TUFTY_2040
from picovector import PicoVector, ANTIALIAS_NONE, ANTIALIAS_X4, ANTIALIAS_X16

display = PicoGraphics(display=DISPLAY_TUFTY_2040)

#SET VECTOR, ANTIALIASING & FONT TYPE {download.af fonts from resources above. Upload through Thonny in root "/" }
vector = PicoVector(display)
result = vector.set_font("/IndieFlower-Regular.af", 50)  #vector.setfont("font-name-directory",font-size-int)

WHITE = display.create_pen(255,255,255)
BLACK = display.create_pen(0,0,0)

while True:

    #SET PEN AND DISPLAY TEXT - vector.text("TextHere",X,Y,ANGLEDEG)
    vector.text("Hello World!", 60, 90, 0)



@rayyanzahid → I tried your script, but sadly all I get is a blank/black screen which seems to be backlit… but no words or error messages in Thonny.

Have you downloaded and installed the latest Micropython 1.20.5 release uf2 file?
I also downloaded and placed this font in root from thonny: https://github.com/lowfatcode/alright-fonts/tree/main/sample-fonts/IndieFlower

I have!! - as I can run the clock examples, and other polygons.

And you placed the .af font file in the root?

Yup!! – if I mistype the name it will error out, but that is not the case.

That is really interesting. I know from this thread that there are still some bugs to be fixed, especially with memory allocation.

Maybe its a performance thing? {I don’t know why it would be.} Try having no anti-alias and changing the font file?

I am facing another problem too.

I can’t get alright-fonts conversion script “afinate” to work on windows.

I am missing a module “freetype”, and can’t seem to find a way to get it installed in windows. Probably my limited knowledge.

Any one here who has been able to convert a ttf/otf file to af through alright-fonts script?

Lol. I was able to figure out how convert the fonts from otf/ttf to af in windows using the alright-font library.

This is how I did it.

  1. Download the Alright-Fonts script from Alright-Fonts-Git. Extract, and within the main folder, create a new folder called “fonts”. Add your fonts to this folder. I downloaded some free fonts from Da Font

  2. Download and install latest python for windows from the microsoft store or equivalent. Microsoft Apps

  3. Open CMD and navigate to the downloaded Git folder using (in my case)
    cd D:\Downloads\Tufty\alright-fonts-main

  4. Type in the command
    python ./afinate.py --font ./fonts/mogula.otf --quality high mogula.af

Note: I renamed the afinate script to afinate.py in the main folder. mogula.otf is a font i downloaded. “mogula.af” at the end of the command is the output name which gets stored in main.

  1. If the script doesn’t run, and says that some “XYZ” module is missing, then simply go to cmd, type pip install MODULENAME.

In my case I had to install the following libraries for the script to work
pip install freetype-py
pip install simplification

1 Like

Thanks for all the support every one. Have a quick demo here with some beautiful colors and fonts.

Far from perfect, I am experiencing a bug, where display doesn’t render with the png library and decoding.

But without it, it looks great!


How embaressing, attached the wrong image. Let’s try that again.

Vector graphics works just fine on the Pico Display 2, too!

Not got round to trying the vector fonts yet, however.

1 Like

I haven’t tried the fonts either, just the clock on my Tufty and Pico W Explorer.
I’m really liking what I see so far, thanks Phil @gadgetoid .

1 Like

Yeah, still having issues working w/ vector.text.

I’ve copied and pasted yours’ and Philp’s (@gadgetoid) scripts. None of them show correctly. All I can see is a black screen. I know the script is “working”, as my shell output shows data.

The example(s) of the clock or other non-text related items work for me.

tufty2040 v1.20.5 on 2023-09-06; Pimoroni Tufty 2040 with RP2040