获取更多技术资讯？点击页面右上角【注册】，加入开发者社区吧

本文内容为用户使用APM32系列产品的经验总结，均转载自21ic论坛极海半导体专区，未经原文作者授权禁止转载。

一、前言

本文将详细介绍如何在极海APM32F427高性能MCU上，为ILI9341驱动的SPI接口液晶屏移植并演示流行的开源图形库LVGL v9.4.0。APM32F427凭借其大容量SRAM和高主频，为流畅的GUI体验提供了坚实的硬件基础。

1.1 关于APM32F427

APM32F427拥有448KB的SRAM，这一容量远超普通MCU，为复杂的LCD GUI开发提供了充足的内存空间。其搭载的240MHz主频Cortex®-M4F内核，也为GUI的流畅运行提供了强大的性能保证。

1.2 关于液晶屏模块

APM32F427集成了SPI接口和EMMC-SMC接口，但未包含LTDC，因此适合驱动SPI接口屏和MCU接口屏，不支持RGB屏。

本次移植使用一款240×320分辨率的TFT LCD模块，其驱动芯片为ILI9341，接口为SPI。模块信号连接如下：

LED: 背光使能，常接3.3V
SCK: SPI时钟
MOSI: SPI数据
D/C: 数据/指令选择
RESET: 复位
CS: SPI片选

1.3 关于LVGL

LVGL是一款极为流行的开源GUI库，功能强大，生态丰富，目前最新版本已更新至v9.4.0。

您可以从以下地址获取LVGL的官方源码。若GitHub访问不畅，Gitee镜像是很好的备选：

LVGL官方源码 (GitHub): https://github.com/lvgl/lvgl/tree/master
LVGL国内镜像 (Gitee): https://gitee.com/ganrui_mirrors/lvgl

此外，百问网提供了详尽的LVGL中文开发手册，是学习和开发的重要参考资料：

LVGL中文开发手册: http://lvgl.100ask.net/9.2/#

接下来，我们将以最新版LVGL为例，详细阐述移植过程并运行官方演示例程。

二、点亮SPI接口LCD屏

在移植LVGL之前，首要任务是完成LCD的基础驱动，至少要能实现单个像素的绘制。

2.1 SPI驱动代码

SPI的配置较为常规，可在官方SDK的SPI_FullDuplex例程基础上修改。由于仅需SPI单向发送功能，我们只需配置SCK和MOSI管脚。为了最大化刷屏速度，将SPI分频设置为2，使SPI时钟频率达到最高。

void lcd_spi_init(void)
{
    GPIO_Config_T GPIO_InitStructure;
    SPI_Config_T  SPI1_InitStructure;

    /* Enable related Clock */
    //RCM_EnableAHB1PeriphClock (RCM_AHB1_PERIPH_GPIOB);
    RCM_EnableAPB2PeriphClock(RCM_APB2_PERIPH_SPI1);
    RCM_EnableAPB2PeriphClock(RCM_APB2_PERIPH_SYSCFG);

    /* Config SPI1 PinAF */
    GPIO_ConfigPinAF(LCD_SPI_GPIO, LCD_SPI_SCK_SRC,  GPIO_AF_SPI1);
    GPIO_ConfigPinAF(LCD_SPI_GPIO, LCD_SPI_MOSI_SRC, GPIO_AF_SPI1);

    /* Config SPI1 Pins */
    GPIO_ConfigStructInit(&GPIO_InitStructure);
    GPIO_InitStructure.pin   = LCD_SPI_SCK_PIN | LCD_SPI_MOSI_PIN ;
    GPIO_InitStructure.speed = GPIO_SPEED_100MHz;
    GPIO_InitStructure.mode  = GPIO_MODE_AF;
    GPIO_InitStructure.otype = GPIO_OTYPE_PP;
    GPIO_InitStructure.pupd  = GPIO_PUPD_NOPULL;
    GPIO_Config(LCD_SPI_GPIO, &GPIO_InitStructure);

    /* Config SPI1 */
    SPI_ConfigStructInit(&SPI1_InitStructure);
    SPI1_InitStructure.direction = SPI_DIRECTION_2LINES_FULLDUPLEX;
    SPI1_InitStructure.mode      = SPI_MODE_MASTER;
    SPI1_InitStructure.length    = SPI_DATA_LENGTH_8B;
    SPI1_InitStructure.polarity  = SPI_CLKPOL_HIGH ;
    SPI1_InitStructure.phase     = SPI_CLKPHA_2EDGE;
    SPI1_InitStructure.nss       = SPI_NSS_SOFT;
    SPI1_InitStructure.baudrateDiv = SPI_BAUDRATE_DIV_2;
    SPI1_InitStructure.firstBit      = SPI_FIRSTBIT_MSB;
    SPI1_InitStructure.crcPolynomial = 7;
    SPI_Config(SPI1, &SPI1_InitStructure);
    SPI_DisableCRC(SPI1);
    SPI_DisableSSOutput(SPI1);

    /* Enable SPI  */
    SPI_Enable(SPI1);

    lcd_write_byte(0xff);
}

接着实现SPI字节发送函数：

unsigned char lcd_wr_byte(unsigned char tx_data)
{
    unsigned char rx_data;

    /* SPI1 master send data */
    while (((SPI1->STS & SPI_FLAG_TXBE) != SPI_FLAG_TXBE));
    SPI_I2S_TxData(SPI1, tx_data);

    /* SPI1 Master receive data */
    while (((SPI1->STS & SPI_FLAG_RXBNE) != SPI_FLAG_RXBNE));
    rx_data = SPI_I2S_RxData(SPI1);

    return rx_data;
}

2.2 LCD驱动代码

除了SPI，LCD模块的RST、CS、DC引脚也需要通过GPIO进行控制。结合GPIO和SPI，实现对LCD的指令和数据写入功能。

// 液晶硬复位函数
void lcd_reset(void)
{
    LCD_RST_CLR;
    delay_ms(100);
    LCD_RST_SET;
    delay_ms(50);
}

// 向液晶屏写一个8位指令
void lcd_write_cmd(unsigned char reg)
{
    LCD_CS_CLR;
    LCD_DC_CLR;
    lcd_wr_byte(reg);
    LCD_CS_SET;
}

// 向液晶屏写一个8位数据
void lcd_write_byte(unsigned char data)
{
    LCD_CS_CLR;
    LCD_DC_SET;
    lcd_wr_byte(data);
    LCD_CS_SET;
}

// 向液晶屏写一个16位颜色数据
void lcd_write_colour(unsigned short rgb)
{
    LCD_CS_CLR;
    LCD_DC_SET;
    lcd_wr_byte(rgb >> 8); 
    lcd_wr_byte(rgb);
    LCD_CS_SET;
}

最终，实现核心的画点函数 lcd_draw_pixel()，这是后续LVGL移植的基础。

// 设置绘图区域
void lcd_set_region(unsigned short x1, unsigned short y1, unsigned short x2, unsigned short y2)
{
    lcd_write_cmd(0x2b);
    lcd_write_byte(x1 >> 8);
    lcd_write_byte(x1);
    lcd_write_byte(x2 >> 8);
    lcd_write_byte(x2);

    lcd_write_cmd(0x2a);
    lcd_write_byte(y1 >> 8);
    lcd_write_byte(y1);
    lcd_write_byte(y2 >> 8);
    lcd_write_byte(y2);

    lcd_write_cmd(0x2C);
}

// 设置画点坐标
void lcd_set_pos(unsigned short x, unsigned short y)
{
   lcd_set_region(x, y, x, y);
}

// 画一个点
void lcd_draw_pixel(unsigned short x, unsigned short y, unsigned short data)
{
    lcd_set_pos(x, y);
    lcd_write_colour(data);
}

三、LVGL图形库的移植

3.1 文件添加

在工程源码目录下新建lvgl文件夹，用于存放所有LVGL相关代码。
将LVGL v9.4.0源码中的src、examples、demos三个文件夹复制到lvgl目录中。
将lv_conf_template.h改名为lv_conf.h，并与lv_version.h、lvgl.h一同复制到lvgl目录。
在IDE工程中添加src目录下的所有源文件，这部分是LVGL的核心，务必仔细添加，避免遗漏导致编译错误。主要包含以下子目录：
- core, draw, font, indev, layouts, misc, osal, stdlib, themes, tick, widgets, others
添加LVGL的硬件适配层文件。这两个文件需要根据实际硬件进行修改：
- lvgl/porting/lv_port_disp_template.c (显示相关)
- lvgl/porting/lv_port_indev_template.c (输入设备相关)
添加LVGL官方演示例程。可根据需要选择性添加：
- lvgl/demo/lv_demos.c
- lvgl/demo/stress
- lvgl/demo/benchmark
- lvgl/demo/widgets
将lvgl/lv_conf.h也添加到工程中，方便直接在IDE中修改宏定义。

3.2 添加头文件路径

为简化头文件包含，在工程设置 “C/C++” -> “Define” 中添加宏定义 LV_LVGL_H_INCLUDE_SIMPLE。

#ifdef LV_LVGL_H_INCLUDE_SIMPLE
    #include "lvgl.h"
#else
    #include "lvgl/lvgl.h"
#endif

在IDE中添加以下头文件搜索路径：

.\lvgl\src (LVGL核心源码)
.\lvgl\examples\porting
.\lvgl\demos\benchmark
.\lvgl\demos\widgets
.\lvgl\demos\stress
.\lvgl (包含lv_conf.h等)

3.3 修改与适配代码

启用模板文件: LVGL的移植模板文件默认是禁用的。需要将以下文件中的#if 0修改为#if 1来启用它们：
- lv_port_disp_template.c
- lv_port_disp_template.h
- lv_conf.h

配置lv_conf.h: 根据项目需求，打开相应的宏定义。本次演示需要开启以下宏：

    #define LV_USE_DEMO_WIDGETS 1
    #define LV_USE_DEMO_BENCHMARK 1
    #define LV_DEMO_BENCHMARK_ALIGNED_FONTS 1
    #define LV_USE_DEMO_STRESS 1

对接显示驱动: 将我们之前实现的lcd_draw_pixel()函数对接到LVGL的显示刷新回调disp_flush中。

    static void disp_flush(lv_display_t * disp_drv, const lv_area_t * area, uint8_t * px_map)
    {
        if(disp_flush_enabled) {
            /* 最简单（但最慢）的逐像素刷新方式 */
            int32_t x, y;
            unsigned short *p = (unsigned short*)px_map;
            
            for(y = area->y1; y <= area->y2; y++) {
                for(x = area->x1; x <= area->x2; x++) {
                    **[color=red]lcd_draw_pixel(x, y, *p);[/color]**
                    p++;
                }
            }
        }
        /* 重要：通知LVGL刷新已完成 */
        lv_display_flush_ready(disp_drv);
    }

配置显示缓冲区: 在lv_port_disp_init中选择合适的缓冲方式。为简化移植，我们选择第一种“单缓冲区部分渲染”模式。

    #if 1 /* 选择方式1 */
        /* Example 1: One buffer for partial rendering */
        LV_ATTRIBUTE_MEM_ALIGN
        static uint8_t buf_1_1[MY_DISP_HOR_RES * 10 * 2]; /* 10行大小的缓冲区, 16位色深(2字节) */
        lv_display_set_buffers(disp, buf_1_1, NULL, sizeof(buf_1_1), LV_DISPLAY_RENDER_MODE_PARTIAL);
    #endif

同时，在lv_port_disp_template.c中定义屏幕的实际分辨率：

    #define MY_DISP_HOR_RES     320
    #define MY_DISP_VER_RES     240

提供系统时基: LVGL需要一个时基来处理动画和任务。我们配置一个1ms周期的定时器中断，并在中断服务函数中调用lv_tick_inc(1)。

    // GUI时基定时器
    #include "lvgl.h"

    #define GUI_TMR TMR1
    #define GUI_TMR_PeriphClock RCM_EnableAPB2PeriphClock(RCM_APB2_PERIPH_TMR1);
    #define GUI_TMR_IRQ TMR1_UP_TMR10_IRQn
    #define GUI_TMR_IRQHandler TMR1_UP_TMR10_IRQHandler

    void timer_gui_init(void)
    {
        /* ... 定时器配置代码 ... */
        TMR_BaseConfig_T TMR_BaseConfigStruct;
        TMR_BaseConfigStruct.division  = 239; // 240MHz / (239+1) = 1MHz
        TMR_BaseConfigStruct.period    = 999;   // 1MHz / (999+1) = 1kHz -> 1ms
        /* ... 其他配置 ... */

        TMR_Enable(GUI_TMR);
    }

    void GUI_TMR_IRQHandler(void)
    {
        if(TMR_ReadIntFlag(GUI_TMR, TMR_INT_UPDATE) == SET)
        {
            TMR_ClearIntFlag(GUI_TMR, TMR_INT_UPDATE);
            **[color=darkblue]lv_tick_inc(1);[/color]** // 通知LVGL过去了1ms
        }
    }

调整堆栈空间: GUI应用通常需要较大的堆栈空间。为防止卡死或HardFault，在启动文件startup_apm32f427xx.s中适当增加堆栈大小。

    Stack_Size      EQU     0x00001000  ; 原为0x400
    Heap_Size       EQU     0x00000A00  ; 原为0x200

四、效果演示

完成上述移植步骤后，我们可以在主函数中初始化并调用LVGL的demo。

void lvgl_main_test(void)
{
    lv_init();             // LVGL核心初始化
    lv_port_disp_init();   // 注册LVGL显示驱动
    timer_gui_init();      // LVGL时基定时器初始化

    lv_demo_widgets();     // 运行控件演示
    // lv_demo_benchmark(); // 运行性能基准测试
    // lv_demo_stress();    // 运行压力测试
}

为了让LVGL的UI动起来，必须在主循环中周期性调用lv_timer_handler()。

int main(void)
{
    // ... 系统初始化 ...
    lvgl_main_test();

    while (1)
    {
        **[color=darkblue]lv_timer_handler();[/color]**
        delay_ms(5); // 适当延时，避免CPU空转
    }
}

如果希望在屏幕上看到GUI的帧率（FPS）和内存使用情况，可以在lv_conf.h中开启性能和内存监控宏：

#define LV_USE_PERF_MONITOR 1
#define LV_USE_MEM_MONITOR  1

经过编译和下载，您将能在APM32F427开发板上看到LVGL流畅而精美的图形界面。下面是lv_demo_widgets的运行效果：

动画效果：

例程文件：

apm32f4xx-sdk-v150-lcd-spi-lvgl-demo-20251207part01.rar

10MB

apm32f4xx-sdk-v150-lcd-spi-lvgl-demo-20251207part02.rar