LVGL_V8.3入门二---实时时钟（模仿华为watch-UI）

系列文章目录

文章目录

前言

在这个博客中，我们将深入探讨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时钟，时钟实时显示

设置初始化时间

voidMX_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页面代码

staticvoidsend_event(void){lv_event_send(ui_Screen1,LV_EVENT_REFRESH,NULL);}voidui_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);/// 240lv_obj_set_height( ui_Image2, LV_SIZE_CONTENT);/// 240lv_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 );/// Flagslv_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);/// 14lv_obj_set_height( ui_Image3, LV_SIZE_CONTENT);/// 44lv_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 );/// Flagslv_obj_clear_flag( ui_Image3, LV_OBJ_FLAG_SCROLLABLE );/// Flagslv_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);/// 15lv_obj_set_height( ui_Image4, LV_SIZE_CONTENT);/// 83lv_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 );/// Flagslv_obj_clear_flag( ui_Image4, LV_OBJ_FLAG_SCROLLABLE );/// Flagslv_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 );/// Flagslv_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);/// 20lv_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 );/// Flagslv_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);/// 1lv_obj_set_height( ui_Label1, LV_SIZE_CONTENT);/// 1lv_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);/// 1lv_obj_set_height( ui_Label2, LV_SIZE_CONTENT);/// 1lv_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);/// 1lv_obj_set_height( ui_Label3, LV_SIZE_CONTENT);/// 1lv_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);/// 1lv_obj_set_height( ui_Label4, LV_SIZE_CONTENT);/// 1lv_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);/// 1lv_obj_set_height( ui_Label5, LV_SIZE_CONTENT);/// 1lv_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);/// 1lv_obj_set_height( ui_Label6, LV_SIZE_CONTENT);/// 1lv_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);}

更新时间代码

staticvoidtime_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);}