4x8 Font

[gfwilliams]

Posted at 2017-06-08 by @gfwilliams

I was just doing a video showing how to display realtime YouTube video views on a 32x8 LED display, and I was having some difficulty fitting any number above 100k on the display with the normal 8 pixel high font (which is also basically 7px for most characters).

It struck me it'd be really handy to have a proper 8 pixel high number font that fitted into 3 pixels wide (4 pixels with a gap), so I've sketched up what's below. What does everyone think?

I'm not a big fan of 6, 8 and 9 - any ideas how to make them better? @jose1711 ?

"███ "
"█ █ "
"█ █ "
"█ █ "
"█ █ "
"█ █ "
"█ █ "
"███ "

" █  "
"██  "
" █  "
" █  "
" █  "
" █  "
" █  "
"███ "

" █  "
"█ █ "
"  █ "
"  █ "
" █  "
"█   "
"█   "
"███ "

" █  "
"█ █ "
"  █ "
" █  "
"  █ "
"  █ "
"█ █ "
" █  "

"█ █ "
"█ █ "
"█ █ "
" ██ "
"  █ "
"  █ "
"  █ "
"  █ "

"███ "
"█   "
"█   "
"██  "
"  █ "
"  █ "
"█ █ "
" █  "

" ██ "
"█   "
"█   "
"██  "
"█ █ "
"█ █ "
"█ █ "
" █  "

"███ "
"  █ "
"  █ "
"  █ "
" █  "
" █  "
" █  "
" █  "

" █  "
"█ █ "
"█ █ "
" █  "
"█ █ "
"█ █ "
"█ █ "
" █  "

" █  "
"█ █ "
"█ █ "
" ██ "
"  █ "
"  █ "
"  █ "
"██  "

I'll cope up with some code to create a font from this later - it's just convenient to be able to post stuff on the forum so we can see/edit them easily.

[espruino-discuss3]

Posted at 2017-06-08 by jose1711

hello gordon,

i see nothing wrong about 8, 6 and 9 do not align if you turn one of them upside down - maybe you could fix that. btw.. i can see your preference for serifs, rounded corners, number zero though is breaking this concept. personally - for 3px width i'd go with something way more simple, e. g.:

    "███ "
    "█ █ "
    "█ █ "
    "█ █ "
    "█ █ "
    "█ █ "
    "█ █ "
    "███ "

    " █  "
    " █  "
    " █  "
    " █  "
    " █  "
    " █  "
    " █  "
    " █  "

    "███ "
    "  █ "
    "  █ "
    " ██ "
    "██  "
    "█   "
    "█   "
    "███ "

    "███ "
    "  █ "
    "  █ "
    " ██ "
    "  █ "
    "  █ "
    "  █ "
    "███ "

    "█ █ "
    "█ █ "
    "█ █ "
    "███ "
    "  █ "
    "  █ "
    "  █ "
    "  █ "

    "███ "
    "█   "
    "█   "
    "██  "
    " ██ "
    "  █ "
    "  █ "
    "███ "

    "███ "
    "█   "
    "█   "
    "███ "
    "█ █ "
    "█ █ "
    "█ █ "
    "███ "

    "███ "
    "  █ "
    "  █ "
    "  █ "
    "  █ "
    "  █ "
    "  █ "
    "  █ "

    "███"
    "█ █ "
    "█ █ "
    "███ "
    "█ █ "
    "█ █ "
    "█ █ "
    "███ "

    "███ "
    "█ █ "
    "█ █ "
    "███ "
    "  █ "
    "  █ "
    "  █ "
    "███ "

[gfwilliams]

Posted at 2017-06-08 by @gfwilliams

Thanks! Yes, I think those probably make more sense given the number of pixels. I'll add that font in now (as Font4x8Numeric)

For anyone who is interested in trying stuff like this, here's the code I used to make the font:

var font = ""+
    "### "+
    "# # "+
    "# # "+
    "# # "+
    "# # "+
    "# # "+
    "# # "+
    "### "+
    " #  "+
    " #  "+
    " #  "+
    " #  "+
    " #  "+
    " #  "+
    " #  "+
    " #  "+
    "### "+
    "  # "+
    "  # "+
    " ## "+
    "##  "+
    "#   "+
    "#   "+
    "### "+
    "### "+
    "  # "+
    "  # "+
    " ## "+
    "  # "+
    "  # "+
    "  # "+
    "### "+
    "# # "+
    "# # "+
    "# # "+
    "### "+
    "  # "+
    "  # "+
    "  # "+
    "  # "+
    "### "+
    "#   "+
    "#   "+
    "##  "+
    " ## "+
    "  # "+
    "  # "+
    "### "+
    "### "+
    "#   "+
    "#   "+
    "### "+
    "# # "+
    "# # "+
    "# # "+
    "### "+
    "### "+
    "  # "+
    "  # "+
    "  # "+
    "  # "+
    "  # "+
    "  # "+
    "  # "+
    "### "+
    "# # "+
    "# # "+
    "### "+
    "# # "+
    "# # "+
    "# # "+
    "### "+
    "### "+
    "# # "+
    "# # "+
    "### "+
    "  # "+
    "  # "+
    "  # "+
    "### ";

var fdata = "";
for (var col=0;col<font.length/8;col++) {
  var i = (col&3)+((col&~3)<<3);
  console.log(i);
  fdata += String.fromCharCode(
    (font[i   ]==" "?0:128)|
    (font[i+ 4]==" "?0:64)|
    (font[i+ 8]==" "?0:32)|
    (font[i+12]==" "?0:16)|
    (font[i+16]==" "?0:8)|
    (font[i+20]==" "?0:4)|
    (font[i+24]==" "?0:2)|
    (font[i+28]==" "?0:1));
}
// ...
 g.setFontCustom(fdata, "0".charCodeAt(0), 4, 8);

As it happens I forgot that the font data is column-ordered. If I'd originally made the characters at right-angles to where they are, the code for it would have been amazingly simple.

[espruino-discuss3]

Posted at 2021-11-14 by blogmywiki

Hi Gordon - I've been puzzling over modifying this code to make a slightly bigger font than 4x8 and I'm rather stuck. (I have a nice bitmap font that doesn't convert well from OTF, and I want to encode the numbers from scratch using a method like this). Can you give me a clue as to what this line is doing? I understand the bitwise operators and can see the numbers in the console but I'm puzzled as to their significance.

 var i = (col&3)+((col&~3)<<3);

[espruino-discuss3]

Posted at 2021-11-14 by @MaBecker

have you checked the font page yet? Maybe there is already a font you like to use ;-)

http://www.espruino.com/Fonts

[espruino-discuss3]

Posted at 2021-11-14 by blogmywiki

I have - there are lots of great fonts and I've been trying some of them out, but I have a specific one that I'd like to recreate for my Bangle.js 2!

[espruino-discuss3]

Posted at 2021-11-14 by @MaBecker

nice, what size are you looking for?

[espruino-discuss3]

Posted at 2021-11-14 by blogmywiki

I think 7x8 for the digits

[gfwilliams]

Posted at 2021-11-15 by @gfwilliams

var i = (col&3)+((col&~3)<<3);

Yes, it's a bit confusing. Basically it's because the font as drawn in the string has the fonts one after the other vertically, but the custom font has them one after the other horizontally.

If that was swapped the code would be stupidly simple.

• col&3 is the X coordinate in each character
• The remainder is working out where to get the Y coordinate of each character from

There's actually a much nicer way of doing this, which the 7 segments fonts use to create themselves - the code for it is in the comments of the font: https://github.com/espruino/EspruinoDocs/blob/master/modules/Font5x7Numeric7Seg.js#L45-L62

You could ignore all the 7 segment stuff and just load an image right onto the Graphics instance using the image converter

Also worth checking out Matt's font converter: http://ebfc.mattbrailsford.com/

[espruino-discuss3]

Posted at 2021-11-16 by blogmywiki

Thanks Gordon!

[espruino-discuss3]

Posted at 2021-11-25 by blogmywiki

Success! I used Matt's font converter in the end, thank you for the tip.

Attachments:

• 51705767700_c3cc5c96c8_w.jpg

[espruino-discuss3]

Posted at 2021-11-27 by @MaBecker

nice, hope you find some time to share the code.

[espruino-discuss3]

Posted at 2021-11-28 by blogmywiki

Of course! I'll share the font properly when I've done the whole alphabet, but here are the numbers 0-9 and colon:

var font = atob("f3/gMB/7+AAAACA///AAAAAAQcHhsZ+LhAAAgUhsPh38eAAADAoJCI///BAA8XhkMhn8eAAAPz/0Mhn4eAAAgEAh8f+HgAAAb3/kMh/7eAAAeH5hML/z8AAAAAADYbAAAAAA");
g.setFontCustom(font, 48, 8, 9);