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,

[GaetanGodart]

Hello @Maximiliano and @Marc_LM ,

 

Indeed, it is not possible to change font for a single textArea at runtime.

 

Maximiliano, you can use the touchgfx_printf() method to print the value of the key in a console when running the simulator.

 

Regards,

[Marc_LM]

@Maximilianodid you find a way to have passwords in text boxes?

I am about to test a method of deriving a TextAreaWithWildcardBase like the flexButton with the "*style" composed templated classes.

[Maximiliano]

Hi @Marc_LM sorry for the delay.

Yes,I was able to solve it.

I don't remember well now but I made two buffers where one typed ****** and the other the password. then I added a button which if pressed showed one buffer or the other in the text on the screen.

What I had to take into account is that in the keyboard function if I pressed any key that was not a character (e.g. shift or upper case) it failed and I could not type another character, so I used the following to check before if it was a character or not by giving an ascii code range.

 

void CustomKeyboard::keyPressedhandler(Unicode::UnicodeChar keyChar)
{


	if(modo_password == 1 && keyChar >= 0x20 && keyChar <= 0x7E)
	{
		ContrasenaBuffer2[pos_pswrd]=keyChar;
		pos_pswrd++;
		// Replace the actual key character with '*'
		keyChar = '*';
		//touchgfx_printf(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);
		}
	}
	else{

	}

}

I hope I can help you.

 

 

[Marc_LM]

Thanks for the confirmation.
I did tried exploring overloading the "TextAreaWithWildcardBase::draw" to hide the wildcards but that function is not virtual.

I finished testing my implementation yesterday with double buffers.
I guess Gaetan's suggestion was the most reasonable compromise.