48x48 Pixel Font erstellen

[David P. (devryd)]

Hallo zusammen,
ich brauche für ein Projekt einen (ich hoffe der Begriff ist korrekt) 
Pixelfont. Ich habe einen Beitrag von vor 20 Jahren gefunden, in dem 
einige Fonts erstellt wurden. Leider bin ich nicht ganz schlau daraus 
geworden, wie man das selbst macht.

Da ich im Netz nicht wirklich einen Font in der Größe finde, wende ich 
mich an euch. Wie genau erstellt man so was? Oder ist der Ansatz an sich 
falsch?. Ich möchte auch ein 200x200x Pixel Display eine 4 stellige Zahl 
schreiben. Ich brauche also auch nur die Ziffern von 0 bis 9.

Danke schon mal für eure Hilfe

[Markus M. (Firma: EleLa - www.elela.de) (mmvisual)]

Wenn du die Zahlen als Bild abspeicherst dann gibt es diverse Tools um 
"Bitmap in C" zu konvertieren.
Google danach, beispiel:
https://www.digole.com/tools/PicturetoC_Hex_converter.php

[Frank O. (frank_o)]

Guck mal in die Uli Kraus Bibliothek! (Displays)
Da gibt es ein Tool für sowas.

[Axel S. (a-za-z0-9)]

David P. schrieb:
> ich brauche für ein Projekt einen (ich hoffe der Begriff ist korrekt)
> Pixelfont. Ich habe einen Beitrag von vor 20 Jahren gefunden, in dem
> einige Fonts erstellt wurden. Leider bin ich nicht ganz schlau daraus
> geworden, wie man das selbst macht.

Ich habe für sowas mal den Apetech Font Creator verwendet. Die Site 
(www.apetech.de) ist zwar down, aber hier gibt den noch:

www.mikrocontroller.net/attachment/22095/GLCDFontCreator2.zip

> Da ich im Netz nicht wirklich einen Font in der Größe finde, wende ich
> mich an euch. Wie genau erstellt man so was? Oder ist der Ansatz an sich
> falsch?. Ich möchte auch ein 200x200x Pixel Display eine 4 stellige Zahl
> schreiben. Ich brauche also auch nur die Ziffern von 0 bis 9.

Ja, da ist der gut geeignet für. Es gibt auch einige Threads dazu. Der 
Font wird in ein Headerfile geschrieben und ist im wesentlichen ein 
großes Array von uint8_t im Flash. Du brauchst noch eine 
Display-Controller spezifische Funktion um die Zeichen zu zeichnen.

[Daniel S. (supernova01)]

https://www.mikrocontroller.net/articles/Vektor-Font_in_C

[Axel S. (a-za-z0-9)]

Axel S. schrieb:
> Du brauchst noch eine
> Display-Controller spezifische Funktion um die Zeichen zu zeichnen.

Ich mach mal die Ingrid: KS0108 Library

[Bruno V. (bruno_v)]

Zu Fuß:

Du nimmst Dir kariertes Papier, steckst 48x48 ab und legst los, jedes 
Kästchen Weiß oder Schwarz.

0-9.

Abstand horizontal und vertikal, eventuell ein Komma ... dann vielleicht 
doch die Zahlen in 47x47 und z.B. die 0 mit je 10 Zeilen oben und unten 
frei. Dann bleibt genügend Raum für 
https://de.wikipedia.org/wiki/Medi%C3%A4valziffer

Dann überlegst Du Dir, wie Dein Display die Zeichen am besten Byteweise 
verarbeiten kann und teilst die 48x48 in entweder 6 Spalten je 48 Zeilen 
oder 48 Spalten je 6 Zeilen. Und übersetzt jedes Feld a 8 Bit in 1 Byte 
0..255 (LSB links oder rechts, bzw. oben oder unten, je nach Display).

Ggf. am Anfang nur mit 8x8 oder 16x16. Sollte man einmal gemacht haben. 
Da man sich dann eine Menge Fragen zur Typographie stellt, mit denen man 
die Antworten (Empfehlungen) erst versteht.

[Carypt C. (carypt)]

ich glaube, das geht auch mit inkscape, allerdigs habe ich weiter keine 
Ahnung davon. inkscape habe ich mir wegen den skalierbaren 
Vektorgrafiken für Wikipedia bereitgelegt. Fonts sind wohl auch 
skalierbar. 
https://inkscape-manuals.readthedocs.io/en/latest/creating-custom-fonts.html
Viel Erfolg

[Thomas F. (igel)]

David P. schrieb:
> Wie genau erstellt man so was?

Wenn du es komplett selber machen willst geht das mit GIMP:

Einfach eine neue Grafik mit der passenden Pixelgröße erstellen, Text 
bzw. Buchstabe einfügen und dann als C-Code exportieren.

[Mi N. (msx)]

David P. schrieb:
> Ich möchte auch ein 200x200x Pixel Display eine 4 stellige Zahl
> schreiben. Ich brauche also auch nur die Ziffern von 0 bis 9.

Wie soll denn dazu die Pixelgröße 48x48 passen? Meinst Du vielleicht 4 x 
4 Stellen?
Das 'normale' Verhältnis Breite/Höhe ist etwa 1/2, was 24/48 ergeben 
würde. Gut, Unterlängen werden nicht gebraucht. Wenn man zu 32/48 
erweitern würde, sähen die Ziffern schon etwas fettleibig aus.

Selber verwende ich gerne als Basis 8x16, wobei ich die einzelnen Pixel 
ganzzahlig vergrößere, um auf kleinen Anzeigen eine bessere Darstellung 
oder auf Entfernung ablesbar zu bekommen.
Vielleicht fährt Du mal an einer Tankstelle vorbei, um Anregungen für 
ein gutes Seitenverhältnis und die Lesbarkeit von Ziffern zu erhalten.
Was Du jetzt vorhast, erschließt sich mir nicht. Oder soll das Kunst 
werden?

[Johnny B. (johnnyb)]

David P. schrieb:
> Wie genau erstellt man so was?

Das Tool "GLCD Font Creator" von Mikro Elektronika benutze ich gerne um 
normale Schriftarten zu konvertieren. Man kann es auch benutzen um 
komplett eigene Schriftarten zu kreieren, aber das ist sehr aufwändig.
https://www.mikroe.com/glcd-font-creator

[J. S. (jojos)]

Wer es so grobpixelig mag könnte auch gleich Siebensegmentanzeigen 
verwenden. Bei AliExpress gibt es günstige Module mit MAX7219 o.ä., 
braucht auch viel weniger Daten.
Wenn der Controller etwas Power hat dann lieber Fonts mit Antialiasing, 
das sieht bei den großen Zeichen wesentlich geschmeidiger aus.
Beispiel auch wieder: lvgl.

[Mi N. (msx)]

J. S. schrieb:
> Wenn der Controller etwas Power hat dann lieber Fonts mit Antialiasing,
> das sieht bei den großen Zeichen wesentlich geschmeidiger aus.

Geschmeidig oder gekünstelt? Da kann man viel verkehrt machen!

> Beispiel auch wieder: lvgl.

Wie ich sehen!
:-)

[Axel S. (a-za-z0-9)]

Mi N. schrieb:
> Selber verwende ich gerne als Basis 8x16, wobei ich die einzelnen Pixel
> ganzzahlig vergrößere, um auf kleinen Anzeigen eine bessere Darstellung
> oder auf Entfernung ablesbar zu bekommen.

Als Basis kann man das nehmen. Aber um zu einem Font für 48x48 Pixel 
(meinetwegen auch 48x72, ich hatte 48x48 als bounding box interpretiert) 
zu kommen, muß man da noch viele Pixel dazumalen oder weglöschen. Besser 
erscheint mir da der Tip mit GIMP zu sein. Hier:

https://community.silabs.com/s/article/creating-monochrome-bitmap-files-for-lcd-glib-using-gimp

