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

2023-12-10 06:45
文章标签 时钟 入门 ui 华为 实时 lvgl watch 模仿 v8.3

本文主要是介绍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 );    /// Flagsui_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 );    /// Flagsui_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 );    /// Flagsui_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);
}

更新时间代码

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

这篇关于LVGL_V8.3入门二---实时时钟（模仿华为watch-UI）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/476322。

相关文章

VS配置好Qt环境之后但无法打开ui界面的问题解决

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源
阅读更多...
Python中OpenCV与Matplotlib的图像操作入门指南

Python中OpenCV与Matplotlib的图像操作入门指南

《Python中OpenCV与Matplotlib的图像操作入门指南》：本文主要介绍Python中OpenCV与Matplotlib的图像操作指南,本文通过实例代码给大家介绍的非常详细,对大家的学... 目录一、环境准备二、图像的基本操作1. 图像读取、显示与保存 使用OpenCV操作2. 像素级操作3.
阅读更多...
QT6中绘制UI的两种方法详解与示例代码

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术：​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例：简单按钮
阅读更多...
在 PyQt 加载 UI 三种常见方法

在 PyQt 加载 UI 三种常见方法

《在PyQt加载UI三种常见方法》在PyQt中,加载UI文件通常指的是使用QtDesigner设计的.ui文件,并将其转换为Python代码,以便在PyQt应用程序中使用,这篇文章给大家介绍在... 目录方法一：使用 uic 模块动态加载 （不推荐用于大型项目）方法二：将 UI 文件编译为 python 模
阅读更多...
使用Python实现实时金价监控并自动提醒功能

使用Python实现实时金价监控并自动提醒功能

《使用Python实现实时金价监控并自动提醒功能》在日常投资中,很多朋友喜欢在一些平台买点黄金,低买高卖赚点小差价,但黄金价格实时波动频繁,总是盯着手机太累了,于是我用Python写了一个实时金价监控... 目录工具能干啥？手把手教你用1、先装好这些"食材"2、代码实现讲解1. 用户输入参数2. 设置无头浏
阅读更多...
POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能

POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能

《POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能》ApachePOI是一个流行的Java库,用于处理MicrosoftOffice格式文件,提供丰富API来创建、读取和修改O... 目录前言:Apache POIEasyPoiEasyExcel一、EasyExcel1.1、核心特性
阅读更多...
Python中模块graphviz使用入门

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚
阅读更多...
售价599元起! 华为路由器X1/Pro发布 配置与区别一览

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布，有朋友留言问华为路由X1和X1Pro怎么选择，关于这个问题，本期图文将对这二款路由器做了期参数对比，大家看... 华为路由 X1 系列已经正式发布并开启预售，将在 4 月 25 日 10:08 正式开售，两款产品分别为华
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
Python FastAPI入门安装使用

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节：FastAPI入门一、FastAPI框架介绍什么是ASGI服务（WSGI）二、FastAP
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2