TouchGFX keyboard with password

[Maximiliano]

Hello to all,I am working on a stm32h745i-disk project that uses keyboard and I would like to hide the characters in the password field.

how can I do it? i.e. I don't understand when you press a key on the keyboard where do you type so that it is shown above the keyboard before you hit ok and it is passed to the GUI with “Unicode::strncpy(ContrasenaBuffer, keyboard.getBuffer(), CONTRASENA_SIZE);”

The video guide I used was:

https://www.youtube.com/watch?v=Tkz9099a7a4

testing and trying to understand the keyboard related files I could only hide them once you hit ok and they show up in the GUI using two buffers where one is filled with “*”.

I would like to do something similar to the video (minute 5:38) https://www.youtube.com/watch?v=0--7qFmWZMQ

but in my touchGFX code and later add a button to show the password if I want to but I guess I can do that later if I can solve this.

I share my View.cpp and the keyboard thing.please ignore Login_inicioView::Validacion_usuario() as it is something for the future.

Thanks.

[GaetanGodart]

Hello @Maximiliano ,

What keyboard are you using?

In the keyboards people shared in the custom widget thread, there is usually a buffer inside the custom keyboard that stores the data and then we can access a method to return that data.
Usually, people just copy the buffer into a wildcard but you can just make another buffer to be displayed and keep the data secret.
Your displayed buffer should be only '*' except the last one.
Here is a function that would do that :

void transformText(const char* input, char* output)
{
    const char* p = input;
    char* q = output;
    
    // Find the length of the input manually
    size_t len = 0;
    while (input[len] != '\0') len++;
    
    if (len == 0)
    {
        output[0] = '\0';
        return;
    }
    
    // Replace all characters except the last one with '*'
    for (size_t i = 0; i < len - 1; ++i) output[i] = '*';
    
    // Copy the last character
    output[len - 1] = input[len - 1];
    output[len] = '\0';
}

Regards,

[Maximiliano]

Good morning GaetanGodart, the keyboard I'm using is the example of stm in which you see as you press the keys you see above what is being entered. I managed to get inside once entered all the message that is loaded in a GUI text that shows the hidden characters but I do not know how to prevent the same keyboard while pressing the hidden character is seen. I reviewed a little bit the guts of the code of the keyboard example but I could not understand well where is the variable that uses the keyboard to show what is being entered.

I hope I have been clear but if not please ask me.

In my code I implemented the keyboard as in the video of controllerstech where it adds two buttons, ok to pass from the keyboard to the text of the gui what is entered and another exit to hide the keyboard.

[GaetanGodart]

Hello @Maximiliano ,

Is it the T9 keyboard?

The simplest way to understand the keyboard is to look at the name of the textArea that displays the text and to look for it in the code. This way, you can see when we update it.
From memory, when a key is selected, the selected key value is sent from the KeyContainer to the KeyboardContainer, then a function is called to update the textArea.
For you, you simply have to modify the function updating the textArea with the function I shared above.

Also, you could completely remove the textArea and the bow between the "Validate" "Cancel" button and the keys since you want to put the characters directly in your own textArea.

I hope this clarify things and give you a starting point.

Can you share your project?

Regards,

[Maximiliano]

I started my code from the youtuber controllerstech (I attach a picture of how he implements the keyboard he makes by taking the keyboard from the touchGFX examples).

In the screenshot I indicate different text areas where (A) is the text that fills the keyboard at the moment key by key before passing it to some text area (B) or (C).

actually I managed to implement a code that saves the buffer in a variable and in the text area (B) or (C) that saves with “*” hiding the text. but my difficulty is how to make it also hide in the text area (A) of the keyboard itself. if I can do that later I will see how to do so that I can press a key and it shows the text or shows hidden with “*”.

the code simply consists of clicking on a text area, typing on the keyboard and if the ok button is pressed, the keyboard buffer is passed to the variable corresponding to the text area, otherwise it is discarded.

I tried to send you a trimmed code so you won't find too much code making noise,

hopefully the code I'm sending you will help you understand how I'm using the keyboard since I started from there.

