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时钟，时钟实时显示

设置初始化时间

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