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

[Romain DIELEMAN]

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

[Ebun.1]

Hi Ramain

Thank you for making the sample.

How can I run this sample with STM32CubeIDE?

I started with TouchGFX4.13.0 and tried Generate Code, but the project folder of STM32CubeIDE could not be created.

The boards I have are STM32F769I-DISCO and STM32F746G-DISCO.

I would like to use STM32CubeIDE to run and debug on either of these.

Thank you.

[Romain DIELEMAN · Accepted solution]

Hi,

The project was made on the simulator so no CubeIDE projects are generated. What you can do is create a new project from Designer with the right Application Template (so f769 disco for example).

Now go to "Edit" on the top left and select "Import GUI".Press "Browse" and go through your folders to where you put the cursor example project

Once you are there, just open cursorExample.touchgfx.

You now will have the GUI imported to your project.

/Romain

[Ebun.1]

Hi Romain

Thank you for your reply.

Thanks to you, I was able to run it on the STM32CubeIDE.

I will study about how it works.

Thank you !

[Ebun.1]

Hi Mr. Romain

I am always indebted.

environment:

STM32CubeIDE Ver1.3.0

TouchGFX Ver4.13.0

Board: STM32F746G-DISCO

Debugging doesn't work with the above boards.

Specifically, set a breakpoint on the following line,

When I try to step through it, I get an LTDC_IRQHandler() interrupt.

void Screen2View::handleString(int8_t action) // 0=increase, 1=decrease, 2=moveLeft, 3=moveRight, 4=addNew

{

   if (action == 0) // Breakpoint to this line and stop

   {

If you replace the Board with the STM32F769I-DISCO, that will not happen.

I think it is a defect that depends on the board or the MCU.

Please tell me how to solve this.

Thank you.

[Romain DIELEMAN]

Sorry for taking so much time on this, I am very busy at the moment but i will try to answer by Wednesday

[Ebun.1]

Hi Mr. Romain.

Thank you for helping.

Excuse me for being busy.

How about after that?

I'm waiting your reply.