RISC-V MCU应用方案之Little VGL(LVGL)移植（二）

一、下载需要的移植库及开发环境

1. 下载LVGL主代码+Demo代码，防止GitHub地址更换，请直接访问LVGL官网地址：LVGL官网直通GitHub。我们需要下载LVGL移植库与demo例程两个文件。点击GitHub小黑猫图标来到右上方页面，点击master选择release/v7版本。点击左上方蓝色lvgl，进入到左下方页面，下拉找到lv_demos，进入下载release/v7版本。（暂没有试过其他版本，读者可自行尝试，两个文件版本号要保持一致）

2. LVGL为了保持移植的通用性，仅通过一个快速描点函数与单片机连接，下图简单绘制了单片机与LVGL图形库之间的位置关系。这个快速描点函数是TFT LCD显示屏驱动的一部分，可以找厂家直接索要，本着不重复造轮子的原则，我们把沁恒微电子LCD例程作为移植基础。

3. 下载Mountain River编译器，下载CH32V307 VCT6参考应用例程点我下载历程，并双击打开。

4. 在计算机文件目录打开LCD工程

新建文件夹GUI，GUI\lvgl,GUI\lvgl_app。将下载好的lvgl-release-v7文件解压，所有文件移动到GUI\lvgl。将下载好的lvgl-demo-release-v7文件解压，所有文件移动到GUI\lvgl_app。将GUI\lvgl_app\lv_examples内的lv_ex_conf_template.h文件更名lv_ex_conf.h，将GUI\lvgl内的lv_conf_template.h文件更名lv_conf.h，更名后的两个文件复制到GUI目录下。

5. GUI\lvgl\examples\porting下的文件更名操作，去掉_template。

6. 将lv_ex_conf.h，lv_ex_conf.h这两个文件打开，开启宏定义。

7. 我们可以对lvgl进行一些定制配置，这些配置内容在lv_conf.h文件中，下面进行一些关键配置：

显示器宽度： #define LV_HOR_RES_MAX (240)
显示器高度： #define LV_VER_RES_MAX (480)
色彩深度： #define LV_COLOR_DEPTH 16
DPI： #define LV_DPI 100
提供给lvgl的空间： #define LV_MEM_SIZE (32U * 1024U)
其中调整LV_DPI 可以调整各控件间的紧凑，可根据实际情况进行更改；LV_MEM_SIZE 为lvgl可用空间，资源允许的情况下可以稍微设大些，这个设置过小的话，在跑一些稍微复杂的demo时界面就会刷不出来。lv_conf.h还有很多的配置，可根据实际情况进行配置。
lv_port_disp.c函数配置，开启宏定义，头文件lv_port_disp_template.h变更为lv_port_disp.h，增加led.h头文件。

 1 /**
 2  * @file lv_port_disp_templ.c
 3  *
 4  */
 5 
 6  /*Copy this file as "lv_port_disp.c" and set this value to "1" to enable content*/
 7 #if 1
 8 
 9 /*********************
10  *      INCLUDES
11  *********************/
12 #include "lv_port_disp.h"
13 #include "lcd.h"

lv_port_disp_init函数里主要要选择一种写缓存的方式及设置显示分辨。我们选择第一种写缓存的方式，修改后的函数如：

 1 void lv_port_disp_init(void)
 2 {
 3     /*-------------------------
 4      * Initialize your display
 5      * -----------------------*/
 6     disp_init();
 7 
 8     /*-----------------------------
 9      * Create a buffer for drawing
10      *----------------------------*/
11 
12     /* LVGL requires a buffer where it internally draws the widgets.
13      * Later this buffer will passed your display drivers `flush_cb` to copy its content to your display.
14      * The buffer has to be greater than 1 display row
15      *
16      * There are three buffering configurations:
17      * 1. Create ONE buffer with some rows:
18      *      LVGL will draw the display's content here and writes it to your display
19      *
20      * 2. Create TWO buffer with some rows:
21      *      LVGL will draw the display's content to a buffer and writes it your display.
22      *      You should use DMA to write the buffer's content to the display.
23      *      It will enable LVGL to draw the next part of the screen to the other buffer while
24      *      the data is being sent form the first buffer. It makes rendering and flushing parallel.
25      *
26      * 3. Create TWO screen-sized buffer:
27      *      Similar to 2) but the buffer have to be screen sized. When LVGL is ready it will give the
28      *      whole frame to display. This way you only need to change the frame buffer's address instead of
29      *      copying the pixels.
30      * */
31 
32     /* Example for 1) */
33     static lv_disp_buf_t draw_buf_dsc_1;
34     static lv_color_t draw_buf_1[LV_HOR_RES_MAX * 10];                          /*A buffer for 10 rows*/
35     lv_disp_buf_init(&draw_buf_dsc_1, draw_buf_1, NULL, LV_HOR_RES_MAX * 10);   /*Initialize the display buffer*/
36 
37 //    /* Example for 2) */
38 //    static lv_disp_buf_t draw_buf_dsc_2;
39 //    static lv_color_t draw_buf_2_1[LV_HOR_RES_MAX * 10];                        /*A buffer for 10 rows*/
40 //    static lv_color_t draw_buf_2_2[LV_HOR_RES_MAX * 10];                        /*An other buffer for 10 rows*/
41 //    lv_disp_buf_init(&draw_buf_dsc_2, draw_buf_2_1, draw_buf_2_2, LV_HOR_RES_MAX * 10);   /*Initialize the display buffer*/
42 
43 //    /* Example for 3) */
44 //    static lv_disp_buf_t draw_buf_dsc_3;
45 //    static lv_color_t draw_buf_3_1[LV_HOR_RES_MAX * LV_VER_RES_MAX];            /*A screen sized buffer*/
46 //    static lv_color_t draw_buf_3_2[LV_HOR_RES_MAX * LV_VER_RES_MAX];            /*An other screen sized buffer*/
47 //    lv_disp_buf_init(&draw_buf_dsc_3, draw_buf_3_1, draw_buf_3_2, LV_HOR_RES_MAX * LV_VER_RES_MAX);   /*Initialize the display buffer*/
48 
49     /*-----------------------------------
50      * Register the display in LVGL
51      *----------------------------------*/
52 
53     lv_disp_drv_t disp_drv;                         /*Descriptor of a display driver*/
54     lv_disp_drv_init(&disp_drv);                    /*Basic initialization*/
55 
56     /*Set up the functions to access to your display*/
57 
58     /*Set the resolution of the display*/
59     disp_drv.hor_res = 240;
60     disp_drv.ver_res = 400;
61 
62     /*Used to copy the buffer's content to the display*/
63     disp_drv.flush_cb = disp_flush;
64 
65     /*Set a display buffer*/
66     disp_drv.buffer = &draw_buf_dsc_1;
67 
68 #if LV_USE_GPU
69     /*Optionally add functions to access the GPU. (Only in buffered mode, LV_VDB_SIZE != 0)*/
70 
71     /*Blend two color array using opacity*/
72     disp_drv.gpu_blend_cb = gpu_blend;
73 
74     /*Fill a memory array with a color*/
75     disp_drv.gpu_fill_cb = gpu_fill;
76 #endif
77 
78     /*Finally register the driver*/
79     lv_disp_drv_register(&disp_drv);
80 }

disp_flush需要调用底层lcd操作接口，填入快速描点函数LCD_Fast_DrawPoint(x,y,color_p->full)，程序修改为：

 1 static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
 2 {
 3     /*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*/
 4 
 5     int32_t x;
 6     int32_t y;
 7     for(y = area->y1; y <= area->y2; y++) {
 8         for(x = area->x1; x <= area->x2; x++) {
 9             /* Put a pixel to the display. For example: */
10             /* put_px(x, y, *color_p)*/
11             LCD_Fast_DrawPoint(x,y,color_p->full);
12             color_p++;
13         }
14     }
15 
16     /* IMPORTANT!!!
17      * Inform the graphics library that you are ready with the flushing*/
18     lv_disp_flush_ready(disp_drv);
19 }

最后，需要再头文件中声明lv_port_disp_init函数：

1 /**********************
2  * GLOBAL PROTOTYPES
3  **********************/
4 void lv_port_disp_init(void);
5 /**********************
6  *      MACROS
7  **********************/

8. lvgl需要一个心跳节拍，可以使用滴答定时器，或者其他定时器，或者while（1）循环。目的是每隔一段时间进入一边遍 lv_tick_inc（）函数我们这里的配置main.c如下：

1     while(1)
2     {
3         lv_tick_inc(5);
4         lv_task_handler();
5         delay_ms(5);
6     }

选则一个demo运行一下，运行LV_USE_DEMO_WIDGETS =1。想运行哪一个demo，就要使能哪一个为1，同时添加对应头文件路径。

 1 /**
 2  * @file lv_ex_conf.h
 3  * Configuration file for v7.11.0
 4  *
 5  */
 6 /*
 7  * COPY THIS FILE AS lv_ex_conf.h
 8  */
 9 
10 #if 1 /*Set it to "1" to enable the content*/
11 
12 #ifndef LV_EX_CONF_H
13 #define LV_EX_CONF_H
14 
15 
16 /*******************
17  * GENERAL SETTING
18  *******************/
19 #define LV_EX_PRINTF       0       /*Enable printf-ing data in demoes and examples*/
20 #define LV_EX_KEYBOARD     0       /*Add PC keyboard support to some examples (`lv_drivers` repository is required)*/
21 #define LV_EX_MOUSEWHEEL   0       /*Add 'encoder' (mouse wheel) support to some examples (`lv_drivers` repository is required)*/
22 
23 /*********************
24  * DEMO USAGE
25  *********************/
26 
27 /*Show some widget*/
28 #define LV_USE_DEMO_WIDGETS        1
29 #if LV_USE_DEMO_WIDGETS
30 #define LV_DEMO_WIDGETS_SLIDESHOW  0
31 #endif
32 
33 /*Printer demo, optimized for 800x480*/
34 #define LV_USE_DEMO_PRINTER     0
35 
36 /*Demonstrate the usage of encoder and keyboard*/
37 #define LV_USE_DEMO_KEYPAD_AND_ENCODER     0
38 
39 /*Benchmark your system*/
40 #define LV_USE_DEMO_BENCHMARK   0
41 
42 /*Stress test for LVGL*/
43 #define LV_USE_DEMO_STRESS      0
44 
45 /*Music player for LVGL*/
46 #define LV_USE_DEMO_MUSIC      0
47 #if LV_USE_DEMO_MUSIC
48 #define LV_DEMO_MUSIC_AUTO_PLAY 0
49 #endif
50 
51 #endif /*LV_EX_CONF_H*/
52 
53 #endif /*End of "Content enable"*/

9. 右键工程，点击properties，点击右上框include path（-l）右边的绿色+，添加编译路径。需要额外添加的路径为：

 1 GUI
 2 GUI/lvgl
 3 GUI/lvgl_app/lv_examples/src/lv_demo_widgets
 4 GUI/lvgl_app
 5 GUI/lvgl/examples/porting
 6 GUI/lvgl/src/lv_core
 7 GUI/lvgl/src/lv_draw
 8 GUI/lvgl/src/lv_font
 9 GUI/lvgl/src/lv_gpu
10 GUI/lvgl/src/lv_hal
11 GUI/lvgl/src/lv_misc
12 GUI/lvgl/src/lv_themes
13 GUI/lvgl/src/lv_widgets

10. 编译一下，如果提示找不到函数定义之类的错误，可能需要额外添加以下对应的路径。没有路径问题，不出意外，还是出意外了~编译不通过，提示memory问题。CH32V307这块单片机FLASH与RAM有四种配置法则，我们选择[256,64]的组合方式。在工程目录下Ld文件夹中更改link的LENGTH部分。