系列文章目录
文章目录
- 系列文章目录
- 前言
- 一、实现效果
- 二、代码解析
前言
在这个博客中,我们将深入探讨LVGL(Light and Versatile Graphics Library)版本8.3的实时时钟应用,以模仿华为 Watch UI 为例。LVGL是一款专为嵌入式系统和小型设备设计的开源图形库,具有轻量级、跨平台、硬件无关性和高度可定制性等优势。通过学习实时时钟的设计,我们将了解LVGL在构建现代化用户界面方面的强大功能。
完整代码、表盘图片资源,私聊发
一、实现效果
二、代码解析
首先要获取时间,可以参考我的博文https://blog.csdn.net/xddwg521125/article/details/134866894?spm=1001.2014.3001.5501 STM32CubeIDE(CUBE-MX hal库)----RTC时钟,时钟实时显示
设置初始化时间
void MX_RTC_Init(void)
{
/* USER CODE BEGIN RTC_Init 0 */
/* USER CODE END RTC_Init 0 */
RTC_TimeTypeDef sTime = {0};
RTC_DateTypeDef sDate = {0};
/* USER CODE BEGIN RTC_Init 1 */
/* USER CODE END RTC_Init 1 */
/** Initialize RTC Only
*/
hrtc.Instance = RTC;
hrtc.Init.HourFormat = RTC_HOURFORMAT_24;
hrtc.Init.AsynchPrediv = 127;
hrtc.Init.SynchPrediv = 255;
hrtc.Init.OutPut = RTC_OUTPUT_DISABLE;
hrtc.Init.OutPutPolarity = RTC_OUTPUT_POLARITY_HIGH;
hrtc.Init.OutPutType = RTC_OUTPUT_TYPE_OPENDRAIN;
if (HAL_RTC_Init(&hrtc) != HAL_OK)
{
Error_Handler();
}
/* USER CODE BEGIN Check_RTC_BKUP */
/* USER CODE END Check_RTC_BKUP */
/** Initialize RTC and set the Time and Date
*/
sTime.Hours = 0x22;
sTime.Minutes = 0x48;
sTime.Seconds = 0x47;
sTime.DayLightSaving = RTC_DAYLIGHTSAVING_NONE;
sTime.StoreOperation = RTC_STOREOPERATION_RESET;
if (HAL_RTC_SetTime(&hrtc, &sTime, RTC_FORMAT_BCD) != HAL_OK)
{
Error_Handler();
}
sDate.WeekDay = RTC_WEEKDAY_MONDAY;
sDate.Month = RTC_MONTH_DECEMBER;
sDate.Date = 0x9;
sDate.Year = 0x23;
if (HAL_RTC_SetDate(&hrtc, &sDate, RTC_FORMAT_BCD) != HAL_OK)
{
Error_Handler();
}
/** Enable the TimeStamp
*/
if (HAL_RTCEx_SetTimeStamp(&hrtc, RTC_TIMESTAMPEDGE_RISING, RTC_TIMESTAMPPIN_POS1) != HAL_OK)
{
Error_Handler();
}
/* USER CODE BEGIN RTC_Init 2 */
/* USER CODE END RTC_Init 2 */
}
UI页面代码
static void send_event(void){
lv_event_send(ui_Screen1,LV_EVENT_REFRESH,NULL);
}
void ui_SeaTime_screen_init(void)
{
ui_Screen1 = lv_obj_create(NULL);
lv_obj_clear_flag( ui_Screen1, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
ui_Image2 = lv_img_create(ui_Screen1);
lv_img_set_src(ui_Image2, &ui_img_new_sun_png);
lv_obj_set_width( ui_Image2, LV_SIZE_CONTENT); /// 240
lv_obj_set_height( ui_Image2, LV_SIZE_CONTENT); /// 240
lv_obj_set_align( ui_Image2, LV_ALIGN_CENTER );
lv_obj_set_align( ui_Image2, LV_ALIGN_CENTER );//居中控件
lv_obj_add_flag( ui_Image2, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
lv_obj_clear_flag( ui_Image2, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
ui_Image3 = lv_img_create(ui_Screen1);//时针
lv_img_set_src(ui_Image3, &ui_img_hour_png);
lv_obj_set_width( ui_Image3, LV_SIZE_CONTENT);/// 14
lv_obj_set_height( ui_Image3, LV_SIZE_CONTENT);/// 44
lv_obj_set_x( ui_Image3, 0 );
lv_obj_set_y( ui_Image3, -17 );
lv_obj_set_align( ui_Image3, LV_ALIGN_CENTER );
lv_obj_add_flag( ui_Image3, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
lv_obj_clear_flag( ui_Image3, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
lv_img_set_pivot(ui_Image3,7,39);
lv_img_set_angle(ui_Image3,900);
// lv_obj_add_flag( ui_Image3, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
// lv_obj_clear_flag( ui_Image3, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
// lv_img_set_angle(ui_Image3,-200);
ui_Image4 = lv_img_create(ui_Screen1);//分针
lv_img_set_src(ui_Image4, &ui_img_min_png);
lv_obj_set_width( ui_Image4, LV_SIZE_CONTENT);/// 15
lv_obj_set_height( ui_Image4, LV_SIZE_CONTENT);/// 83
lv_obj_set_x( ui_Image4, 0 );
lv_obj_set_y( ui_Image4, -38 );
lv_obj_set_align( ui_Image4, LV_ALIGN_CENTER );
lv_obj_add_flag( ui_Image4, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
lv_obj_clear_flag( ui_Image4, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
lv_img_set_pivot(ui_Image4,7,80);
// lv_obj_add_flag( ui_Image4, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
// lv_obj_clear_flag( ui_Image4, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
// lv_img_set_angle(ui_Image4,500);
ui_Image5 = lv_img_create(ui_Screen1);//秒针
lv_img_set_src(ui_Image5, &ui_img_sec_png);
lv_obj_set_width( ui_Image5, 7);
lv_obj_set_height( ui_Image5, 97);
lv_obj_set_x( ui_Image5, 0 );
lv_obj_set_y( ui_Image5, -52 );
lv_obj_set_align( ui_Image5, LV_ALIGN_CENTER );
lv_obj_add_flag( ui_Image5, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
lv_obj_clear_flag( ui_Image5, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
// lv_img_set_pivot(ui_Image5,0,0);
lv_img_set_pivot(ui_Image5,3,98);
// lv_img_set_angle(ui_Image5,200);
ui_Image6 = lv_img_create(ui_Screen1);//图像中心点
lv_img_set_src(ui_Image6, &ui_img_yuandian_png);
lv_obj_set_width( ui_Image6, LV_SIZE_CONTENT);/// 20
lv_obj_set_height( ui_Image6, LV_SIZE_CONTENT);/// 21
// lv_obj_set_x( ui_Image6, 0 );
// lv_obj_set_y( ui_Image6, 4 );
lv_obj_set_align( ui_Image6, LV_ALIGN_CENTER );
lv_obj_add_flag( ui_Image6, LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
lv_obj_clear_flag( ui_Image6, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
ui_Label1 = lv_label_create(ui_Screen1);
lv_obj_set_width( ui_Label1, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_Label1, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_Label1, -105 );
lv_obj_set_y( ui_Label1, -10 );
lv_obj_set_align( ui_Label1, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label1,"9");
ui_Label2 = lv_label_create(ui_Screen1);
lv_obj_set_width( ui_Label2, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_Label2, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_Label2, -7 );
lv_obj_set_y( ui_Label2, 108 );
lv_obj_set_align( ui_Label2, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label2,"6");
ui_Label3 = lv_label_create(ui_Screen1);
lv_obj_set_width( ui_Label3, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_Label3, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_Label3, 4 );
lv_obj_set_y( ui_Label3, -108 );
lv_obj_set_align( ui_Label3, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label3,"12");
ui_Label4 = lv_label_create(ui_Screen1);
lv_obj_set_width( ui_Label4, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_Label4, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_Label4, 106 );
lv_obj_set_y( ui_Label4, 0 );
lv_obj_set_align( ui_Label4, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label4,"3");
ui_Label5 = lv_label_create(ui_Screen1);
lv_obj_set_width( ui_Label5, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_Label5, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_Label5, -6 );
lv_obj_set_y( ui_Label5, 71 );
lv_obj_set_align( ui_Label5, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label5,"TUE");
ui_Label6 = lv_label_create(ui_Screen1);
lv_obj_set_width( ui_Label6, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_Label6, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_Label6, -7 );
lv_obj_set_y( ui_Label6, 89 );
lv_obj_set_align( ui_Label6, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label6,"12/5");
/**< 设置LV_EVENT_REFRESH事件的回调 */
lv_obj_add_event_cb(ui_Screen1, time_refresh,LV_EVENT_REFRESH ,NULL);
/**<每个1秒发一次LV_EVENT_REFRESH事件*/
lv_timer_create((void*)send_event, 1000, NULL);
}
更新时间代码
static void time_refresh(lv_event_t* event) {
/* Get the RTC current Time */
HAL_RTC_GetTime(&hrtc, &GetTime, RTC_FORMAT_BIN);
/* Get the RTC current Date */
HAL_RTC_GetDate(&hrtc, &GetData, RTC_FORMAT_BIN);
//时针、分针、秒针转动角度
lv_img_set_angle(ui_Image5, GetTime.Seconds * 60);//s秒表
lv_img_set_angle(ui_Image4, GetTime.Minutes * 60);//m分钟
lv_img_set_angle(ui_Image3, GetTime.Hours * 300);//h时
// lv_refr_now(NULL);
}