Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font converted with tinyfontgen-ttf can't be displayed in a wanted color #52

Open
scraly opened this issue Dec 7, 2024 · 2 comments
Open

Font converted with tinyfontgen-ttf can't be displayed in a wanted color #52

scraly opened this issue Dec 7, 2024 · 2 comments

Comments

@scraly
Copy link
Contributor

scraly commented Dec 7, 2024 •
edited
Loading

Hi,

I have a strange bahavior right now.

I converted several size of TomThumb font (because the original one stored in this repository is too tiny).

Conversion:

 go run ./cmd/tinyfontgen-ttf --size 24 --package tomthumb --fontname TomThumb24pt ./tomthumb/Tom\ Thumb.ttf --output tomthumb/tomthumb24pt.go
go run ./cmd/tinyfontgen-ttf --size 32 --package tomthumb --fontname TomThumb32pt ./tomthumb/Tom\ Thumb.ttf --output tomthumb/tomthumb32pt.go

And when I'm using it in a main.go file, it seems that I can't display the font in a different color than a mix of white and black:

	 // The generated font
	tinyfont.WriteLine(&display, &tomthumb.TomThumb24pt, 84, 135, "Press START button", white)
	
	// The font in tinyfont repo
	tinyfont.WriteLine(&display, &tinyfont.TomThumb, 84, 150, "Press START button", white)

Even if I change the color to green or red or what you want, the result is always the same:

Result:
image

Here the code of the generated font:

// tinyfnotgen-ttf --size 24 --package tomthumb --fontname TomThumb24pt ./tomthumb/Tom Thumb.ttf --output tomthumb/tomthumb24pt.go

package tomthumb

import (
	"tinygo.org/x/tinyfont/const2bit"
)

var TomThumb24pt = const2bit.Font{
	OffsetMap: mTomThumb24pt,
	Data:      dTomThumb24pt,
	YAdvance:  24,
	Name:      "TomThumb24pt",
}

