LittleVGL v7.5.0在STM32F103x上的移植

时间:2024-03-25 20:40:37

LittlevGL是一个免费的开源图形库,提供了创建嵌入式GUI所需的一切,具有易于使用的图形元素、漂亮的视觉效果和低内存占用。

最低要求:

Name Minimal Recommended
Architecture 16, 32 or 64 bit microcontroller or processor
Clock > 16 MHz > 48 MHz
Flash/ROM > 64 kB > 180 kB
Static RAM > 2 kB > 4 kB
Stack > 2 kB > 8 kB
Heap > 2 kB > 8 kB
Display buffer > 1 × hor. res. pixels > 10 × hor. res. pixels
Compiler C99 or newer

查了不少资料,百度上很多lvgl的教程和示例都是v6版本的。。。然鹅官方已经更新到v7.6.0

LittleVGL v7.5.0在STM32F103x上的移植

其实刚开始心里也挺忐忑的,之前只是知道LittleVGL是非常优秀的开源项目,用这个做的demo也看过一些,确实不错!但是自己却是没有使用过。前段时间在做一个东西的时候刚好有机会上lvgl,最初的时候是担心单片机资源不够或者卡顿,后面发现能找到的资料都是v6版本的(:

lvgl v6和v7还是有不少的差别,今天抽空记一下,也希望少点人踩到坑吧。之前移植的时候心里还是有点小忐忑,没敢下最新的7.6版本,down了7.5的

v7的PDF文档 :https://docs.lvgl.io/v7/en/html/_downloads/39cea4971f327964c804e4e6bc96bfb4/LVGL.pdf

在线文档:https://docs.lvgl.io/v7/en/html/

第一步:

获取LittleVGL v7.5.0源码 https://github.com/lvgl/lvgl/tree/v7.5.0

获取官方的demo和各控件的样例 https://github.com/lvgl/lv_examples/tree/v7.5.0

获取模拟器 https://github.com/lvgl?q=sim&type=&language=

(模拟器还是自己选吧。。。)

LittleVGL v7.5.0在STM32F103x上的移植

第二步:将第一步获取到的LittleVGL v7.5.0源码解压,并将解压后的文件夹重命名为lvgl,然后进入这个文件夹中。

lvgl的很多配置(屏幕大小、色深、内存、字体等等)都在lv_conf_template.h文件中进行

LittleVGL v7.5.0在STM32F103x上的移植

将lv_conf_template.h文件重命名为lv_conf.h并打开。首先,修改宏,使当前文件生效:

LittleVGL v7.5.0在STM32F103x上的移植

接着是下面几个需要重点照顾的家伙:

LittleVGL v7.5.0在STM32F103x上的移植

LittleVGL v7.5.0在STM32F103x上的移植

LV_MEM_SIZE用于设置分配给lvgl使用的内存大小。刚开始移植的时候我设置的是16K大小,跑的是一个btn的demo,比较简单,页面正常显示。后来跑lv_demo_widgets()例程的时候屏幕直接没显示,开始的时候怀疑是不是哪个地方没有适配好,后来直接copy移植的工程到模拟器上,发现是可以正常运行的。最后查了半天加大内存之后才正常。所以,对于内存这一块,如果页面比较复杂的需要多分配内存给lvgl,其他情况的话如果单片机的资源有富余的话可以多分配一些,资源紧张的就自己扣着用吧。

LittleVGL v7.5.0在STM32F103x上的移植

STM32F103x这种没有GPU的芯片,在lv_conf.h中将GPU关掉,我没有移植文件系统,因此也关掉LV_USE_FILESYSTEM

对于lv_conf.h文件来说,里面的宏控制了很多东西,相关注释也写得很明了,根据自己的需要配置即可

第三步,使能一个定时器为lvgl提供心跳。我用的systick,周期1ms

LittleVGL v7.5.0在STM32F103x上的移植

第四步:新建一个名为lvgl_dev的文件夹,这个文件夹与lvgl文件夹同级。复制lvgl/examples/porting/lv_port_disp_template.c、lvgl/examples/porting/lv_port_disp_template.h、lvgl/examples/porting/lv_port_indev_template.c和lvgl/examples/porting/lv_port_indev_template.h文件到lvgl_dev文件夹中,并将这几个文件文件名中的_template删除

注意:上述这四个文件中均需要将#if 0设置为1

先来聊聊lv_port_disp.c文件。这个文件用于lvgl更新屏幕,实际上需要修改的文件也不多。如果在调用lv_init();之前就已经初始化过显示屏(例如ili9431),那么直接忽视disp_init()即可。重点是disp_flush函数

LittleVGL v7.5.0在STM32F103x上的移植

我们只需要将自己的刷屏函数提供到红框的区域即可,最后的lv_disp_flush_ready(disp_drv);保留即可,不要去动它!!!

现在我们添加lv_examples-7.5.0/src/lv_ex_widgets/lv_ex_btn/lv_ex_btn_1.c的demo到工程中编译一下,可以看到屏幕上已经能正确显示:

LittleVGL v7.5.0在STM32F103x上的移植

接着,继续移植触摸(lv_port_indev.c)

文件中列出了很多输入设备(touchpad、mouse、keypad、encode、button),我用的电阻触摸屏,所以只保留Touchpad相关的函数,其他的一律注释掉,简单粗暴:

LittleVGL v7.5.0在STM32F103x上的移植

接下来就是这两个小东西。重点是touchpad_read函数。lvgl会通过这个函数去获知输入的坐标:

LittleVGL v7.5.0在STM32F103x上的移植

到这里,显示和输入的驱动都已经移植完毕。接下来编译lv_examples-7.5.0/src/lv_demo_widgets/lv_demo_widgets.c样例运行一下看看效果。我将lv_conf.h中的LV_DPI调小了一些,设置到了60,否则界面就直接卡死了

LittleVGL v7.5.0在STM32F103x上的移植

咳,挺好的demo,转成gif就成了马赛克画质。。。

最后注意一下lvgl的初始化的顺序即可,lv_init()一定要在前面

LittleVGL v7.5.0在STM32F103x上的移植

捋一下主要的移植思路:

1、在lv_conf.h中配置屏幕的大小以及相关的参数

2、使能一个定时器为lvgl提供心跳

3、显示驱动,拷贝lv_port_disp_template.c,并实现disp_flush函数

4、触摸驱动,拷贝lv_port_indev_template.c,并实现touchpad_read函数

总的来说LittleVGL v7的移植还是挺简单的,要修改的部分并不多。不过在实际使用的过程中v7版的函数较v6版的而言变动还是挺明显的。最直观的一个就是文件的目录结构不一样了。在应用上面对于像咱这种初次接触的人来说还是稍微有那么点难度的,毕竟网上能找到的资料和教程都是v6的。v7应用上的话建议多参看 https://github.com/lvgl/lv_examples/tree/v7.5.0 中lv_ex_widgets的例子和lv_demo_xxxx这些demo,另一个资料就是v7的PDF文档。v6/v7具体的一些差别写在下一篇吧