想要移植LVGL吗？想用GUIguider来设计GUI界面吗？进来学习吧

流水源

下面开始一步步教你怎么移植LVGL，用GUIguider来设计GUI界面。
以下是通用的移植设计步骤。

首先安装GUI guider，本次使用的是1.5.1版本GUI guider。打开软件，选择创建新工程。


选择V8.3.2版本的LVGL。


选择模拟的。


选择一个模板，这里选了空模板。


设置工程路径，名称。设置lcd屏幕大小和颜色位数，要和你实际需要移植的lcd屏对应。


下面就是新建的工程了，后面就饿可以设置面板控制的。

记得点右上角先生成更新代码。

GUIguider工程先这样了，下面开始基本移植工程。
移植之前你需要已经移植好LCD驱动，LCD能正常显示图片。工程的堆栈要大一些，RAM容量要大。否则会资源不足。

首先将你LCD显示的模板工程复制到GUIguider工程目录中。

这里使用的LPC55S69。

打开keil工程先添加所有LVGL文件内源码。


然后添加lvgl的头文件路径。


然后从GUIguider工程目录lvgl-simulator文件夹下复制lv_conf.h文件到我们要移植的lpc55s69工程内。并添加到keil工程中，到时需要修改配置LVGL功能。



下面就移植对接LCD显示。这时就需要lcd绘图API驱动了。
下面就是参考lvgl-simulator内驱动写法。

1. void ili9341_flush(lv_disp_drv_t * drv, const lv_area_t * area, lv_color_t * color_p)
   
2. {
   
3.     if(area->x2 < 0 || area->y2 < 0 || area->x1 > (GLCD_WIDTH - 1) || area->y1 > (GLCD_HEIGHT - 1)) {
   
4.         lv_disp_flush_ready(drv);
   
5.         return;
   
6.     }
   
7. 
   
8.     /* Truncate the area to the screen */
   
9.     int32_t act_x1 = area->x1 < 0 ? 0 : area->x1;
   
10.     int32_t act_y1 = area->y1 < 0 ? 0 : area->y1;
    
11.     int32_t act_x2 = area->x2 > GLCD_WIDTH - 1  ? GLCD_WIDTH - 1  : area->x2;
    
12.     int32_t act_y2 = area->y2 > GLCD_HEIGHT - 1 ? GLCD_HEIGHT - 1 : area->y2;
    
13.    
    
14.     lcd_draw_bitmap(act_x1,act_y1,1+act_x2-act_x1,1+act_y2-act_y1,(uint8_t *)color_p);
    
15.    
    
16.     lv_disp_flush_ready(drv);
    
17. }
    
18. 
    
19. /**
    
20. * Initialize the Hardware Abstraction Layer (HAL) for the Littlev graphics library
    
21. */
    
22. static void lv_hal_init(void)
    
23. {
    
24.     /*Create a display buffer*/
    
25.     static lv_disp_draw_buf_t disp_buf1;
    
26.     static lv_color_t buf1_1[LV_HOR_RES_MAX * 10];
    
27.     lv_disp_draw_buf_init(&disp_buf1, buf1_1, NULL, LV_HOR_RES_MAX * 10);
    
28. 
    
29.     /*Create a display*/
    
30.     lv_disp_drv_t disp_drv;
    
31.     lv_disp_drv_init(&disp_drv);            /*Basic initialization*/
    
32.     disp_drv.draw_buf = &disp_buf1;
    
33.     disp_drv.flush_cb = ili9341_flush;
    
34.     disp_drv.hor_res = LV_HOR_RES_MAX;
    
35.     disp_drv.ver_res = LV_VER_RES_MAX;
    
36.     lv_disp_drv_register(&disp_drv);
    
37. 
    
38.     /* Add the mouse as input device
    
39.      * Use the 'mouse' driver which reads the PC's mouse*/
    
40. //    mouse_init();
    
41. //    lv_indev_drv_t indev_drv;
    
42. //    lv_indev_drv_init(&indev_drv);          /*Basic initialization*/
    
43. //    indev_drv.type = LV_INDEV_TYPE_POINTER;
    
44. //    indev_drv.read_cb = mouse_read;         /*This function will be called periodically (by the library) to get the mouse position and state*/
    
45. //    lv_indev_t * mouse_indev = lv_indev_drv_register(&indev_drv);
    
46. //   
    
47. }

复制代码

下面就是main初始化lvgl了。
main.c添加头文件：
    #include "lvgl.h"

先初始化lcd，再初始化lvgl-》lv_init()。再就是lcd对接到lvgl初始化lv_hal_init();

1.     lcd_init();
   
2.     lcd_fill(0,0,GLCD_WIDTH-1,GLCD_HEIGHT-1,GLCD_COLOR_RED);
   
3.     Delay_ms(500);
   
4.     lcd_fill(0,0,GLCD_WIDTH-1,GLCD_HEIGHT-1,GLCD_COLOR_GREEN);
   
5.     Delay_ms(500);
   
6.     lcd_fill(0,0,GLCD_WIDTH-1,GLCD_HEIGHT-1,GLCD_COLOR_BLUE);
   
7.     Delay_ms(500);
   
8.    
   
9.     printf("hello world.\r\n");
   
10.    
    
11.     lv_init();
    
12.     lv_hal_init();

复制代码

main主循环调用

1.     while (1)
   
2.     {
   
3.         lv_task_handler();
   
4.     }

复制代码

下面定时1ms调用lv_tick_inc(1);

1. volatile uint32_t time_tick_cnt;
   
2. void SysTick_Handler(void)
   
3. {
   
4.     extern void lv_tick_inc(uint32_t tick_period);
   
5.     lv_tick_inc(1);
   
6.     time_tick_cnt++;
   
7. }

复制代码

好了，到这里lvgl基本移植好了。

下面就是移植GUI guider设计的界面了。
我们先用GUI guider添加几个控件到LCD画面上。类是如下，然后点击右上角GenerateCode，更新代码。


更新代码主要在下面2个文件夹内。
把下面2个文件夹内容代码加到keil工程中，并添加头文件包含路径。





添加头文件：

#include "gui_guider.h"
#include "events_init.h"
#include "custom.h"

在就是在main内定义变量：

lv_ui guider_ui;

初始化：

    setup_ui(&guider_ui);
    events_init(&guider_ui);
    custom_init(&guider_ui);





最后编译keil工程，正常就可以编译通过了。
需要配置lvgl功能，请在lv_conf.h内配置以下。主要内存占用。

阅读全文

sumoon_yao

大佬666666！

NXP管管

这不就一步到位了么

mgn

大佬 666666

TLLED

大佬666666

lospring

666啊，我又可以抄了

eefocus_3937441

大佬，我想问下，这个guider是否可以用来设计单色oled屏呢？

流水源

eefocus_3937441 发表于 2023-8-21 16:35
大佬，我想问下，这个guider是否可以用来设计单色oled屏呢？

用还是可以的，只是没那么方便。在底层移植绘图函数上将颜色转化一下

eefocus_3955839

大佬,这个guider代码移植到杰里的话是怎么弄啊?

andeyqi

收藏一波有时间也搞下玩玩