// rune (3byte) + offset (3byte)
const mTomThumb24pt = "" +
	"\x00\x00\x20" + "\x00\x00\x00" + //  
	"\x00\x00\x21" + "\x00\x00\x05" + // !
	"\x00\x00\x22" + "\x00\x00\x10" + // "
	"\x00\x00\x23" + "\x00\x00\x1A" + // #
	"\x00\x00\x24" + "\x00\x00\x29" + // $
	"\x00\x00\x25" + "\x00\x00\x38" + // %
	"\x00\x00\x26" + "\x00\x00\x47" + // &
	"\x00\x00\x27" + "\x00\x00\x56" + // '
	"\x00\x00\x28" + "\x00\x00\x5E" + // (
	"\x00\x00\x29" + "\x00\x00\x6B" + // )
	"\x00\x00\x2A" + "\x00\x00\x78" + // *
	"\x00\x00\x2B" + "\x00\x00\x84" + // +
	"\x00\x00\x2C" + "\x00\x00\x91" + // ,
	"\x00\x00\x2D" + "\x00\x00\x9A" + // -
	"\x00\x00\x2E" + "\x00\x00\xA2" + // .
	"\x00\x00\x2F" + "\x00\x00\xA9" + // /
	"\x00\x00\x30" + "\x00\x00\xB8" + // 0
	"\x00\x00\x31" + "\x00\x00\xC7" + // 1
	"\x00\x00\x32" + "\x00\x00\xD4" + // 2
	"\x00\x00\x33" + "\x00\x00\xE3" + // 3
	"\x00\x00\x34" + "\x00\x00\xF2" + // 4
	"\x00\x00\x35" + "\x00\x01\x01" + // 5
	"\x00\x00\x36" + "\x00\x01\x10" + // 6
	"\x00\x00\x37" + "\x00\x01\x1F" + // 7
	"\x00\x00\x38" + "\x00\x01\x2E" + // 8
	"\x00\x00\x39" + "\x00\x01\x3D" + // 9
	"\x00\x00\x3A" + "\x00\x01\x4C" + // :
	"\x00\x00\x3B" + "\x00\x01\x56" + // ;
	"\x00\x00\x3C" + "\x00\x01\x62" + // <
	"\x00\x00\x3D" + "\x00\x01\x71" + // =
	"\x00\x00\x3E" + "\x00\x01\x7E" + // >
	"\x00\x00\x3F" + "\x00\x01\x8D" + // ?
	"\x00\x00\x40" + "\x00\x01\x9C" + // @
	"\x00\x00\x41" + "\x00\x01\xAB" + // A
	"\x00\x00\x42" + "\x00\x01\xBA" + // B
	"\x00\x00\x43" + "\x00\x01\xC9" + // C
	"\x00\x00\x44" + "\x00\x01\xD8" + // D
	"\x00\x00\x45" + "\x00\x01\xE7" + // E
	"\x00\x00\x46" + "\x00\x01\xF6" + // F
	"\x00\x00\x47" + "\x00\x02\x05" + // G
	"\x00\x00\x48" + "\x00\x02\x14" + // H
	"\x00\x00\x49" + "\x00\x02\x23" + // I
	"\x00\x00\x4A" + "\x00\x02\x32" + // J
	"\x00\x00\x4B" + "\x00\x02\x41" + // K
	"\x00\x00\x4C" + "\x00\x02\x50" + // L
	"\x00\x00\x4D" + "\x00\x02\x5F" + // M
	"\x00\x00\x4E" + "\x00\x02\x6E" + // N
	"\x00\x00\x4F" + "\x00\x02\x7D" + // O
	"\x00\x00\x50" + "\x00\x02\x8C" + // P
	"\x00\x00\x51" + "\x00\x02\x9B" + // Q
	"\x00\x00\x52" + "\x00\x02\xAA" + // R
	"\x00\x00\x53" + "\x00\x02\xB9" + // S
	"\x00\x00\x54" + "\x00\x02\xC8" + // T
	"\x00\x00\x55" + "\x00\x02\xD7" + // U
	"\x00\x00\x56" + "\x00\x02\xE6" + // V
	"\x00\x00\x57" + "\x00\x02\xF5" + // W
	"\x00\x00\x58" + "\x00\x03\x04" + // X
	"\x00\x00\x59" + "\x00\x03\x13" + // Y
	"\x00\x00\x5A" + "\x00\x03\x22" + // Z
	"\x00\x00\x5B" + "\x00\x03\x31" + // [
	"\x00\x00\x5C" + "\x00\x03\x40" + // \
	"\x00\x00\x5D" + "\x00\x03\x4D" + // ]
	"\x00\x00\x5E" + "\x00\x03\x5C" + // ^
	"\x00\x00\x5F" + "\x00\x03\x66" + // _
	"\x00\x00\x60" + "\x00\x03\x6E" + // `
	"\x00\x00\x61" + "\x00\x03\x77" + // a
	"\x00\x00\x62" + "\x00\x03\x85" + // b
	"\x00\x00\x63" + "\x00\x03\x94" + // c
	"\x00\x00\x64" + "\x00\x03\xA2" + // d
	"\x00\x00\x65" + "\x00\x03\xB1" + // e
	"\x00\x00\x66" + "\x00\x03\xBF" + // f
	"\x00\x00\x67" + "\x00\x03\xCE" + // g
	"\x00\x00\x68" + "\x00\x03\xDF" + // h
	"\x00\x00\x69" + "\x00\x03\xEE" + // i
	"\x00\x00\x6A" + "\x00\x03\xF9" + // j
	"\x00\x00\x6B" + "\x00\x04\x0B" + // k
	"\x00\x00\x6C" + "\x00\x04\x1A" + // l
	"\x00\x00\x6D" + "\x00\x04\x29" + // m
	"\x00\x00\x6E" + "\x00\x04\x37" + // n
	"\x00\x00\x6F" + "\x00\x04\x45" + // o
	"\x00\x00\x70" + "\x00\x04\x53" + // p
	"\x00\x00\x71" + "\x00\x04\x64" + // q
	"\x00\x00\x72" + "\x00\x04\x75" + // r
	"\x00\x00\x73" + "\x00\x04\x83" + // s
	"\x00\x00\x74" + "\x00\x04\x91" + // t
	"\x00\x00\x75" + "\x00\x04\xA0" + // u
	"\x00\x00\x76" + "\x00\x04\xAE" + // v
	"\x00\x00\x77" + "\x00\x04\xBC" + // w
	"\x00\x00\x78" + "\x00\x04\xCA" + // x
	"\x00\x00\x79" + "\x00\x04\xD8" + // y
	"\x00\x00\x7A" + "\x00\x04\xE9" + // z
	"\x00\x00\x7B" + "\x00\x04\xF7" + // {
	"\x00\x00\x7C" + "\x00\x05\x06" + // |
	"\x00\x00\x7D" + "\x00\x05\x11" + // }
	""

