小熊派LiteOS移植LVGL

一、移植前言

之前使用小熊派實作了鴻蒙影片的開機界面，具體使用的技術堆疊為 STM32 + LiteOS + LVGL + FATFS +DMA 方式實作，重繪效率非常高，預覽視頻如下：

關于這個的實作程序我會寫一系列的教程分享出來，主要分為下面幾個部分，本節為第二部分，基于 LiteOS 移植 LVGL 顯示介面

• 小熊派移植華為 LiteOS-M（基于MDK）：鏈接；
• 小熊派基于 LiteOS 移植 LVGL 顯示介面：鏈接；
• 小熊派基于 LiteOS 移植 LVGL 檔案系統：鏈接；
• 小熊派實作鴻蒙開機界面（LiteOS+LVGL）：鏈接；

本節的教程就是先通過 STM32CubeMX 來配置 小熊派的 TFT 初始化代碼，開啟 DMA 加速（不開啟會卡出翔），配置完成后獲取 LVGL 的代碼，移植到工程里面，然后將 TFT 驅動介面和 LVGL 介面對接，在運行 Demo 代碼

二、配置 TFT

我們在上一節移植好 LiteOS 工程的基礎上使用 CubeMX 配置 TFT 的 SPI 介面，具體 SPI 驅動介面可以參考這篇文章：小熊派 FreeRTOS+SPI+DMA 驅動 TFT-LCD

SPI 配置完成如下：

開啟 DMA，并且在 NVIC 里面使能中斷

除了上面的 SPI 引腳還需要，配置 TFT 的其他控制引腳，關于引腳在參考文章中有寫出來，配置完成如下：

在 MDK 工程根目錄下創建 Hardware/LCD 檔案夾用來存放驅動代碼，驅動檔案命名為 lcd.c 和 lcd.h

拷貝下面的代碼進去

lcd.c

#include "lcd.h"
#include "gpio.h"
#include "spi.h"
#include "cmsis_os.h"

extern osSemaphoreId_t DMA_SemaphoreHandle;


/* USER CODE BEGIN 1 */
/**
 * @brief    SPI 發送位元組函式
 * @param    TxData	要發送的資料
 * @param    size	發送資料的位元組大小
 * @return  0:寫入成功,其他:寫入失敗
 */
uint8_t SPI_WriteByte(uint8_t *TxData,uint16_t size)
{
	
	osStatus_t result;
    //獲取信號，如果上一個DMA傳輸完成
    //信號就能獲取到，沒有傳輸完成任務就掛起
    //等到傳輸完成再恢復
	result = osSemaphoreAcquire(DMA_SemaphoreHandle,0xFFFF);
	if(result == osOK)
	{
		//獲取成功
		return HAL_SPI_Transmit_DMA(&hspi2,TxData,size);
	}else
	{
		//獲取失敗
		return 1;
	}
}
//DMA 傳輸完成后會呼叫 SPI傳輸完成回呼函式
//在該函式中我們釋放信號
void HAL_SPI_TxCpltCallback(SPI_HandleTypeDef *hspi)
{
	if(hspi->Instance == hspi2.Instance)
		osSemaphoreRelease(DMA_SemaphoreHandle);
}


/**
 * @brief   寫命令到LCD
 * @param   cmd —— 需要發送的命令
 * @return  none
 */
static void LCD_Write_Cmd(uint8_t cmd)
{
    LCD_WR_RS(0);
    SPI_WriteByte(&cmd, 1);
}

/**
 * @brief   寫資料到LCD
 * @param   dat —— 需要發送的資料
 * @return  none
 */
static void LCD_Write_Data(uint8_t dat)
{
    LCD_WR_RS(1);
    SPI_WriteByte(&dat, 1);
}

/**
 * @breif   打開LCD顯示背光
 * @param   none
 * @return  none
 */
void LCD_DisplayOn(void)
{
    LCD_PWR(1);
}
/**
 * @brief   關閉LCD顯示背光
 * @param   none
 * @return  none
 */
void LCD_DisplayOff(void)
{
    LCD_PWR(0);
}

/**
 * @brief   設定資料寫入LCD顯存區域
 * @param   x1,y1	—— 起點坐標
 * @param   x2,y2	—— 終點坐標
 * @return  none
 */
