b. Clock Widget

<< Click to Display Table of Contents >>

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

b. Clock Widget

The Clock widget is used to display the current time of the selected time zone. This section shows how to draw clock widget with various parameters using the eve_clock() command.

 

 

Command Prototype

 

uint16_t eve_clock(int x, int y, int16_t r, int16_t options, int16_t h, int16_t m, int16_t s, int16_t ms)

 

Parameters

Description

x

x-coordinate of clock center, in pixels

y

y-coordinate of clock center, in pixels

r

Radius of the clock, in pixels

options

By default the clock dial is drawn with a 3D effect and the name of this option is OPT_3D. Option OPT_FLAT removes the 3D effect. With option OPT_NOBACK, the background is not drawn. With option OPT_NOTICKS, the twelve hour ticks are not drawn. With option OPT_NOSECS, the seconds hand is not drawn. With option OPT_NOHANDS, no hands are drawn. With option OPT_NOHM, no hour and minutes hands are drawn.

h

hours

m

minutes

s

seconds

ms

milliseconds

 

 

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;

 uint16_t r = 70, h = 8, m = 15, s = 0, ms = 0;

 uint16_t options = 0;

 

/* Draw clock with various values */

 CleO.eve_clock(x, y - 150, r, options | OPT_NOSECS, h, m, s, ms);

 CleO.eve_clock(x, y, r, OPT_NOTICKS, 2, 30, 0, ms);

 CleO.eve_clock(x, y + 150, r, OPT_NOBACK, 0, 0, (7 * 3600) + (38 * 60) + 59, 0);

 

/* Display completed screen frame */

 CleO.Show();

}

 

void loop()

{

}

 

 

Description

 

The above code snippet uses the eve_clock() command to draw three clock widgets. Clock widgets are drawn at (x,y) with radius r. OPT_NOSECS option instructs the widget not to draw any second hand. The last four parameters select hours, minutes, seconds and milliseconds. The first clock is drawn with the value 8:15 with no second hand, the second clock is drawn with the value 2:30 without any ticks, the 3rd clock is drawn with the value 7:40 without any background.

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

Tutorials18-ClockWidget.50