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

news2024/11/18 14:27:30

系列文章目录


文章目录

  • 系列文章目录
  • 前言
  • 一、实现效果
  • 二、代码解析


前言

在这个博客中,我们将深入探讨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);
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jenkins简单介绍

学习目标 知道jenkins应用场景能够安装部署jenkins服务器能够实现gitgithubjenkins手动构建能够实现gitgitlabjenkins自动发布系统 认识jenkins Jenkins是一个可扩展的持续集成引擎&#xff0c;是一个开源软件项目&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软…

Kafka集成springboot

安装kafka&#xff0c;直接到官网下载bin文件&#xff0c;本文使用windows进行使用kafka。 下载之后&#xff0c;第一步&#xff0c;启动zookeeper&#xff1a; zookeeper-server-start.bat ..\..\config\zookeeper.properties 第二步&#xff0c;启动kafka&#xff1a; kafka…

oops-framework框架 之 多语言设置文本、精灵和骨骼动画

引擎&#xff1a; CocosCreator 3.8.0 环境&#xff1a; Mac Gitee: oops-plugin-excel-to-json 注&#xff1a; 作者dgflash的oops-framework框架QQ群&#xff1a; 628575875 简介 作者dgflash在oops-framework的框架中提供了多语言&#xff0c;主要用于对文本、图片、骨骼动…

Verilog基础:寄存器输出的两种风格

相关文章 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 Verilog中的寄存器操作一般指的是那些对时钟沿敏感而且使用非阻塞赋值的操作。例如状态机中的状态转移&#xff0c;实际上就是一种寄存器操作&#xff0c;因为这相…

【docker 】centOS 安装docker

官网 docker官网 github源码 卸载旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 安装软件包 yum install -y yum-utils \device-mapper-persistent-data…

自下而上-存储全栈(TiDB/RockDB/SPDK/fuse/ceph/NVMe/ext4)存储技术专家成长路线

数字化时代的到来带来了大规模数据的产生&#xff0c;各行各业都面临着数据爆炸的挑战。 随着云计算、物联网、人工智能等新兴技术的发展&#xff0c;对存储技术的需求也越来越多样化。不同应用场景对存储的容量、性能、可靠性和成本等方面都有不同的要求。具备存储技术知识和技…

基于 Gin 的 HTTP 中间人代理 Demo

前面实现的代理对于 HTTPS 流量是进行盲转的&#xff0c;也就是说直接在 TCP 连接上传输 TLS 流量&#xff0c;但是我们无法查看或者修改它的内容。当然了&#xff0c;通常来说这也是不必要的。不过对于某些场景下还是有必要的&#xff0c;例如使用 Fiddler 进行抓包或者监控其…

Flink 本地单机/Standalone集群/YARN模式集群搭建

准备工作 本文简述Flink在Linux中安装步骤&#xff0c;和示例程序的运行。需要安装JDK1.8及以上版本。 下载地址&#xff1a;下载Flink的二进制包 点进去后&#xff0c;选择如下链接&#xff1a; 解压flink-1.10.1-bin-scala_2.12.tgz&#xff0c;我这里解压到soft目录 [ro…

redis之缓存穿透,击透,雪崩~

以下为一个我们正常的缓存流程&#xff1a; 缓存雪崩&#xff1a; 在双十一的时候&#xff0c;淘宝的首页访问量是非常大的&#xff0c;所以它的很多数据是放在redis缓存里面&#xff0c;对应redis中的key&#xff0c;假设设置了缓存失效的时间为3小时&#xff0c;超过这三个小…

视觉学习笔记12——百度飞浆框架的PaddleOCR 安装、标注、训练以及测试

系列文章目录 虚拟环境部署 参考博客1 参考博客2 参考博客3 参考博客4 文章目录 系列文章目录一、简单介绍1.OCR介绍2.PaddleOCR介绍 二、安装1.anaconda基础环境1&#xff09;anaconda的基本操作2&#xff09;搭建飞浆的基础环境 2.安装paddlepaddle-gpu版本1&#xff09;安装…

区块链实验室(29) - 关闭或删除FISCO日志

1. FISCO日志 缺省情况下&#xff0c;FISCO启动日志模块&#xff0c;日志记录的位置在节点目录中。以FISCO自带案例为例&#xff0c;4节点的FISCO网络&#xff0c;24个区块产生的日志大小&#xff0c;见下图所示。 2.关闭日志模块 当节点数量增大&#xff0c;区块高度增大时&…

利用Wix打包安装包

利用Wix打包安装包 背景具体步骤1、安装 WiX Toolset 工具集2、安装 WiX Toolset 系列 Visual Studio 插件3、创建Wix工程4、添加工程文件5、修改Product元素6、修改Package元素7、修改MajorUpgrade元素8、修改Media属性9、设置安装引导界面10、添加WPF项目文件11、添加桌面快捷…

资源三号卫星数字表面模型库

资源三号卫星数字表面模型库&#xff08;简称ChinaDSM-China Digital Surface Model&#xff09;是以资源三号卫星立体影像为数据源&#xff0c;采用自主知识产权的基于多基线、多匹配特征的地形信息自动提取技术&#xff0c;快速处理和生产提取的高精度、高保真15米格网数字表…

排序算法之四:直接选择排序

1.基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完 。 2.直接选择排序 在元素集合array[i]--array[n-1]中选择关键码最大(小)的数据元素 若它不是这组元素中的…

第 119 场 LeetCode 双周赛题解

A 找到两个数组中的公共元素 模拟 class Solution { public:vector<int> findIntersectionValues(vector<int> &nums1, vector<int> &nums2) {unordered_set<int> s1(nums1.begin(), nums1.end()), s2(nums2.begin(), nums2.end());vector<…

keepalived+lvs 对nginx做负载均衡和高可用

LVS_Director KeepAlivedKeepAlived在该项目中的功能&#xff1a; 1. 管理IPVS的路由表&#xff08;包括对RealServer做健康检查&#xff09; 2. 实现调度器的HA http://www.keepalived.orgKeepalived所执行的外部脚本命令建议使用绝对路径实施步骤&#xff1a; 1. 主/备调度器…

《深入浅出进阶篇》洛谷P3197 越狱——集合

洛谷P3197 越狱 题目大意&#xff1a; 监狱有 n 个房间&#xff0c;每个房间关押一个犯人&#xff0c;有 m 种宗教&#xff0c;每个犯人会信仰其中一种。如果相邻房间的犯人的宗教相同&#xff0c;就可能发生越狱&#xff0c;求有多少种状态可能发生越狱。 答案对100,003 取模。…

Python 网络爬虫(三):XPath 基础知识

《Python入门核心技术》专栏总目录・点这里 文章目录 1. XPath简介2. XPath语法2.1 选择节点2.2 路径分隔符2.3 谓语2.4 节点关系2.5 运算符3. 节点3.1 元素节点(Element Node)3.2 属性节点(Attribute Node)

MongoDB——基本概念+docker部署+基本命令

1.MongoDB相关概念 业务应用场景 MongoDB简介 BSON二进制的JSON 数据类型 MongDB的特点 2.单机部署 windows上的安装启动 windows版本的直接去官网下载即可&#xff0c;这里的安装运行我试了一次没有成功。干脆不用了&#xff0c;反正以后也不会在windows系统上用的这个 li…

NSSCTF第15页(1)

[CISCN 2019华东南]Web4 点击read something&#xff0c;发现访问了百度 读到了源码 就是ssrfflask import re, random, uuid, urllib from flask import Flask, session, requestapp Flask(__name__) random.seed(uuid.getnode()) app.config[SECRET_KEY] str(random.rando…