Question: How to create new fonts

[mwittig]

Hi.

I would like to use a slightly larger font (monospaced would be good enough for me). However, doubling the 5x7 font is too large. So, I am wondering how can I create new fonts files? Do you have a tool to create the json file and what is the source file format for this?

[noopkat]

Hi @mwittig !

This is a great question.
There's been no tool to create fonts, which makes things really limiting. As a result, after you opened this issue I put together a little tool to do this (with monospaced fonts only for now). Could you please test it out for me and let me know if it works for you? It works pretty well on my end with a 128x64 OLED screen:

Try it here: http://noopkat.github.io/oled-js-font-foundry/

Before you do anything though, please also update your version of oled-js to 4.0.0 - I just released it to support larger fonts, which is crucial to get these new fonts working.

Require and use the resulting javascript file as you normally would when following the documentation for writeString. Let me know if this is unclear or if you run into problems!

Thanks 😁

[noopkat]

quick example gist https://gist.github.com/noopkat/a7735be51ed167534254

[mwittig]

HI @noopkat,

Thank you so much for considering my question so quickly and the sollution you have provided. I am impressed by the sollution you have come up with!

I have followed your instructions and I was able to produce usable results with "Courier" and "LucidaConsole", however, "Monaco" produced garbled output on the OLED dsiplay. May be the results also depend on the Browser used. So far, I have been using Chrome M46. See my results here: https://gist.github.com/mwittig/e42a4ff001e9f60418d9

I also noticed that the resulting characters for LucidaConsole have some strange artefacts (see digits 6 and 8 in particular). May be anti aliasing is causing this. I have found the following article which is suggesting that anti aliasing can be switched off for the canvas, but I have not tried this yet. See: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element

PS: Monaco12pt.JPEG actually shows the results for Monaco 14pt, however, Monaco 12pt will also produce garbled output.

[noopkat]

Hi, thanks for your reply!

Yeah, those artefacts are totally the anti-aliasing at work there, which seems impossible to turn off 😞 .

I had a go at turning the smoothing off when first writing this, but it didn't seem to work. This morning I added it back in on your suggestion, and also set the canvas to translate 0.5px each way (which Stack Overflow says sometimes fixes it), but it appears that canvas still doesn't have any API methods to turn it off for real for text. I believe it's at the mercy of the browser upon a little research I did today. This is a real annoying thing, huh! 😁

I think a robust solution might be to have a list of common fonts to choose from, and some ImageMagick processing on the server-side to get it going without antialiasing. I haven't given up yet haha.

To address your Monaco issue - I am hypothesizing that perhaps the Monaco font is named something slightly different on your computer? The app just uses fonts available on your computer only. For example, I don't have LucidaConsole (I'm on OSX El Capitan) and as a fallback the app uses your browser's default sans-serif font, which is probably not monospaced. Variable width fonts will definitely cause the weird garble you shared in your photos (which were immensely helpful to debugging, thank you!)

Do let me know if this is not it and we can dig further.

[noopkat]

also I forgot to mention - you can change the linespacing of your text too (the last arg in writeString), which also accepts negative numbers. I found with the custom fonts that a value of around -4 can produce a nicer look.

[mwittig]

Hi,

thank you very much for the swift reply! It's a pity disabling anti-aliasing does not work for the web canvas as expected. I'll also try MacOSX / Safari which might produce better results than Win10 / Chrome what I am normally using. It may also be that some fonts are not supported on Win 10 and that "Monaco" is mapped to some default font - most likely a variable width font as you say. Btw, the latter can be avoided by setting the "generic-family" to "Monospace" as part of the font setting - see http://www.w3schools.com/cssref/pr_font_font-family.asp

I also thought about investigating the ImageMagick processing you suggested. I think this is by far more complex to implement. So, I think I'll stick to using the "Coruier" font which produces good results.

[noopkat]

ah - I forgot monospace is a valid font-family default, thanks!

[noopkat]

Oled-js font foundry is now documented in the oled-js README, closing this issue.