510 views
in GUI Development by
Hi  

I am new developer,

I started with text editor component template

so I am able to get the string from the text editor .

Question: I want to mask that typing and instead print # on every character type

Can you please advice me the steps

1 Answer

0 votes
by

Hello Mike,

I suppose, your application is the password input. If this is the case, I would not use the Text Editor component. It implements a lot of functionality, which is useless when the text is not visible. For example, the navigation in the text and the automatic line wrap will possibly irritate the user when the text is not visible.

Instead I would:

1. implement a simple GUI component with Text view and the Key Handler inside it.

2. Configure the Key Handler to react to alphanummeric keys (the setting AlphaOrDigitKeys).

3. Connect a new Slot method to the handler's OnPress property.

4. Add a new variable to the component where the entered string will be stored. Configure the variable with type string.

5. Implement the slot method (from step 3) with following or similar code:

// Collect the just pressed key code in the variable
Variable = Variable + KeyHandler.CharCode;

// Display '#' sign in the Text view.
Text.String = string( '#', Variable.length );

6. If you additionally want the user to be able to delete the last entered character you can add a further Key Handler to the component.

7. Configure the handler to react to the Backspace key.

8. Connect a new Slot method to the handler's OnPress property.

9. Implement the method (from step 8) as shown below:

// Truncate the string
Variable = Variable.left( Variable.length - 1 );

// Display '#' sign in the Text view.
Text.String = string( '#', Variable.length );

10. When the user finalized the input operation, the entered string (Password?) is found in the variable.

Is this the right approach for your application case?

Best regards

Paul Banach

 

by
Yes the feature is like password but I will need caret , delete , clear feature also so that is why I thought to text editor template
by
Hello Mike,

ok, understood. I will elaborate a list with necessary adaptation steps for your application case. Please have some patience.

Best regards

Paul Banach
by

Hello Mike,

following are the necessary modifications in the component created from the Text Editor template to display the # sign instead of the real text. Normally, the entered text is stored in the Text view existing within the component. The modification stores now the text in a new variable. The Text view itself will store and display only the corresponding count of # signs.

I hope it helps you further. Please follow the steps precisely to avoid errors.

Best regards

Paul Banach 

Step 1: Per default, the Text Editor displays the readable string Text. Select the Text view and adapt its property String to be initialized with the string "####\n" (incl. the both quote signs) as shown below:

Step 2: Add a new variable to the Text Editor component. Name it e.g. content. The variable will be used to store the real text.

Step 3: Ensure the variable is declared with type string.

Step 4: Per default, the Text Editor displays the string Text. Ensure the variable's default value is "Text\n" too (incl. the quote signs). Following is the resulting variable with its type and initialization expression from the above steps 2-4:

Step 5: Select and delete the both members NewlineKeyHandler, onNewlineKey. These members take care of the line break. This will not work with the here described approach. Following are the members to delete:

Step 6: Open the method OnSetString and modify following code:

/* OLD CODE */

Text.String = str + "\n";

/* NEW CODE */

content     = str + "\n";
Text.String = string( '#', content.length - 1 ) + '\n';

Step 7: Open the method OnGetString and modify following code:

/* OLD CODE */

var string str = Text.String;

/* NEW CODE */

var string str = content;

Step 8: Open the method onCharacterKey and modify following code:

/* OLD CODE */

Text.String = Text.String.insert( str, caretIndex );

/* NEW CODE */

content     = content.insert( str, caretIndex );
Text.String = string( '#', content.length - 1 ) + '\n';

Step 9: Open the method onDeleteKey and modify following code:

/* OLD CODE 1 */

if ( caretIndex >= ( Text.String.length - 1 ))

/* NEW CODE 1 */

if ( caretIndex >= ( content.length - 1 ))


/* OLD CODE 2 */

var char  ch    = Text.String[ caretIndex ];

/* NEW CODE 2 */

var char  ch    = content[ caretIndex ];


/* OLD CODE 3 */

Text.String = Text.String.remove( caretIndex, count );

/* NEW CODE 3 */

content     = content.remove( caretIndex, count );
Text.String = string( '#', content.length - 1 ) + '\n';

Step 10: Open the method onBackspaceKey and modify following code:

/* OLD CODE 1 */

var char  ch    = Text.String[ caretIndex - 1 ];

/* NEW CODE 1 */

var char  ch    = content[ caretIndex - 1 ];


/* OLD CODE 2 */

Text.String = Text.String.remove( caretIndex - count, count );

/* NEW CODE 2 */

content     = content.remove( caretIndex - count, count );
Text.String = string( '#', content.length - 1 ) + '\n';

Thats all ... I hope.

by
Yes thank you for the support
by
Hi

 

If I have to access the caps lock when user press the F9 then do I need to convert lowercase to upper case in oncharacterkey slot
by
Hi ,

 

I think I got it used the string.upper and it changes to upper case
by
Hi ,

 

I have one query , I removed all the touch and slide handler and it respective slot method

In widget I can see the Caret visible

But when it is used in another component

Caret is not visible, before when touch and slide handler was present at that time when the editor is clicked it was showing caret

I used the approach I drag the editor in the gui component . So in editor updateviewstate method  
 

if (astate.contain(core::viewstate[focused]) is not true and that is why blinkeffect is disabled

So am I missing some steps that need to folow
by

Hello Mike,

I answered your question in the thread Character typing.

Best regards

Paul Banach

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...