前言

由于近期要做一个装置 ,想着把装置做的好看一点,就打算使用 GUI 来做一个信息的相关显示,之前听说过一款比较轻量级的图形库,也就是 lvgl,手头又正好有一块搭配屏幕的野火指南者开发板,单片机型号是 STM32F103VET6,Flash 为 512KB,RAM 为 64KB,屏幕为 3.2 寸电阻触摸屏,我们在来看一下运行 lvgl 这个 GUI 需要的资源,所需资源如下图所示:

野火指南者开发板移植 lvgl 库_初始化

几个比较关键的就是控制器的主频需要大于 16 MHz,对于 STM32F103来说,主频可以达到 72MHz,满足要求,所需要的 Flash 要大于 64KB,对于指南者这款开发板来将,他的主控是 STM32F103VET6,Flash 具有 512KB,远远满足要求。对于 RAM 来讲,lvgl 所需要的 RAM 是 8KB,推荐使用 24 KB,对于具有 64KB的 STM32F103VET6 来讲,是完全满足要求的。

综上,可以知道,使用野火指南者开发板来跑 lvgl 是完全没有问题的。

移植准备

为了更加快捷的完成移植,在这里就直接使用野火官方写好的液晶屏幕的驱动来进行 lvgl 的移植,首先找到野火配套例程中的第 30 号例程,也就是电阻触摸屏–触摸画板这个例程,将这个例程拷贝出来,在这个基础上进行移植。

野火指南者开发板移植 lvgl 库_触摸屏_02

拷贝出来之后,进入到工程目录里,工程目录结构如下图所示:

野火指南者开发板移植 lvgl 库_嵌入式_03

紧接着,我们进到 lvgl 的 github 仓库,选择已经发布的 v7.6.1 版本进行移植,

野火指南者开发板移植 lvgl 库_#endif_04

我们将代码下载下来,放到 Libraries 里面,如下图所示:

野火指南者开发板移植 lvgl 库_#endif_05

至此,我们就完成了移植前的准备工作,接下来进行移植代码。

导入 lvgl 库到 keil 工程中

首先在 keil 工程中新建 lvgl Groups 组,然后将 ​​lvgl/src/lv_core​​​ ​​lvgl/src/lv_draw​​​ ​​lvgl/src/lv_font​​​ ​​lvgl/src/lv_hal​​​ ​​lvgl/src/lv_misc​​​ ​​lvgl/src/lv_themes​​​ ​​lvgl/src/lv_widgets​​ 路径下的文件加入到新建的组中, 如下图所示:

野火指南者开发板移植 lvgl 库_嵌入式_06

紧接着,我们来看一下 lvgl 官网中的文档对于 lvgl 运行的要求:

野火指南者开发板移植 lvgl 库_#endif_07

从序号 1 ,可以看出,栈空间需要大于 2KB 的空间,推荐大于 8 KB,我们这里设置栈空间为 8KB,也就是将如下所示位置的值改为 ​​0x00002000​

野火指南者开发板移植 lvgl 库_触摸屏_08

从序号 2 可以知道,它需要 C99 或者更新的编译器,我们这里选择 C99 进行编译,

野火指南者开发板移植 lvgl 库_嵌入式_09

修改 lv_conf.h 配置文件

接下来,需要修改 lv_conf.h 这个文件,这个文件需要修改的地方有好几个,分别是如下几个地方:


  • 首先先将田间编译宏更改为 ​​#if 1​
  • 修改屏幕的分辨率,由于当前所用的野火指南者所搭配的是分辨率为 320 * 240 的,因此需要将 ​​LV_HOR_RES_MAX​​更改为 ​​240​​以及将 ​​LV_VER_RES_MAX​​ 更改为 ​​320​​ ,如下图所示:

野火指南者开发板移植 lvgl 库_触摸屏_10


  • 修改 ​​LV_COLOR_DEPTH​​,此值 1 是用于单色屏,当前我们的是彩色屏,应该设置为 16
  • 修改​​LV_DPI​​ 的值,默认值为 130,我们把他设置到 60,这个宏是用来调节界面缩放比例的,此值越大,控件分布的就越散,控件自身的间隔也会变大 ,如下图所示:

野火指南者开发板移植 lvgl 库_嵌入式_11


  • 配置 lvgl 运行的动态堆的大小,再官方给出的堆的要求中,对于堆的要求是这样的:
  • 野火指南者开发板移植 lvgl 库_#endif_12

推荐使用大于 16KB 的堆内存,因此这里配置的是 20KB,也就是将​​LV_MEM_SIZE​​​ 设置为 20KB,也就是将 ​​LV_MEM_SIZE​​​ 的值设置为 ​​20U * 1024U​


  • 因为当前开发板没有使用到 GPU 和文件系统,所以将 GPU 和文件系统的宏定义设置为 0,如下所示:
  • 野火指南者开发板移植 lvgl 库_嵌入式_13

至此,lvgl 的文件就修改完毕了。接下来,就需要提供 lvgl 运行的心跳节拍

lvgl 心跳节拍设置

这里采取的一个方案是通过定时器来为 lvgl 来提供心跳节拍,更为直观的叙述也就是通过定时器产生 1ms 的定时中断,然后在中断服务函数里调用 lvgl 的心跳函数。野火的官方例程李提供了定时中断的代码,我们直接将这部分代码移植过来就好,下面是定时中断服务函数里面的相关内容:

#include "lvgl.h"
void TIM6_IRQHandler(void)
{
if ( TIM_GetITStatus( TIM6, TIM_IT_Update) != RESET )
{
lv_tick_inc(1); //lvgl 的 1ms 心跳
TIM_ClearITPendingBit(TIM6 , TIM_FLAG_Update);
}
}

有柯中断服务函数,那相应的就需要有初始化,下面是主函数的相关代码:

int main(void)
{
//LCD 初始化
ILI9341_Init();

//触摸屏初始化
XPT2046_Init();

BASIC_TIM_Init();

lv_init(); /* lv 系统初始化 */

//其中0、3、5、6 模式适合从左至右显示文字,
//不推荐使用其它模式显示文字 其它模式显示文字会有镜像效果
//其中 6 模式为大部分液晶例程的默认显示方向
ILI9341_GramScan ( 3 );

while ( 1 )
{
lv_task_handler();
}

}

最后,我们需要将 lvgl 的相关头文件路径加入到 keil 的工程路径中去,添加完成之后,就可以编译了,但是使用野火的编写的 LCD 驱动编译之后会出现三个错误,如下图所示:

野火指南者开发板移植 lvgl 库_触摸屏_14

出现该错误的原因是因为 C99 跟内联函数的一些关联,具体的细节不在这里深究了,更改方式是在三个函数前加上 ​​static​​,如下图所示:

野火指南者开发板移植 lvgl 库_触摸屏_15

野火指南者开发板移植 lvgl 库_初始化_16

这样更改之后,整个代码就编译通过了。

移植底层屏幕驱动

接下来就需要完成移植屏幕底层驱动了,对于这部分内容,总的来说分为两部分:


  • 移植底层显示驱动
  • 移植底层触摸驱动

我们将 ​​Libraries\lvgl\examples\porting​​​里面的文件复制到​​Libraries\lvgl_driver​​里面,并重命名为如下几个文件:

野火指南者开发板移植 lvgl 库_嵌入式_17

移植底层显示驱动

移植底层显示驱动只需要更改 ​​lv_port_disp.c​​​和 ​​lv_port_disp.h​​​两个文件,首先是 ​​lv_port_disp.h​​的更改,更改后的文件为:

#if 1

#ifndef LV_PORT_DISP_H
#define LV_PORT_DISP_H

#ifdef __cplusplus
extern "C" {
#endif

#include "lvgl/lvgl.h"

void lv_port_disp_init(void);

#ifdef __cplusplus
} /* extern "C" */
#endif

#endif /*LV_PORT_DISP_TEMPL_H*/

#endif /*Disable/Enable content*/

更改后的​​lv_port_disp.c​​文件为:

野火指南者开发板移植 lvgl 库_初始化_18

第一个是留下一个例子,第二个是更改屏幕的分辨率。第三部分是

野火指南者开发板移植 lvgl 库_触摸屏_19

