Cartoon Digital Clock With Switchable Style

Do you find that the style of your digital clock doesn't suit you, or do you get tired of the original style of the clock after a while?

So this time I make an digital clock that can change the style of dial, using makerfabs upgraded 1.28" screen, this board has screw holes in the four corners, which make it very easy to install. And compared to the 2.1″ screen, it also comes with the same rotary encoder and press screen function, but the price is nearly 50% cheaper!

Supplies

• MaTouch ESP32-S3 RotaryIPS-Display1.28" GC9A01
• Software support: Arduino, SquareLine

Step 1: SquareLine Design

• Create a new product

Choose the Arduino and enter in parameters. According to the features of MaTouch_ESP32-S3 Round SPI TFT with Touch 1.28", the resolution is 240*240, the shape is a circle, and the color depth is 16-bit.

• Design the screen

Add the images to assets, and then it allows you to select them and widget components to design the scenes. After, clicking the widget of the list on the Hierarchy panel, you can modify the parameters of the select widget on the Inspector panel, all is determined by your preference.

• The more you can refer to here:Basic usage of Squareline with MaTouch 1.28" - Makerfabs Wiki

Step 2: Firmware

• Define the resolution of the screen.

static const uint16_t screenWidth = 240;
static const uint16_t screenHeight = 240;

• Then set the drive pin, the TFT_BLK, and touch pins according to the schematic diagram.

#define TFT_BLK 7
#define TFT_RES 11


#define TFT_CS 15
#define TFT_MOSI 13
#define TFT_MISO 12
#define TFT_SCLK 14
#define TFT_DC 21


#define TOUCH_INT 40
#define TOUCH_SDA 38
#define TOUCH_SCL 39
#define TOUCH_RST 16

Arduino_ESP32SPI *bus = new Arduino_ESP32SPI(TFT_DC, TFT_CS, TFT_SCLK, TFT_MOSI, TFT_MISO, HSPI, true); // Constructoror
Arduino_GFX *gfx = new Arduino_GC9A01(bus, TFT_RES, 0 /* rotation */, true /* IPS */);

• Since I did not use the TFT_eSPI library, it is needed to delete or comment all the codes related to the TFT_eSPI library.

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    tft.begin();          /* TFT init */
    tft.setRotation( 3 ); /* Landscape orientation, flipped */

• I need something to help me touch or interact with the screen, modify the touchpad function according to the pre-set functions in touch.h and touch.cpp, and pass the state of the touchpad to the LVGL graphics library.

void my_touchpad_read(lv_indev_drv_t *indev_driver, lv_indev_data_t *data)
{
    int touchX = 0, touchY = 0;


    if (read_touch(&touchX, &touchY) == 1)
    {
        data->state = LV_INDEV_STATE_PR;


        data->point.x = (uint16_t)touchX;
        data->point.y = (uint16_t)touchY;
    }
    else
    {
        data->state = LV_INDEV_STATE_REL;
    }
}

• Connecting wifi and getting NTP.

#define SSID "Makerfabs"
#define PWD "20160704"

// NTP
const char *ntpServer = "120.25.108.11";
int net_flag = 0;
int bg_flag = 0;

void wifi_init()
{
    WiFi.begin(SSID, PWD);


    int connect_count = 0;
    while (WiFi.status() != WL_CONNECTED)
    {
        vTaskDelay(500);
        USBSerial.print(".");
        connect_count++;
    }


    USBSerial.println("Wifi connect");
    configTime((const long)(8 * 3600), 0, ntpServer);


    net_flag = 1;
}

• Adjust the angle of the hour, minute and second hands according to the acquisition time.

void display_time()
{
    struct tm timeinfo;


    if (!getLocalTime(&timeinfo))
    {
        USBSerial.println("Failed to obtain time");
        return;
    }
    else
    {
        int year = timeinfo.tm_year + 1900;
        int month = timeinfo.tm_mon + 1;
        int day = timeinfo.tm_mday;
        int hour = timeinfo.tm_hour;
        int min = timeinfo.tm_min;
        int sec = timeinfo.tm_sec;


        int sec_angle = 3600 * sec / 60;
        int min_angle = 3600 * min / 60 + 60 * sec / 60;
        int hour_angle = 3600 * (hour % 12) / 12 + 300 * min / 60;


        lv_img_set_angle(ui_Image1, hour_angle);
        lv_img_set_angle(ui_Image2, min_angle);
        lv_img_set_angle(ui_Image3, sec_angle);
    }
}

• When the screen is pressed to trigger a change in the index value

#define BUTTON_PIN 6
#define ENCODER_CLK 9 // CLK
#define ENCODER_DT 10 // DT


void Task_button(void *pvParameters)
{
    while (1)
    {
        if (digitalRead(BUTTON_PIN) == 0)
        {
            vTaskDelay(40);
            if (digitalRead(BUTTON_PIN) == 0)
            {
                while (digitalRead(BUTTON_PIN) == 0)
                {
                    vTaskDelay(200);
                }
                bg_flag = 1;
            }
        }
        vTaskDelay(50);
    }
}

long task_runtime_1 = 0;
int bg_index = 0;
void Task_my(void *pvParameters)
{
    while (1)
    {


        if (net_flag == 1)
            if ((millis() - task_runtime_1) > 1000)
            {
                display_time();
                task_runtime_1 = millis();
            }


        if (bg_flag == 1)
        {
            bg_flag = 0;
            set_bg_img(bg_index++);
        }


        vTaskDelay(100);
    }
}

• The value of the index determines the change of dial style

void set_bg_img(int index)
{
    index = index % 4;
    switch (index)
    {
    case 0:
        lv_obj_set_style_bg_img_src(ui_Screen1, &ui_img_bg1_png, LV_PART_MAIN | LV_STATE_DEFAULT);
        break;
    case 1:
        lv_obj_set_style_bg_img_src(ui_Screen1, &ui_img_bg2_png, LV_PART_MAIN | LV_STATE_DEFAULT);
        break;


    case 2:
        lv_obj_set_style_bg_img_src(ui_Screen1, &ui_img_bg3_png, LV_PART_MAIN | LV_STATE_DEFAULT);
        break;


    case 3:
        lv_obj_set_style_bg_img_src(ui_Screen1, &ui_img_bg4_png, LV_PART_MAIN | LV_STATE_DEFAULT);
        break;


    default:
        break;
    }
}

• The raw code.

Step 3: Result

As you can see from the video, when I press the screen, the clock dial will change. I have also made other demo using the 1.28" screen, such as color light controller and ADC interface testing. I hope I can make the most of MaTouch ESP32-S3 RotaryIPS-Display1.28" GC9A01, and give me a bigger surprise.