VScode ESPIDF框架下LVGL移植教程

原创已于 2025-09-02 18:51:00 修改 · 1.5k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #单片机 #嵌入式硬件

于 2024-12-21 23:28:08 首次发布

文章内容简介：

本文针对ESPIDF环境，讲解如何使用ESPIDF的component manager下载最新LVGL源码适配自己的开发板。

做这个之前我见了网上不少LVGL移植方法：
1、自己从GitHub下载LVGL源码放入工程components路径。
2、通过ESPIDF的component manager下载LVGL以及esp_lvgl_port或者lvgl_helper等工具。

但我考虑第二种方式受限制较多，LVGL版本同步慢，且尝试第一种方法出现编译问题等。所以在此推荐一种新方法，使用component manager下载LVGL源码，保持代码最新。

下面讲述移植过程。

一、打开自己的工程，或者找一个样板工程。

我这里使用了官方的hello world工程，提前写好了LCD和触摸的驱动放在了components路径下

二、CTRL+shift+P找到ESP-IDF:欢迎

三、打开Component manager

四、搜索或者首页已经出现lvgl选项，点击install即可。

这里注意，必须先有第一步才可以。

安装完成后左侧工程目录增加idf_component.yml文件，描述了工程的依赖。

这时候点击编译，IDF会把LVGL拷贝到managed_components路径下。注意。这个路径是不可以随意更改的，IDF编译时会检索路径下文件的哈希值，校验不对不会编译。

五、移植显示和触摸驱动

我们在这种情况下对LVGL的移植不能使用平时的方式比如拷贝lv_conf_template.h改名等等。

为了给lvgl配置显示和输入设备驱动，我们要打开你的工程目录下\managed_components\lvgl__lvgl\examples\porting文件夹。复制

lv_port_disp_template.c
lv_port_disp_template.h
lv_port_indev_template.c
lv_port_indev_template.h

到components路径下新建一个文件夹，我这里使用LVGL。在这里就可以修改文件名了。

六、修改components下的CMakeList.txt

这里需要根据自己的文件夹来填写，我的路径对于的CMakeList.txt如下

像这样把文件夹路径写进去就行了。

七、修改lv_port_xxxxx.c.h文件。

修改刚刚复制过来的.c.h文件与自己的硬件进行适配。

以lv_port_indev.h为例，这里默认的#include "lvgl.h"会报错。我们需要修改成

#include "../../managed_components/lvgl__lvgl/lvgl.h"

同理，在其他文件，比如main.c或者自己的功能实现文件里要使用lvgl时，都需要使用这样的路径进行包含。


/**
 * @file lv_port_indev_templ.h
 *
 */

/*Copy this file as "lv_port_indev.h" and set this value to "1" to enable content*/
#if 1

#ifndef LV_PORT_INDEV_TEMPL_H
#define LV_PORT_INDEV_TEMPL_H

#ifdef __cplusplus
extern "C"
{
#endif
#define LV_LVGL_H_INCLUDE_SIMPLE
/*********************
 *      INCLUDES
 *********************/
#include "../../managed_components/lvgl__lvgl/lvgl.h"

    /*********************
     *      DEFINES
     *********************/

    /**********************
     *      TYPEDEFS
     **********************/

    /**********************
     * GLOBAL PROTOTYPES
     **********************/
    void lv_port_indev_init(void);

八、为LVGL创建定时器和基本演示

#include <stdio.h>
#include <inttypes.h>
#include "sdkconfig.h"
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_chip_info.h"
#include "esp_flash.h"
#include "nvs_flash.h"
#include "esp_system.h"
#include "IIC.h"
#include "lcd.h"
#include "cst328.h"
#include "spi.h"
#include "esptim.h"
#include "../managed_components/lvgl__lvgl/lvgl.h"
#include "lv_port_disp.h"
#include "lv_port_indev.h"


TaskHandle_t LV_DEMOTask_Handler; /* 任务句柄 */


void lvgl_demo(void)
{
    // 创建一些内容
    lv_obj_t *label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Hello world!");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
    printf("label created\n");

    // 创建一个进度条
    lv_obj_t *bar = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar, 200, 20);
    lv_obj_align(bar, LV_ALIGN_CENTER, 0, 50);
    lv_bar_set_range(bar, 0, 100);
    lv_bar_set_value(bar, 50, LV_ANIM_ON);
}



void app_main(void)
{
    esp_err_t ret;
    ret = nvs_flash_init();
    if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND)
    {
        ESP_ERROR_CHECK(nvs_flash_erase());
        ret = nvs_flash_init();
    }

    esptim_int_init(1000);
    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    lvgl_demo();

    while (1)
    {
        lv_timer_handler();
        vTaskDelay(pdMS_TO_TICKS(10));
    }
}


void esptim_callback(void *arg); 

void esptim_int_init(uint64_t tps)
{
    esp_timer_handle_t esp_tim_handle; /* 定时器回调函数句柄 */

    /* 定义一个定时器结构体 */
    esp_timer_create_args_t tim_periodic_arg = {
        .callback = &esptim_callback, /* 设置回调函数 */
        .arg = NULL,                  /* 不携带参数 */
    };

    esp_timer_create(&tim_periodic_arg, &esp_tim_handle); /* 创建一个事件 */
    esp_timer_start_periodic(esp_tim_handle, tps);        /* 每周期内触发一次 */
}

void esptim_callback(void *arg)
{
    lv_tick_inc(1);
    // printf("esptim_callback\n");
}

到此，IDF框架下的LVGL移植和测试就已经完成了，各位有其他问题可以留言。

我才不要做一只白嫖怪~~争取输出写有用的东西给社区。