How to develop a simple clock?

Introduction to the TWatch builder portal
Post Reply
mchavez
Site Admin
Posts: 84
Joined: Tue Nov 10, 2020 12:12 am

How to develop a simple clock?

Post by mchavez »

If you want to build your own watchface, TWatch builder offers you a class named "StandardClockSimple" that allows you to build it using simple PNG images.

Images
First, you need to upload all the required images in the "Assets" section of the apps.
  • The first image must be a 240x240 pixels PNG image for the background of the clockface
  • The next images must be the images for the hours' hand, minutes' hand and (optionally) the seconds' hand
  • Also you could use another images as sprites, for example to show the battery or some time indicators
ImageImageImageImage

Then, you can write the code to use these images.

Code
The code begins including the class:

Code: Select all

#include "StandardClock.h"
Then you must reference the images related to the clock.

Example:

Code: Select all

LV_IMG_DECLARE(fossil_face);
LV_IMG_DECLARE(fossil_hour);
LV_IMG_DECLARE(fossil_minute);
LV_IMG_DECLARE(fossil_second);
The next step is to declare the clock itself

Code: Select all

StandardClockSimple __fossil;
Then you need to implement the apps' three main methods: __show, __hide, __loop

The _start method must invoke the StandardClockSimple method "init" with the following parameters:
  • The LVGL background color (could be transparent)
  • The background watchface image pointer
  • The total number of images
In the next example the color is transparent (LV_COLOR_TRANSP), the image is "&fossil_face" and indicates that the clock uses 5 images.

Code: Select all

__fossil.init(LV_COLOR_TRANSP, &fossil_face, 5);
Then you must add the images itself using the method "add_clock_hand". Take note that some images may have a "shadow" that must also be declared. The parameters of this method are:
  • The time resolution
    • TIME_RES_SECOND_UNIT
    • TIME_RES_SECOND_TEN
    • TIME_RES_SECOND
    • TIME_RES_MINUTE
    • TIME_RES_HOUR
    • TIME_RES_DAY
    • TIME_RES_DAY_UNIT
    • TIME_RES_DAY_TEN
    • TIME_RES_MONTH
    • TIME_RES_BATTERY
  • The image pointer
  • The image displacement related to the clocks' center
  • The rotation pivot related to the image itself
  • The shadow flag, if active the clock shows a shadow, if inactive the clock shows the image
In the following example, we are adding a second hand with TIME_RES_SECOND time resolution, with offset of x = -60, y = 2, the pivot at x = 30, y = 30 and not shadow:

Code: Select all

__fossil.add_clock_hand(TIME_RES_SECOND, &fossil_second, {-60, 2}, {30, 30}, false);
When we completed all the images then must call the method "show"

The code for the "__show" method is:

Code: Select all

void __show() {
  __fossil.init(LV_COLOR_TRANSP, &fossil_face, 5);
  __fossil.add_clock_hand(TIME_RES_SECOND, &fossil_second, {-60, 2}, {30, 30}, false);
  __fossil.add_clock_hand(TIME_RES_HOUR, &fossil_hour, {-3, 0}, {15, 119}, true);
  __fossil.add_clock_hand(TIME_RES_MINUTE, &fossil_minute, {-3, 0}, {15, 119}, true);
  __fossil.add_clock_hand(TIME_RES_HOUR, &fossil_hour, {-2, 5}, {15, 119}, false);
  __fossil.add_clock_hand(TIME_RES_MINUTE, &fossil_minute, {-2, 5}, {15, 120}, false);
  __fossil.show();
}
When the clock is closed the app must call the method "__hide" to free up resources

Code: Select all

void __hide() {
  __fossil.hide();
}
Finally, the complete code is:

Code: Select all

#include "StandardClock.h"

LV_IMG_DECLARE(fossil_face);
LV_IMG_DECLARE(fossil_hour);
LV_IMG_DECLARE(fossil_minute);
LV_IMG_DECLARE(fossil_second);

StandardClockSimple __fossil;

void __show() {
  __fossil.init(LV_COLOR_TRANSP, &fossil_face, 5);
  __fossil.add_clock_hand(TIME_RES_SECOND, &fossil_second, {-60, 2}, {30, 30}, false);
  __fossil.add_clock_hand(TIME_RES_HOUR, &fossil_hour, {-3, 0}, {15, 119}, true);
  __fossil.add_clock_hand(TIME_RES_MINUTE, &fossil_minute, {-3, 0}, {15, 119}, true);
  __fossil.add_clock_hand(TIME_RES_HOUR, &fossil_hour, {-2, 5}, {15, 119}, false);
  __fossil.add_clock_hand(TIME_RES_MINUTE, &fossil_minute, {-2, 5}, {15, 120}, false);
  __fossil.show();
}

void __hide() {
  __fossil.hide();
}

void __loop () {
}
Post Reply