實(shí)戰(zhàn)貼:開源GUI LittlevGL在MCU上的移植
前幾天看見正點(diǎn)原子發(fā)布了LittlevGL的教程，這個(gè)GUI貌似又火了，于是應(yīng)讀者要求，我也來(lái)移植一下，將正點(diǎn)原子的這個(gè)GUI移植到小熊派上，不到一會(huì)功夫就搞定了，總的來(lái)說(shuō)挺簡(jiǎn)單，沒(méi)遇到什么特別的障礙，因?yàn)檎c(diǎn)原子把坑都幫我們繞過(guò)了，直接改下一些基本配置就可以成功顯示，但是從頭開始移植一個(gè)可不簡(jiǎn)單噢，要詳細(xì)看官方文檔和說(shuō)明。
先上直接移植正點(diǎn)原子例程成功后的效果，下載例程文末。
這節(jié)我們不借助正點(diǎn)原子的例程，直接編寫一個(gè)最簡(jiǎn)單的demo：顯示一個(gè)標(biāo)簽。
1、簡(jiǎn)單介紹GUI框架LittlevGL
LittlevGL是一款免費(fèi)開源的圖形庫(kù)，具有易于使用的圖形元素，簡(jiǎn)潔美觀的視覺(jué)效果；同時(shí)內(nèi)存占用低，可在小型嵌入式設(shè)備上使用。
-
LittlevGL中文網(wǎng)站： https://littlevgl.cn/ -
LittlevGL源碼: https://github.com/littlevgl/lvgl -
LittlevGL演示例程： https://github.com/lvgl/lv_examples
2、移植LittlevGL到小熊派
首先，得有一個(gè)最基本的OLED驅(qū)動(dòng)例程，實(shí)現(xiàn)初始化、打點(diǎn)等基礎(chǔ)功能，之前有寫過(guò)小熊派上的LCD相關(guān)介紹的文章。
基于小熊派光強(qiáng)傳感器BH1750狀態(tài)機(jī)驅(qū)動(dòng)項(xiàng)目升級(jí)(帶LCD屏顯示)
當(dāng)然如果你手上有小熊派的話，也可以直接拷貝小熊派的OLED例程，如果沒(méi)有的話，你也可以用你手上開發(fā)板的LCD例程，這里我直接用小熊派的例程。
接下來(lái)正式進(jìn)入移植流程。
2.1 在Github或者碼云上下載LittlevGL源代碼
Github上下載可能比較慢，如果遇到比較慢的情況下，可以去碼云上建一個(gè)同步Github倉(cāng)庫(kù)，然后在碼云上下載就會(huì)快很多。
2.2 將LittlevGL添加到小熊派基礎(chǔ)工程中
新建文件夾用于放置源碼包
新建lvgl_driver目錄用于放置顯示驅(qū)動(dòng)配置模板以及其它模板:
將lvgl源碼包下的lv_conf_template.h拷貝到littleVGL目錄下，然后改名為lvgl_conf.h
將lvgl源碼包下porting文件夾中與LCD相關(guān)的配置模板拷貝出來(lái)放到lvgl_driver下，并分別更名為lv_port_disp.c和lv_port_disp.h:
在Keil MDK中將文件包含進(jìn)來(lái)：
接下來(lái)對(duì)工程進(jìn)行編譯:
然后會(huì)發(fā)現(xiàn)竟然有2903個(gè)Error，如果是小白這一看就是摸不著頭腦，估計(jì)連繼續(xù)用下去的心情都沒(méi)有了吧？？還沒(méi)用就跑了！不急，待我分析：
錯(cuò)誤的原因是找不到lv_conf.h這個(gè)文件，我們來(lái)看看官網(wǎng)文檔是怎么說(shuō)的：
然后按照文檔描述，到lv_conf.h中將宏改為1。
繼續(xù)編譯發(fā)現(xiàn)沒(méi)有錯(cuò)誤了，以下警告可以忽略。
2.3 LittlevGL配置
在lv_conf.h中做如下修改：
2.3.1 分辨率大小設(shè)置
小熊派LCD分辨率是240*240
#define LV_HOR_RES_MAX (240)
#define LV_VER_RES_MAX (240)
2.3.2 顏色深度設(shè)置
小熊派上對(duì)應(yīng)的16位的，也就是RGB565
/* Color depth:
* - 1: 1 byte per pixel
* - 8: RGB233
* - 16: RGB565
* - 32: ARGB8888
*/
#define LV_COLOR_DEPTH 16
2.2.3 界面伸縮比例調(diào)節(jié)
參考正點(diǎn)原子文檔：用來(lái)調(diào)節(jié)界面縮放比例的,此值越大,控件分布的就越散,控件自身的間隔也會(huì)變大，這里設(shè)置為60。
/* 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]*/
2.2.4 動(dòng)態(tài)數(shù)據(jù)堆大小設(shè)置
這個(gè)參數(shù)是用于控制 littleVGL 中所謂的動(dòng)態(tài)數(shù)據(jù)堆的大小,是用來(lái)給控件的創(chuàng)建動(dòng)態(tài)分配空間的，這里我們?cè)O(shè)置為16KB。
/* Size of the memory used by `lv_mem_alloc` in bytes (>= 2kB)*/
# define LV_MEM_SIZE (16U * 1024U)
2.2.5 GPU接口設(shè)置
如果MCU支持GPU，那么配置該項(xiàng)為1，否則為0，小熊派上沒(méi)有，所以該項(xiàng)設(shè)置為0，即不支持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
2.2.6 文件系統(tǒng)功能設(shè)置
這里我們不需要使用lvgl的文件系統(tǒng)功能，將該項(xiàng)配置為0。
/* 1: Enable file system (might be required for images */
#define LV_USE_FILESYSTEM 0
2.2.7 根據(jù)需求打開與LittlevGL主題相關(guān)的配置
官方會(huì)有一些自帶的演示demo，所以這里我默認(rèn)將所有配置全部配置，但是實(shí)際使用過(guò)程中，根據(jù)需求配置，以節(jié)省FLASH和RAM。
/*================
* THEME USAGE
*================*/
/*Always enable at least on theme*/
/* No theme, you can apply your styles as you need
* No flags. Set LV_THEME_DEFAULT_FLAG 0 */
#define LV_USE_THEME_EMPTY 1
/*Simple to the create your theme based on it
* No flags. Set LV_THEME_DEFAULT_FLAG 0 */
#define LV_USE_THEME_TEMPLATE 1
/* A fast and impressive theme.
* Flags:
* LV_THEME_MATERIAL_FLAG_LIGHT: light theme
* LV_THEME_MATERIAL_FLAG_DARK: dark theme*/
#define LV_USE_THEME_MATERIAL 1
/* Mono-color theme for monochrome displays.
* If LV_THEME_DEFAULT_COLOR_PRIMARY is LV_COLOR_BLACK the
* texts and borders will be black and the background will be
* white. Else the colors are inverted.
* No flags. Set LV_THEME_DEFAULT_FLAG 0 */
#define LV_USE_THEME_MONO 1
2.2.8 為L(zhǎng)ittlevGL提供心跳節(jié)拍
這個(gè)心跳節(jié)拍可以采用Systick提供，也可以自己配置一個(gè)定時(shí)器來(lái)提供，這里我是直接用Systick來(lái)提供：
/**
* @brief This function handles System tick timer.
*/
void SysTick_Handler(void)
{
/* USER CODE BEGIN SysTick_IRQn 0 */
//為lvgl提供1ms 心跳
lv_tick_inc(1);
/* USER CODE END SysTick_IRQn 0 */
HAL_IncTick();
HAL_SYSTICK_IRQHandler();
/* USER CODE BEGIN SysTick_IRQn 1 */
/* USER CODE END SysTick_IRQn 1 */
}
2.2.9 移植顯示驅(qū)動(dòng)
主要在lv_port_disp.h和lv_port_disp.c這兩個(gè)文件里做修改：
先看看lv_port_disp.h：
再看看lv_port_disp.c：
(1)選擇一種方式寫緩存
//選擇其中一種方式寫緩存，這里選擇的是1
/*-----------------------------
* Create a buffer for drawing
*----------------------------*/
/* LVGL requires a buffer where it draws the objects. The buffer's 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 disp_buf_1;
static lv_color_t buf1_1[LV_HOR_RES_MAX * 10]; /*A buffer for 10 rows*/
lv_disp_buf_init(&disp_buf_1, buf1_1, NULL, LV_HOR_RES_MAX * 10); /*Initialize the display buffer*/
/* Example for 2) */
//static lv_disp_buf_t disp_buf_2;
//static lv_color_t buf2_1[LV_HOR_RES_MAX * 10]; /*A buffer for 10 rows*/
//static lv_color_t buf2_2[LV_HOR_RES_MAX * 10]; /*An other buffer for 10 rows*/
//lv_disp_buf_init(&disp_buf_2, buf2_1, buf2_2, LV_HOR_RES_MAX * 10); /*Initialize the display buffer*/
/* Example for 3) */
//static lv_disp_buf_t disp_buf_3;
//static lv_color_t buf3_1[LV_HOR_RES_MAX * LV_VER_RES_MAX]; /*A screen sized buffer*/
//static lv_color_t buf3_2[LV_HOR_RES_MAX * LV_VER_RES_MAX]; /*An other screen sized buffer*/
//lv_disp_buf_init(&disp_buf_3, buf3_1, buf3_2, LV_HOR_RES_MAX * LV_VER_RES_MAX); /*Initialize the display buffer*/(2)修改LCD顯示大小
在lv_port_disp_init函數(shù)中:
LCD_Width和LCD_Height為240*240，需要包含lcd.h頭文件
//修改LCD顯示大小，這里配置為240*240
/*Set the resolution of the display*/
//disp_drv.hor_res = 480;
//disp_drv.ver_res = 320;
disp_drv.hor_res = LCD_Width;
disp_drv.ver_res = LCD_Height;
(3)添加LCD初始化函數(shù)
在lv_port_disp_init函數(shù)中:
/* Initialize your display and the required peripherals. */
static void disp_init(void)
{
/*You code here*/
//初始化LCD
LCD_Init();
}
(4)添加帶顏色的打點(diǎn)函數(shù)
/* 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 x;
int32_t y;
for(y = area->y1; y <= area->y2; y++) {
for(x = area->x1; x <= area->x2; x++) {
/* Put a pixel to the display. For example: */
/* put_px(x, y, *color_p)*/
//添加一個(gè)帶顏色的打點(diǎn)函數(shù)
LCD_Draw_ColorPoint(x,y,color_p->full);
color_p++;
}
}
/* IMPORTANT!!!
* Inform the graphics library that you are ready with the flushing*/
lv_disp_flush_ready(disp_drv);
}
2.2.10 修改棧大小
2.4 測(cè)試LittlevGL是否移植成功
main.c 包含頭文件：
#include "lvgl.h"
#include "lv_port_disp.h"
在main函數(shù)中編寫顯示邏輯：
int main(void)
{
/* USER CODE BEGIN 1 */
/* USER CODE END 1 */
/* MCU Configuration----------------------------------------------------------*/
/* Reset of all peripherals, Initializes the Flash interface and the Systick. */
HAL_Init();
/* USER CODE BEGIN Init */
/* USER CODE END Init */
/* Configure the system clock */
SystemClock_Config();
/* USER CODE BEGIN SysInit */
/* USER CODE END SysInit */
/* Initialize all configured peripherals */
MX_GPIO_Init();
MX_SPI2_Init();
MX_USART1_UART_Init();
/* USER CODE BEGIN 2 */
lv_init();
lv_port_disp_init();
printf("Welcome to LVGL\r\n");
//建立一個(gè)label
lv_obj_t * label;
lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, 0);
label = lv_label_create(btn1, NULL);
lv_label_set_text(label, "Button");
/* USER CODE END 2 */
/* Infinite loop */
/* USER CODE BEGIN WHILE */
while (1)
{
/* USER CODE END WHILE */
/* USER CODE BEGIN 3 */
//循環(huán)調(diào)用lv_task處理句柄
lv_task_handler();
}
/* USER CODE END 3 */
}
運(yùn)行效果：
littlevGL要學(xué)習(xí)的知識(shí)還有很多很多，把它移植起來(lái)了，后面就沒(méi)什么阻礙了！如果想要深入學(xué)習(xí)這個(gè)GUI，推薦直接學(xué)習(xí)正點(diǎn)原子的教程就可以了。
3、案例下載
公眾號(hào)后臺(tái)回復(fù)：lvgl 即可獲取本節(jié)所有案例的下載鏈接。
往期精彩
MCU SPI屏也能跑這么炫酷的特效？來(lái)，移植起來(lái)秀一秀
最近收集的開源項(xiàng)目專欄(持續(xù)更新,收好車輪,方便造車)
代碼寫得很牛逼但UI界面卻搞得很丑？來(lái)，楊工帶你！
覺(jué)得本次分享的文章對(duì)您有幫助，隨手點(diǎn)[在看]并轉(zhuǎn)發(fā)分享，也是對(duì)我的支持。
免責(zé)聲明：本文內(nèi)容由21ic獲得授權(quán)后發(fā)布，版權(quán)歸原作者所有，本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。文章僅代表作者個(gè)人觀點(diǎn)，不代表本平臺(tái)立場(chǎng)，如有問(wèn)題，請(qǐng)聯(lián)系我們，謝謝！
下載文檔
