Changing TouchGFX TextArea font at runtime

[dave2012]

I want to change the font at runtime for a TextAreaWithOneWildcard.

I figured it would be as simple as:
1. update the text in the wildcard buffer (previously set by calling setWildcardTextArea)
2. call setTypedText( id ) where 'id' is a designer defined text entry that uses the predefined font I want to use (different to the one used for the TextArea in the designer)
3. call invalidate()

It seems that the string associated with the 'id' text entry takes precedence over the string I update in the wildcard buffer. I've tried calling in a different order with no success. Is this by design or a bug?

I've seen a suggested workaround that uses multiple languages to define the same string but with different fonts. My application is multi-lingual so that's not an option.

Why doesn't TextArea have support for selecting a font that is already defined in the application or am I missing something?

Thanks

[JohanAstrup · Accepted solution]

Hello @dave2012.

I usually change both font and text at runtime by setting a new TypedText. This is also the recommended procedure.

However, it is also possible to follow the method you mentioned. You just need to invert the order of steps 1 and 2. A TouchGFX TypedText contains both the font and the text. Therefore, calling setTypedText after setting a new text will overwrite the text you have just inserted.

I have attached a small example that demonstrates how this can be achieved.

Best regards,
Johan

[dave2012]

Hi @JohanAstrup

Thanks for your quick reply. The thing I was missing is the dummy TextAreas I select (each with different assigned font sizes) were not assigned as wildcards. I noticed your example uses setTypedText  on TextAreas with their text set to <value> i.e. wildcard. When I modified my dummy TextAreas to this it worked fine.

It would be good to modify the documentation to state that this is required otherwise any hardcoded text will take priority. Even better would be to add a setFont() member to the TextArea class which takes care of this under the hood.

Dave

[JohanAstrup]

Sorry, you actually do not need the dummy TextAreas; that is just me, who did not clean up the example. You only need to define the TypedTexts under 'Texts', but the text must include a wildcard for the procedure to function correctly, as you have also observed.

The current typology in TouchGFX is that a TypedText is a combination of text and a font. Therefore, there is no native way to modify only one of these elements (the wildcard approach is a hacky workaround). This also means that implementing a setFont function in TouchGFX is not straightforward.
It is not about hardcoded text taking priority; rather, when you call setTypedText, you replace the content with a new TypedText, which includes both the text and the font and will hence get a new text. This is also explained in the documentation, although perhaps not as explicitly as described above (https://support.touchgfx.com/docs/development/ui-development/touchgfx-engine-features/texts-and-fonts#the-text-converter).

If you have any specific ideas or suggestions for improving the article to make it clearer, I would be happy to hear them :)

Best regards,
Johan