Feature: Create a new font

[charno]

Hi,

Holidays are boring when there's not a lot to do outside the house. So I sat down and wrote the feature to create a new font.

In this pull request it's a bit a mixture, since I touched some related bits in the code.

There are:

• The "Create Font" feature
• Some style changes (disable import / create buttons when a font is opened, disable export button until font is opened, add some icons)
• Glyphs that are created disabled are now also shown as disabled (opacity)
• Some more reasonable defaults for created glyphs (mainly width / height / base)
• Import: Detect disabled glyphs (If xAdvance == 0 AND (width == 0 OR height == 0))

Please have a look at it. If it's a problem for you that the commits are mixed and chaotic I can do some cleanup work. Otherwise I'm open for all sorts of change requests, I tried to copy your coding style and do a reasonable job on the JS side, but as I said normally I'm coding in C++...

I did some testing and created this very ugly font which I will never use again, but it did work on my display!

const uint8_t Org_01_Bitmaps[] PROGMEM = {
  0xE0, 0x56, 0xDB, 0x50, 0x00, 0x75, 0x54, 0x00, 0x54, 0xA5, 0x38, 0x00, 
  0x54, 0xA3, 0x50, 0x00, 0x26, 0x6A, 0xAE, 0x20, 0xF2, 0x63, 0x50, 0x00, 
  0x29, 0x4D, 0x50, 0x00, 0xE4, 0xA5, 0x20, 0x00, 0x56, 0xAB, 0x50, 0x00, 
  0x55, 0x94, 0xA0, 0x00, 0x55, 0x00
};

const GFXglyph Org_01_Glyphs[] PROGMEM = {
  {     0,   3,   1,   4,    0,   -4 }   // '-'
 ,{     0,   0,   0,   0,    0,    0 }   // '.' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '/' disabled
 ,{     1,   3,   7,   4,    0,   -7 }   // '0'
 ,{     5,   2,   7,   3,    0,   -7 }   // '1'
 ,{     8,   3,   7,   4,    0,   -7 }   // '2'
 ,{    12,   3,   7,   4,    0,   -7 }   // '3'
 ,{    16,   4,   7,   4,    0,   -7 }   // '4'
 ,{    20,   3,   7,   4,    0,   -7 }   // '5'
 ,{    24,   3,   7,   4,    0,   -7 }   // '6'
 ,{    28,   3,   7,   4,    0,   -7 }   // '7'
 ,{    32,   3,   7,   4,    0,   -7 }   // '8'
 ,{    36,   3,   7,   4,    0,   -7 }   // '9'
 ,{     0,   0,   0,   0,    0,    0 }   // ':' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // ';' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '<' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '=' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '>' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '?' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '@' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'A' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'B' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'C' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'D' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'E' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'F' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'G' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'H' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'I' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'J' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'K' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'L' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'M' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'N' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'O' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'P' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Q' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'R' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'S' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'T' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'U' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'V' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'W' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'X' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Y' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Z' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '[' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '\' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // ']' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '^' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '_' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '`' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'a' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'b' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'c' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'd' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'e' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'f' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'g' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'h' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'i' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'j' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'k' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'l' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'm' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'n' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'o' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'p' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'q' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'r' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 's' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 't' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'u' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'v' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'w' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'x' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'y' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'z' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '{' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '|' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '}' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '~' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '€' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '‚' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'ƒ' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '„' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '…' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '†' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '‡' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'ˆ' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '‰' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Š' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '‹' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Œ' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Ž' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '‘' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '’' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '“' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '”' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '•' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '–' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '—' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '˜' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '™' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'š' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '›' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'œ' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'ž' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'Ÿ' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // ' ' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¡' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¢' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '£' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¤' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¥' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¦' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '§' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¨' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '©' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // 'ª' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '«' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¬' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '­' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '®' disabled
 ,{     0,   0,   0,   0,    0,    0 }   // '¯' disabled
 ,{    40,   3,   3,   4,    0,   -7 }   // '°'
};

const GFXfont Org_01 PROGMEM = {(uint8_t *) Org_01_Bitmaps,  (GFXglyph *)Org_01_Glyphs, 0x2d, 0xb0,  7};

[charno]

Added some documentation changes

[charno]

And a last change for today: The trailing _ from an imported font name is removed when displaying. Also, there are no empty parentheses before a font is loaded or created.

[tchapi]

Oh my. This is huge 🤩 !

I will have a thorough look at that tomorrow and keep you posted.

Thanks a lot

[charno]

And one more small change :)

[tchapi]

@charno can you allow 'Edits from maintainers' on this PR so I can push little changes too ?

[charno]

Hmm... The checkbox was active. Maybe you couldn't push because it was in draft mode? I changed to normal pull request now, please check again.

[tchapi]

🎉

[charno]

Yeah, thanks a lot!