基于LPC55S69学习GUI-Guider软件分享一 ----- lvgl移植

流水源

        GUI Guider是恩智浦推出的一个PC端开发工具，专门用于开发LVGL GUI界面的图形化开发工具。LVGL是一个非常不错的开源gui，一直想试一试的。这次主要分享自己移植lvgl，以及利用GUI Guider开发基于lvgl的界面设计。        GUI Guider早就安装了1.0版本，也试着创建项目看了看，发现目前支持的开发板有点少，而且自己还没有那些板子。就一直想着移植到其他板子上玩玩。这次研究了一下，也参考网上的一些资料，成功移到自己的板子上了。现在来分享一下本次研究过程。
        初始计划是先移植lvgl在自己的板子上无OS运行，然后再移植GUI Guider设计的界面代码，再实现输入设备操作。


本次板子使用的LPC55S69开发板，外带ili9488控制LCD，lcd屏320*480分辨率。lcd驱动已经完成，准备移植lvgl。首先将lvgl代码复制到工程目录下。

然后在lvgl目录下新建lvgl_app和lvgl_port这2个文件夹，lvgl_app主要放设计的应用文件，lvgl_port主要放需要移植的文件。



如下图，将lvgl的example/port目录下移植文件复制到lvgl_port目录下。



参考网上移植方法修改lcd对接lvgl的驱动显示接口文件lv_port_disp_xxxl.c。

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

复制代码

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. //            color_p++;
    
12. //        }
    
13. //    }
    
14.     lcd_fill_buff(area->x1,area->y1,area->x2,area->y2,(uint8_t *)color_p);
    
15.    
    
16.     /* IMPORTANT!!!
    
17.      * Inform the graphics library that you are ready with the flushing*/
    
18.     lv_disp_flush_ready(disp_drv);
    
19. }
    

复制代码

主要是这2个函数内容，暂时不用GPU加速之内。
再就是配置lv_conf.h文件，关于lvgl的一些配置信息。
主函数修改移植如下：主要是定时器SysTick

1. void SysTick_Handler(void)
   
2. {
   
3.     lv_tick_inc(1);
   
4. }
   
5. 
   
6. void lv_example_btn_1(void)
   
7. {
   
8.     lv_obj_t * label;
   
9. 
   
10.     lv_obj_t * btn1 = lv_btn_create(lv_scr_act(),NULL);
    
11.     lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -40);
    
12. 
    
13.     label = lv_label_create(btn1,NULL);
    
14.     lv_label_set_text(label, "Button");
    
15. 
    
16.     lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
    
17.     lv_obj_align(btn2,NULL, LV_ALIGN_CENTER, 0, 40);
    
18. 
    
19.     label = lv_label_create(btn2,NULL);
    
20.     lv_label_set_text(label, "Toggle");
    
21. }
    
22. /*******************************************************************************
    
23. * Code
    
24. ******************************************************************************/
    
25. /*!
    
26. * @brief Main function
    
27. */
    
28. 
    
29. 
    
30. int main(void)
    
31. {
    
32.     char ch;
    
33.         int i;
    
34. 
    
35.     /* Init board hardware. */
    
36.     /* set BOD VBAT level to 1.65V */
    
37.     POWER_SetBodVbatLevel(kPOWER_BodVbatLevel1650mv, kPOWER_BodHystLevel50mv, false);
    
38.     /* attach main clock divide to FLEXCOMM0 (debug console) */
    
39.     CLOCK_AttachClk(BOARD_DEBUG_UART_CLK_ATTACH);
    
40. 
    
41.     BOARD_InitPins();
    
42.     BOARD_InitBootClocks();
    
43.     BOARD_InitDebugConsole();
    
44.     init_cycle_counter(false);
    
45.     PRINTF("hello world.\r\n");
    
46. 
    
47.         lcd_init();
    
48.         lcd_clear(0xf800);
    
49.    
    
50.     lv_init();
    
51. extern void lv_port_disp_init(void);
    
52.     lv_port_disp_init();
    
53.   
    
54.     lv_example_btn_1();
    
55.    
    
56.     while (1)
    
57.     {
    
58.         lv_task_handler();
    
59.     }
    
60. }
    

复制代码

现在基本完成了移植，然后准备编译下载看看效果。这里要特别注意：需要配置堆栈大小。我就是在这里遇到坑了。按上面移植之后一直显示不正常，而且程序跑飞了。
后面参考网上移植的说要配置堆栈至少0x800大小，然后我就去找堆栈配置看看。在这里一般堆栈是在汇编*.s文件中，结果发现汇编文件中没有堆栈配置，最后找到KEIL的配置下修改了堆栈大小。


最后重新编译下载，终于成功显示。


效果如下




移植过程写的比较简单，具体参考如下代码：
lpc55s69_lcd.rar (7.21 MB, 下载次数: 32)

2021-7-5 21:49 上传

点击文件名下载附件

阅读全文

ghost110

其实我一直很奇怪，这么多代码，咋记住的呢

陌路夕颜

熟能生巧

流水源

ghost110 发表于 2021-7-6 08:50
其实我一直很奇怪，这么多代码，咋记住的呢

工程师的利器：ctrl+c,ctrl+v

zhangt0713

很强！威武！多多分享

sumoon_yao

膜拜大佬!

eefocus_3709838

大佬威武！

wudianjun2001

LVGL不错

NXP管管

流水源 发表于 2021-7-6 08:53
工程师的利器：ctrl+c,ctrl+v

真实

lospring

谢谢分享