返回列表 发新帖我要提问本帖赏金: 80.00元(功能说明)

[APM32F4] APM32F411在RT-Thread系统下移植LVGL-8.3

[复制链接]
5162|7
 楼主| luobeihai 发表于 2024-3-4 00:10 | 显示全部楼层 |阅读模式
本帖最后由 luobeihai 于 2024-3-4 00:21 编辑

#申请原创#  @21小跑堂

1. LVGL简单介绍
关于LVGL的介绍,大家可以去它的官方文档查看。下面关于LVGL的介绍均是引用自对官方文档的翻译。

LVGL,全称是 Light and Versatile Graphics Library ,是一款免费开源的轻量多功能图形库。LVGL 提供创建嵌入式 GUI 所需的一切,该 GUI 具有易于使用的图形元素、美观的视觉效果和低内存占用。

主要特性:
  • 强大的构建块,如按钮、图表、列表、滑块、图像等。
  • 具有动画、抗锯齿、不透明度、平滑滚动的高级图形
  • 各种输入设备,如触摸板、鼠标、键盘、编码器等
  • UTF-8 编码的多语言支持
  • 多显示器支持,即同时使用多个TFT、单色显示器
  • 具有类似 CSS 样式的完全可定制的图形元素
  • 独立于硬件:与任何微控制器或显示器一起使用
  • 可扩展:能够使用很少的内存(64 kB 闪存、16 kB RAM)进行操作
  • 支持操作系统、外部存储器和 GPU,但不是必需的
  • 即使具有高级图形效果,也可进行单帧缓冲区操作
  • 用 C 编写以实现最大兼容性(C++ 兼容)
  • 无需嵌入式硬件即可在 PC 上启动嵌入式 GUI 设计的模拟器
  • 绑定到 MicroPython
  • 快速 GUI 设计的教程、示例、主题
  • 文档可在线获取并以 PDF 形式提供
  • 根据 MIT 许可免费且开源

运行的设备要求:

基本上,每个能够驱动显示器的现代控制器都适合运行 LVGL。最低要求是:

  • 16、32 或 64 位微控制器或处理器
  • 建议使用 > 16 MHz 时钟速度
  • 闪存/ROM:> 64 kB 用于非常重要的组件(建议> 180 kB)

    • 内存:
      静态 RAM 使用量:~2 kB,具体取决于所使用的功能和对象类型堆栈:> 2kB(建议> 8 kB)动态数据(堆):> 2 KB(如果使用多个对象,建议> 48 kB)。LV_MEM_SIZE通过在 中设置lv_conf.h。显示缓冲区:> “水平分辨率”像素(建议> 10 “水平分辨率” )MCU 或外部显示控制器中的一个帧缓冲区

  • C99 或更新版本的编译器

2. LVGL学习资源

下面搜集了一些LVGL的学习资源。

1、LVGL官网:
https://lvgl.io/
2、LVGL官网文档教程:
https://docs.lvgl.io/master/
3、百问网对LVGL官方文档的翻译:
https://lvgl.100ask.net/master/
4、LVGL Github仓库:
https://github.com/lvgl/lvgl
5、lvgl基于Visual sudio 的PC模拟器
https://github.com/lvgl/lv_sim_visual_studio
6、百问网基于LVGL的一个项目:
https://forums.100ask.net/t/topic/602

3. 移植前准备

移植的硬件平台:
  • MCU:APM32F411
  • LCD驱动芯片:ST7789V
  • 触摸IC:CST816T

本次移植是基于 RT-Thread 系统上运行 LVGL 的,所以在移植前,我们需要准备好可以正常运行 RT-Thread 的Demo工程(可以到极海官网下载APM32F411的SDK)

另外,还需准备好可以正常运行LCD的驱动和触摸IC的驱动的代码

1、准备一份可以运行RT-Thread的Demo工程
image-20240303210049307.png

2、下载LVGL_8.3源码

到官方 Github 仓库,然后选择 LVGL_8.3 版本。

image-20240303210345477.png

下载到的LVGL源码,然后存放到工程目录下的  middlewares 文件夹。

4. LVGL移植

4.1 移动和修改移植的接口文件

(1)移植接口文件修改

下载了LVGL的源码之后,我们把移植要使用到的接口文件,修改文件名后,放到工程目录的另一个文件夹。