void LCD_Address_Set(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2)
{
    /* 指定X方向操作區域 */
    LCD_Write_Cmd(0x2a);
    LCD_Write_Data(x1 >> 8);
    LCD_Write_Data(x1);
    LCD_Write_Data(x2 >> 8);
    LCD_Write_Data(x2);

    /* 指定Y方向操作區域 */
    LCD_Write_Cmd(0x2b);
    LCD_Write_Data(y1 >> 8);
    LCD_Write_Data(y1);
    LCD_Write_Data(y2 >> 8);
    LCD_Write_Data(y2);

    /* 發送該命令，LCD開始等待接收顯存資料 */
    LCD_Write_Cmd(0x2C);
}

/**
 * @brief   以一種顏色清空LCD屏
 * @param   color —— 清屏顏色(16bit)
 * @return  none
 */
void LCD_Clear(uint16_t color)
{
    uint16_t i;
    uint8_t data[2] = {0};  //color是16bit的，每個像素點需要兩個位元組的顯存

    /* 將16bit的color值分開為兩個單獨的位元組 */
    data[0] = color >> 8;
    data[1] = color;
    LCD_Address_Set(0, 0, LCD_Width - 1, LCD_Height - 1);
		LCD_WR_RS(1);
		for(i=0;i<((LCD_Width)*(LCD_Height));i++)
		{
			SPI_WriteByte(data, 2);
		}
}

/**
 * @brief   LCD初始化
 * @param   none
 * @return  none
 */
void LCD_Init(void)
{
    /* 復位LCD */
    LCD_PWR(0);
    LCD_RST(0);
    osDelay(100);
    LCD_RST(1);
    osDelay(120);
    /* 關閉睡眠模式 */
    LCD_Write_Cmd(0x11);
    osDelay(120);

    /* 開始設定顯存掃描模式，資料格式等 */
    LCD_Write_Cmd(0x36);
    LCD_Write_Data(0x00);
    /* RGB 5-6-5-bit格式  */
    LCD_Write_Cmd(0x3A);
    LCD_Write_Data(0x65);
    /* porch 設定 */
    LCD_Write_Cmd(0xB2);
    LCD_Write_Data(0x0C);
    LCD_Write_Data(0x0C);
    LCD_Write_Data(0x00);
    LCD_Write_Data(0x33);
    LCD_Write_Data(0x33);
    /* VGH設定 */
    LCD_Write_Cmd(0xB7);
    LCD_Write_Data(0x72);
    /* VCOM 設定 */
    LCD_Write_Cmd(0xBB);
    LCD_Write_Data(0x3D);
    /* LCM 設定 */
    LCD_Write_Cmd(0xC0);
    LCD_Write_Data(0x2C);
    /* VDV and VRH 設定 */
    LCD_Write_Cmd(0xC2);
    LCD_Write_Data(0x01);
    /* VRH 設定 */
    LCD_Write_Cmd(0xC3);
    LCD_Write_Data(0x19);
    /* VDV 設定 */
    LCD_Write_Cmd(0xC4);
    LCD_Write_Data(0x20);
    /* 普通模式下顯存速率設定 60Mhz */
    LCD_Write_Cmd(0xC6);
    LCD_Write_Data(0x0F);
    /* 電源控制 */
    LCD_Write_Cmd(0xD0);
    LCD_Write_Data(0xA4);
    LCD_Write_Data(0xA1);
    /* 電壓設定 */
    LCD_Write_Cmd(0xE0);
    LCD_Write_Data(0xD0);
    LCD_Write_Data(0x04);
    LCD_Write_Data(0x0D);
    LCD_Write_Data(0x11);
    LCD_Write_Data(0x13);
    LCD_Write_Data(0x2B);
    LCD_Write_Data(0x3F);
    LCD_Write_Data(0x54);
    LCD_Write_Data(0x4C);
    LCD_Write_Data(0x18);
    LCD_Write_Data(0x0D);
    LCD_Write_Data(0x0B);
    LCD_Write_Data(0x1F);
    LCD_Write_Data(0x23);
    /* 電壓設定 */
    LCD_Write_Cmd(0xE1);
    LCD_Write_Data(0xD0);
    LCD_Write_Data(0x04);
    LCD_Write_Data(0x0C);
    LCD_Write_Data(0x11);
    LCD_Write_Data(0x13);
    LCD_Write_Data(0x2C);
    LCD_Write_Data(0x3F);
    LCD_Write_Data(0x44);
    LCD_Write_Data(0x51);
    LCD_Write_Data(0x2F);
    LCD_Write_Data(0x1F);
    LCD_Write_Data(0x1F);
    LCD_Write_Data(0x20);
    LCD_Write_Data(0x23);
    /* 顯示開 */
    LCD_Write_Cmd(0x21);
    LCD_Write_Cmd(0x29);

    /*打開顯示*/
    LCD_PWR(1);
}

