Cursor Example: navigating through two textAreas with a cursor and adding/removing elements where wished

Hi TouchGFX users,

I saw a couple of people asking for help/requesting a cursor example when working with textArea widgets, where the user could navigate through a text with a cursor, and add/delete elements at the wanted position.

So I made a small demo to help some of you and future users facing the same concern.

The scenario is: the user wants to have the possibility to manually edit a "barcode-like" text (numbers and letters from A to Z), with a maximum size of 12 characters.

• The user can increase or decrease the value with the buttons assigned for it (goes from 0 to 9 then switch to A to Z, and then Z to 0).
• You can move the cursor around the text with the assigned buttons, but you are limited by the extremities of the text.
• You can add/delete a value at the position of the cursor with the corresponding buttons.
• The last four digits are highlighted by using a bigger font in this case (just so that I had an example of string handling/communication).

There are 2 screens as I followed two "strategies" to handle the text. The first one is made of two textAreas with one having a larger font. The second screen uses 12 individual textAreas since it might be easier for some people to handle characters instead of strings. Those 12 widgets are set inside a container so that you can move all of them at once inside the Designer instead of one by one...

This is poorly coded but I just wanted to give to some of you an insight of how you could do a cursor for your projects. Please notice that I used a monospace font to make sure that all the numbers and characters have the same width, I put an "ABCD" text above the editable larger textArea to show that. You could mix this demo with the Keyboard example instead of having buttons to increase/decrease the value. I did this to simulate HW buttons you would have on your board.

Well, hope this helps someone.

/Romain