Facebook Pixel

AN-00154 ViSi–Genie Magic Keyboard Edit

Description This application note primarily shows how to create a simple keyboard editor using magic Keyboard + ColorPicker Event Magic Object and other magic objects.
Supported Processor PICASO, DIABLO16
Supported Environment ViSi-Genie
Difficulty Medium

 

File Downloads
Files

Description

This application note primarily shows how to create a simple keyboard editor using magic Keyboard + ColorPicker Event Magic Object and other magic objects.

 

Note 1:The ViSi-Genie project for this application note is the demo “KeyboardEdit”, which is found in Workshop. Go to the File menu -> Samples ->ViSi Genie Magic (Picaso/Diablo16) ->KeyboardEdit.4DGenie.

 

Note 2:Workshop Pro is needed for this application.

 

Before getting started, the following are required:

and other superseded modules which support the ViSi Genie environment

Visit www.4dsystems.com.au/products to see the latest display module products that use the Diablo16 processor.

When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics presented in these recommended application notes.

 

Application Overview

In the past it was not possible to create an application in ViSi-Genie that could print(in a string object) the characters pressed on a keyboard object. This was possible only if a host like an Arduino board receives the keyboard's value and then prints it to a string object. The Keyboard + ColorPicker Event Magic Object was used to make this possible. The application shown in this document will prompt the user to input a password. If the password is correct it will proceed to a different form else if the input password is incorrect then it will print 'Fail' on the display.

 

Setup Procedure

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).

 

Design the Project

A uLCD-32PTU (portrait orientation) will be used for this application note.

Add a Static Text to Form 0

The static text object under the Labels pane can be used to create labels.

 

 

 

Click on the WYSIWYG screen to place the static text object and edit the properties according to the image shown above.

To know more about Static Texts, their properties, and how they are added to a projects, refer to the application note ViSi-Genie Labels, Texts, and Strings.

 

Add a Keyboard to Form 0

The keyboard object under the Inputs pane can be used for different applications that needs QWERTY, NUMERIC, CELLPHONE or CUSTOM input.

 

 

 

 

The OnChanged event of the keyboard object is set to MagicKbClrEvent0 so that the pressed keys from the keyboard will be received by the MagicKbClrEvent0.

To know more about customizing a Keyboard Object, refer to the application note ViSi-Genie Customised Keyboard.

 

Create a new Form

In System/Media pane, click the Form object icon shown below.

 

Add a Static Text to Form 1

 

Click on the WYSIWYG screen to place the static text object and edit the properties according to the image shown above.

 

Add a Fancy Button to Form 1

In Buttons pane, click the Fancy Button icon shown below.

 

The OnChanged event of Winbutton0 is set to 'Form0Activate' to be able to return to Fom0 if the button is pressed.

To know more about Fancy buttons, refer to the application note:

 ViSi-Genie Customised Keyboard.

 

Add Magic Code

To know more about adding Magic Objects, refer to the application note ViSi-Genie How to Add Magic Objects.

MagicCode1

 

The image shown is the 4DGL code inside of the Magic Code object. MagicCode1 is the declaration of variables, constant and resetchars() function.

The 'maxresp' constant is the maximum number of input for the password. The 'lft' constant is the start position for echo of *s. And the resetchars function is a timer routine used to blank 'Failed' from the screen.

 

MagicCode2

 

The image above shows the content of MagicCode2. This magic code's insert point is set to 'PostActivateForm'. This checks if current form is Form0 and then set keyboard response to start.

 

Add a Keyboard + ColorPicker Event Magic

To know more about adding Keyboard + ColorPicker Event Magic, refer to the application note ViSi-Genie How to Add Magic Objects.

 

MagicKbClrEvent0

This magic object receives the value inputted on the keyboard object. The value is stored in 'var value'. If there are multiple keyboard objects in a project, then their 'OnChanged' event should be set to the 'Keyboard + ColorPicker Event Magic' that will handle the input value.

 

The image shown above is a part of the content of MagicKbClrEvent0. This part of the program checks if the input value from Keyboard0 is 'Back'. The character 'Back' of keyboard has a decimal value '8'. This simply checks if a character is already printed and then replaces it with space ' ' after moving the text cursor to the character that will be deleted.

 

Next, the image shown above is the part of MagicKbClrEvent0.inc that will execute if 'Enter' is pressed on the keyboard. This simply uses str_Match to compare the content of the array 'Response' to "1234". If it does match then it will proceed in activating FORM1. Else if the content of 'Response' array does not match "1234" then it will print "Fail" then perform the resetchars() timer routine.

 

Lastly the image shown above is part of MagicKbClrEvent0.inc that will execute if numbers 0-9 is pressed on the keyboard object. This increases the column of the cursor and then prints asterisk '*'. if you want to print the value then uncomment "putch(value)" then comment out "putch('*')".

To know about 4DGL programming please refer to 4DGL Programmer's Reference Manual and GOLDELOX, PICASO, DIABLO Internal Functions Manual.

 

Build 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.

Share: