當(dāng)前位置:首頁 > 公眾號精選 > 嵌入式云IOT技術(shù)圈
[導(dǎo)讀]前幾天看見正點原子發(fā)布了LittlevGL的教程,這個GUI貌似又火了,于是應(yīng)讀者要求,我也來移植一下,將正點原子的這個GUI移植到小熊派上,不到一會功夫就搞定了,總的來說挺簡單,沒遇到什么特別的障礙,因為正點原子把坑都幫我們繞過了,直接改下一些基本配置

前幾天看見正點原子發(fā)布了LittlevGL的教程,這個GUI貌似又火了,于是應(yīng)讀者要求,我也來移植一下,將正點原子的這個GUI移植到小熊派上,不到一會功夫就搞定了,總的來說挺簡單,沒遇到什么特別的障礙,因為正點原子把坑都幫我們繞過了,直接改下一些基本配置就可以成功顯示,但是從頭開始移植一個可不簡單噢,要詳細(xì)看官方文檔和說明。


先上直接移植正點原子例程成功后的效果,下載例程文末。

這節(jié)我們不借助正點原子的例程,直接編寫一個最簡單的demo:顯示一個標(biāo)簽。

1、簡單介紹GUI框架LittlevGL

LittlevGL是一款免費開源的圖形庫,具有易于使用的圖形元素,簡潔美觀的視覺效果;同時內(nèi)存占用低,可在小型嵌入式設(shè)備上使用。

  • LittlevGL中文網(wǎng)站:
    https://littlevgl.cn/
  • LittlevGL源碼:
    https://github.com/littlevgl/lvgl
  • LittlevGL演示例程:
    https://github.com/lvgl/lv_examples

2、移植LittlevGL到小熊派

首先,得有一個最基本的OLED驅(qū)動例程,實現(xiàn)初始化、打點等基礎(chǔ)功能,之前有寫過小熊派上的LCD相關(guān)介紹的文章。

基于小熊派光強傳感器BH1750狀態(tài)機驅(qū)動項目升級(帶LCD屏顯示)

當(dāng)然如果你手上有小熊派的話,也可以直接拷貝小熊派的OLED例程,如果沒有的話,你也可以用你手上開發(fā)板的LCD例程,這里我直接用小熊派的例程。

接下來正式進入移植流程。

2.1 在Github或者碼云上下載LittlevGL源代碼

Github上下載可能比較慢,如果遇到比較慢的情況下,可以去碼云上建一個同步Github倉庫,然后在碼云上下載就會快很多。

2.2 將LittlevGL添加到小熊派基礎(chǔ)工程中

新建文件夾用于放置源碼包

新建lvgl_driver目錄用于放置顯示驅(qū)動配置模板以及其它模板:

將lvgl源碼包下的lv_conf_template.h拷貝到littleVGL目錄下,然后改名為lvgl_conf.h

將lvgl源碼包下porting文件夾中與LCD相關(guān)的配置模板拷貝出來放到lvgl_driver下,并分別更名為lv_port_disp.c和lv_port_disp.h:

在Keil MDK中將文件包含進來:

接下來對工程進行編譯:

然后會發(fā)現(xiàn)竟然有2903個Error,如果是小白這一看就是摸不著頭腦,估計連繼續(xù)用下去的心情都沒有了吧??還沒用就跑了!不急,待我分析:

錯誤的原因是找不到lv_conf.h這個文件,我們來看看官網(wǎng)文檔是怎么說的:

然后按照文檔描述,到lv_conf.h中將宏改為1。

繼續(xù)編譯發(fā)現(xiàn)沒有錯誤了,以下警告可以忽略。

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è)置

小熊派上對應(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ào)節(jié)界面縮放比例的,此值越大,控件分布的就越散,控件自身的間隔也會變大,這里設(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 動態(tài)數(shù)據(jù)堆大小設(shè)置

這個參數(shù)是用于控制 littleVGL 中所謂的動態(tài)數(shù)據(jù)堆的大小,是用來給控件的創(chuàng)建動態(tài)分配空間的,這里我們設(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,那么配置該項為1,否則為0,小熊派上沒有,所以該項設(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)功能,將該項配置為0。

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

2.2.7 根據(jù)需求打開與LittlevGL主題相關(guān)的配置

官方會有一些自帶的演示demo,所以這里我默認(rèn)將所有配置全部配置,但是實際使用過程中,根據(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 為LittlevGL提供心跳節(jié)拍

這個心跳節(jié)拍可以采用Systick提供,也可以自己配置一個定時器來提供,這里我是直接用Systick來提供:

/**
* @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ū)動

主要在lv_port_disp.hlv_port_disp.c這兩個文件里做修改:

先看看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)添加帶顏色的打點函數(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)*/
//添加一個帶顏色的打點函數(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 測試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");
//建立一個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 */

}

運行效果:


littlevGL要學(xué)習(xí)的知識還有很多很多,把它移植起來了,后面就沒什么阻礙了!如果想要深入學(xué)習(xí)這個GUI,推薦直接學(xué)習(xí)正點原子的教程就可以了。

3、案例下載

公眾號后臺回復(fù):lvgl 即可獲取本節(jié)所有案例的下載鏈接。

往期精彩

MCU SPI屏也能跑這么炫酷的特效?來,移植起來秀一秀

最近收集的開源項目專欄(持續(xù)更新,收好車輪,方便造車)

代碼寫得很牛逼但UI界面卻搞得很丑?來,楊工帶你!

覺得本次分享的文章對您有幫助,隨手點[在看]并轉(zhuǎn)發(fā)分享,也是對我的支持。

免責(zé)聲明:本文內(nèi)容由21ic獲得授權(quán)后發(fā)布,版權(quán)歸原作者所有,本平臺僅提供信息存儲服務(wù)。文章僅代表作者個人觀點,不代表本平臺立場,如有問題,請聯(lián)系我們,謝謝!

本站聲明: 本文章由作者或相關(guān)機構(gòu)授權(quán)發(fā)布,目的在于傳遞更多信息,并不代表本站贊同其觀點,本站亦不保證或承諾內(nèi)容真實性等。需要轉(zhuǎn)載請聯(lián)系該專欄作者,如若文章內(nèi)容侵犯您的權(quán)益,請及時聯(lián)系本站刪除。
換一批
延伸閱讀

9月2日消息,不造車的華為或?qū)⒋呱龈蟮莫毥谦F公司,隨著阿維塔和賽力斯的入局,華為引望愈發(fā)顯得引人矚目。

關(guān)鍵字: 阿維塔 塞力斯 華為

加利福尼亞州圣克拉拉縣2024年8月30日 /美通社/ -- 數(shù)字化轉(zhuǎn)型技術(shù)解決方案公司Trianz今天宣布,該公司與Amazon Web Services (AWS)簽訂了...

關(guān)鍵字: AWS AN BSP 數(shù)字化

倫敦2024年8月29日 /美通社/ -- 英國汽車技術(shù)公司SODA.Auto推出其旗艦產(chǎn)品SODA V,這是全球首款涵蓋汽車工程師從創(chuàng)意到認(rèn)證的所有需求的工具,可用于創(chuàng)建軟件定義汽車。 SODA V工具的開發(fā)耗時1.5...

關(guān)鍵字: 汽車 人工智能 智能驅(qū)動 BSP

北京2024年8月28日 /美通社/ -- 越來越多用戶希望企業(yè)業(yè)務(wù)能7×24不間斷運行,同時企業(yè)卻面臨越來越多業(yè)務(wù)中斷的風(fēng)險,如企業(yè)系統(tǒng)復(fù)雜性的增加,頻繁的功能更新和發(fā)布等。如何確保業(yè)務(wù)連續(xù)性,提升韌性,成...

關(guān)鍵字: 亞馬遜 解密 控制平面 BSP

8月30日消息,據(jù)媒體報道,騰訊和網(wǎng)易近期正在縮減他們對日本游戲市場的投資。

關(guān)鍵字: 騰訊 編碼器 CPU

8月28日消息,今天上午,2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會開幕式在貴陽舉行,華為董事、質(zhì)量流程IT總裁陶景文發(fā)表了演講。

關(guān)鍵字: 華為 12nm EDA 半導(dǎo)體

8月28日消息,在2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會上,華為常務(wù)董事、華為云CEO張平安發(fā)表演講稱,數(shù)字世界的話語權(quán)最終是由生態(tài)的繁榮決定的。

關(guān)鍵字: 華為 12nm 手機 衛(wèi)星通信

要點: 有效應(yīng)對環(huán)境變化,經(jīng)營業(yè)績穩(wěn)中有升 落實提質(zhì)增效舉措,毛利潤率延續(xù)升勢 戰(zhàn)略布局成效顯著,戰(zhàn)新業(yè)務(wù)引領(lǐng)增長 以科技創(chuàng)新為引領(lǐng),提升企業(yè)核心競爭力 堅持高質(zhì)量發(fā)展策略,塑強核心競爭優(yōu)勢...

關(guān)鍵字: 通信 BSP 電信運營商 數(shù)字經(jīng)濟

北京2024年8月27日 /美通社/ -- 8月21日,由中央廣播電視總臺與中國電影電視技術(shù)學(xué)會聯(lián)合牽頭組建的NVI技術(shù)創(chuàng)新聯(lián)盟在BIRTV2024超高清全產(chǎn)業(yè)鏈發(fā)展研討會上宣布正式成立。 活動現(xiàn)場 NVI技術(shù)創(chuàng)新聯(lián)...

關(guān)鍵字: VI 傳輸協(xié)議 音頻 BSP

北京2024年8月27日 /美通社/ -- 在8月23日舉辦的2024年長三角生態(tài)綠色一體化發(fā)展示范區(qū)聯(lián)合招商會上,軟通動力信息技術(shù)(集團)股份有限公司(以下簡稱"軟通動力")與長三角投資(上海)有限...

關(guān)鍵字: BSP 信息技術(shù)
關(guān)閉
關(guān)閉