AN-00003 ViSi-Genie Customised Keyboard

 

Description This Application Note explains how to customise a keyboard. The application is a RFID security gate with two screens. 
From a functional point of view,
• The first screen asks for the RFID card to be presented,
• The second screen displays a keyboard and asks for the PIN code.
Supported Processor PICASO, Diablo16
Supported Environment ViSi-Genie
Difficulty Medium

 

File Downloads
Files

Application Overview

In this application note, the application is a RFID security gate with two screens.

From a functional point of view,

  • The first screen asks for the RFID card to be presented,
  • The second screen displays a keyboard and asks for the PIN code.

The project includes on two forms and four objects:

  • Form0 with one object, a label:

 

 

 

 

 

 

 

 

 

 

 

  • Form1 with three objects:
    • A label
    • A string
    • A customised keyboard.

 

 

 

 

 

 

 

 

 

 

 

The application note focuses on how to customise the keyboard.

 

Setup Procedure

This application note comes with a zip file which contains two ViSi-Genie projects.

 

 

 

For instructions on how to launch Workshop 4, how to open a ViSi-Genie project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note:

ViSi Genie Getting Started – First Project for Picaso Displays (for Picaso)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

 

Create a New Project

Create a New Project

For instructions on how to create a new ViSi-Genie project, please refer to the section “Create a New Project” of the application note

ViSi Genie Getting Started – First Project for Picaso Displays (for Picaso)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

 

The Keyboard Object

You can load the example…

Example:  4D-AN-00003 PICASO or 4D-AN-00003 DIABLO16

…or follow the procedures described hereafter.

 

Add a Keyboard Project

Select first the Home menu…

 

 

 

…then the Inputs pane…

 

 

 

…and finally the Keyboard object:

 

 

Click on the screen to place it:

 

 

 

 

 

 

 

 

Select the Keyboard Type

The object inspector shows all the properties of the keyboard:

To customise the keyboard, we need to change the keyboard type:

 

 

To do so, click on the KeyboardType line:

 

 

 symbol appears. Click on it.

A new window appears: the Keyboard Editor.

 

On top of the window, different keyboard types are proposed:

 

 

ViSi-Genie comes with various defined ready-to-use keyboards:

  • QWERTY keyboard, by default,

 

 

 

 

 

 

 

 

Cell-phone keyboard

 

 

 

 

 

 

 

 

Numeric keyboard

 

 

 

 

 

 

 

 

And a customised keyboard.

 

 

 

 

The Keyboard Object

Before starting to build the customised keyboard, it is a good idea to draw a sketch to have a clear vision of the keys, rows and columns.

Here, the keyboard includes a numerical pad plus two specific keys, one to cancel and the second to validate:

 

 

 

 

 

 

 

To select the customised keyboard, click on

 

 

The Keyboard Editor window is now empty:

 

The grey area displays the keyboard:

 

 

 

 

 

 

 

 

while the keys are displayed just below:

 

 

 

 

 

 

 

 

 

 

 

We are going to use the tools grouped on the right:

 

 

 

 

 

 

 

 

 

Let’s start by adding our first key. Click o

Add a Keyboard Project


 

 

The WYSIWYG keyboard displays now the first  key:

 

 

 

 

 

 

 

 

 

And the list is updated accordingly:


 

 

 

 

 

 

 

 

 

 

The key label is undefined for the moment and shows ?.

Click on that ? and enter 7 instead.

 

 

 

 

 

 

 

 

 

 

The WYSIWYG keyboard now shows:

 

Just continue adding the 8 and 9 keys by pressing…

 

 

 

…and entering the corresponding labels.

 

 

 

 

 

Delete a Key

After the 9 key was added, another key was wrongly added on the same row:

 

This last key has to be deleted:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Select the key to delete, here the in the last row on the list…


 

 

…or from the WYSIWYG keyboard:

 

 

 

Press the button

 

 

 

There is no confirmation and no undo.

The WYSIWYG keyboard and the list are updated:

 

 

 

 

 

 

 

 

 

 

 

Add the Row

It’s time now to add a new row.

Click on

 

 

 

The keyboard is updated with a second row and a new key on the left:

 

 

 

 

 

 

 

All the coordinates are managed automatically on the columns X and Y. X=1 and Y=41 as shown below:

 

 

 

 

 

 

 

 

 

 

Just complete the 2nd row and continue with the 3rd one. For the Cancel and Validate keys, enter the labels Cancel and Validate.

Here’s the final result:

 

 

 

 

 

Change the Size of a Key

The initial keyboard looks like

 

 

 

 

 

 

 

 

The Validate key is too small and should be bigger.

Select the Validate key in the list:

 

Change the width from 40 to 80 and press Enter.

 

The key is resized:

 

To return to the initial size, just enter again 40 as width.

 

 

 

 

 

 

Resize the Keyboard

The keys don’t use all the keyboard area, so we are going to resize it.

The size of the keyboard is provided by

 

 

 

 

 

 

Enter the new dimensions:

 

 

 

 

 

 

