d. Keys Widget

<< Click to Display Table of Contents >>

Navigation:  Tutorials > Tutorial 18 - Built-In FT81x Widgets >

d. Keys Widget

The Keys widget displays an interactive virtual on-screen QWERTY keyboard. This section shows how to draw keys widget with various parameters using the eve_keys() command.

 

 

Command Prototype

 

uint16_t eve_keys(int x, int y, int16_t w, int16_t h, int16_t font, int16_t options, const char* String)

 

Parameters

Description

x

x-coordinate of keys top-left, in pixels

y

y-coordinate of keys top-left, in pixels

w

Width of the keys.  

h

Height of the keys

font

Bitmap handle to specify the font used in key label. The valid range is from 0 to 31

options

By default the keys are drawn with a 3D effect and the value of option is zero. OPT_FLAT removes the 3D effect. If OPT_CENTER is given the keys are drawn at minimum size centered within the w x h rectangle. Otherwise the keys are expanded so that they completely fill the available space. If an ASCII code is specified, that key is drawn 'pressed' - i.e. in background color with any 3D effect removed.

String

key labels, one character per key. The TAG value is set to the ASCII value of each key, so that key presses can be detected using the REG_TOUCH_TAG register.

 

 

Code

 

 

void setup()

{

/* Initialize CleO - needs to be done only once */

 CleO.begin();

 

/* Start building a screen frame */

 CleO.Start();

 int x = 0, w = 320, h = 30;

 uint16_t options = 0;

 uint8_t key = 0;

 

/* Draw keys */

 int y = 268;

 const char *rows[4] = { "0123456789", "QWERTYUIOP", "ASDFGHJKL", "ZXCVBNM,."};

 for (int i = 0; i < 4; i++)

 {

   CleO.eve_keys(x, y, w, h, FONT_MEDIUM, options | OPT_CENTER | key, rows[i]);

   y += 34;

 }

 

/* Display completed screen frame */

 CleO.Show();

}

 

void loop()

{

}

 

 

Description

 

The above code snippet draws three rows and each with a set of keys. In the above code snippet, the Setup routine uses the eve_keys() command to draw a set of keys in the for loop. The key will be drawn at (x,y) location with w width and h height. By default, the keys are drawn with a 3D effect, and the value of the option is zero. OPT_FLAT removes the 3D effect. The OPT_CENTER parameter specifies that the keys are drawn at minimum size centered within the w x h rectangle. If OPT_CENTER parameter is not specified, then the keys are expanded so that they completely fill up the available space. The last parameter refers to the key label which is one character per key.

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

KeysWidget