stm32移植LVGL
1. LVGL简介
LVGL是一个免费的开源图形库，提供创建具有易于使用的图形元素、漂亮的视觉效果和低内存占用的嵌入式GUI。
2. LVGL移植要求
MCU的要求
a.微控制器：16、32 或64 位微控制器或处理器
b.主控频率(Hz)：> 16 MHz 时钟速度
c.Flash/ROM：>64 kB，如果使用非常多的部件（推荐> 180 kB)
d.内存(RAM)：
静态 SRAM:~2 kB，取决于使用的功能和对象类型
堆栈：>2kB（推荐>8 kB）
动态数据（堆）：>4 KB （如果使用多个对象，建议>32 kB）
显示缓冲区：>“水平分辨率”像素（推荐 >10*“水平分辨率”）
MCU (RAM)或外部存储器分配的一个帧缓冲区
显示屏的要求
①具有8/16/24/32位色深的显示屏。
② HDMI 端口的显示器。
③ 小型单色显示器。
④灰度显示。
⑤ LED 矩阵。
⑥其它可以控制像素颜色/状态的显示器。
3.LVGL源码下载与介绍
https://github.com/lvgl/lvgl/
demos：LVGL提供的综合例程源码
docs：LVGL文献，主要说明LVGL每个部件的使用方法
env support：环境的支持（MDK、ESP、RTThread）
examples：LVGL例程源码和LVGL输入设备驱动，显示屏驱动文件
scripts：LVGL手稿（与MicroPython有关）
src：LVGL源文件(LVGL部件源码、第三方库)
tests：官方人员的测试代码，这个文件夹用户无需了解
lv_conf_template.h：LVGL的剪裁文件
lvgl.h：LVGL包含的头文件
examples文件夹中：
anim：LVGL 动画例程实例
arduino：开源电子平台(不需要了解)
assets：图片资源
event：LVGL 事件机制实例
get_started：LVGL 获取状态实例
layouts：LVGL 布局实例(flex/grid)
libs：LVGL 移植第三方库实例
others：LVGL 其他测试
porting：LVGL 输入设备驱动和文件系统驱动以及显示器驱动
scroll：LVGL 滚动实例
styles：LVGL 对象样式实例
widgets：LVGL 部件实例
src文件夹：
core：LVGL核心源码（事件、组、对象、坐标、样式、主题等）
draw：LVGL绘画驱动（图片，解码、DMA2D、圆、线、圆弧、和文本等）
extra：LVGL额外的文件（布局、第三方库、其他测试、主题以及部件）
font：LVGL字库
gpu：LVGL针对图形加速（该文件夹的内容在draw文件夹内定义）
hal：硬件抽象层（显示驱动程序、输入设备程序以及提供LVGL系统滴答）
misc：主要描述LVGL其他定义（动画、内存管理、日志等等文件）
widgets：LVGL基础部件
无操作系统移植：
1.移植准备工作
https://github.com/lvgl/lvgl/
找到lv_conf_template. h重命名为lv_conf. h->打开 lv_conf. h 文件,修改条件编译指令#if 0改为#if 1->保留examples、src、lv_conf.h、lvgl.h文件夹，其他的全删除->打开examples文件夹,保留porting文件夹，其他的全删除
2. 向工程添加文件
文件夹命名，创建Middlewares->
在lvgl文件夹中存放examples、src、lv_conf.h、lvgl.h文件->向工程添加文件：“品”新建组Middlewares/lvgl/examples/porting、Middlewares/lvgl/src/core、Middlewares/lvgl/src/draw、Middlewares/lvgl/src/extra、Middlewares/lvgl/src/font、Middlewares/lvgl/src/gpu、Middlewares/lvgl/src/hal、Middlewares/lvgl/src/misc、Middlewares/lvgl/src/widgets、Middlewares/LVGL/GUI_APP的10个组->添加.c文件：core、font、hal、misc、widgets同名，draw添加sw文件夹与其他.c，extra除了libs文件夹外都要添加，gpu添加draw-stm32_dma2d与draw-sdl，examples/porting添加porting文件夹中lv_port_disp_template和lv_port_indev_template->
添加头文件路径：“魔术棒”--C/C++--Include Paths->LVGL-GUI，LVGL-GUI-lvgl，LVGL-GUI-lvgl-src，LVGL-GUI-lvgl-examples-porting->
忽略特定的警告：“魔术棒”--C/C++--Misc Controls中填入“-diag_suppress-68-diag_suppress=11l --diag suppress=188--diag suppress-223--diag suppress=546 diag_suppress=-l295”->勾选“C99Mode”
3.修改工程文件
添加VGL时基：添加定时器time.c文件->编译->修改#include "LED.h"为#include "lvgl.h"->修改LED2=!LED2;为lv_tick_inc(1);->在main.c文件中初始化定时器TIM4_Init(999,71);->
修改lvgl采集驱动和触摸驱动->修改显示驱动lv_port_disp_template.c文件->修改输入设备驱动lv_port_indev_template.c文件
4.移植官方例程
将官方例程的demo文件夹复制到LVGL-GUI_APP中->"品"添加文件->“魔术棒”--C/C++--Include Paths指定头文件路径
1. LVGL系统总览
2. lv_conf.h配置文件解析
2.1颜色设置：颜色深度、屏幕透明等设置
2.2 内存设置：内存存储器（内/外）、分配内存大小
2.3 HAL(硬件抽象层）设置：刷新周期、输入设备读取周期以及tick时钟来源
2.4 特征设置：绘画、加速刷新、日志、断言以及帧率计算功能
2.5 编译器设置：关于编译器设置
2.6 字体设置：选择系统字体以及声明自定义字体
2.7 文本设置：字符编码、文本特性
2.8 控件设置：使能/失能核心部件
2.9 特别设置：额外的部件、主题、布局、第三方库等设置
3. LVGL初始化
第一步：首先调用lv_init初始化LVGL图形库。
第二步：lv_port_disp_init注册显示驱动程序和lv_port_indev_init输入设备驱动程序。
第三步：lv_tick_inc(x)在x中断中每毫秒调用一次。
第四步：lv_timer_handler每隔几毫秒周期调用一次，处理与LVGL相关的任务。
4. 显示设备
lv_disp_draw_buf_t /*绘制缓冲区*/
lv_disp_drv_t /*包含回调函数以与显示交互并操作低级绘图行为*/
1.显示驱动程序编写：
缓冲区初始化完成后，lv_disp_drv_t显示驱动程序编写步骤如下：
第一步：lv_disp_drv_init(&disp_drv)初始化显示设备。
第二步：字段设置（显示设备分辨率、设置显示缓冲区等等设置）。
第三步：调用函数lv_disp_drv_register(&disp_drv)注册显示设备。
4.2 屏幕旋转的步骤：
①设置sw_rotate标志设置为1。
② 使用旋转函数进行旋转。
lv_disp_set_rotation(lv_disp_get_default(), LV_DISP_ROT_180) ;
4.3显示接口API函数
4.3.1注册显示设备相关函数
lv_disp_drv_init()：初始化显示驱动程序
屏幕旋转 API 函数
其他显示接口 API 函数
5. 输入设备
LVGL输入设备是在lv_port_indev_template.c文件中定义的
5.1 触摸设备
5.2 光标设备
5.3输入设备相关API函数
6. LVGL滴答
LVGL任务处理：要处理 LVGL 的任务或者回调函数，需要 lv_timer_handler 定期调用,如以下方法所示:
① main 函数的 while(1)。
②定时中断(优先级低于lv_tick_inc) 。
③ 定期执行OS任务。
7.LVGL日志
lv_conf.h文件中找到宏定义LV_USE_LOG置1操作
① LV_LOG_LEVEL_TRACE：很多日志提供详细信息。
② LV_LOG_LEVEL_INFO:记录重要事件。
③ LV_LOG_LEVEL_WARN:记录是否发生了不必要的事情,但没有引起问题。
④ LV_LOG_LEVEL_ERROR:唯一关键问题,系统可能会发生故障。
⑤ LV_LOG_LEVEL_USER：仅用户消息。
⑥ LV_LOG_LEVEL_NONE:不要记录任何内容级别高于设置的日志级别的事件也将记录。
LVGL基础知识：
在 LVGL 中，用户界面的基本构建块是对象，也称为小部件。例如：按钮、标签、图片、列表、图表或文本区域等部件,都是简称对象。
1.1 对象的基本属性(公用属性)
① 大小② 父类③ 样式④ 事件⑤ 位置
lv_obj_set_<widget>_size/pos
lv_obj_get_<widget>_size/pos
1. 2 对象的具体属性(私有属性)
① 当前值② 最小值和最高值
1.3 LVGL工作机制
1.3.1 LVGL父类与子类的区别
1.3.2创建对象与删除对象
创建对象：lv_obj_t * lv_<widget>_create(lv_obj_t * parent,<other parameters if any>);
删除对象：
1.3.3 LVGL屏幕函数
(2)获取活动的屏幕：lv_scr_act
(3) 加载屏幕：lv_scr_load(scr1) /*加载屏幕*/
(4)动画加载屏幕： lv_scr_load_anim(scr, transition_type, time, delay, auto_del)
其他函数
1.3.4LVGL图层
(1)创建对象的顺序
(2)前台和后台
① lv_obj_set_top函数
② lv_obj_move_foreground函数
③ lv_obj_move_background函数
(3)LVGL顶层和系统层 lv_obj_add_flag(lv_layer_top(),LV_OBJ_FLAG_CLICKABLE);/*设置可点击*/
LVGL具有两个特殊的层，分别名为layer_top和layer_sys
2.1对象坐标的设置
像素：
百分比：
对齐的方式主要有：左对齐，右对齐，居中对齐，两端对齐等对齐方式。
const struct _lv_obj_t * base, //向谁对齐
3.1普通样式设置
3.4部件的状态
static lv_style_t style_btn;/*定义样式变量*/
lv_style_init(&style_btn);/*样式初始化*/
/*设置背景*/
lv_style_set_bg_color(&style_btn,lv_palette_main(LV_PALETTE_GREEN));
/*创建进度条部件*/
lv_obj_t*lv slider = lv_slider_create(lv_scr_act());
/*居中设置*/
lv_obj_center(lv_slider);
/*正常状态下设置指示器的样式属性*/
lv_obj_add_style(lv_slider,&style_btn,LV_PART_INDICATOR | LV_STATE_DEFAULT);
/*创建对比部件*/
lv_obj_t* lv_obj1 = lv_slider_create(lv_scr_act());
/*向外底下中间对齐*/
lv_obj_align_to(lv_objl,lv_obj,LV_ALIGN_OUT_BOTTOM_MID,0,20);
3.5大小与位置属性(样式属性)
3.5.1 (width）宽度
3.5.2 (min_width)最小宽度 lv_obj_set_width
3.5.3 (max_width)最大宽度
3.5.4（height ）高度
3.5.5 (min_height ）最小高度
3.5.6 (max_height )最大高度 lv_obj_set_height ()
3.5.7 X 坐标属性
3.5.8 Y坐标属性
3.5.9 (Align)对齐属性
3.5.10 (transform_width)变换宽度属性
3.5.11 (transform_height)变换高度属性
3.5.12 (translate_x)偏移X坐标属性
3.5.13 (translate_y)偏移Y坐标属性
3.5.14 (transform_zoom)缩放属性(默认大小256)
3.5.15 (transform_angle)旋转属性
3.6填充属性(样式属性)
3.6.1. (pad_top)顶部填充属性
3.6.2. (pad-bottom)底部填充属性
3.6.3. (pad_left)左边填充属性
3.6.4. (pad_right)右边填充属性
3.6.5.(pad_row)行之间填充属性
3.6.6.(pad_column)列之间填充属性
3.7背景属性(样式属性)
3.7.1.(bg_color)背景属性
3.7.2.(bg_opa)背景透明属性(0-255)
3.7.3 (bg-grad_color)背景梯度颜色属性
3.7.4 (bg_grad_dir)背景梯度方向属性 LV_GRAD_DIR_NONE/HOR/VER
3.7.5 (bg_grad_stop)背景梯度起点属性
3.7.6.(bg_img_src)背景图片源属性
3.7.7.(bg_img_opa)背景图片透明度属性(0-255)
3.7.8.(bg_img_recolor)背图片重绘属性
3.7.9.(bg_img_recolor_opa)背景图片重绘透明属性
例子
/* 创建图片部件 */
lv_app_img = lv_img_create (lv_scr_act ());
/* 设置图片源 */
lv_img_set_src(lv_app_img, &image) ;
/* 居中 */
lv_obj_center (lv_app_img) ;
/* 设置图像重着色的强度 */
lv_obj_set_style_bg_img_recolor_opa (lv_app_img, 255, LV_PART_MAIN) ;
/*设置一个颜色混合到背景图像 */
lv_obj_set_style_bg_img_recolor( lv_app_img, lv_color_make (255, 255, 255), LV_STATE_DEFAULT); 3.7.10. (bg_img_tiled)背景图片平铺属性
3.8 边框属性(样式属性)
3.8.1. (border_color)边框颜色
3.7.2. (border_opa)边框透明度
3.7.3.(border width)边框宽度
3.7.4.(border_side)边框内侧
3.7.5.(border_post)边框绘制
3.9轮廓属性(样式属性)
3.9.1.(outline_width) 轮廓宽度属性
3.9.2.(outline_color)轮廓颜色属性
3.9.3 (outline_opa)轮廓透明度属性
3.9.4 (outline_pad) 轮廓间隙属性
3.10阴影属性(样式属性)
3.10.1. (shadow_width)阴影宽度属性
3.10.2. (shadow_ofs_x)阴影偏移X轴方向属性
3.10.3. (shadow_ofs_y)阴影偏移Y轴方向属性
3.10.4. (shadow_spread)阴影范围属性
3.10.5. (shadow_color)阴影颜色属性
3.10.6 (shadow_opa)阴影透明属性
3.11图片属性(样式属性)
3.11.1. (img_opa)图片透明度属性
3.11.2. (ing_recolor)图片重绘属性
3.11.3. (img_recolor_opa)图片重绘透明属性
3.12线属性(样式属性)
3.12.1. (line_width)线的宽度属性
3.12.2. (line_rounded)线的端点属性
3.12.3. (line_color)线的颜色属性
3.12.4. (line_opa)线的透明度属性
3.13圆弧属性(样式属性)
3.13.1. (arc_width)圆弧宽度属性
3.13.2 (arc_rounded)圆弧端点
3.13.3. (arc_color)圆弧颜色属性
3.13.4. (arc_opa)圆弧透明度属性
3.14文本属性(样式属性)
3.14.1.(text_color)文本颜色属性
3.14.2.(text_opa)文本透明度属性
3.14.3.（text_font）文本字体属性
3.14.4. (text_letter_space)文本字符空间属性
3.14.5. (text_decor)文装饰属性
3.14.6. (text_align)文本对齐属性
3.15其他属性(样式属性)
3.15.1.(radius)设置圆角的半径属性
3.15.2.(opa)透明度
3.15.3. (anim）动画属性
3.15.4. (anim_time)动画时间属性
3.15.5. (anim_speed)动画速度属性
3.15.6.(layout）布局属性
3.15.7. (base_dir)对象方向属性 LV_BIDI_DIR_LTR/RTL/AUTO
浙公网安备 33010602011771号