a. Button Widget

<< Click to Display Table of Contents >>

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

a. Button Widget

The Button widget is used to implement various types of buttons that can contain text or images which are associated with CleO commands and perform certain actions when pressed. This section shows how to draw button widget with various parameters using the eve_button() command.

 

 

Command Prototype

 

uint16_t eve_button(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 button top-left, in pixels

y

y-coordinate of button top-left, in pixels

w

width of button, in pixels

h

Height of the button

font

bitmap handle to specify the font used in the button label

options

By default, the button is drawn with a 3D effect and the value is zero. OPT_FLAT removes the 3D effect. The value of OPT_FLAT is 256.

String

button label. It must be one string terminated with null character, i.e. '\0' in C language.

 

 

Code

 

 

void setup()

{

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

 CleO.begin();

 

/* Start building a screen frame */

 CleO.Start();

 

 uint16_t w = 120, h = 100;

 int x = 400 - (w/2), y1 = 240 - (2*h), y2 = 240 + h;

 uint16_t options = 0;

 

/* Draw buttons */

 CleO.eve_button(x, y1, w, h, FONT_HUGE, OPT_FLAT, "2D");

 CleO.eve_button(x, y2, w, h, FONT_HUGE, options, "3D");

 

/* Display completed screen frame */

 CleO.Show();

}

 

void loop()

{

}

 

 

Description

 

In the above code snippet, the Setup routine uses the eve_button() command to draw button widget. It uses 40 as width and 30 as height. FONT_HUGE is selected for the font with 0 options. By default, the button is drawn with a 3D effect, and the value is set to zero. OPT_FLAT removes the 3D effect. The value of OPT_FLAT is 256. The last parameter is button label. It must be one string terminated with a null character, i.e. '\0' in C language.

 

The following example shows how to use OPT_FLAT as option:

 

cmd_button(10, 10, 140, 100, 31, OPT_FLAT, "Press!");

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

Tutorials18-ButtonWidget.50