How to edit text?(keyboard)

[heyo]

I'm making a custom keyboard and want to add some extra functionality. I need to be able to edit the texts (i.e. by marking the place of the text and moving the entire text to the right when writing). Maybe someone has done something similar and can help?

[Yoann KLEIN]

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

[heyo]

@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.

[Yoann KLEIN]

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

[heyo]

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?

[Yoann KLEIN]

Hello,

I succeeded doing that easily by :

• Including string library and std namespace in the file :

#include <string>
using namespace std;

• Converting my buffer char array and the character I want to append into strings objects :

string str_buffer = buffer;
        string str_value(1, value);

• Insert the character at the position specified by my click :

str_buffer.insert(positionText,str_value);

• Copy back my new string buffer to the old char array :

strcpy(buffer, str_buffer.c_str());

• Copy the value to the TextArea buffer and display it on screen :

Unicode::strncpy(keyboardTextAreaBuffer, buffer, KEYBOARDTEXTAREA_SIZE); //assign the string to the Text
        keyboardTextArea.resizeToCurrentText();
        keyboardTextArea.invalidate();

Finally, my whole function becomes :

void Keyboard::writeButtonCharacter(char value){
    // value-> corresponds to the character associated with the button that was clicked
    positionText++;
    if (positionText<=60){ // string length limit
        string str_buffer = buffer;
        string str_value(1, value);
 
        str_buffer.insert(positionText,str_value);
 
        strcpy(buffer, str_buffer.c_str());
 
        Unicode::strncpy(keyboardTextAreaBuffer, buffer, KEYBOARDTEXTAREA_SIZE); //assign the string to the Text
        keyboardTextArea.resizeToCurrentText();
        keyboardTextArea.invalidate();
    } 
}

That should make it, let me know if you have other issues.

/Yoann