On-Screen Keyboard
Overview
In most applications that require user input, keyboards are a necessary component vital to the user. That is why, as a comprehensive HMI creation solution, Incari Studio comes pre-equipped with an On-Screen Keyboard.
However, thanks to the advanced customization options in Incari Studio, it is now possible for one to configure their own keyboard. This takes things a step further and provides the opportunity for more personal and unique designs.
This Demo Project aims to instruct on the following:
Providing more information on the On-Screen Keyboard in Incari.
Learning to modify a stock On-Screen Keyboard using the new Layout Attribute.
Clarifying how to alter its Style Attribute using Cascading Style Sheets (CSS).
Before you start |
This Demo Project can be downloaded in the Hub
1. Using the On-Screen Keyboard
Simply start by creating a new On-Screen Keyboard Object by following Create > On-Screen Keyboard
in the Scene Outliner.
Click on this new Object and go to the Attribute Editor. Here one can see the Object's general Attributes as well as those which enable one to modify the Layout
, Style
, and Text
properties of the On-Screen Keyboard.
To start with, set the size under Size
to x = 1366
, y = 580
and z = 1
. Also, for now, the Layout
Attribute can be set to English
.
2. Utilizing Custom Layouts
Incari Studio now supports custom layouts for On-Screen Keyboard Objects. First, create a Keyboard Layout
Asset file called english_custom
to utilize throughout the course of this project.
After creating the layout
, a double-click will open up the Code Editor with the default layout. Incari Studio already handles the switch between default, alt, and shift layouts. So, if only a small change is required, one can utilize these predefined layouts.
To use these layouts with the On-Screen Keyboard Object that has just been created, they must be added to the Project in Project Settings under Keyboard > Layout Manager
. After this step, simply select the newly added layout from the Layout > Layout Family
selector under Attribute Editor.
1) Creating Custom Keys
To add Custom keys to your keyboard or change the way that stock buttons like alt
, backspace
, or capslock
are rendered, you can simply do so by adding a definition under the display
dictionary within the Code Editor.
For instance, in order to have the Caps Lock
key rendered as caps
,one would need to input the following code:
Of course, this feature can be used to avoid duplicating hard-to-use symbols or codepoints throughout the layout. For instance, to use the symbol ⇪ for the Caps Lock
key, you could simply add {lock}
to your layouts and define it with a codepoint under the display
dictionary as follows:
2) Creating Custom Sub-Layouts
Using the custom_layouts
dictionary, one can add new sub-layouts and switch to them using custom keys. For any sub-layout “X”, adding a key named “showX” initiates the switch to the new sub-layout. Of course, this key can be rendered in any way seen fit by the designer.
For example, one might want to add a key to the default sub-layout that would make it switch to a German QWERTZ keyboard. This German keyboard would, in turn, have a key to show the abbreviation for the current English layout. Our code would look like this:
3. Styling the Keyboard
As the last step in making the On-Screen Keyboard a unique design, Incari Studio enables the user to use CSS files to customize the look and feel. To start, simply create a CSS file in the Asset Manager and drag it to the Style
Attribute of the On-Screen Keyboard Object in the Attribute Editor.
To make styling as easy as possible, Incari Studio uses the same class-naming convention as the widely used open-source project Simple-Keyboard. Some of the fundamental class names are:
.simple-keyboard
: Keyboard container..hg-row
: Keyboard rows..hg-button-container
: Groups the buttons between the brackets..hg-button
: Keyboard buttons..hg-standardBtn
: Non-function buttons (e.g. letters, numbers)..hg-functionBtn
: Function buttons, wrapped in curly braces in layouts..hg-button-X
: The custom class for a button represented as{X}
within the layout file.
For all these classes, standard CSS state selectors are applicable. So, after adding a few simple classes we can create ourselves a good-looking custom keyboard! Here’s a sample style:
4. Adding Logic to Our Keyboard
After having created a styled On-Screen Keyboard with its custom layout
settings, it can now be used to dynamically alter the content on our screen. To demonstrate, one can start with a simple form. First, to make room for the extra content that will be added, resize our Screen in Project Outliner by changing the attribute Size
to x= 1366, y=720
from within the Attribute Editor.
Then, add the file background.png
from the Asset Manager. After that, set the Sort Index
for the On-Screen Keyboard to 1
, and the Position
attribute to x=0, y=-105, z=1
.
In order to get rid of the input field that is no longer needed, update the type input
of the CSS file as follows:
Next, add button.png
from the Assets and set its Position
Attribute to x=495, y=276, z=1
. Finally, to finish up on the front-end, add three Label elements from the Scene Outliner using Label
with the following Attributes:
Size: x=400, y=42, z=1
,Position: x=-430, y=275, z=2
,Size: x=400, y=42, z=1
,Position: x=60, y=275, z=2
,Size: x=500, y=42, z=1
,Position: x=170, y=194, z=2
.
Additionally, for all three of them, Sort Index
should be set to 2
, Font Color
to #FFFFFFFF
, and Font size (px)
to 36
.
Also, in order to register the clicks to their respective text fields, it is necessary to add two touch surfaces. This can be done by grouping Vector elements with each of the previously created Labels and setting their properties as:
Size: x=460, y=60, z=1
,Position: x=-415, y=275, z=3
,Opacity=0.0
,Sort Index=3
Size: x=460, y=60, z=1
,Position: x=75, y=275, z=3
,Opacity=0.0, Sort Index=3
The end result should look like this:
We can now start adding Logic! The Logic for this Project will be composed of three parts:
Initialization
Field Selection
Form Submission
Data Manipulation
Logic Tip |
It is always a good idea to divide Logic into smaller chunks using Groups. To toggle them, simply select a few Nodes and click Ctrl + G
. To quickly understand the function of a Group, you can also assign specific colors to specific functions like initialization, value setters, and so on.
1) Initialization
In Incari Studio, the recommended way for working with async events is to use custom Events as they make for a neater Logic that is easier to debug. Start by setting the trigger for Scene Show
and put the Object ID
values for the Text Objects into a Dictionary Object for easier access later on.
2) Field Selection
In this stage, in order to know which Text Object to edit, there needs to be a way of knowing the field selected. By using a Variable called selected_field
, it is possible to keep track of this. Also, to have a way of knowing the value of the fields at any time, simply create another Dictionary called field_values
.
3) Form Submission
In order to know when the form is submitted, use another custom Event called data_submit
that will eventually trigger the fourth stage of this guide. Triggering this will come from listening to either a mouse click or a press on the Enter
key.
4) Data Manipulation
Finally, to reflect the gathered data on our screens, we are concatenating our two strings and setting the corresponding value to our Text Object called Full-name
. Also, to get the form ready for next use, we are resetting the values of the Name
and Surname
Text Objects.
In Summary |
Using an On-Screen Keyboard Object, you created a custom input method quickly using Incari Studio! As the user's needs change, layouts
can be added or removed while also adapting the Logic to fit each unique situation.
Last updated