Adding the text
We want the Widget to show a big number, so un-check the "auto-size" property, and set the size to a fixed width=152, and height=90.
The default color of a TextArea Widget is black, which is rather dark on our background. Select the Color property of "textCounter", and change the color to white:
Changing the Text Typography
We want the text to be bigger. The way to do that is to change the typography used for the text. A typography defines the font, e.g. Verdana, the size, and the alignment, left, right, or center, for a text.
Select the Texts tab in the top of the TouchGFX Designer, click Typographies, and update the size of the Default typography to 80:
Going back to the Screen (by clicking the "Canvas" tab in the top), we see that the text is much bigger now. In fact we cannot read the complete text "New Text". Click the centered icon under the "Alignment" property to get the text centered.
Using a wildcard text
We want the TextArea to show a number that we can change with the buttons. To do that, we must change the text to include a "wildcard". A wildcard is a marker, "<d>" in the text that can be substituted with something else at runtime. We just want to show a number, so we will change the text to just "<d>". In other projects you can combine the dynamic parts with a fixed text, e.g. "Temperature: <temp> °C".
Click "Run Simulator" to try your application.
In this step we learned how to insert TextArea Widgets in your user interface and how to change the size of the typography. Read more about using texts in TouchGFX here in the article Using texts and fonts.
In the next step, we will use the buttons to change the number. Move on to the next step when ready.