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

系列文章目录

---

---

前言

在这个博客中，我们将深入探讨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 */

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

更新时间代码

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

---