LVGL移植和图片显示

最近闲来无事，偶尔刷到了移植LVGL的教程，今天肝完了机械原理又移植完LVGL库，真是收获满满的一天，先接一杯水去。

回来了，发个朋友圈高级一下，好困。

lvgl v8.3移植及组件使用_lvgl界面编辑器-CSDN博客https://blog.csdn.net/weixin_45209978/article/details/127374115?spm=1001.2014.3001.5506LVGL - Light and Versatile Embedded Graphics Libraryhttps://lvgl.io/tools/imageconverter以上的两个网址分别为野火霸天虎移植LVGL的教程，第二个是一个图片转C代码的一个在线网址。

具体步骤大概就是，我总结一下。

获取LVGL源码

先从github获取lvgl的源码

地址：GitHub - lvgl/lvgl: Embedded graphics library to create beautiful UIs for any MCU, MPU and display type.
这里选择v8.3下载

这是压缩包中含有的所有文件，接下来根据个人意愿进行修改。

删掉多余的东西 ， 只保留以下部分。

为什么把其他的删掉，因为它们不包含我们需要的.c和.h文件。

顺便把留下的这五个东西介绍一下。

第一个demos     

跟它的名字一样，存放的是官方的demo，因此实际上我们也是可以删掉的，留下来的原因就是等我们移植完LVGL之后可以调用一下demo看看效果。

第二个examples 

存放的是一些关于示例代码，我们只需要留下里面的porting即可。

然后porting里的文件是三个（一对的.c和.h算一个）。

disp是显示相关的模板，fs是文件管理的模板，indev是输入相关的模板。

因为我的屏幕没有输入，也不需要文件管理，因此对于我来说只需要disp即可，但是其他没用到的最好也别删了，保不齐什么时候就用上了（没事的时候打算整个触摸屏再移植一下LVGL玩玩）。

然后就是src，这个就是核心的文件了，一个都不能少。

lv_conf_tempplate.h 这个文件是配置文件。

lvgl.h这个头文件里面包含了我们常用的其他头文件，因此我们只需要包含这个就等同于包含了其他很多头文件了，比较方便。

然后配置文件的名字我们需要把后面的_template给删掉，变成lv_conf.h。

修改名称的原因就在于LVGL里面源文件中包含的配置文件的名称就是lv_conf.h，

---

把所有的c文件加入到项目中

对的，就是所有。并且需要在

这个页面把所有的文件文件夹位置添加进去，(md,累死我了)。

在添加完所有文件之后就相当于移植进去了LVGL库。

根据实际情况修改   #include "lvgl\lvgl.h"    或者    #include "lvgl.h".

（  看编译器是否能找到文件位置  ）

之后编译，一般有错就是xxx函数未定义，那肯定就是添加c文件的时候落东西了。

直到没有错误，一堆警告为止。（doghead）

---

工程文件修改

这里搬运一下大佬的。

1.启动文件

注意在启动文件中修改堆、栈大小，建议各设置 8kB 空间：（大一些也没关系）

---

2.lvgl

在做这个之前最好先了解一下你的屏幕是怎么驱动的，然后再做下面的工作。

1.先打开 lv_conf.h

• 第27行，根据屏幕颜色数据类型修改
• 第52行，指定lvgl的动态内存可用大小
• 第96行，每英寸的像素，根据自己屏幕尺寸和像素算一下就好
• 第258行，开启style初始化断言

其他的浏览一下即可，用到的时候再去深究。

打开 lv_port_disp_template.h，将开头的 #if 0 条件编译取消 ，把0改成1
打开 lv_port_disp_template.c，将开头的 #if 0 条件编译取消，把0改成1，设置一下屏幕宽和高的像素。

#define MY_DISP_HOR_RES    480
#define MY_DISP_VER_RES    800

---

2.看下面的 void lv_port_disp_init(void)

LVGL缓冲区的图像写入有三种方式

• 第一种：一个缓冲区，默认存10行图像
• 第二种：两个缓冲区，默认每个缓冲区存10行图像
• 第三种：两个缓冲区，每个缓冲区存一整个屏幕的图像

---

这里我们用第二种，把第一种和第三种注释掉即可。

第二种是为存在DMA之类的数据传送机制的硬件设计的，可以把传送缓冲区的内容交给DMA处理，而cpu去执行其他工作（比如渲染），这里我暂时没用DMA，这样的话效果和第一种是一样的。（注：缓冲区大小为屏幕的1/10效果会比较好，这里为了节约一点RAM没有改大小）

也要记得把下面的  &draw_buf_dsc_1  改成  &draw_buf_dsc_2 。

void lv_port_disp_init(void)
{
    /*-------------------------
     * Initialize your display
     * -----------------------*/
    disp_init();

    /*-----------------------------
     * Create a buffer for drawing
     *----------------------------*/

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

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

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

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

    /*-----------------------------------
     * Register the display in LVGL
     *----------------------------------*/

    static 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 = MY_DISP_HOR_RES;
    disp_drv.ver_res = MY_DISP_VER_RES;

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

    /*Set a display buffer*/
    disp_drv.draw_buf = &draw_buf_dsc_2;

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

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

    /*Finally register the driver*/
    lv_disp_drv_register(&disp_drv);
}

---

3.屏幕初始化

/*Initialize your display and the required peripherals.*/
static void disp_init(void)
{
	/*You code here*/
	NT35510_Init ();
}

---

4.刷新缓冲区

/*Flush the content of the internal buffer the specific area on the display
 *You can use DMA or any hardware acceleration to do this operation in the background but
 *'lv_disp_flush_ready()' has to be called when finished.*/
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
    if(disp_flush_enabled) {
			
			uint32_t width = area->x2 - area->x1 + 1;
			uint32_t height = area->y2 - area->y1 + 1;
			NT35510_OpenWindow(area->x1,area->y1,width,height);
			
			NT35510_Write_Cmd ( CMD_SetPixel );	
			for(uint32_t i = 0;i < width * height;i++)
			{
				NT35510_Write_Data ( color_p->full );
				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;
//        for(y = area->y1; y <= area->y2; y++) {
//            for(x = area->x1; x <= area->x2; x++) {
//                /*Put a pixel to the display. For example:*/
//                /*put_px(x, y, *color_p)*/
//                color_p++;
//            }
//        }
    }

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

---

5.接下来修改main函数

int main ( void )
{

  	LED_GPIO_Config();

	NT35510_Init ();  
    TIM7_Configuration();
	DEBUG_USART_Config();
			 
  	lv_init();
	lv_port_disp_init();
	

	
	lv_obj_t* btn = lv_btn_create(lv_scr_act()); 
	lv_obj_set_pos(btn, 100, 100);
	lv_obj_set_size(btn, 120, 50);
	lv_obj_t* label = lv_label_create(btn);
	lv_label_set_text(label, "Button");
	lv_obj_center(label);



//	GTP_Init_Panel();

	while ( 1 )
	{
		lv_timer_handler();
	}
}

---

6.在周期位1s定时器中断里添加函数给lvgl做时钟

void  BASIC_TIM7_IRQHandler (void)
{
  if ( TIM_GetITStatus( BASIC_TIM7, TIM_IT_Update) != RESET )
  {
    lv_tick_inc(1);
    TIM_ClearITPendingBit(BASIC_TIM7, TIM_IT_Update);
  }
}

上述的有些操作调用了其他文件的函数，记得要包含相应函数的头文件，

比如SysTick_Handler()调用了lv_tick_inc()，那么在stm32f4xx_it.c开头要 加上#include “lvgl/lvgl.h”

---

效果如图所示

图片显示

1.首先准备一张英文名字的图片（不能是数字或者字母）

之后在在线转换网站中

---

2.按图所示进行设置之后输入图片，生成C代码

---

3.把C文件加入到工程中

图片文件不能太大，要不然单片机的flash放不下（也许可以放在sd卡中）。

---

4.将以下代码放到main函数中。

	lv_obj_t * bg_top;
	LV_IMG_DECLARE(nahida);
	bg_top = lv_img_create(lv_scr_act());
	lv_img_set_src(bg_top, &nahida );

就可以对图片进行显示。效果如下：