Widget - Analog Clock

Analog Clock

• TouchGFX introduced in version 4.12.3.

Introduction

The Analog Clockwidget is a widget which display a classical analog meter, instead of a digital clock , which displays the time and text. Background image using the clock as a clock face. Hour, minute and second hand are using the image, and rotate around the center configurable.

This article describes how to insert and to change the analog clock widget. It gives instructions on how to integrate real-time clock.

Analog Clock Located TouchGFX Designer of other categories

Important properties 

position	Settings x, y and   visibleperformance Analog Clock.
appear	Provided for the background image rotation centeris Analog Clock.
time	Set   initial time & whether   am/pm in use   Analog Clock.
Clock hands	Add, edit or delete clock hands.  To set the clock for each individual needle rotation position image and the image of the needle of a clock. Hour and minute hands can also generate swept the animation action.
Animation	Hour animated movement should be used. Note: If the clock is enabled sweep movement, then the clock will not use animation.

usage

position

The size Analog Clockdepends on the size set in the "appearance" attribute set in the background of the picture. To set the position coordinate attributes setx  and   ydetermining to place at the top left Analog Clockposition.

Property location

appear

Set the background image in the image section of the appearance of the selector / clock face, the size of the selected image size is also provided entire widget.

Clock rotation center set point pointer image rotation.

Appearance characteristics

time

"Time" attribute allows the user to set the clock widget set initial time and whether the Am / Pm standards.

Select Am / Pm will lead to a slight change in code generation. Instead of using the following functionAnalog Clock to initialize the time:

initializeTime24Hour (uint8_t hours, uint8_t minutes, uint8_t seconds)

24-hour time of initialization method

This function is a 12-hour notation:

initializeTime12Hour (uint8_t hours, uint8_t minutes, seconds uint8_t, Boolean)

Method 12 hours time of initialization

To update the clock display the time, you can use one of the following functions.

setTime24Hour (uint8_t hours, uint8_t minutes, uint8_t seconds)

Use 24-hour time to set a new

setTime12Hour (uint8_t hours, uint8_t minutes, uint8_t seconds, Boolean am)

12 hours to set a new time notation

Time property

Clock hands

In the "clock hands" attribute set, the user may define a pointer to be used and their order. First define the pointer will appear above other pointers in the picture above, which means that the clock display 00:00:00, the clock will be displayed at the top of the minute and second hands.

Clock hands

Hour, minute and second hands

Each hand needs an image and a rotated position. Determining the rotational position of the hand shape images to be defined around a point of rotation itself.

Clock hand property

Hour and minute hands can use the "sweep" function, this option is enabled, the pointer will no longer work, and instantly jump from one position to another position.

Sweep disabled

Enabling a sweeping motion

Animation

Animation allows the user to define more advanced portion of the movement of the pointer, however, if the hour and minute hands enabled "sweep", they will not be animated.

Animation properties

In the following example, the duration of the animation is set to "30", easing set to "bounce", easing option is set to "outside":

Clock Animation Example