lcd.h

#include "main.h"

#define	LCD_PWR(n)		(n?\
						HAL_GPIO_WritePin(LCD_PWR_GPIO_Port,LCD_PWR_Pin,GPIO_PIN_SET):\
						HAL_GPIO_WritePin(LCD_PWR_GPIO_Port,LCD_PWR_Pin,GPIO_PIN_RESET))
#define	LCD_WR_RS(n)	(n?\
						HAL_GPIO_WritePin(LCD_WR_RS_GPIO_Port,LCD_WR_RS_Pin,GPIO_PIN_SET):\
						HAL_GPIO_WritePin(LCD_WR_RS_GPIO_Port,LCD_WR_RS_Pin,GPIO_PIN_RESET))
#define	LCD_RST(n)		(n?\
						HAL_GPIO_WritePin(LCD_RST_GPIO_Port,LCD_RST_Pin,GPIO_PIN_SET):\
						HAL_GPIO_WritePin(LCD_RST_GPIO_Port,LCD_RST_Pin,GPIO_PIN_RESET))

//LCD螢屏解析度定義
#define LCD_Width   240
#define LCD_Height  240
//顏色定義
#define WHITE   0xFFFF	//白色
#define YELLOW  0xFFE0	//黃色
#define BRRED   0XFC07  //棕紅色
#define PINK    0XF81F	//粉色
#define RED     0xF800	//紅色
#define BROWN   0XBC40  //棕色
#define GRAY    0X8430  //灰色
#define GBLUE   0X07FF	//蘭色
#define GREEN   0x07E0	//綠色
#define BLUE    0x001F  //藍色
#define BLACK   0x0000	//黑色

uint8_t SPI_WriteByte(uint8_t *TxData,uint16_t size);
static void LCD_Write_Cmd(uint8_t cmd);
static void LCD_Write_Data(uint8_t dat);
void LCD_DisplayOn(void);
void LCD_DisplayOff(void);
void LCD_Address_Set(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2);
void LCD_Clear(uint16_t color);
void LCD_Init(void);

代碼和檔案添加完成后不要忘記添加檔案路徑，然后我們在主函式中創建一個用于 lcd 顯示的任務，初始化 LCD 同時將螢屏初始化為藍色

osThreadId_t lcd_taskHandle;
const osThreadAttr_t lcd_task_attributes = {
  .name = "lcd_task",
  .stack_size = 512 * 4,
  .priority = (osPriority_t) osPriorityNormal1,
};
void Lcd_Task(void *argument);
void Lcd_Task(void *argument)
{
	LCD_Init();
	LCD_Clear(BLUE);
	while(1)
	{
		
		osDelay(1000);
	}
}

添加 DMA 信號量

osSemaphoreId_t DMA_SemaphoreHandle;
const osSemaphoreAttr_t DMA_Semaphore_attributes = {
  .name = "DMA_Semaphore"
};

初始化信號和 LiteOS：

  /* USER CODE BEGIN 2 */
	osKernelInitialize();
	
  /* creation of uart_task */
	DMA_SemaphoreHandle = osSemaphoreNew(1, 1, &DMA_Semaphore_attributes);
    led_taskHandle = osThreadNew(Led_Task, NULL, &led_task_attributes);
	lcd_taskHandle = osThreadNew(Lcd_Task, NULL, &lcd_task_attributes);
	osKernelStart();
  /* USER CODE END 2 */