what I am not able to understand is how to hide or not the text that is being entered in the area (A) before giving ok or exit with the character “*”.

Attached is the base code with only the keyboard

[GaetanGodart · Accepted solution]

Hello @Maximiliano ,

By changing, in the CustomKeyboard.cpp file, the function KeyPressHandler

void CustomKeyboard::keyPressedhandler(Unicode::UnicodeChar keyChar)
{
    // Replace the actual key character with '*'
    keyChar = '*';

    // Add the '*' character to the buffer
    uint16_t pos = keyboard.getBufferPosition()-1;
    if (pos < BUFFER_SIZE - 1)
    {
        buffer[pos] = keyChar;
        keyboard.setBufferPosition(pos + 1);
    }
}

I am able to only display *.
However, I do that by replacing all the data in the buffer by *.
This means that you should create a new buffer to store the key you pressed.
I do that because the data in the buffer are displayed it is easier to change the buffer value than to change the code in Keyboard.hpp, also Keyboard.hpp is in widget, so I think it is regenerated every time so you cannot modify it.

Now what you have left to do is to create a new buffer in the customKeyboard files, store the key press in this buffer such as follow :

void CustomKeyboard::keyPressedhandler(Unicode::UnicodeChar keyChar)
{
    //Save data in new buffer
    myOwnBuffer += keyChar;
    
    // Replace the actual key character with '*'
    keyChar = '*';

    // Add the '*' character to the buffer
    uint16_t pos = keyboard.getBufferPosition()-1;
    if (pos < BUFFER_SIZE - 1)
    {
        buffer[pos] = keyChar;
        keyboard.setBufferPosition(pos + 1);
    }
}

Then you also have to change the getBuffer and clearBuffer functions that were added by the youtuber.

Hope this helps! :smiling_face_with_smiling_eyes:
If this comment answers your question, I invite you to select it as "best answer".

Regards

[Maximiliano]

@GaetanGodart 

Thank you very much for your answer, I took a long time to reply because I have been doing some tests and I am very close to what I wanted.

I am having a small error and I think I know what causes it.
In the text field where the keypressedhandler function is used to fill the buffer with * if I press any key other than a letter when I hit “ok” it doesn't save what I typed after pressing any of those keys.
The function keyPressedhandler is called every time a key is pressed, right? no matter what key it is, that is if you press the button “shift key”, “delete” or “change key to numeric keypad mode” this function is also called and I think this is causing me problems because it also writes in the buffer.
I was looking in the keyboard files and I can't find it.
in the function keypressedhandler the variable keychar what value does it have when those keys are pressed? so I can ignore it in the if that fills the buffer of *.
What strikes me is that if I press several times for example the shift key or something does not write me several *, only rewrites me the last character entered again makes it impossible to write more characters ie on the keyboard is seen but in the buffer is not saving them and are lost until you click again to write on the keyboard.

[Marc_LM]

Bonjour Gaetan,
Instead of having double buffers, could you define a typefont with only "*" as fallback symbols?
This would permit use to change the font when you want it to be readable.
(The stateness would be in the font selection and not a hidden bool that must strncpy different content).

[Maximiliano]

That sounds great.
Is it possible to make the font change at the press of a button? I mean that in the text you can see * because it is the only thing that has that font and then when you press a button it changes to a font with the whole alphabet.

And another question, is it possible to affect the text box on the keyboard as well?

[Marc_LM]

@Maximiliano, bad news, I check how "TypedText" kinda work.
Fonts and instance of text are calculated at compile time.

#include <touchgfx\framework\source\touchgfx\widgets\TextArea.cpp>
#include <touchgfx\framework\include\touchgfx\TypedText.hpp>

// found in <touchgfx\framework\include\common\TouchGFXInit.hpp>
Texts::setLanguage(0); // Instance of all text and fonts.

All values of TypedText are "static const". We can't change them in the database (instanced above).

We are probably fighting an uphill battle with this one.
Seems if we want an eye icon on a text I/O,
we would need an internal buffer and a show buffer,
like Gaetan suggested previously.