EEPW论坛

【前言】

星火一号，提供了RTT的LVGL的移植例程，在他的基础之上使用LVGL进行图形界面的开发，可以缩短开发时间，但是如果想实现图形界面开发还需要一个良好的lvgl图形化的开发工具，这里我选择Gui_Guider这一个免费的开发工具。

【开发前的工程分析】

工程模版我使用了星火一号的RTT的lvgl模版工程。

_

先择好模块工程之后，下载到开发板，是可以正常运行的。在使用这工程，得先分析一下他的工程结构。模块工程他运行的是LVGL的demo工程。他的工程结构在mdk中是有一个lvgl-demo的。

在它的lvgl-port分组中有一个lv_thread_prot.c中创建了一个lvgl_thread_init的任务创建，并使用INIT_ENV_EXPORT在初始化。其代码如下：

static void lvgl_thread_entry(void *parameter)
{
#if LV_USE_LOG
    lv_log_register_print_cb(lv_rt_log);
#endif /* LV_USE_LOG */
    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();
    //lv_user_gui_init();
		lv_ui  guider_ui;                     // 声明 界面对象
		setup_ui(&guider_ui);           // 初始化 UI
		events_init(&guider_ui);       // 初始化 事件
    /* handle the tasks of LVGL */
    while(1)
    {
        lv_task_handler();
        rt_thread_mdelay(LV_DISP_DEF_REFR_PERIOD);
    }
}

static int lvgl_thread_init(void)
{
    rt_err_t err;

    err = rt_thread_init(&lvgl_thread, "LVGL", lvgl_thread_entry, RT_NULL,
           &lvgl_thread_stack[0], sizeof(lvgl_thread_stack), PKG_LVGL_THREAD_PRIO, 0);
    if(err != RT_EOK)
    {
        LOG_E("Failed to create LVGL thread");
        return -1;
    }
    rt_thread_startup(&lvgl_thread);

    return 0;
}
INIT_ENV_EXPORT(lvgl_thread_init);

那么如果我们需要使用自己的图形界面，那么就需要在这个任务中启用自己的GUI图形界面的初始化代码。

【GUI图形化测试】

打开Gui_Guider,创建一个简单的图形界面

1、新建工程，基于v8来创建

2、选择自定义模版：

3、选择空白模版：

4、填写工程名字、工程路径、色彩深度选择16bit、自定义宽高为240*240,然后点击创建，生成工程。

5、在屏幕上简单添加两个标签：

6、在工具栏上点击生成C代码。

6、查看工程文件夹，生成了代码如下图所示，我们需要用到的文件为custom、generated两个文件夹内的东西。

【代码移植】

1、打开工程模版，将上述的两个文件夹拷贝到\projects\06_demo_lvgl\applications\lvgl\gui文件夹下：

2、打开工程后，向工程分组中添加LVGL-gui分组，并把custom、generated两个文件下面的以及子目录下面的全部.c文件添加进工程：

3、添加工程头文件到工程中.\applications\lvgl\gui\custom、.\applications\lvgl\gui\generated、

.\applications\lvgl\gui\generated\guider_customer_fonts。当然如果有图片资源还需要对应添加文件目录。

4、在lv_rt_thread_port.c中添加头文件的引用：

#include "gui_guider.h"
#include "events_init.h"          // Gui Guider 生成的初始化事件、回调函数

在lvgl_thead_entry中添加lv_gui的对象声明，以及初始化UI，初始化事件的代码：

		lv_ui  guider_ui;                     // 声明 界面对象
		setup_ui(&guider_ui);           // 初始化 UI
		events_init(&guider_ui);       // 初始化 事件

到此整个工程就移植完毕。

【移植效果】

下载到开发板后，效果如下图所示：

以后如果工程修改了，只需要复制这两个文件夹到项目，再重新编译就行了。

【总结】

Gui_Guider提供了免费的Lvgl界面设计工程，是一款非常好的工具。同时移植也非常简单。

【感谢】

在这篇文章中我学习了如下帖子，感谢他的教程：【快速入门 LVGL】-- 5、Gui Guider界面移植到STM32工程_gui guider stm32-CSDN博客

https://blog.csdn.net/qq_49053936/article/details/137834282