image-20240303213244509.png

(2)移植配置文件修改

在LVGL源码的根目录下有一个 lv_conf_template.h 头文件,这个文件是 LVGL 库的配置文件,可以修改该文件来设置库的基本行为,禁用未使用的模块和功能,调整编译时缓冲区的大小等。

image-20240303213924744.png

上面把LVGL移植接口和配置文件都复制到了工程的下面这个目录:

image-20240303214021847.png


4.2 Keil工程配置
(1)Keil工程添加文件

把LVGL的源码导入到Keil工程下,其中 LVGL 源码目录下的 \src 目录的C文件可以全部导入Keil工程,然后再导入LVGL的移植接口文件。如下图:

image-20240303215230660.png

导入完成之后如下:

image-20240303215722726.png

(2)修改工程头文件路径包含
image-20240303215945614.png

(3)勾选C99模式

LVGL源码的编译需要C99模式的支持,不然会出现大量的报错。

image-20240303220331951.png

4.3 LVGL修改源码
(1)修改 startup_apm32f411.s 文件的栈大小

官方提供的启动文件的栈设置的比较小,我们需要改大一些。

image-20240303224658768.png

(2)修改LVGL的配置文件 lvgl_conf.c
image-20240303225224492.png

然后,下面是LVGL各个模块的配置,可以根据自己的需要是否打开还是关闭。

该文件还有色彩深度的配置,显示屏宽高的配置等,需要根据自己的硬件进行配置,不一一列举了。

(3)修改LVGL显示接口文件lv_port_disp.c
该文件就是LVGL的显示接口文件,需要我们先准备好LCD显示的描点函数。该文件主要要修改的点有:

1、打开显示接口文件宏定义

image-20240303230338161.png

2、修改lv_port_disp_init函数

对于lv_port_disp_init函数,官方提供了3种写缓存的方式及设置显示分辨。我们可以选择其中一种方式即可,修改后的函数如:

  1. void lv_port_disp_init(void)
  2. {
  3.     /*-------------------------
  4.      * Initialize your display
  5.      * -----------------------*/
  6.     disp_init();

  7.     /*-----------------------------
  8.      * Create a buffer for drawing
  9.      *----------------------------*/

  10.     /**
  11.      * LVGL requires a buffer where it internally draws the widgets.
  12.      * Later this buffer will passed to your display driver's `flush_cb` to copy its content to your display.
  13.      * The buffer has to be greater than 1 display row
  14.      *
  15.      * There are 3 buffering configurations:
  16.      * 1. Create ONE buffer:
  17.      *      LVGL will draw the display's content here and writes it to your display
  18.      *
  19.      * 2. Create TWO buffer:
  20.      *      LVGL will draw the display's content to a buffer and writes it your display.
  21.      *      You should use DMA to write the buffer's content to the display.
  22.      *      It will enable LVGL to draw the next part of the screen to the other buffer while
  23.      *      the data is being sent form the first buffer. It makes rendering and flushing parallel.
  24.      *
  25.      * 3. Double buffering
  26.      *      Set 2 screens sized buffers and set disp_drv.full_refresh = 1.
  27.      *      This way LVGL will always provide the whole rendered screen in `flush_cb`
  28.      *      and you only need to change the frame buffer's address.
  29.      */

  30.     /* Example for 1) */
  31.     static lv_disp_draw_buf_t draw_buf_dsc_1;
  32.     static lv_color_t buf_1[MY_DISP_HOR_RES * DISP_BUFFER_LINES];                          /*A buffer for 10 rows*/
  33.     lv_disp_draw_buf_init(&draw_buf_dsc_1, buf_1, NULL, MY_DISP_HOR_RES * DISP_BUFFER_LINES);   /*Initialize the display buffer*/

  34. //    /* Example for 2) */
  35. //    static lv_disp_draw_buf_t draw_buf_dsc_2;
  36. //    static lv_color_t buf_2_1[MY_DISP_HOR_RES * DISP_BUFFER_LINES];                        /*A buffer for 10 rows*/
  37. //    static lv_color_t buf_2_2[MY_DISP_HOR_RES * DISP_BUFFER_LINES];                        /*An other buffer for 10 rows*/
  38. //    lv_disp_draw_buf_init(&draw_buf_dsc_2, buf_2_1, buf_2_2, MY_DISP_HOR_RES * DISP_BUFFER_LINES);   /*Initialize the display buffer*/

  39. //    /* Example for 3) also set disp_drv.full_refresh = 1 below*/
  40. //    static lv_disp_draw_buf_t draw_buf_dsc_3;
  41. //    static lv_color_t buf_3_1[MY_DISP_HOR_RES * MY_DISP_VER_RES];            /*A screen sized buffer*/
  42. //    static lv_color_t buf_3_2[MY_DISP_HOR_RES * MY_DISP_VER_RES];            /*Another screen sized buffer*/
  43. //    lv_disp_draw_buf_init(&draw_buf_dsc_3, buf_3_1, buf_3_2,
  44. //                          MY_DISP_VER_RES * MY_DISP_VER_RES);   /*Initialize the display buffer*/

  45.     /*-----------------------------------
  46.      * Register the display in LVGL
  47.      *----------------------------------*/

  48.     static lv_disp_drv_t disp_drv;                         /*Descriptor of a display driver*/
  49.     lv_disp_drv_init(&disp_drv);                    /*Basic initialization*/

  50.     /*Set up the functions to access to your display*/

  51.     /*Set the resolution of the display*/
  52.     disp_drv.hor_res = MY_DISP_HOR_RES;
  53.     disp_drv.ver_res = MY_DISP_VER_RES;

  54.     /*Used to copy the buffer's content to the display*/
  55.     disp_drv.flush_cb = disp_flush;

  56.     /*Set a display buffer*/
  57.     disp_drv.draw_buf = &draw_buf_dsc_1;

  58.     /*Required for Example 3)*/
  59.     //disp_drv.full_refresh = 1;

  60.     /* Fill a memory array with a color if you have GPU.
  61.      * Note that, in lv_conf.h you can enable GPUs that has built-in support in LVGL.
  62.      * But if you have a different GPU you can use with this callback.*/
  63.     //disp_drv.gpu_fill_cb = gpu_fill;

  64.     /*Finally register the driver*/
  65.     lv_disp_drv_register(&disp_drv);
  66. }