The keyboard looks nicer now:

 

 

 

 

 

 

Colour of All Keys

The keys have 4 colours:

  • Colour of the key
  • Colour of the key, when pressed
  • Colour of the text on the key
  • Colour of the text on the key, when pressed.

To change the colour of all keys, make sure the check-box Change Matching Column Colours is ticked

 

 

 

Now, click on the SILVER colour of any key:

 

 

 

 

 

 

 

A new window Colour Picker appears and shows all the colours available:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Colours are grouped under Windows, Theme and 4DGL. Manual values can be set for Hue-Saturation-Luminance or Red-Green-Blue components. Select Office 2003 (Blue) then click OK.

The WYSIWYG keyboard is updated accordingly:


 

 

 

 

 

 

 

 

 

 

Do the same for the Colour Down and select Office 2003 (Silver). The key list displays the new colours:

 

Colour of All Keys Change the Colour of One Key

The Cancel and Validate keys have specific colours.

To change the colour of all keys, make sure the check-box Change Matching Column Colours is unticked

 

 

 

Now, click on the Office 2003 (Blue) colour of the Cancel key. Select Yellow on the colour picker and confirm by OK:

 

Repeat with Colour Down for the Cancel key and select ORANGE.

Do the same for the Validate key and select GREEN as Colour and GREENYELLOW as Colour Down.

Final result is:

 

 

 

 

 

 

 

 

 

 

And the detail is:

 

Move the Column and Rows of the Keyboard

To add a column on the left side of 7 4 1 Cancel, define a new size for the keyboard:



 

 

 

 

 

The WYSIWYG keyboard shows

 

 

 

 

 

 

 

 

 

 

Press the key


 

 

All the keys are moved one column right:

Save the Keyboard

It’s time now to save the keyboard.

To do so, click on

 

 

 

The Keyboard Editor window closes and the form shows the keyboard:

 

 

 

 

 

 

 

 

 

 

 

Define the Font and Size of the Keyboard

The keyboard looks nice but it is hard to read, because the font size is too small.

Note the font is not defined during the building of the keyboard. The same keyboard can be used on different screens, and thus be adapted to match each screen. The font is a property like the size of the keyboard.

We are going to change the size of the font.

Select the keyboard by clicking on it. The keyboard is within a green dotted rectangle:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

But the Cancel and Validate keys are still with small font. Their font is called SmallFont.

On the Object Inspector, look for the entry

 

 

 

Click on the + to display the details:

 

 

 

 

 

 

 

 

Replace 8 by 16 and press Enter.

 

 

 

The keyboard is updated:

 

 

 

 

 

 

 

 

 

 

 

But the Cancel and Validate keys are still with small font. Their font is called SmallFont.

On the Object Inspector, look for the entry

 

 

 

Click on the + to display the details:

 

 

 

 

 

 

 

 

Replace 7 by 14 and press Enter.

 

 

 

This is the final screen, which is much better:

 

 

 

 

 

 

 

 

 

 

 

Load a Keyboard

The keyboards previously defined are saved and can be loaded again for re-use.

To load a keyboard, first open the Keyboard Editor.

To open the Keyboard Editor:

  • On the Object Inspector, select the keyboard and click on the Keyboard Type line

 

 

 

The line changes for


 

 

  • Click on the   symbol.

 

The Keyboard Editor shows up:

 

On the Keyboard Editor window, click on

 

 

 

A Windows Open window shows the keyboards available:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Select the desired keyboard, for example KB1.KBD, and click on Open.

Back to the Keyboard object Properties, the KeyboardType shows:

 

 

New Building and Upload the Project

For instructions on how to build and upload a ViSi-Genie project to the target display, please refer to the section “Build and Upload the Project” of the application note

 

ViSi Genie Getting Started – First Project for Picaso Displays (for Picaso)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

 

The uLCD-32PTU and/or the uLCD-35DT display modules are commonly used as examples, but the procedure is the same for other displays.

 

Debug the Project

It's time now to eject the micro-SD card from the PC and plug it in the micro-SD card slot of the screen.

Once this is done, the screen displays the form:

 

 

 

 

 

 

 

 

 

Launch the Debugger

To launch the Genie Test Executor or GTX, select the Tools menu…

 

…and then click on the GTX button.


 

 

A new screen appears, with the form and objects we have defined previously:

 

 

Click on Form1 to display the screen with the keyboard:

 

 

 

 

 

 

The screen displays the keyboard:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Press on the screen…


 

 

 

 

 

 

…and

 

 

 

 

The debugger shows now:

 

The white area on the right displays the messages sent by the screen:

 

 

 

 

 

 

 

 

All codes are in hexadecimal. 0x31 stands for 1, …, 0x34 for 4.

 

Note that the key   has sent the message 0x76 or v.

 

The code entered on the screen is displayed below the Keyboards section:

 

 

 

 

 

 

Note that the key   has sent the message v.

 

On a similar way, let’s enter a wrong code and press…

 

 

 

 

 

 

 

 

…and finally

 

 

 

 

The message window displays:

Share: