loading font from storage

Hi,

I have an app that now uses 7 custom fonts. The font is selected from a settings menu.
So I only need one active font to be loaded when the App starts up.

At the moment I have 7 seperate font functions that really bloat the App in terms of memory footprint.
I guess I should really just load the one font I need from storage for the lifespan of the App.

Just trying to get my head round how I physically do this - what code goes where and how it is loaded.

Graphics.prototype.setFontArchitect = function() {
// Actual height 40 (41 - 2)
var widths = atob("CBolByEeJykkJCYhCg...==");
var font = atob("AAAAAAAAAAAAAAMAAAAAAAAAAAAA....="­);
var scale = 1; // size multiplier for this font

g.setFontCustom(font, 46, widths, 58+(scale<<8)+(1<<16));
};

Would you recommend that I create a module for each of these fonts that basically does something similar to:

https://www.espruino.com/modules/FontDyl­ex7x13.js

How do I tell the apps.json file that the code has 7 custom font files ?
I think the answer is the way that modules are loaded - example gpssetup
The module file drops the .js from the source file name.
Then the App does require("myfont");

  "storage": [
    {"name":"gpssetup","url":"gpssetup.js"},­

Then I think I would just load settings at the top of the code and run this bit of one time code for the lifetime of the App.

 if (settings.font == "Architect")
    require("f_artitect").add(Graphics);
  else if (settings.font == "GochiHand")
    require("f_gochihand").add(Graphics);
  else if (settings.font == "CabinSketch")
    require("f_cabin").add(Graphics);
  else if (settings.font == "Orbitron")
    require("f_orbitron").add(Graphics);
...

Sun 2021.10.17

'that I create a module for each of these fonts '

I believe having a separate file or module for each will allow for easier upkeep should subtle changes be needed down the road. Pluggable in case more fonts evolve.

It also appears you have the conceptual idea on using each font as a length string of chars as in
FontDylex7x13.js

I'd use the example loader, maybe have one in each font file and push those into storage.

https://www.espruino.com/Bangle.js+Stora­ge
https://www.espruino.com/Data+Collection­

Retrieve the selected one based on the menu or random array selection you envision.

Hi - yes, what you suggest would work fine and shouldn't use too much memory.

However even just doing:

if (settings.font = ...) {
  Graphics.prototype.setFontArchitect = function() {
   ...
  }
} else if (settings.font = ...) {
  Graphics.prototype.setFontArchitect = function() {
   ...
  }
} 

is enough that the code will run without using up any RAM for a font that isn't used. It's worth noting that the Graphics.prototype.setFontArchitect function will only ever use maybe 5 JS variables regardless of the size of its contents (because it's stored in flash), so even 7 of them won't use up all your memory.

I would however ask the question: does your app really need 7 optional fonts? Will anyone actually use them all, or is it better to just have a single, good, well-tested font?

does your app really need 7 optional fonts?

I wanted to produce a configurable watch. One that had options that would change its appearance.

Will anyone actually use them all,

No. I expect the user will try them out and choose the one they like the feel of most. Then they might switch back and forth every few days to another one depending on what they were in the mood for. I have chosen 7 fonts that are as different from each other as I could get.

I converted the fonts to this scheme at
https://github.com/hughbarney/BangleApps­/tree/master/apps/pastel

Everything works fine apart from if I set Arhitect in the settings.
Then I get a blank screen as if the font silently failed to load.
No error messages on the console.

Problem solved - I rebuilt the font module file from scratch and it worked after that.