基于littlevgl设计的手表模拟时钟表盘（附代码）

硬件平台：STM32F413-DISCOVERY
操作系统：FreeRTOS
UI方案：littlevgl 5.2

模拟时钟表盘展示：

基于LittlevGL设计的手表模拟时钟表盘

Applist效果展示（屏幕破裂，效果不太好，不好意思）

基于LittlevGL设计的手表applist效果展示

表盘绘制：

// ##
typedef struct
{
    // #
    lv_obj_t *hour_body;
    lv_obj_t *minute_body;
    lv_obj_t *second_body;

    // ##
    lv_point_t hour_point[2];
    lv_point_t minute_point[2];
    lv_point_t second_point[2];

    // ##
    lv_style_t hour_line_style;
    lv_style_t minute_line_style;
    lv_style_t second_line_style;
}clock_body_t;

// ##
static clock_body_t *clock_body = NULL;

// ##
static lv_obj_t *clock_label = NULL;

// ##
void time_get_time(RTC_TimeTypeDef *pTime);
void time_get_date(RTC_DateTypeDef *pDate);

// ##
static void app_activity_event_handle(activity_event_t *event);

// ##
static int16_t coordinate_x_relocate(int16_t x)
{
    return ((x) + LV_HOR_RES / 2);
}

// ##
static int16_t coordinate_y_relocate(int16_t y)
{
    return (((y) - LV_HOR_RES / 2) < 0) ? (0 - ((y) - LV_HOR_RES / 2)) : ((y) - LV_HOR_RES / 2);
}

// ##
static void clock_create(lv_obj_t *parent, clock_body_t *body, RTC_TimeTypeDef *time)
{
    // ##
    body->hour_body   = lv_line_create(parent, NULL);
    body->minute_body = lv_line_create(parent, NULL);
    body->second_body = lv_line_create(parent, NULL);

    // ##
    lv_style_copy(&body->hour_line_style, &lv_style_pretty);
    body->hour_line_style.line.color = LV_COLOR_RED;
    body->hour_line_style.line.width = 3;
    lv_line_set_style(body->hour_body, &body->hour_line_style);

    lv_style_copy(&body->minute_line_style, &lv_style_pretty);
    body->minute_line_style.line.color = LV_COLOR_RED;
    body->minute_line_style.line.width = 2;
    lv_line_set_style(body->minute_body, &body->minute_line_style);

    lv_style_copy(&body->second_line_style, &lv_style_pretty);
    body->second_line_style.line.color = LV_COLOR_WHITE;
    body->second_line_style.line.width = 1;
    lv_line_set_style(body->second_body, &body->second_line_style);

    // ##
    body->hour_point[0].x   = coordinate_x_relocate(0);
    body->hour_point[0].y   = coordinate_y_relocate(0);
    body->hour_point[1].x   = coordinate_x_relocate(HOUR_LENGTH * sin((time->Hours > 12 ? time->Hours - 12 : time->Hours) * 30 * PI / 180));
    body->hour_point[1].y   = coordinate_y_relocate(HOUR_LENGTH * cos((time->Hours > 12 ? time->Hours - 12 : time->Hours) * 30 * PI / 180));

    body->minute_point[0].x = coordinate_x_relocate(0);
    body->minute_point[0].y = coordinate_y_relocate(0);
    body->minute_point[1].x = coordinate_x_relocate(MINUTE_LENGTH * sin(time->Minutes * 6 * PI / 180));
    body->minute_point[1].y = coordinate_y_relocate(MINUTE_LENGTH * cos(time->Minutes * 6 * PI / 180));

    body->second_point[0].x = coordinate_x_relocate(20 * sin((180 + time->Seconds * 6) * PI / 180));
    body->second_point[0].y = coordinate_y_relocate(20 * cos((180 + time->Seconds * 6) * PI / 180));
    body->second_point[1].x = coordinate_x_relocate(SECOND_LENGTH * sin(time->Seconds * 6 * PI / 180));
    body->second_point[1].y = coordinate_y_relocate(SECOND_LENGTH * cos(time->Seconds * 6 * PI / 180));

    // ##
    lv_line_set_points(body->hour_body,   body->hour_point,   2);
    lv_line_set_points(body->minute_body, body->minute_point, 2);
    lv_line_set_points(body->second_body, body->second_point, 2);
}

表盘更新：

// ##
static void app_activity_event_handle(activity_event_t *event)
{
    if(event->msg_id == MSG_RTC_ALARM)
    {
        char buf1[50];
        char buf2[50];
        RTC_DateTypeDef date;
        RTC_TimeTypeDef time;

        time_get_date(&date);
        time_get_time(&time);

        sprintf(buf1, "%s %02d %s %d\r\n", month_list[date.Month], date.Date,
                                            week_list[date.WeekDay - 1], 2000 + date.Year);
        sprintf(buf2, "%02d:%02d:%02d", time.Hours, time.Minutes, time.Seconds);

        lv_obj_set_pos(content_date_label, (LV_HOR_RES - strlen(buf1) * 8) / 2, 100);
        lv_obj_set_pos(content_time_label, (LV_HOR_RES - strlen(buf2) * 8) / 2, 130);

        lv_label_set_text(content_date_label, buf1);
        lv_label_set_text(content_time_label, buf2);
    }
    else
    {
        LOG(TAG, "unknown msg : %d\r\n", event->msg_id);
    }
}

(更新)
基于lvgl-7.2设计的模拟时钟表盘，效果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021032818343465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N0YXJFbWJlZGRlZA==,size_16,color_FFFFFF,t_70)