Custom fonts in ST77xx TFT display

[Affinite]

I am struggling to understand how to incorporate a custom font for my St77xx display
(I would like to use a large typeface (around 90pt)

I first downloaded a suitable Truetype font from Google Fonts and then converted it to a GFX font file (.h) using a web app. from here https://rop.nl/truetype2gfx/
I then placed the .h font fle in ESPEASY/src/src/static/fonts

I dont understand how to enable it and reference it in AdafruitGFX_heper.h/.cpp
I experimented with various #defines but I'm stumbling around in the dark with no success
(I did see notes in the docs which referred me to the AdafruitGFX helper documentation but I cant find any)

Second part of my question is where does the drop down list of available fonts come from in the ST77xx plugin the font names in that drop down do not correlate with the actual font file names in the fonts directory.

I'd be grateful for any help on this

Thanks

[Ath]

I am struggling to understand how to incorporate a custom font for my St77xx display
(I would like to use a large typeface (around 90pt)

I first downloaded a suitable Truetype font from Google Fonts and then converted it to a GFX font file (.h) using a web app. from here https://rop.nl/truetype2gfx/
I then placed the .h font fle in ESPEASY/src/src/static/fonts

I dont understand how to enable it and reference it in AdafruitGFX_heper.h/.cpp
I experimented with various #defines but I'm stumbling around in the dark with no success
(I did see notes in the docs which referred me to the AdafruitGFX helper documentation but I cant find any)

Second part of my question is where does the drop down list of available fonts come from in the ST77xx plugin the font names in that drop down do not correlate with the actual font file names in the fonts directory.

I'd be grateful for any help on this

Thanks

Using a large typeface can be achieved by using the font scaling factor, so for ca. 90pt, a 20pt font with scaling 4 or 5 (limited to integer values) should get you a solution.
And don't get too enthusiastic about how a font looks in that simulator, AFAICS it shows the ttf font, not the converted bitmap as a font. Actual displayed quality isn't as nice as that simulator.

To start with the second part, that list is built automatically from the list of fonts included, in function AdaGFXFormDefaultFont(), so no need to worry about that

The hard part is indeed adding the font to the list. There used to be some description on how to do that, but it somehow got lost, probably in a source-code overhaul (many things were changed over time), so I'll try to write it down here (and put it back in the source)

As we can't have all fonts combined in all builds for size reasons, each font has to be guarded by compile-time defines. This does make the readability of the source quite poor, but flexible in what is eventually included. For historic reasons, there are 2 types of compile-time defines, some that are either just defined, or not, and some that should be defined as 0 for Off/Disabled, and non-0 (usually 1, sometimes 'true') for On/Enabled. This of course adds to the confusion

I usually start by adding the defines to AdafruitGFX_helper.h

To add a 90pt font, around line 120 I'd add a #define ADAGFX_FONTS_EXTRA_90PT_INCLUDED to guard this group of fonts
And around line 173 #define ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B can be added (the SevenSeg_B part best matches the name of your font)
The rest of the #ifndef/#define stuff there is to enable/disable the included fonts, but that shouldn't be needed yet

Now continue in AdafruitGFX_helper.cpp

Around line 115 is the last #endif of a large #ifdef/#ifdef/#include/#endif/#endif list.
Just before that last #endif, a new check should be added, like this: (I'll use the names I used above, you'll probably want to adjust the name for the include-file)

Code: Select all

#  ifdef ADAGFX_FONTS_EXTRA_90PT_INCLUDED
#   ifdef ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B
#    include "../Static/Fonts/7segment90pt7b.h"
#   endif // ifdef ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B
#  endif // ifdef ADAGFX_FONTS_EXTRA_90PT_INCLUDED

The include-file needs a few adjustments to make it work with the ESPEasy code:
1) Add a single-include check at the top:

Code: Select all

#ifndef FONTS_7SEGMENT90PT7B_H
#define FONTS_7SEGMENT90PT7B_H

and at the end of that file:

Code: Select all

#endif // ifndef FONTS_7SEGMENT90PT7B_H

The name of the #define should be adjusted, according to the filename, and all uppercase, by convention.

After adding that, the list of font-names has to be extended:
That font-names list ends around line 971, with an empty set of quotes and a semicolon: "";
Just before that line, include this conditional code:

Code: Select all

  #  ifdef ADAGFX_FONTS_EXTRA_90PT_INCLUDED
  #   ifdef ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B
  "sevenseg90b|"
  #   endif // ifdef ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B
  #  endif // ifdef ADAGFX_FONTS_EXTRA_90PT_INCLUDED

assigning the name sevenseg90b to your font. This can be adjusted, but must be all lowercase characters! (required!)

Next we have to add the font data to the font-list array. The array starts around line 996, just after the /* *INDENT-OFF* */ formatter instruction comment to not mess up the table-like code that follows.
At the end of that array, around line 1104, we'll have to add the address of the GFXFont from the 7segment90pt7b.h file (select your font.h file, of course) and parameters for the font:

Code: Select all

  # ifdef ADAGFX_FONTS_EXTRA_90PT_INCLUDED
  #  ifdef ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B
  { &_7segment90pt7b,               96,              120, 122,  false, 101u },
  #  endif // ifdef ADAGFX_FONTS_EXTRA_90PT_SEVENSEG_B
  # endif  // ifdef ADAGFX_FONTS_EXTRA_90PT_INCLUDED

These numbers, width, height, offset, and a boolean for proportinal spacing, are an approximation, and have to be tried on a real display, by trial and error
The last number, 101u, is the font-id. That has to be unique (check the rest of the list), and I started at 101 as the first user-custom font

Next step is to compile a build with this code enabled, so, probably not for ESP8266, as then all fonts are disabled.
I usually test with a MAX build.
Ask more questions if needed

[Affinite]

ton,
thank you so much for such a comprehensive reply - you (and TD-er) are such fantastic supporters and drivers of the ESPEASY project.
I will work through your guide later today
I did try using the font scale option but Im aiming for as clean a font as possible and obviously the scale option doesn't smooth out the jaggies very well if you scale up a 20pt font to 80.
Anyway, thanks again and I will report back if i understand it all, and get it to work this time.

[Affinite]

Yipee it worked. !
Hope you dont mind if I suggest a couple of additions to your instructions ...

1) After your initial instructions to edit AdafruitGFX_helper.h and AdafruitGFX_helper.cpp you go on to say that "The included file needs a few adjustments ..."
I think its worth pointing out that we are editing the font file 7segment90pt7b.h at this stage

