in GUI Development by

In my GUI design I need to have virtual keyboard. But in the default alpha numeric keyboard, keys like @, [], and  ^ are not available. What are the steps required to add those keys?



1 Answer

+1 vote

Hello Sazna,

Embedded Wizard is delivered with an Alphanumeric Virtual Keyboard implemented as so-called component template. This means, its appearance, functionality as well as the keyboard layout can be modified according to your needs.

In order not to overwhelm the developer we keep the implementation of the component templates as simple as possible. The implementation of the template provides inline description for typical adaptation cases. Let me summarize this description once more. The layout of the virtual keyboard includes following keys for the case of the SHIFT key being released and pressed:


To modify the key-mapping the component template contains following two variables:

The variables store strings with characters for all the keys in the keyboard according to the order in which the keys are found. When you select a variable, you can edit its content in the Inspector window and so easily specify other keyboard mapping:

When you analyse the implementation of the component template, you will detect that for each key there is one Text or one Image view (depending on whether the key does represent a letter or a special key (SHIFT, etc.)). For example, the Text view TextKey43 represents the key at the bottom row of the keyboard (actually 'm'):

If you want less keys, just delete undesired views, If your keyboard requires more keys, duplicate the existing keys (copy-paste). Also, you can move and resize the Text or Image views if you want other keyboard layout.

Important: As mentioned above, the both variables layoutShiftOff and layoutShiftOn store strings with character codes to map to corresponding keys. The number of characters stored in the string corresponds thus to the number of keys in the keyboard. Therefore, when delete/add Text views, you will need to adapt the content of the variables accordingly. For example, if you add a new Text view, add a character to the string to map it to the new Text view - to the new key.

Please note, the changes on the variables have an effect when you reload the component by clicking on:

If the above described modifications are not sufficient (you want other decorations or other behavior), see the inline description inside the component template. It helps to understand its implementation and learn how to make bigger modifications of the component template.

Best regards

Paul Banach

Hi Paul,

Now I have adapted the required keys. Thank you for your guidance.




Embedded Wizard Website | Privacy Policy | Imprint