// width + height + xadvance + xoffset + yoffset + []bitmaps
const dTomThumb24pt = "" +
	"\x00\x00\x02\x00\x00" + "" +
	"\x03\x08\x05\x01\x00" + "\x71\xC7\x1C\x60\x07\x1C" +
	"\x05\x04\x07\x00\x00" + "\xE3\xB8\xEE\x38\x00" +
	"\x05\x08\x07\x00\x00" + "\xE3\xBD\xEF\xFB\x8E\xE7\xBF\xEE\x7B\x4A" +
	"\x05\x08\x07\x00\x00" + "\x1F\x9B\x9F\xC0\xBE\x6E\x7F\x06\xC0\x70" +
	"\x05\x08\x07\x00\x00" + "\xE0\x24\x50\x38\x70\x58\x38\x04\x28\x0A" +
	"\x05\x08\x07\x00\x00" + "\xFC\x3F\x0F\xC3\xFE\xFB\xB8\xE5\xF8\x7E" +
	"\x03\x04\x05\x01\x00" + "\x71\xC7\x00" +
	"\x04\x08\x07\x01\x00" + "\x0E\x19\x70\x70\x70\x70\x1A\x0A" +
	"\x04\x08\x05\x00\x00" + "\xE0\xA4\x1C\x1C\x1C\x1C\xE4\xD0" +
	"\x05\x05\x07\x00\x00" + "\xE3\xA9\x91\xC3\x8E\x92\x40" +
	"\x05\x06\x07\x00\x01" + "\x04\x07\x0F\xFA\xF9\x1C\x01\x00" +
	"\x04\x04\x05\x00\x04" + "\x04\x1C\xE4\xD0" +
	"\x05\x02\x07\x00\x03" + "\xFF\xAA\x90" +
	"\x03\x02\x05\x01\x06" + "\x71\xC0" +
	"\x05\x08\x07\x00\x00" + "\x03\x80\xE0\x38\x70\x58\x38\x0E\x03\x40" +
	"\x05\x08\x07\x00\x00" + "\x1F\x96\xEE\x3B\x8E\xE3\xB8\xEF\xD3\xF0" +
	"\x04\x08\x05\x00\x00" + "\x1C\x6C\xFC\x2C\x1C\x1C\x1C\x1C" +
	"\x05\x08\x07\x00\x00" + "\xFC\x2A\x50\x38\x70\x58\x38\x0F\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\xFC\x2A\x50\x38\x70\x19\x00\xEF\xD3\xF0" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x3B\xFE\xAB\x80\xE0\x38\x0A" +
	"\x05\x08\x07\x00\x00" + "\xFF\xBE\x9E\x03\xF0\xA9\x00\xEF\xD3\xF0" +
	"\x05\x08\x07\x00\x00" + "\x1F\x96\x9E\x03\xFE\xFB\xB8\xEF\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\xFF\xAA\xE0\x38\x70\x58\x38\x0E\x03\x40" +
	"\x05\x08\x07\x00\x00" + "\xFF\xBE\xEE\x3B\xFE\xFB\xB8\xEF\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\xFF\xBE\xEE\x3B\xFE\xAB\x80\xEF\xD3\xF0" +
	"\x03\x06\x05\x01\x01" + "\x11\xC0\x04\x70\x40" +
	"\x04\x07\x05\x00\x01" + "\x04\x1C\x00\x04\x1C\xE4\xD0" +
	"\x05\x08\x07\x00\x00" + "\x03\x81\x91\xC3\x80\xA4\x07\x00\x68\x0A" +
	"\x05\x06\x07\x00\x01" + "\x55\x7F\xE0\x01\x54\xFF\x95\x40" +
	"\x05\x08\x07\x00\x00" + "\xE0\x29\x01\xC0\x0E\x06\x47\x0E\x43\x40" +
	"\x05\x08\x07\x00\x00" + "\xFF\xAA\xE0\x38\x70\x18\x00\x01\xC0\x70" +
	"\x05\x08\x07\x00\x00" + "\x1C\x16\x5E\x3B\xFE\xFA\x78\x05\xF8\x7E" +
	"\x05\x08\x07\x00\x00" + "\x1C\x16\x5E\x3B\xFE\xFB\xB8\xEE\x3B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xFC\x3E\x5E\x3B\xF0\xF9\x38\xEF\xD3\xF0" +
	"\x05\x08\x07\x00\x00" + "\x1F\x96\x9E\x03\x80\xE0\x38\x05\xF8\x7E" +
	"\x05\x08\x07\x00\x00" + "\xFC\x3E\x5E\x3B\x8E\xE3\xB8\xEF\xD3\xF0" +
	"\x05\x08\x07\x00\x00" + "\xFF\xBE\x9E\x03\xFE\xFA\x78\x0F\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\xFF\xBE\x9E\x03\xFE\xFA\x78\x0E\x03\x40" +
	"\x05\x08\x07\x00\x00" + "\x1F\x96\x9E\x03\xFE\xFB\xB8\xE5\xF8\x7E" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x3B\xFE\xFB\xB8\xEE\x3B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xFF\xAF\x91\xC0\x70\x1C\x07\x0F\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\x03\x80\xE0\x38\x0E\x43\xB8\xE5\xD0\x70" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x3B\xF0\xF9\x38\xEE\x3B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xE0\x38\x0E\x03\x80\xE0\x38\x0F\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\xE3\xBD\xEF\xFB\xFE\xFB\xB8\xEE\x3B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xE3\xBD\xEF\xFB\xFE\xFF\xBF\xEE\x7B\x4A" +
	"\x05\x08\x07\x00\x00" + "\x1C\x16\x5E\x3B\x8E\xE3\xB8\xE5\xD0\x70" +
	"\x05\x08\x07\x00\x00" + "\xFC\x3E\x5E\x3B\xF0\xF8\x38\x0E\x03\x40" +
	"\x05\x08\x07\x00\x00" + "\x1C\x16\x5E\x3B\x8E\xE7\xBF\xE6\xF8\x7E" +
	"\x05\x08\x07\x00\x00" + "\xFC\x3E\x5E\x3B\xFE\xFE\x7F\x0E\x6B\x4A" +
	"\x05\x08\x07\x00\x00" + "\x1F\x96\x9E\x00\x70\x19\x00\xEF\xD3\xF0" +
	"\x05\x08\x07\x00\x00" + "\xFF\xAF\x91\xC0\x70\x1C\x07\x01\xC0\x70" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x3B\x8E\xE3\xB8\xE5\xF8\x7E" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x3B\x8E\xA6\x47\x01\xC0\x70" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x3B\xFE\xFF\xBF\xEE\x7B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x38\x70\x59\x38\xEE\x3B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xE3\xB8\xEE\x38\x70\x1C\x07\x01\xC0\x70" +
	"\x05\x08\x07\x00\x00" + "\xFF\xAA\xE0\x38\x70\x58\x38\x0F\xFB\xFE" +
	"\x05\x08\x07\x00\x00" + "\xFF\xBE\x9E\x03\x80\xE0\x38\x0F\xFB\xFE" +
	"\x05\x06\x07\x00\x01" + "\x40\x38\x01\xC0\x64\x03\x80\x00" +
	"\x05\x08\x07\x00\x00" + "\xFF\xAA\xE0\x38\x0E\x03\x80\xEF\xFB\xFE" +
	"\x05\x04\x07\x00\x00" + "\x1C\x16\x5E\x38\x00" +
	"\x05\x02\x07\x00\x06" + "\xFF\xBF\xE0" +
	"\x04\x04\x05\x00\x00" + "\xE0\xA4\x1C\x00" +
	"\x05\x07\x07\x00\x01" + "\x54\x3F\x02\xF9\x6E\xE3\xBF\xEF\xF8" +
	"\x05\x08\x07\x00\x00" + "\xE0\x3D\x0F\xC3\x8E\xE3\xB8\xEF\xD3\xF0" +
	"\x05\x07\x07\x00\x01" + "\x05\x47\xEE\x03\x80\xE0\x17\xE1\xF8" +
	"\x05\x08\x07\x00\x00" + "\x03\x81\xE1\xFB\x8E\xE3\xB8\xE5\xF8\x7E" +
	"\x05\x07\x07\x00\x01" + "\x05\x47\xEE\x3B\x99\xFC\x1B\xE1\xF8" +
	"\x05\x08\x07\x00\x00" + "\x03\x81\x91\xC3\xFE\xBE\x47\x01\xC0\x70" +
	"\x05\x09\x07\x00\x01" + "\x05\x47\xEE\x3B\x9E\xFF\x95\xE0\x28\x70\x04\x00" +
	"\x05\x08\x07\x00\x00" + "\xE0\x3D\x0F\xC3\x8E\xE3\xB8\xEE\x3B\x4A" +
	"\x03\x08\x05\x01\x00" + "\x70\x80\x1C\x71\xC7\x1C" +
	"\x05\x0A\x07\x00\x00" + "\x03\x80\x50\x00\x0E\x03\x80\xED\x3B\x8A\x1C\x01\x00" +
	"\x05\x08\x07\x00\x00" + "\xE0\x38\x5E\x3B\xF0\xFC\x3F\x0E\x6B\x4A" +
	"\x05\x08\x07\x00\x00" + "\xFC\x2F\x01\xC0\x70\x1C\x07\x0F\xFB\xFE" +
	"\x05\x07\x07\x00\x01" + "\x55\x7F\xEF\xFB\xFE\xFF\xB9\xED\x28" +
	"\x05\x07\x07\x00\x01" + "\x54\x3F\x0E\x3B\x8E\xE3\xB8\xED\x28" +
	"\x05\x07\x07\x00\x01" + "\x04\x07\x0E\x3B\x8E\xE3\x97\x41\xC0" +
	"\x05\x09\x07\x00\x01" + "\x54\x3F\x0E\x3B\x8E\xE3\xBF\x4F\xC3\x80\x40\x00" +
	"\x05\x09\x07\x00\x01" + "\x05\x47\xEE\x3B\x8E\xE3\x97\xE1\xF8\x0E\x01\x40" +
	"\x05\x07\x07\x00\x01" + "\x05\x47\xEE\x03\x80\xE0\x38\x0D\x00" +
	"\x05\x07\x07\x00\x01" + "\x05\x47\xEF\xC2\xF4\x1F\xBF\x4F\xC0" +
	"\x05\x08\x07\x00\x00" + "\x1C\x1B\x9F\xF8\xB0\x1C\x07\x01\xF8\x7E" +
	"\x05\x07\x07\x00\x01" + "\x41\x78\xEE\x3B\x8E\xE3\x97\xE1\xF8" +
	"\x05\x07\x07\x00\x01" + "\x41\x78\xEE\x3B\x9E\xFF\x9B\x41\xC0" +
	"\x05\x07\x07\x00\x01" + "\x41\x78\xEF\xFB\xFE\xFF\xBF\xEF\xF8" +
	"\x05\x07\x07\x00\x01" + "\x41\x78\xE1\xC0\x70\x1C\x39\xAD\x28" +
	"\x05\x09\x07\x00\x01" + "\x41\x78\xEE\x3A\x9E\x1F\x81\xE0\x28\x70\x04\x00" +
	"\x05\x07\x07\x00\x01" + "\x55\x7F\xE2\xF9\xB9\xFC\x3F\xEF\xF8" +
	"\x05\x08\x07\x00\x00" + "\x1F\x87\x91\xC3\x80\xA4\x07\x01\xF8\x7E" +
	"\x03\x08\x05\x01\x00" + "\x71\xC7\x00\x11\xC7\x1C" +
	"\x05\x08\x07\x00\x00" + "\xFC\x2F\x01\xC0\x0E\x06\x47\x0F\xC3\xF0" +
	""

Why the generated font have a black color by default? :(
@scraly scraly changed the title Font converted with tinyfontgen-ttf can't be displayed in a different color than black Font converted with tinyfontgen-ttf can't be displayed in a wanted color Dec 7, 2024
@scraly
Copy link
Contributor Author

scraly commented Dec 7, 2024

I saw in the README file:

"Fonts generated by tinyfontgen-ttf are 2-bit-color, so they will not display well on non color LCDs."

So a workaround can be to be able to personalized these color during the generation. No?

@sago35
Copy link
Member

sago35 commented Dec 7, 2024

When using TTF fonts around the size of 12pt, the lack of anti-aliasing reduces font readability.
Therefore, the current implementation uses 2-bit color.

The current version assumes a white background and black text color.
This can likely be improved by implementing alpha blending to handle the rendering.

So a workaround can be to be able to personalized these color during the generation. No?

Yes, as you said, allowing all 4 colors to be customized would make it display properly.
This approach is much simpler than implementing alpha blending, so it might be a good first step.

see also:
#43 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@scraly @sago35