編譯燒寫程式，觀察現象，螢屏清屏為藍色，驅動程式跑通了，可以進行下一步：

三、LVGL 原始碼獲取

獲取 lvgl 7.0 版本的原始碼

git clone -b release/v7 https://github.com/lvgl/lvgl.git

拉取后代碼

下面我們在 MDK 工程目錄按照下面的格式建立檔案夾

APP 檔案夾用來存放我們撰寫的 lvgl 應用代碼，LVGL 檔案夾用來存放 lvgl 的原始碼，以及介面代碼

然后我們將剛剛 github 下載的原始碼拷貝到 LVGL 中，然后把里面 lvgl\examples\porting 檔案夾復制到同一目錄下，改名為 lvgl_port 檔案夾，同時將 lvgl\lv_conf_template.h 也復制到同一目錄，并且改名為 lv_conf.h，修改結果如下：

然后將 lvgl_port 下面的檔案也修改名稱為下面的格式：

這6個檔案是 lvgl 的介面檔案，disp 是顯示介面、fs 是檔案系統介面、indev 是輸入介面，下面我們在 MDK 工程里面添加檔案和檔案路徑，添加路徑如下：

..\Middlewares\LVGL\APP
..\Middlewares\LVGL\LVGL\lvgl_port
..\Middlewares\LVGL\LVGL\lvgl\src

添加檔案如下：

src 放的檔案是下面檔案夾的所有 c 檔案

config 放的是 lvgl 配置頭檔案：

port 放的是 lvgl 的硬體介面檔案

檔案添加完成后我們先配置 lvgl 下的 lv_conf.h 檔案，做一些配置，不然直接編譯的話會有一堆報錯

lv_conf.h 檔案修改：

修改螢屏尺寸適配小熊派：

/* Maximal horizontal and vertical resolution to support by the library.*/
#define LV_HOR_RES_MAX          (240)
#define LV_VER_RES_MAX          (240)

設定螢屏顏色深度，以及顏色存放格式（適配 ST7789芯片）：

/* Color depth:
 * - 1:  1 byte per pixel
 * - 8:  RGB332
 * - 16: RGB565
 * - 32: ARGB8888
 */
#define LV_COLOR_DEPTH     16
/* Swap the 2 bytes of RGB565 color.
 * Useful if the display has a 8 bit interface (e.g. SPI)*/
#define LV_COLOR_16_SWAP   1

設定調節界面縮放比例：

/* Dot Per Inch: used to initialize default sizes.
 * E.g. a button with width = LV_DPI / 2 -> half inch wide
 * (Not so important, you can adjust it to modify default sizes and spaces)*/
#define LV_DPI              60     /*[px]*/

設定動態記憶體大小：

/* Size of the memory used by `lv_mem_alloc` in bytes (>= 2kB)*/
#  define LV_MEM_SIZE    (16U * 1024U)

關閉使用 GPU：

/* 1: Enable GPU interface*/
#define LV_USE_GPU              0   /*Only enables `gpu_fill_cb` and `gpu_blend_cb` in the disp. drv- */
#define LV_USE_GPU_STM32_DMA2D  0

暫時先關閉檔案系統：

/* 1: Enable file system (might be required for images */
#define LV_USE_FILESYSTEM       0

編譯一下，有一些警告

..\Middlewares\LVGL\LVGL\lvgl\src\lv_draw\lv_draw_mask.c(350): warning:  #111-D: statement is unreachable

這些警告沒有任何影響，可以把警告給屏蔽掉，切換到 C/C++選項卡,在 Misc Controls 中填入

--diag_suppress=111 把它屏蔽掉如下圖所示：

編譯后改報錯就不顯示了

四、顯示介面移植

編譯通過后，我們下一步就是修改顯示介面了，打開 lv_port_disp.c 檔案，將開頭使能，包括頭檔案也使能：

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

修改顯示介面，主要關注 void lv_port_disp_init(void) 函式

void lv_port_disp_init(void)
{
    /*-------------------------
     * Initialize your display
     * -----------------------*/
    disp_init();

    /*-----------------------------
     * Create a buffer for drawing
     *----------------------------*/

    /* LVGL requires a buffer where it internally draws the widgets.
     * Later this buffer will passed your display drivers `flush_cb` to copy its content to your display.
     * The buffer has to be greater than 1 display row
     *
     * There are three buffering configurations:
     * 1. Create ONE buffer with some rows:
     *      LVGL will draw the display's content here and writes it to your display
     *
     * 2. Create TWO buffer with some rows:
     *      LVGL will draw the display's content to a buffer and writes it your display.
     *      You should use DMA to write the buffer's content to the display.
     *      It will enable LVGL to draw the next part of the screen to the other buffer while
     *      the data is being sent form the first buffer. It makes rendering and flushing parallel.
     *
     * 3. Create TWO screen-sized buffer:
     *      Similar to 2) but the buffer have to be screen sized. When LVGL is ready it will give the
     *      whole frame to display. This way you only need to change the frame buffer's address instead of
     *      copying the pixels.
     * */

    /* Example for 1) */
    static lv_disp_buf_t draw_buf_dsc_1;
    static lv_color_t draw_buf_1[LV_HOR_RES_MAX * 10];                          /*A buffer for 10 rows*/
    lv_disp_buf_init(&draw_buf_dsc_1, draw_buf_1, NULL, LV_HOR_RES_MAX * 10);   /*Initialize the display buffer*/

    /* Example for 2) */
    static lv_disp_buf_t draw_buf_dsc_2;
    static lv_color_t draw_buf_2_1[LV_HOR_RES_MAX * 10];                        /*A buffer for 10 rows*/
    static lv_color_t draw_buf_2_2[LV_HOR_RES_MAX * 10];                        /*An other buffer for 10 rows*/
    lv_disp_buf_init(&draw_buf_dsc_2, draw_buf_2_1, draw_buf_2_2, LV_HOR_RES_MAX * 10);   /*Initialize the display buffer*/

    /* Example for 3) */
    static lv_disp_buf_t draw_buf_dsc_3;
    static lv_color_t draw_buf_3_1[LV_HOR_RES_MAX * LV_VER_RES_MAX];            /*A screen sized buffer*/
    static lv_color_t draw_buf_3_2[LV_HOR_RES_MAX * LV_VER_RES_MAX];            /*An other screen sized buffer*/
    lv_disp_buf_init(&draw_buf_dsc_3, draw_buf_3_1, draw_buf_3_2, LV_HOR_RES_MAX * LV_VER_RES_MAX);   /*Initialize the display buffer*/

    /*-----------------------------------
     * Register the display in LVGL
     *----------------------------------*/

    lv_disp_drv_t disp_drv;                         /*Descriptor of a display driver*/
    lv_disp_drv_init(&disp_drv);                    /*Basic initialization*/

    /*Set up the functions to access to your display*/

    /*Set the resolution of the display*/
    disp_drv.hor_res = 480;
    disp_drv.ver_res = 320;

    /*Used to copy the buffer's content to the display*/
    disp_drv.flush_cb = disp_flush;

    /*Set a display buffer*/
    disp_drv.buffer = &draw_buf_dsc_1;

#if LV_USE_GPU
    /*Optionally add functions to access the GPU. (Only in buffered mode, LV_VDB_SIZE != 0)*/

    /*Blend two color array using opacity*/
    disp_drv.gpu_blend_cb = gpu_blend;

    /*Fill a memory array with a color*/
    disp_drv.gpu_fill_cb = gpu_fill;
#endif

    /*Finally register the driver*/
    lv_disp_drv_register(&disp_drv);
}

disp_init() 用來初始化顯示屏外設，這里我們在hal初始化中已經初始化完成了，所以洗掉他

下面的代碼就是創建一個快取 buffer，這里 LVGL 提供了三種方式創建快取：

第一種只創建一個快取區，長度是橫軸像素長度的 10 倍，第二種創建兩個快取區，長度都是 橫軸的 10 倍，第三種則是創建兩個，大小是橫軸乘以縱軸，相當于整個螢屏大小，第一種情況，如果我們在寫入資料時不能修改，第二種我們在寫入一個 buffer 時還可以希爾另外一個 buffer ，可以結合 DMA 加快寫入速度，這里我使用第一種

下面的代碼注冊顯示驅動，配置其引數：

主要就是配置螢屏引數，設定重繪函式，配置快取區指標，最后注冊驅動，這里我們要修改一下重繪螢屏函式

static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)

修改如下：

/* Flush the content of the internal buffer the specific area on the display
 * You can use DMA or any hardware acceleration to do this operation in the background but
 * 'lv_disp_flush_ready()' has to be called when finished. */
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
		/*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*/
		int32_t y;

		LCD_Address_Set(area->x1,area->y1,area->x2,area->y2);
		LCD_WR_RS(1);
		//一行一行 DMA
		for(y = area->y1; y <= area->y2; y++) 
		{
			if(osSemaphoreAcquire(DMA_SemaphoreHandle,0xFFFF) == osOK)
				HAL_SPI_Transmit_DMA(&hspi2,(uint8_t *)color_p,(uint16_t)(area->x2-area->x1+1)*2);
			color_p += (area->x2-area->x1+1);
		}
    /* IMPORTANT!!!
     * Inform the graphics library that you are ready with the flushing*/
    lv_disp_flush_ready(disp_drv);
}

修改代碼后，要添加頭檔案和 dma 信號量宣告

/*********************
 *      INCLUDES
 *********************/
#include "lv_port_disp.h"
#include "lcd.h"
#include "spi.h"
#include "cmsis_os.h"
/*********************
 *      DEFINES
 *********************/
extern osSemaphoreId_t DMA_SemaphoreHandle;

五、Demo 代碼

在定時器 1 中斷中添加 lvgl 的時基更新代碼

void TIM1_UP_TIM16_IRQHandler(void)
{
  /* USER CODE BEGIN TIM1_UP_TIM16_IRQn 0 */

  /* USER CODE END TIM1_UP_TIM16_IRQn 0 */
  HAL_TIM_IRQHandler(&htim1);
  /* USER CODE BEGIN TIM1_UP_TIM16_IRQn 1 */
	lv_tick_inc(1);
  /* USER CODE END TIM1_UP_TIM16_IRQn 1 */
}

在 main.c 的 lcd 任務中添加創建 label 測驗的代碼

這里的測驗代碼是畫兩個對角位置的方塊，邊框顏色都不一樣，一個設定的是藍色，一個是綠色

void Lcd_Task(void *argument)
{
	LCD_Init();

	lv_init();
	lv_port_disp_init();//lvgl 顯示介面初始化,放在 lv_init()的后面
	
	lv_style_t style1;
	lv_style_init(&style1);
	lv_style_set_bg_color(&style1, LV_STATE_DEFAULT,LV_COLOR_BLACK);
	lv_style_set_border_width(&style1,LV_STATE_DEFAULT, 5);
	lv_style_set_border_color(&style1,LV_STATE_DEFAULT, LV_COLOR_BLUE);
	
	lv_style_t style2;
	lv_style_init(&style2);
	lv_style_set_bg_color(&style2, LV_STATE_DEFAULT,LV_COLOR_BLACK);
	lv_style_set_border_width(&style2,LV_STATE_DEFAULT, 5);
	lv_style_set_border_color(&style2,LV_STATE_DEFAULT, LV_COLOR_GREEN);
	
	lv_obj_t* bgk1 = lv_obj_create(lv_scr_act(), NULL);//創建物件
	lv_obj_set_pos(bgk1,0,0);
	lv_obj_set_size(bgk1, 120, 120);//設定覆寫大小
	lv_obj_add_style(bgk1,LV_STATE_DEFAULT, &style1);
	
	
	lv_obj_t* bgk2 = lv_obj_create(lv_scr_act(), NULL);//創建物件
	lv_obj_set_pos(bgk2,120,120);
	lv_obj_set_size(bgk2, 120, 120);//設定覆寫大小	
	lv_obj_add_style(bgk2,LV_STATE_DEFAULT, &style2);
	
	while(1)
	{
		lv_task_handler();
		osDelay(1000);
	}
}
/* USER CODE END 0 */

記得添加相關頭檔案：

/* USER CODE BEGIN Includes */
#include "cmsis_os.h"
#include "lcd.h"
#include "lv_port_disp.h"
/* USER CODE END Includes */

編譯下載代碼

六、實驗現象

兩個對角小方塊，邊框一個藍色一個綠色