How to edit text?(keyboard)

Hello @heyo​ ,

I don't know about the extra functionalities you are asking for, but if you want a ready-to-use keyboard, you can download the one we made here.

Hope that this helps,

/Yoann

@Yoann KLEIN​  I want to do that i can edit text, for example touch anywhere in text string and start write from that point. But then I change buffer position and start to write all letters after cursor dissapear . Im using setBufferPosition function.

Hello @heyo​ ,

I did a example for you, I will join the project for you to this post.

To explain quickly what I did :

• I integrated the custom keyboard from the link I shared in my first answer on this post.
• Then, I implemented a ClickListener in the TextArea of the keyboard used for display characters above the keyboard.
• Thanks to the event propagated by the ClickListener, I could access the x and y coordinates of the click in the TextArea, like this :

void Keyboard::textAreaClickHandler(const TextAreaWithOneWildcard& b, const ClickEvent& event)
{
 int x = event.getX();
 int y = event.getY();
}

• Then, I added a new TextArea with 2 wildcards in my application to display those coordinates, and modified my function :

void Keyboard::textAreaClickHandler(const TextAreaWithOneWildcard& b, const ClickEvent& event)
{
 int x = event.getX();
 int y = event.getY();
 
 touchgfx::Unicode::snprintf(textArea1Buffer1, TEXTAREA1BUFFER2_SIZE, "%d", x);
 touchgfx::Unicode::snprintf(textArea1Buffer2, TEXTAREA1BUFFER2_SIZE, "%d", y);
 textArea1.invalidate();
}

• I realized then that a character is approximately 10 pixels wide in the font I use. So, if I wanted to move the current cursor of my textArea, I just add to divide my positioning variable value (called positionText in my project) by 10. (For example : coordinate x = 23 => 2,3 => (int)2,3 => 2 => second position of the buffer). The final version of the function becomes this :

void Keyboard::textAreaClickHandler(const TextAreaWithOneWildcard& b, const ClickEvent& event)
{
 int x = event.getX();
 int y = event.getY();
 
 touchgfx::Unicode::snprintf(textArea1Buffer1, TEXTAREA1BUFFER2_SIZE, "%d", x);
 touchgfx::Unicode::snprintf(textArea1Buffer2, TEXTAREA1BUFFER2_SIZE, "%d", y);
 textArea1.invalidate();
 
 positionText = x/10;
}

Of course, this is just an example to show you how to do it. It's something not robust at all, because that will only work if all the glyphs of your font have approximately the same dimensions, which is often not the case.

If you want something better, but without the click feature, you can take a look at this post.

It describes how to implement a cursor in a TextArea and move it manually by clicks on a button on the display.

Hope that I helped you starting your development,

/Yoann

Thank you @Yoann KLEIN​ . Maybe you don't understand me. I realized cursor before and I can move cursor whatever I want, problem is that I can't edit text. For better understanding I try to explain you more. So I'm trying to make that with keyboard can be edit texts because now then I change cursor position for example in a middle of text: and start writing from that point, letters after cursor gone(I write "e" letter):So I want that text looks like this then I write "e".

I think that buffer needs to be shifted from that point where I clicked and "e" inserted in buffer, but I try a lot of variants and nothing works yet. Maybe then I set buffer position with "setBufferPos" function all other letters deletes from buffer. Maybe you have any suggestions?