g. Slider Widget

<< Click to Display Table of Contents >>

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

g. Slider Widget

The Slider widget provides an easy way to add simple sliders which can, for example, be used for controlling volume or screen brightness.  This section shows how to draw the slider widget with various parameters using the eve_slider() command.

 

 

Command Prototype

 

uint16_t eve_slider(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 slider top-left, in pixels

y

y-coordinate of slider top-left, in pixels

w

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

h

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

options

By default the slider is drawn with a 3D effect. OPT_FLAT removes the 3D effect

val

value of slider, 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 sliders with various values */

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

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

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

 

/* Display completed screen frame */

 CleO.Show();

}

 

void loop()

{

}

 

 

Description

 

In the above snippet, the Setup routine uses the eve_slider() command to draw three slider widgets at (x,y) location with w width and h height. By default, the slider is drawn with a 3D effect. Option OPT_FLAT removes the 3D effect. The value parameter displays values of the slider, between 0 and parameter range inclusive.

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

Tutorials18-SliderWidget.50