2) In addition to the #ifndef and #define lines that you told me to add I also had to add a third line of:
const uint8_t _7segment90pt7bBitmaps[] PROGMEM = {
to my font file in order to make the file look like other (working) font files in the fonts directory

3) You then go on to say "After adding that, the list of font names has to extended ..."
I think its worth pointing out that we are editing AdafruitGFX_helper.cpp at this stage

The above might seem obvious to an expert but might be worth including for first timers like me

Thanks again - really appreciated your help

[Ath]

Yipee it worked. !
Hope you dont mind if I suggest a couple of additions to your instructions ...

Great!
Any feedback is welcome, and appreciated

1) After your initial instructions to edit AdafruitGFX_helper.h and AdafruitGFX_helper.cpp you go on to say that "The included file needs a few adjustments ..."
I think its worth pointing out that we are editing the font file 7segment90pt7b.h at this stage

Yes, that'll make it more clear.

2) In addition to the #ifndef and #define lines that you told me to add I also had to add a third line of:
const uint8_t _7segment90pt7bBitmaps[] PROGMEM = {
to my font file in order to make the file look like other (working) font files in the fonts directory

Hmm, the file I just generated has that as the first line. Was that possibly overwritten when you inserted the #ifdef/#define lines?

3) You then go on to say "After adding that, the list of font names has to extended ..."
I think its worth pointing out that we are editing AdafruitGFX_helper.cpp at this stage

I'll add that too.

And instead of line numbers, that'll obviously change in the future, I'll use (added) markers to refer to locations in the source where needed.

[Ath]

@Affinite
I've added these instructions in the AdafruitGFX_helper sources in PR #5285. You're invited to proof-read (and comment where needed )

[Affinite]

All looks good Ath - as do my new fonts

[Ath]

I've added a bit more info, like a few sites to find fonts and how to avoid some possible legal side-effects, create a Custom build, and corrected a few typos.