TouchGFX fonts special textarea with auto convert proportional to monospaced?

[MM..1]

Hi all, i search properties for manage showed multinumber counters without not cool moving.

For example num 123 121 111 . Align not help here .

My idea is mark textarea as number aligned and render calculate widths from font for 0-9 and use it to convert showing as monospaced . 

Ofcourse font editor can change this , but better is switchable choice. Exist or is this doable in an TGFX version?

[GaetanGodart]

Hello @MM..1 ,

You could directly use a monospaced font, this way you don't even have to mana the spacing of your characters.
This is also the preferred way of doing it because if you make a trip to add space when needed on a non monospaced font, it will look weird as a "i" will have a lot of space around it.

However, if you still want to do a trick, I see 2 ways of doing it:

1. add multiple textAreas with only 1 character every time and that are spaced by the space you want for your characters then add code to control each of these textArea independently. This is ok when you know how many characters you will need
2. make a more complex project (perhaps a custom container) also with multiple textAreas where the spacing of the textAreas is set by code and perhaps where the number of textArea visible depends on the size of your desired text. This could be a solution if you often require this feature in your projects.

Overall I would recommend to simply use a monospaced font in a regular textArea.

If you share the design you want to achieve, maybe we can find a simple work around.

Regards,

[MM..1]

Sorry , but you maybe never create GUI and use fonts. Normal way is graphics designer choice font and programmer apply it. But in real world most good design is proportional !

Maybe you missunderstand i ask about number characters only . 0 1 2 3 4 5 6 7 8 9

But for universal use i dont see trouble create func as textArea2.setMonoWidth(20);...

Now API have for example textArea2.setIndentation(20); 

[Flemming Gram CHRISTENSEN]

Hello. 
There is no API to control the spacing of characters. TouchGFX will use the spacing in the font.
And you are right, the font is often selected by a designer person.

One option is to modify the font to use same spacing for all characters.

Second option is to use multiple TextAreas. Maybe also not pratical, but would work

A third option is to modify the output of the font converter. For the numbers, this is not difficult.

Here is an example:

I used the font Comic Sans MS in size 150.
We can easily see that the '1' are narrower than the '0'.

This can also be seen in the generated output. Take a look in the file generated/fonts/src/Table_comic_150_4bpp.cpp:

This table describes the width, height and other properties of the letters in the bitmap font.
The second number is the unicode. The 7'th number is the advance. This is the number of pixels that the "cursor-position" in moved after drawing the letter. We see that unicode 0x0031 = '1' is has an advance of 68 pixels, whereas the other number have advance=92.

If I modify 68 -> 92 I get this screen in the simulator (Designer still uses the TrueType file):

I you go this way, I suggest to create a patch file to do this modification, as the font converter will overwrite this file if you use new letters in this font.
I advice against modifying the generated files in general!

But so far best hack this week.

[MM..1]

Thanks Flemm, i ask this as requested feature in next versions , create workarounds is next dev time.

I know many ways to handle this ugly ... Your solution isnt design ok , because not only advance is required , but divide advance diff on left and right side to center char in monospace place.

[Flemming Gram CHRISTENSEN]

The number before the advance is the left indent.

Adding 12 here moves the '1' to the center of the letter box:

Changes this:

to

I hope it is useful.

Thanks!

[MM..1]

Hi after year. I ask some idea. In LVGL is simple create "cloned font" with callback info as this

bool fix_w_get_glyph_dsc(const lv_font_t * f, lv_font_glyph_dsc_t * g, uint32_t letter, uint32_t letter_next)
{
        /*Get the original glyph_dsc*/
	bool ret = lv_font_get_glyph_dsc_fmt_txt(f, g, letter, letter_next);
	if(ret == false) return ret;

	g->adv_w = 90-8; // 1463/16 based on width of zero
	g->ofs_x = (g->adv_w - g->box_w) / 2;
  if(letter==45)g->ofs_x+=20;
	return true;
}

This works ok and manage font as monospace. Now to your table generated as const. Simply i can in code memcpy it to ram and create font alias , but search all connections in TouchGFX is hard without source. Try create this code example on your side @Flemming Gram CHRISTENSEN 

[unsigned_char_array]

• Font doesn't need to be monospaced, only the digits need to be monospaced.
• If a font has all digits the same width and has kerning (relative distance between defined character pairs) disabled or equal for all digits and decimal seperator, then it should be the equivalent of monospaced for digits.
• If you want to add spaces before digits you need to check if the space has the same width as the digits. If not you can check if your font supports "figure space". A special unicode space character that is same width as digits. I wrote a little function that replaces spaces before digits with figure spaces. This allows me to do printf formatted printing to a string and not have bouncing digit positions.
• Some fonts have "tnum" support (Tabular Figures). This is a feature where you can enable monospaced digits. Web browsers support this. But TouchGFX does not support this.
• You can find a font that supports this or you can modify the font. Note that fonts are often licensed and you are not allowed to use all fonts for commercial applications. And modifying a font often requires explicit permission.

Figure space:
https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/digit-alignment-not-optimal-because-quot-figure-space-quot-not/td-p/687672
Tnum support:
https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/tnum-support-for-fonts-such-as-arial/td-p/865991

[MM..1]

Maybe you missunderstand detail, i use font as proportional and require only one textarea without = your ide 2 fonts = extreme waste of memory asume my font is size 240 and is absurd store same characters twice.

Then ofcourse i know how change font spaces python or any other way , but as i wrote all this is waste dev time and energy. Only real for me is A/ area properties and render AI ( TGFX release time maybe after next 10 years)
B/ simple font function to clone font tables from flash to ram except chars, with use same char data plus corect pairs or width tables.

I preffer A variant , but i ask it year ago and nothing here change.

[unsigned_char_array]

---

@MM..1 wrote:

Maybe you missunderstand detail, i use font as proportional and require only one textarea without = your ide 2 fonts = extreme waste of memory

---

No I only use 1 font.
So if I understand correctly you want to render the font differently depending on the context? So you can have both monospaced and proportional digits in the same application without storing additional glyths in FLASH?

---

@MM..1 wrote:

 is absurd store same characters twice.

---

Indeed. And nowhere did I propose this.

---

@MM..1 wrote:

A/ area properties and render AI ( TGFX release time maybe after next 10 years)

---

? How is AI going to fix it? AI in TouchGFX Designer or edge AI deployed on target? The latter certainly won't happen.

---

@MM..1 wrote:

B/ simple font function to clone font tables from flash to ram except chars, with use same char data plus corect pairs or width tables.

---

This could add more features to fonts. Such as changing spacing (compact or wide) and enabling tnum seperately for each text field and for each language. I would support this feature.