f. ScrollBar Widget

<< Click to Display Table of Contents >>

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

f. ScrollBar Widget

The Scrollbar widgets are used when the screen content cannot all fit on the available display area, and so the user will need to scroll around the screen. Scrollbars can be drawn in a horizontal or vertical format. This section shows how to draw the scrollbar widget with various parameters using the eve_scrollbar() command.

 

 

Command Prototype:

 

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

 

Parameters

Description

x

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

y

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

w

Width of scroll bar, in pixels. If width is greater than height, the scroll bar is drawn horizontally

h

Height of scroll bar, in pixels. If height is greater than width, the scroll bar is drawn vertically

options

By default the scroll 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 scrollbar is the position of the start end of the indication line

size

The width of the indication line (i.e. the blue bar)

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;

 uint16_t size = 32768;

 

/* Draw scrollbar with various values */

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

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

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

 

/* Display completed screen frame */

 CleO.Show();

}

 

void loop()

{

}

 

 

Description

 

In the above code snippet, the Setup routine uses the eve_scrollbar() command is used to draw 3 scroll bars widget at (x,y) location with w width and h height. By default, the scroll 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 scroll bar between 0 and parameter range inclusive.

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

Tutorials18-ScrollBarWidget.50