PicoVector custom fonts for micropython 1.20.5 update

rayyanzahid · September 7, 2023, 4:01am

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?

alphanumeric · September 7, 2023, 8:38am

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)

rayyanzahid · September 7, 2023, 8:55am

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.

alphanumeric · September 7, 2023, 8:59am

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

alphanumeric · September 7, 2023, 10:15am

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)

Mad_Monk · September 7, 2023, 3:18pm

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)
display.set_backlight(0.8)

vector = PicoVector(display)
vector.set_antialiasing(ANTIALIAS_X4)


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

print(time.localtime())

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

    #p = Polygon(*random_polygon(10, 0, 0, WIDTH, HEIGHT))
    display.set_pen(BLACK)
    display.clear()
    display.set_pen(ORANGE)

    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))
        vector.draw(tick_mark)
        

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

    display.set_pen(GREEN)
    vector.draw(second_hand,minute_hand, hour_hand)
    display.set_pen(BLACK)
    vector.draw(hub2)
    display.set_pen(WHITE)
    vector.draw(hub)
    display.update()
    time.sleep(1.0 / 30)
    a += 1

rayyanzahid · September 7, 2023, 7:35pm

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

#IMPORT LIBRARIES
from picographics import PicoGraphics, DISPLAY_TUFTY_2040
from picovector import PicoVector, ANTIALIAS_NONE, ANTIALIAS_X4, ANTIALIAS_X16

#SET DISPLAY
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)
vector.set_antialiasing(ANTIALIAS_X4)
result = vector.set_font("/IndieFlower-Regular.af", 50)  #vector.setfont("font-name-directory",font-size-int)

#SET PALETTE
WHITE = display.create_pen(255,255,255)
BLACK = display.create_pen(0,0,0)

while True:

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

    #UPDATE SCREEN
    display.update()

Mad_Monk · September 7, 2023, 8:38pm

rayyanzahid:

#IMPORT LIBRARIES
from picographics import PicoGraphics, DISPLAY_TUFTY_2040
from picovector import PicoVector, ANTIALIAS_NONE, ANTIALIAS_X4, ANTIALIAS_X16

#SET DISPLAY
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)
vector.set_antialiasing(ANTIALIAS_X4)
result = vector.set_font("/IndieFlower-Regular.af", 50)  #vector.setfont("font-name-directory",font-size-int)

#SET PALETTE
WHITE = display.create_pen(255,255,255)
BLACK = display.create_pen(0,0,0)

while True:

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

    #UPDATE SCREEN
    display.update()

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

rayyanzahid · September 7, 2023, 8:48pm

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

Mad_Monk · September 7, 2023, 8:52pm

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

rayyanzahid · September 7, 2023, 8:58pm

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

Mad_Monk · September 7, 2023, 9:01pm

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

rayyanzahid · September 7, 2023, 9:10pm

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

github.com/pimoroni/pimoroni-pico

PicoVector.

pimoroni:main ← pimoroni:feature/ppaf

opened 10:32AM - 25 May 23 UTC

Gadgetoid

+1944 -13

PicoVector, based upon Pretty Poly, lays the groundwork for Alright Fonts, a vec…tor-based font library that will eventually replace our Hershey font implementation. More details here: https://github.com/lowfatcode/alright-fonts It also gives us a nice(er) polygon renderer, which couldn't hurt. The aim here is to make PicoVector a library - like PNG or JPEG - which takes a PicoGraphics instance and offers some additional functionality. In the case of PicoVector that will be a set of vector primitives, helpers and so forth. # todo 1. [ ] Primitives - do we need explicit circle, square, triangle, etc? should these be direct functions, or return a set of contours 2. [x] Transforms? - the ability to take a set of contours and translate/rotate/scale it could be useful? 3. [ ] Fix memory allocation issues - currently polygon rendering will glitch periodically as some data or another is garbage collected. Using a fixed period `gc.collect()` appears to stop this. Need to figure out exactly where some memory is allocated, in-use, but not reachable when GC walks the pointers.

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

rayyanzahid · September 7, 2023, 9:13pm

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?

rayyanzahid · September 7, 2023, 9:43pm

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.

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
Download and install latest python for windows from the microsoft store or equivalent. Python 3.11 - Official app in the Microsoft Store
Open CMD and navigate to the downloaded Git folder using (in my case)
cd D:\Downloads\Tufty\alright-fonts-main
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.

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

rayyanzahid · September 7, 2023, 10:18pm

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!

fishgotnosole · September 8, 2023, 2:36pm

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.

alphanumeric · September 8, 2023, 5:22pm

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 .

Mad_Monk · September 11, 2023, 8:14pm

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.

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

Topic		Replies	Views
PicoVector Fonts/Text for Micropython 1.20.6 Update (Tufty 2040) Support	40	799	October 25, 2023
Pico Displays and fonts Support	4	998	March 20, 2021
How do I build MicroPython uf2 file from pimoroni-pico library? Support	14	1940	September 1, 2023
Documents for Pimoroni-flavor Micropython Raspberry Pi	5	924	October 7, 2022
Pico Display Pack 2 - Adding Fonts Support	4	575	March 16, 2023

PicoVector custom fonts for micropython 1.20.5 update

Related topics