e. Progress Bar Widget

<< Click to Display Table of Contents >>

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

e. Progress Bar Widget

The Progress Bar widget displays the status of a determinate or general process. The Progress bar shows the current percentage completion for a process. This section illustrates how to draw progress bar widget with various parameters using the eve_progress() command.

 

 

Command Prototype

 

uint16_t eve_progress(int x, int y, int16_t w, int16_t h, int16_t options, int16_t val, int16_t range)

 

Parameters

Description

x

x-coordinate of progress bar top-left, in pixels

y

y-coordinate of progress bar top-left, in pixels

w

Width of progress bar, in pixels.

h

Height of progress bar, in pixels.

options

By default the progress bar is drawn with a 3D effect and the value of options is zero. Options OPT_FLAT removes the 3D effect and its value is 256

val

value of progress bar, between 0 and range inclusive

range

Maximum value

 

 

Code

 

 

void setup()

{

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

 CleO.begin();

 

/* Start building a screen frame */

 CleO.Start();

 int x = 400, y = 240, w = 400, h = 20;

 uint16_t options = 0;

 uint16_t value1 = 24000;

 uint16_t value2 = 12000;

 uint16_t value3 = 48000;

 uint16_t range = 65535;

 

/* Draw progress bar with various values */

 CleO.eve_progress(x - (w/2), y - 150, w, h, options, value1, range);

 CleO.eve_progress(x - (w/2), y, w, h, options, value2, range);

 CleO.eve_progress(x - (w/2), y + 150, w, h, options, value3, range);

 

/* Display completed screen frame */

 CleO.Show();

}

 

void loop()

{

}

 

 

Description

 

In the above code snippet, the Setup routine uses the eve_progress() command to draw three progress bars widget at (x,y) location with w width and h height. By default, the progress bar is drawn with a 3D effect, and the value of options is set as zero. The option OPT_FLAT removes the 3D effect, and its value is 256. The value parameter displays values of progress bar between 0 and last parameter range inclusive.

 

 

Output

 

Here is the output displayed upon executing the sample code snippet -

 

Tutorials18-ProgressBarWidget.50