3、修改disp_flush函数

该函数就是调用底层LCD描点函数进行绘制UI界面的。

  1. // LCD描点函数
  2. void LCD_Color_Fill(u16 sx, u16 sy, u16 ex, u16 ey, u16 *color)
  3. {
  4.     u16 i, j;
  5.     u16 height, width;

  6.     width = ex - sx + 1;
  7.     height = ey - sy + 1;
  8.    
  9.     LCD_Address_Set(sx,sy+OFFSET_Y,ex,ey+OFFSET_Y);
  10.    
  11.     for (i = 0; i < height; i++)
  12.     {
  13.         for (j = 0; j < width; j++)
  14.         {
  15.             LCD_WR_DATA(color[i * width + j]);
  16.         }
  17.     }
  18. }

  19. static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
  20. {
  21.     // 调用底层LCD描点函数
  22.     LCD_Color_Fill(area->x1, area->y1, area->x2, area->y2, (uint16_t *)color_p);

  23.     /*IMPORTANT!!!
  24.      *Inform the graphics library that you are ready with the flushing*/
  25.     lv_disp_flush_ready(disp_drv);
  26. }

4.4 添加和修改RT-Thread环境的LVGL文件支持
我们需要把LVGL运行在RT-Thread系统,所以我们需要添加LVGL的RT-Thread接口文件。官方其实已经做好了对应的文件,我们复制到工程目录下修改即可。

(1)添加LVGL的RT-Thread接口文件到Keil工程
image-20240303231605205.png

然后把这两个文件加入到Keil工程目录下:

image-20240303231712483.png
(2)修改lv_rt_thread_conf.h头文件

因为官方已经做好了RT-Thread接口文件了,我们只需要简单修改即可。修改如下:

image-20240303232048269.png

4.5 添加LVGL Demo例程
前面的移植和修改代码已经完成了LVGL的移植工程,下面我们添加一个简单的 LVGLDemo 例程进行测试。

我们可以在官方的源码目录 .\demos 目录下选一个示例程序,或者也可以自己找一个其他的简单的LVGL示例代码。我下面选一个日历demo例程进行演示。

