LVGL介绍常见的GUI设计软件(3条消息) 嵌入式GUI盘点-你了解几款？_天外飞仙CUG的博客-CSDN博客软件emWinTouchGFXLVGL平台16/32/64位MCU16/32/64位MCU16/32/64位MCU内存RAM:2-20KBFLASH:30-120KB(取决于用户设计的界面内容)RAM:10KFLASH:20K(取决于用户设计的界面内容)RAM:16KBFLASH:64KB(取决于用户设计的界面内容)是否免费在STM32平台上免费使用在STM32平台上免费使用各个平台免费使用显示效果官网emWin (segger.com)TouchGFX文档 | TouchGFX DocumentationLVGL - Light and Versatile Embedded Graphics LibraryLVGL介绍LVGL（Light and Versatile Graphics Library）是一个免费的开源图形库，提供创建具有易于使用的图形元素、漂亮的视觉效果和低内存占用的嵌入式 GUI 所需的一切
• 具有非常丰富的内置控件,像 buttons, charts, lists, sliders, images 等• 高级图形效果：动画，反锯齿，透明度，平滑滚动• 支持多种输入设备,像 touchpad, mouse, keyboard, encoder 等• 支持多语言的 UTF-8 编码• 支持多个和多种显示设备，例如同步显示在多个彩色屏或单色屏上• 完全自定制的图形元素• 硬件独立于任何微控制器或显示器• 可以缩小到最小内存 (64 kB Flash, 16 kB RAM)• 支持操作系统、外部储存和 GPU（非必须）• 仅仅单个帧缓冲设备就可以呈现高级视觉特效• 使用 C 编写以获得最大兼容性(兼容 C++)• 支持 PC 模拟器• 为加速 GUI 设计,提供教程,案例和主题,支持响应式布局• 提供了在线和离线文档• 基于自由和开源的 MIT 协议LVGL移植参考资料里的移植教程：E:\工作文件\试讲视频\第十三天试讲LVGL\资料\STM32移植LVGL过程.pdf源码获取LVGL开源在Github上，但是Github访问时容易出现无法访问的情况，所以我们可以从另一个网站Gitcode上获取源码
这里我们获取的版本为6.0版本
下面两个链接分别是6.0的源码和实例代码
https://gitcode.net/mirrors/lvgl/lvgl/-/tree/v6.0https://gitcode.net/mirrors/lvgl/lv_examples下载完成后，获取到的内容如下:移植步骤首先我们要准备好一个STM32的工程，最好是带显示屏驱动的，这样我们就直需要移植LVGL相关的内容即可
在准备好的 STM32 工程里，新建 LVGL 和 LVGL_APP 文件夹LVGL ：存放官方驱动和例程等库文件LVGL_APP ：存放自己的程序将下载的源码解压出来，然后放到LVGL里
这里移植lv_example-v6.0是为了最后演示官方例程，实际使用时可以删除不用接着把 LVGL/lvgl-v6.0/lv_conf_template.h 和 LVGL/lv_examples-v6.0/lv_ex_conf_templ.h 俩 个配置模板文件统统拷贝到 LVGL 目录下,然后对这个 2 文件分别重命名为 lv_conf.h 和 lv_ex_conf.h
然后我们在LVGL目录下创建一个lvgl_driver文件夹用来存放底层驱动文件
驱动文件在lvgl-6.0/porting里
里边一共有六个文件分别是和显示、文件系统、触摸驱动有关的，这里我们不用文件系统，所以只需要复制以下4个文件到自己创建的lvgl_driver文件夹里即可
修改复制到lvgl_driver文件夹里的文件的名称如下所示：至此需要的文件已初步复制完成，接下来需要对对我们的工程进行配置，我们打开 Keil 工程,点击 图标打开分组管理面板,在 Groups 栏下新建 LVGL 、 LVGL_APP 、LVGL_driver,选中 LVGL 分组,接着点击 Add Files 按钮,把LVGL\lvgl-v6.0\src\lv_coreLVGL\lvgl-v6.0\src\lv_drawLVGL\lvgl-v6.0\src\lv_fontLVGL\lvgl-v6.0\src\lv_halLVGL\lvgl-v6.0\src\lv_miscLVGL\lvgl-v6.0\src\lv_objxLVGL\lvgl-v6.0\src\lv_themes路径下的所有c文件添加到工程里
然后点击将头文件路径添加到工程里此时点击编译会有错误，我们需要对相关文件进行修改，第一个文件是lvgl_config.h文件
打开配置文件，里边有很多配置
首先第 10 行：0 修改为 1，使整个配置文件生效
23、24 行：LV_HOR_RES_MAX 和 LV_HOR_RES_MAX，这个是告诉 LVGL显示屏分辨率多大，请根据自己的屏幕大小将分辨率写入其中（注意区分横屏和竖屏）32 行： LV_COLOR_DEPTH 颜色深度
咱们屏幕采用RGB565，选择 16
56 行：LV_DPI 的值,默认值为 100,我们把他设置到 60,这个宏是用来调节界面 缩 放比例的,此值越大,控件分布的就越散,控件自身的间隔也会变大72 行：LV_MEM_SIZE 的大小,这个就是控制 littleVGL 中所谓的动态数据堆的 大小,是用来给控件的创建动态分配空间的,我们这里设置为 16KB 的大小145 行： LV_USE_GPU ,我们把它设置为 0,即不使能 GPU 功能148 行：LV_USE_FILESYSTEM ,设置为 0,即不使能文件系统的功能234~243这些宏定义是跟lvgl自带主题相关的
如果要演示官方自带的例程,这些全 部使能,注意,在实际项目中,我们一般最多使能一个，如果我们项目根本就用不到 其自带的主题,那么我们应该把这些宏全部禁止,因为这样可以节省 flash 和 ram
现在我们要演示官方例程，可以把他们全部使能
至此lv_config.h文件就以修改完毕，接下来修改lv_ex_config.h文件，这个文件是和使用的演示例程相关的
9 行：0 修改为 1 使能整个文件然后把下面这些宏设定为 1，其余保持不变即可
LV_EX_KEYBOARD,LV_EX_MOUSEWHEEL,LV_USE_TESTS,LV_USE_TUTORIALS,LV_USE_BENCHMARK,LV_USE_DEMO,LV_USE_TERMINAL为LVGL提供心跳时钟，在1ms的定时中断中添加：lv_tick_inc(1)这句话，我们在不加操作系统时看可以直接在系统定时器的中段服务函数里添加，如果时加了操作系统，可以使用任一定时器，来实现1ms定时
添加时注意添加lvgl.h头文件
再次编译工程，还是会报错，此时我们找到对应错误的地方，在lv_config.h的485行，将lvgl修改为lvgl-v6.0，因为我们的路径和官方的不一致
修改完之后在进行编译，还是会有5个错误，同样是头文件找不到的原因，我们找到这五个文件，将文件里的头文件路径按照以下格式修改即可修改前：修改后：再编译一下,就只剩下警告,没有错误了,接下来我们来解决警告
在这些警告中,仔细看其实就 只有 68, 111, 550 这三种警告
警告不影响使用但是看着不舒服，我们可以屏蔽这几个警告：在找到C/C++选项：在 Misc Controls 中填入 --diag_suppress=68 --diagsupp ress=111 --diag_suppress=550,如下图所示.接下来我们修改底层驱动文件，以适配我们的屏幕驱动
打开 lv_port_disp.c和lv_port_disp.h文件
先将头文件里的：7行：0 修改为 1并修改头文件路径，声明头文件：然后修改源文件：7 行：0 修改为 112 行：头文件修改为：#include "lv_port_disp.h"，并添加lcd的头文件然后就是修改void lv_port_disp_init(void)static void disp_flush(lv_disp_drv_t disp_drv, const lv_area_t area, lv_color_t color_p)这两个函数
第一个函数是用来给 LVGL 提供一个绘制对象的缓冲区
内容修改如下：void lv_port_disp_init(void){/ Example for 1) /static lv_disp_buf_t disp_buf_1;static lv_color_t buf1_1[LV_HOR_RES_MAX 10]; /A buffer for 10 rows/lv_disp_buf_init(&disp_buf_1, buf1_1, NULL, LV_HOR_RES_MAX 10); /Initialize the display buffer//----------------------------------- Register the display in LittlevGL----------------------------------/lv_disp_drv_t disp_drv; /Descriptor of a display driver/lv_disp_drv_init(&disp_drv); /Basic initialization//Set up the functions to access to your display//Set the resolution of the display/disp_drv.hor_res = LV_HOR_RES_MAX;disp_drv.ver_res = LV_VER_RES_MAX;/Used to copy the buffer's content to the display/disp_drv.flush_cb = disp_flush;/Set a display buffer/disp_drv.buffer = &disp_buf_1;#if LV_USE_GPU/Optionally add functions to access the GPU. (Only in buffered mode, LV_VDB_SIZE != 0)//Blend two color array using opacity/disp_drv.gpu_blend = gpu_blend;/Fill a memory array with a color/disp_drv.gpu_fill = gpu_fill;#endif/Finally register the driver/lv_disp_drv_register(&disp_drv);}第二个函数是用来向屏幕刷新内容的，这里有两种方式，一种是使用画点函数，另一种是使用填充函数，填充函数刷新更快，所以我们就是用填充函数
源码修改为static void disp_flush(lv_disp_drv_t disp_drv, const lv_area_t area, lv_color_t color_p){/The most simple case (but also the slowest) to put all pixels to the screen one-by-one/int32_t x;int32_t y;LCD_Color_Fill(area->x1,area->y1,area->x2,area->y2,(uint16_t )color_p);/ IMPORTANT!!! Inform the graphics library that you are ready with the flushing/lv_disp_flush_ready(disp_drv);}由于我们没有触摸的底层驱动，所以触摸功能我们先不移植后续补充，这里我们直接移植演示例程看一下显示效果从以下路径找到演示历程，然后复制到自家创建的LVGL_APP文件夹里
然后打开工程，双击LVGL_App添加对应的c文件然后修改头文件中包含的头文件路径移植完毕之后我们就可以在主函数进行调用显示了，首先添加头文件然后初始化LVGL和显示驱动，并调用例程界面创建函数最后添加lv_task_handler();在while(1)循环里,这个函数大家可以理解为一个事务处理器，需要把它放在一个循环里或者定时器中断里
编译运行，显示效果如下：LVGL使用方法使用VSstudio2019仿真需要注意的是LVGL的仿真只支持7.0版本以上的LVGL
但是其内部设计流程基本类似，所以我们可以先在模拟器编写自己的代码设计界面，在模拟器上运行没问题之后，再把界面设计部分移植到工程里
这样会节省大家项目开发的时间
LVGL官方给我们提供了多种模拟器可用，这里我们采用VS2019来实现
安装VS2019的步骤可以参考以下连接
Visual studio编程与开发 社区版 软件下载 (qmshengekj.cn)安装完成之后我们需要使用Git从Github上获取对应的仿真器：在Git里输入下面指令获取源码，这种方式最直接，不需要手动下载依赖的文件，但是速度会比较慢
git clone --recurse-submodules https://github.com/lvgl/lv_sim_visual_studio.git另外我们还可以手动下载对应的文件而且也可以指定版本
V7.1版本的仿真器获取连接如下：lvgl/lv_port_win_visual_studio at v7.1.0 (github.com)先下载仿真器：下载完后会发现，里边有几个文件夹是空的，需要我们手动下载：在网页上进到visual_studio_2017_sdl文件夹里，里边有三个文件，依次点击去下载，下载方式和上方的步骤一致
然后将下载的代码整合到一起
点击lv_sim_visual_stdio_sdl运行仿真运行时注意将平台改为x64平台初次运行会给我们显示官方例程，我们可以自己在主函数里添加自己的代码，进行编辑，显示效果如下：LVGL使用参考资料： LVGL在气象站中的设计.pdfLVGL任务管理系统littleVGL 自带了一个任务管理系统,它支持 6 (0-5)个任务优先级，数值越大，优先级越高,高优先级的任务可以抢占低优先级的任务,注意,此任务管理系统是非实时的,因为任务的时 效性 是取决于 lv_task_handler()函数的调用,而 lv_task_handler()函数一 般放在 main 函数主循环中 进行调用,所以你也要确保 main 函数主循环中不 能有其他过大的延时存在,满足上述要求之 后,对于一般的应用来说,此任务系 统的时效性误差可以忽略不计.使用示例：LVGL基础对象littleVGL是以对象为概念的,而其最核心的基础对象是 lv_obj 控件,其他的所有专用控件(比如按钮,标签,列表等)都是在此 lv_obj 对象的基础上衍生出来的,所有的控件对象都具有一 些共同的属性,如下所示:1) 位置(Position)2) 大小(Size)3) 父类(Parent)4) 是否可拖拽(Drag enable)5) 是否可点击(Click enable)等等创建对象API：设置对象位置API：设置对象大小API：设置对象对齐方式API：Lv_label标签显示文本信息创建文本API：设置文本内容API：设置文本长模式（可以滚动显示）：设置长模式函数必须在设置文本大小函数之前调用
Lv_style样式用来修改创建的对象的样式，其实 lv_style 样式的结构还是挺复杂的,因为它旨在一个结构来囊括所有的控件对象,所 以对于某些控件而言,必定会存在一些冗余而用不到的属性,但 littleVGL 从方便性和实用性 去考虑,做出这点牺牲是完全值得的,一个样式主要是由 body 背景,text 文本,image 图片,line 线条等4部分组成的,然后其中每一部分又由很多属性组成样式拷贝API：样式可选择：Lv_cont容器所谓的容器就是一个载体,用来装东西的,在 littleVGL 中,可以用来存放各种各样的子对象,当子对象的数量越来越多时,子对象们在父容器中的排列方式就显得尤为重要,因此 lv_cont 容器就有一个专门的 Layout 布局属性来约束子对象们的摆放,layout 布局间隙是由样 式来控制的,具体表现在 style.body.padding样式属性上,lv_cont容器除了 layout这个重要特性 外,还有一个Auto fit 大小自动适应的特性.只要弄懂了 Layout 和Auto fit 这俩个概念,lv_cont 容器的使用就特别简单了,所以请务必搞懂,因为后面还有许多复杂一点的控件是由 lv_cont 容器构成的.容器创建API：设置容器布局API：布局方式支持：