Gibt es ein Plugin für GIMP, das eine Bitmap passend für GLIB 
rausschreibt.

In GIMP kann man sich dann einen beliebigen Font (Type1, TT, etc) 
raussuchen und den auf die gewünschte Größe skalieren. Dann braucht man 
nur die 10 Bitmaps für die Zeichen "0" - "9" zu exportieren und ist 
fertig.

Aber es kommt wie so oft auf die konkrete Verwendung an. Z.B. mit 
welcher Library das Display angesprochen wird. Der tollste Font nützt 
wenig, wenn man ihn später nicht aufs Display gezeichnet kriegt.

[Εrnst B. (ernst)]

Du könntest den lvgl-Font-converter verwenden.

Der bastelt dir aus einem TTF-Font ein C-File mit den Pixel-Daten.

Lässt sich auch ohne LVGL gut verwenden, zumindest wenn man die 
optionale Komprimierung weglässt (--no-compress).

Aufrufen mit "--symbols 0123456789", dann landen auch nur die Ziffern in 
der Datei.

Für Kantenglättung kannst du auch z.B. 4 oder 8 Bit/Pixel verwenden, 
z.B. --bpp 4

Wenn du den fontconverter nicht installieren willst, gibt's den auch 
Online:

https://lvgl.io/tools/fontconverter

Entweder die Pixeldaten aus dem erzeugten C-File rauskopieren, oder dir 
einen eigenen minimal "lvgl.h"-Header basteln, der die verwendeten 
typedefs enthält.

Bei nicht "fixed-width"-Fonts brauchst du zusätzlich zu den Pixeldaten 
noch die metadaten mit den bounding boxes der einzelnen Ziffern.

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {
    /* U+0030 "0" */
    0x0, 0x7f, 0x0, 0x0, 0xff, 0xe0, 0x1, 0xff,
    0xfc, 0x1, 0xff, 0xff, 0x1, 0xfc, 0x1f, 0xc0,
    0xfc, 0x7, 0xe0, 0xfc, 0x1, 0xf8, 0x7c, 0x0,
    0x7c, 0x7c, 0x0, 0x1f, 0x3e, 0x0, 0xf, 0x9f,
    0x0, 0x7, 0xdf, 0x0, 0x3, 0xef, 0x80, 0x0,
    0xff, 0xc0, 0x0, 0x7f, 0xe0, 0x0, 0x3f, 0xf0,
    0x0, 0x1f, 0xf8, 0x0, 0xf, 0xfc, 0x0, 0x7,
    0xfe, 0x0, 0x3, 0xff, 0x0, 0x1, 0xff, 0x80,
    0x0, 0xff, 0xc0, 0x0, 0x7f, 0xe0, 0x0, 0x7c,
    0xf8, 0x0, 0x3e, 0x7c, 0x0, 0x1f, 0x3e, 0x0,
    0xf, 0x8f, 0x80, 0xf, 0x87, 0xe0, 0xf, 0xc1,
    0xf0, 0x7, 0xc0, 0xfe, 0xf, 0xe0, 0x3f, 0xff,
    0xe0, 0xf, 0xff, 0xe0, 0x1, 0xff, 0xc0, 0x0,
    0x3f, 0x80, 0x0,

    /* U+0031 "1" */
    0x0, 0x70, 0xf, 0xc0, 0xfe, 0x1f, 0xf3, 0xff,
    0xbf, 0xfd, 0xff, 0xef, 0x9f, 0x78, 0xf8, 0x7,
    0xc0, 0x3e, 0x1, 0xf0, 0xf, 0x80, 0x7c, 0x3,
    0xe0, 0x1f, 0x0, 0xf8, 0x7, 0xc0, 0x3e, 0x1,
    0xf0, 0xf, 0x80, 0x7c, 0x3, 0xe0, 0x1f, 0x0,
    0xf8, 0x7, 0xc0, 0x3e, 0x1, 0xf0, 0xf, 0x80,
    0x7c, 0x3, 0xe0, 0x1f, 0x0, 0xf8, 0x3, 0x80,
// ...
}
/*---------------------
 *  GLYPH DESCRIPTION
 *--------------------*/