image-20240303233011998.png

最后编译工程源码和下载到APM32F411中。

image-20240303233048431.png

编译会有一些警告,这是LVGL源码引入的,有些语**有警告,可以暂时忽略。

在APM32F411运行结果如下:

image-20240303233434090.png

5. 给LVGL添加触摸接口

前面的移植已经把显示接口给完成了,而且上面也可以正常显示了。但是LVGL的输入接口还没移植进来,不过有了前面的移植过程,添加触摸输入接口就很简单了。主要就是修改 lv_port_indev.c 文件。

(1)把  lv_port_indev.c 文件的宏定义改为1
image-20240303233903359.png

(2)修改 touchpad_is_pressed 和 touchpad_get_xy 函数
  1. /*Return true is the touchpad is pressed*/
  2. static bool touchpad_is_pressed(void)
  3. {
  4.     /*Your code comes here*/
  5.     uint8_t num = cst816t_get_touch_points_num(); // 是否有触摸点
  6.    
  7.     if ((num != 0) && (num != 0xFF))
  8.     {
  9.         return true;
  10.     }
  11.     else
  12.     {
  13.         return false;
  14.     }
  15. }

  16. /*Get the x and y coordinates if the touchpad is pressed*/
  17. static void touchpad_get_xy(lv_coord_t * x, lv_coord_t * y)
  18. {
  19.     /*Your code comes here*/
  20. //    uint16_t tp_x = 0, tp_y = 0;
  21.     cst816t_read_pos((uint16_t *)x, (uint16_t *)y);  // 底层获取触摸坐标函数
  22. //    (*x) = tp_x;
  23. //    (*y) = tp_y;
  24. }

cst816t_read_pos 函数是要我们先写好的获取触摸坐标的函数。另外还有一些没用到的代码我给注释掉了。

增加完上述代码就可以发现在屏幕可以点击进行修改日期了,说明触摸接口移植完成。

最后,APM32F411在RT-Thread系统下移植LVGL工程就全部完成了。整个过程还是比较简单的,而且网上也有很多相关的教程。不过移植过程中还是碰到不是小问题的,有些细节并没有在文章中一一写出来,在移植过程中遇到一些问题就需要我们根据报错提示对应解决就好。另外,在移植前最重要的就是要保证LCD驱动和触摸驱动代码正确,然后再进行移植,这样出现问题我们比较好分析和定位问题。

下面附件是工程源码,上传给大家以供参考。其中后缀名是 .7z ,需要把上传的 zip 后缀修改为 .7z ,而且是分卷压缩的。 TinyWatch.003.zip (9.94 MB, 下载次数: 30)
TinyWatch.002.zip (10 MB, 下载次数: 99)
TinyWatch.001.zip (10 MB, 下载次数: 89)


打赏榜单

21小跑堂 打赏了 80.00 元 2024-03-07
理由:恭喜通过原创审核!期待您更多的原创作品~可升级为蓝v达人获得更高的奖励https://bbs.21ic.com/qplugin.php?id=vda

评论

一篇较为完整的在RT-Thread系统下将LVGL移植到APM32F411的文章,移植过程详细清晰,实现效果较好。  发表于 2024-3-7 13:49
kai迪皮 发表于 2024-3-4 10:37 | 显示全部楼层
学到了
bbstr1 发表于 2024-3-4 17:40 | 显示全部楼层
rt-thread 原生有lvgl的支持包,通过env下载就好. bsp做一个驱动层.

评论

是的,但是我做这个项目不想要它的组件,只想要RT-Thread的内核。所以我只用了Nano版本的RTT  发表于 2024-3-5 18:12
huquanz711 发表于 2024-3-5 19:36 来自手机 | 显示全部楼层
感谢分享,LVGL现在挺火的。
trucyw 发表于 2024-6-30 17:10 | 显示全部楼层
请教下怎么解压一直提示 无法作为压缩包打开文件
trucyw 发表于 2024-6-30 17:14 | 显示全部楼层
trucyw 发表于 2024-6-30 17:10
请教下怎么解压一直提示 无法作为压缩包打开文件

可以正常解压缩了
您需要登录后才可以回帖 登录 | 注册

本版积分规则

23

主题

101

帖子

4

粉丝
快速回复 在线客服 返回列表 返回顶部