红色标注部分的函数也就是以单个像素点填充屏幕的函数,这个函数野火写的不满足调用要求,笔者稍微将原来的驱动代码进行了更改,实现了如下所示的单个像素点填充函数:

void ILI9341_DrawPixel(uint16_t usX, uint16_t usY,uint16_t color)
{
if ((usX < LCD_X_LENGTH) && (usY < LCD_Y_LENGTH))
{
ILI9341_SetCursor (usX,usY);

ILI9341_FillColor (1,color);
}
}

这样,就完成了底层屏幕显示驱动的移植。

底层屏幕触摸驱动移植

移植底层屏幕触摸驱动只需要更改 ​​lv_port_indev.c​​​和 ​​lv_port_indev.h​​​两个文件,首先是 ​​lv_port_indev.h​​的更改,更改后的文件为

#if 1

#ifndef LV_PORT_INDEV_H
#define LV_PORT_INDEV_H

#ifdef __cplusplus
extern "C" {
#endif

#include "lvgl/lvgl.h"
void lv_port_indev_init(void);


#ifdef __cplusplus
} /* extern "C" */
#endif

#endif /*LV_PORT_INDEV_TEMPL_H*/

#endif /*Disable/Enable content*/

紧接着就是​​lv_port_indev.c​​的更改,关于这部分代码,lvgl 官方给出了好几个输入设备的函数,触摸屏,鼠标,小键盘,旋钮,按键等输入设备,我们这里所选用的是触摸屏,那么就可以把其他的都删去。下面是几处关键代码:

野火指南者开发板移植 lvgl 库_初始化_20

最后,加入一个简单的示例,GUI 就可以运行起来了,加如的程序如下所示:

static void btn_event_cb(lv_obj_t * btn, lv_event_t event)
{
if(event == LV_EVENT_CLICKED) {
static uint8_t cnt = 0;
cnt++;

/*Get the first child of the button which is the label and change its text*/
lv_obj_t * label = lv_obj_get_child(btn, NULL);
lv_label_set_text_fmt(label, "Button: %d", cnt);
}
}

/**
* Create a button with a label and react on Click event.
*/
void lv_ex_get_started_1(void)
{
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*Add a button the current screen*/
lv_obj_set_pos(btn, 10, 10); /*Set its position*/
lv_obj_set_size(btn, 120, 50); /*Set its size*/
lv_obj_set_event_cb(btn, btn_event_cb); /*Assign a callback to the button*/

lv_obj_t * label = lv_label_create(btn, NULL); /*Add a label to the button*/
lv_label_set_text(label, "Button"); /*Set the labels text*/
}

主函数如下所示:

int main(void)
{
//LCD 初始化
ILI9341_Init();

//触摸屏初始化
XPT2046_Init();

BASIC_TIM_Init();

lv_init(); /* lv 系统初始化 */
lv_port_disp_init(); /* lvgl 显示接口初始化,放在 lv_init()后面 */
lv_port_indev_init(); /* lvgl 输入接口初始化,放在 lv_init() 后面 */

lv_ex_get_started_1();


//其中0、3、5、6 模式适合从左至右显示文字,
//不推荐使用其它模式显示文字 其它模式显示文字会有镜像效果
//其中 6 模式为大部分液晶例程的默认显示方向
ILI9341_GramScan ( 6 );

while ( 1 )
{
lv_task_handler();
}

}

最终的显示效果如下图所示:

野火指南者开发板移植 lvgl 库_触摸屏_21

官方的 github 仓库也有做好的比较完善的 demo 可供参考,下图是 github 上的例程的截图:

野火指南者开发板移植 lvgl 库_初始化_22

参照 README.md 文档就可以顺利跑起来,下图是运行 demo 的动图,效果还是很华丽的。

野火指南者开发板移植 lvgl 库_触摸屏_23

总结

上述就是移植 lvgl 的整个过程,写下来记录一下,移植结束,可以学习如何制作一个精美的界面了,这次的内容就到这里,如果在使用过程中,有新的体会,再进行更文~


欢迎关注笔者的公众号,笔者将不定期更新文章~

野火指南者开发板移植 lvgl 库_#endif_24