static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
    {.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 465, .box_w = 25, .box_h = 34, .ofs_x = 2, .ofs_y = 0},
    {.bitmap_index = 107, .adv_w = 270, .box_w = 13, .box_h = 34, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 163, .adv_w = 422, .box_w = 22, .box_h = 34, .ofs_x = 2, .ofs_y = 0},
//...

[Andreas M. (amesser)]

Ich habe gerne ubfg benutzt. Der kann auch Zeichen zusammenführen, also 
überlappend im Pixmap speichern. Das bringt z.B. bei Schwarz-Weis 
nochmal einiges.

https://github.com/scriptum/UBFG

[David P. (devryd)]

Super, vielen Dank für eure Hilfe.

Dass 48x48 nicht viel Sinn ergibt war mir gar nicht aufgefallen. Ich 
nehme dann vermutlich etwas in der Größenordnung 72x48. Mal schauen, wie 
das wird.

[Rangi J. (rangi)]

Ich verwende "LCD Tools" von EA.
Das gabs immer frei auf der EA-Seite. Da gibts "bitmapedit.exe" damit 
kann man importieren, malen und exportieren. Zudem kann man ganze Fonts 
(ttf) importieren und dann auch jedes einzelne Zeichen modifizieren. 
Leider nicht UTF8,16 aber für µC reichts aus.
Dazu kommen noch diverse Kommandozeilentools zum konvertieren von BMPs.
Das einzige, was es nicht kann, ist C-Code daraus generieren.

[Daniel S. (supernova01)]

David P. schrieb:
> etwas in der Größenordnung

Für gewöhnlich gibt man die Höhe an, da die meisten Schriftwarten 
innerhalb unterschiedliche Breiten haben. Ein "I" nimmt weniger Platz in 
der Breite  als ein "M"... Ist natürlich alles eine Frage der internen 
Verwaltung... aber mit den heutigen Mitteln würde ich die Breite auf 
einem Pixeldisplay immer flexibel nutzen, sieht auch besser aus...

Eine der wenigen vektorbasierenden Schriftwarten die von haus aus eine 
feste Breite haben, ist Courier New...ist auch eher Serifenarm...

Gruß

[Adam P. (adamap)]

Ich habe mir meine Schriftarten mit "The Dot Factory" erstellt.
Finde kein funktionierenden Download Link.
Habe dir mal die exe als zip angehängt.

[Niklas G. (erlkoenig)]

Von was für einer Plattform reden wir eigentlich? Auf einem (Embedded) 
Linux System würde ich einfach den Text per Pango+Freetype rendern und 
mich nicht selbst mit Pixelfonts herumschlagen. Ganz nebenbei 
funktioniert es dann auch mit allen Sprachen der Welt (und Emoji!) und 
sieht besser aus dank Anti-Aliasing und Hinting.

[David P. (devryd)]

Niklas G. schrieb:
> Von was für einer Plattform reden wir eigentlich?

Ich arbeite mit einem Attiny1616 (2k ram, 16k flash). Das ist von einem 
embedded Linux denkbar weit entfernt.

[Niklas G. (erlkoenig)]

David P. schrieb:
> Ich arbeite mit einem Attiny1616 (2k ram, 16k flash). Das ist von einem
> embedded Linux denkbar weit entfernt.

Achso, ja dann wird es wohl nur so sinnvoll gehen.

[David P. (devryd)]

Adam P. schrieb:
> Ich habe mir meine Schriftarten mit "The Dot Factory" erstellt.
> Finde kein funktionierenden Download Link.
> Habe dir mal die exe als zip angehängt.

Das ist genau das was ich gesucht habe. Funktioniert super und skaliert 
auch wunderbar. Kann ich jedem nur empfehlen, der vor einem ähnlichen 
Problem steht