前言

由于近期要做一個(gè)裝置 ，想著把裝置做的好看一點(diǎn)，就打算使用 GUI 來(lái)做一個(gè)信息的相關(guān)顯示，之前聽(tīng)說(shuō)過(guò)一款比較輕量級(jí)的圖形庫(kù)，也就是 lvgl，手頭又正好有一塊搭配屏幕的野火指南者開(kāi)發(fā)板，單片機(jī)型號(hào)是 STM32F103VET6，F(xiàn)lash 為 512KB，RAM 為 64KB，屏幕為 3.2 寸電阻觸摸屏，我們?cè)趤?lái)看一下運(yùn)行 lvgl 這個(gè) GUI 需要的資源，所需資源如下圖所示：

幾個(gè)比較關(guān)鍵的就是控制器的主頻需要大于 16 MHz，對(duì)于 STM32F103來(lái)說(shuō)，主頻可以達(dá)到 72MHz，滿足要求，所需要的 Flash 要大于 64KB,對(duì)于指南者這款開(kāi)發(fā)板來(lái)將，他的主控是 STM32F103VET6，F(xiàn)lash 具有 512KB，遠(yuǎn)遠(yuǎn)滿足要求。對(duì)于 RAM 來(lái)講，lvgl 所需要的 RAM 是 8KB，推薦使用 24 KB，對(duì)于具有 64KB的 STM32F103VET6 來(lái)講，是完全滿足要求的。

綜上，可以知道，使用野火指南者開(kāi)發(fā)板來(lái)跑 lvgl 是完全沒(méi)有問(wèn)題的。

移植準(zhǔn)備

為了更加快捷的完成移植，在這里就直接使用野火官方寫(xiě)好的液晶屏幕的驅(qū)動(dòng)來(lái)進(jìn)行 lvgl 的移植，首先找到野火配套例程中的第 30 號(hào)例程，也就是電阻觸摸屏--觸摸畫(huà)板這個(gè)例程，將這個(gè)例程拷貝出來(lái)，在這個(gè)基礎(chǔ)上進(jìn)行移植。

拷貝出來(lái)之后，進(jìn)入到工程目錄里，工程目錄結(jié)構(gòu)如下圖所示：

緊接著，我們進(jìn)到 lvgl 的 github 倉(cāng)庫(kù)，選擇已經(jīng)發(fā)布的 v7.6.1 版本進(jìn)行移植，

庫(kù).png)

我們將代碼下載下來(lái)，放到 Libraries 里面，如下圖所示：

至此，我們就完成了移植前的準(zhǔn)備工作，接下來(lái)進(jìn)行移植代碼。

導(dǎo)入 lvgl 庫(kù)到 keil 工程中

首先在 keil 工程中新建 lvgl Groups 組，然后將?lvgl/src/lv_core?lvgl/src/lv_draw?lvgl/src/lv_font?lvgl/src/lv_hal?lvgl/src/lv_misc?lvgl/src/lv_themes?lvgl/src/lv_widgets?路徑下的文件加入到新建的組中， 如下圖所示：

緊接著，我們來(lái)看一下 lvgl 官網(wǎng)中的文檔對(duì)于 lvgl 運(yùn)行的要求：

行要求.png)

從序號(hào) 1 ，可以看出，棧空間需要大于 2KB 的空間，推薦大于 8 KB，我們這里設(shè)置?？臻g為 8KB，也就是將如下所示位置的值改為?0x00002000

從序號(hào) 2 可以知道，它需要 C99 或者更新的編譯器，我們這里選擇 C99 進(jìn)行編譯，


修改 lv_conf.h 配置文件

接下來(lái)，需要修改 lv_conf.h 這個(gè)文件，這個(gè)文件需要修改的地方有好幾個(gè)，分別是如下幾個(gè)地方：

• 首先先將田間編譯宏更改為?#if 1

• 修改屏幕的分辨率，由于當(dāng)前所用的野火指南者所搭配的是分辨率為 320 * 240 的，因此需要將?LV_HOR_RES_MAX更改為?240以及將?LV_VER_RES_MAX?更改為?320?,如下圖所示：

• 修改?LV_COLOR_DEPTH,此值 1 是用于單色屏，當(dāng)前我們的是彩色屏，應(yīng)該設(shè)置為 16

• 修改LV_DPI?的值,默認(rèn)值為 130,我們把他設(shè)置到 60,這個(gè)宏是用來(lái)調(diào)節(jié)界面縮放比例的,此值越大,控件分布的就越散,控件自身的間隔也會(huì)變大 ，如下圖所示:

• 配置 lvgl 運(yùn)行的動(dòng)態(tài)堆的大小，再官方給出的堆的要求中，對(duì)于堆的要求是這樣的：

推薦使用大于 16KB 的堆內(nèi)存，因此這里配置的是 20KB，也就是將LV_MEM_SIZE?設(shè)置為 20KB，也就是將?LV_MEM_SIZE?的值設(shè)置為?20U * 1024U

• 因?yàn)楫?dāng)前開(kāi)發(fā)板沒(méi)有使用到 GPU 和文件系統(tǒng)，所以將 GPU 和文件系統(tǒng)的宏定義設(shè)置為 0，如下所示：

• .png)

至此，lvgl 的文件就修改完畢了。接下來(lái)，就需要提供 lvgl 運(yùn)行的心跳節(jié)拍

lvgl 心跳節(jié)拍設(shè)置

這里采取的一個(gè)方案是通過(guò)定時(shí)器來(lái)為 lvgl 來(lái)提供心跳節(jié)拍，更為直觀的敘述也就是通過(guò)定時(shí)器產(chǎn)生 1ms 的定時(shí)中斷，然后在中斷服務(wù)函數(shù)里調(diào)用 lvgl 的心跳函數(shù)。野火的官方例程李提供了定時(shí)中斷的代碼，我們直接將這部分代碼移植過(guò)來(lái)就好，下面是定時(shí)中斷服務(wù)函數(shù)里面的相關(guān)內(nèi)容：

#include?"lvgl.h"
void?TIM6_IRQHandler(void)
{
????if?(?TIM_GetITStatus(?TIM6,?TIM_IT_Update)?!=?RESET?)?
????{???
????????lv_tick_inc(1);?????????????????????//lvgl?的?1ms?心跳
????????TIM_ClearITPendingBit(TIM6?,?TIM_FLAG_Update);???????????
????}
}

有了中斷服務(wù)函數(shù)，那相應(yīng)的就需要有初始化，下面是主函數(shù)的相關(guān)代碼：

int?main(void)
{????????
????//LCD?初始化
????ILI9341_Init();??

????//觸摸屏初始化
????XPT2046_Init();

????BASIC_TIM_Init();

????lv_init();??????????/*?lv?系統(tǒng)初始化?*/

????//其中0、3、5、6?模式適合從左至右顯示文字，
????//不推薦使用其它模式顯示文字?其它模式顯示文字會(huì)有鏡像效果??????????
????//其中?6?模式為大部分液晶例程的默認(rèn)顯示方向??
????ILI9341_GramScan?(?3?);????

????while?(?1?)
????{
????????lv_task_handler();
????}

}

最后，我們需要將 lvgl 的相關(guān)頭文件路徑加入到 keil 的工程路徑中去，添加完成之后，就可以編譯了，但是使用野火的編寫(xiě)的 LCD 驅(qū)動(dòng)編譯之后會(huì)出現(xiàn)三個(gè)錯(cuò)誤，如下圖所示：

出現(xiàn)該錯(cuò)誤的原因是因?yàn)?C99 跟內(nèi)聯(lián)函數(shù)的一些關(guān)聯(lián)，具體的細(xì)節(jié)不在這里深究了，更改方式是在三個(gè)函數(shù)前加上?static,如下圖所示：

這樣更改之后，整個(gè)代碼就編譯通過(guò)了。

移植底層屏幕驅(qū)動(dòng)

接下來(lái)就需要完成移植屏幕底層驅(qū)動(dòng)了，對(duì)于這部分內(nèi)容，總的來(lái)說(shuō)分為兩部分：

• 移植底層顯示驅(qū)動(dòng)

• 移植底層觸摸驅(qū)動(dòng)

我們將?Libraries\lvgl\examples\porting里面的文件復(fù)制到Libraries\lvgl_driver里面，并重命名為如下幾個(gè)文件：

移植底層顯示驅(qū)動(dòng)

移植底層顯示驅(qū)動(dòng)只需要更改?lv_port_disp.c和?lv_port_disp.h兩個(gè)文件，首先是?lv_port_disp.h的更改，更改后的文件為：

#if?1

#ifndef?LV_PORT_DISP_H
#define?LV_PORT_DISP_H

#ifdef?__cplusplus
extern?"C"?{
#endif

#include?"lvgl/lvgl.h"

void?lv_port_disp_init(void);

#ifdef?__cplusplus
}?/*?extern?"C"?*/
#endif

#endif?/*LV_PORT_DISP_TEMPL_H*/

#endif?/*Disable/Enable?content*/

更改后的lv_port_disp.c文件為：

第一個(gè)是留下一個(gè)例子，第二個(gè)是更改屏幕的分辨率。第三部分是

紅色標(biāo)注部分的函數(shù)也就是以單個(gè)像素點(diǎn)填充屏幕的函數(shù)，這個(gè)函數(shù)野火寫(xiě)的不滿足調(diào)用要求，筆者稍微將原來(lái)的驅(qū)動(dòng)代碼進(jìn)行了更改，實(shí)現(xiàn)了如下所示的單個(gè)像素點(diǎn)填充函數(shù)：

void?ILI9341_DrawPixel(uint16_t?usX,?uint16_t?usY,uint16_t?color)
{
????if?((usX?????{
????????ILI9341_SetCursor?(usX,usY);

????????ILI9341_FillColor?(1,color);
????}
}

這樣，就完成了底層屏幕顯示驅(qū)動(dòng)的移植。

底層屏幕觸摸驅(qū)動(dòng)移植

移植底層屏幕觸摸驅(qū)動(dòng)只需要更改?lv_port_indev.c和?lv_port_indev.h兩個(gè)文件，首先是?lv_port_indev.h的更改，更改后的文件為

#if?1

#ifndef?LV_PORT_INDEV_H
#define?LV_PORT_INDEV_H

#ifdef?__cplusplus
extern?"C"?{
#endif

#include?"lvgl/lvgl.h"
void?lv_port_indev_init(void);


#ifdef?__cplusplus
}?/*?extern?"C"?*/
#endif

#endif?/*LV_PORT_INDEV_TEMPL_H*/

#endif?/*Disable/Enable?content*/

緊接著就是lv_port_indev.c的更改，關(guān)于這部分代碼，lvgl 官方給出了好幾個(gè)輸入設(shè)備的函數(shù)，觸摸屏，鼠標(biāo)，小鍵盤(pán)，旋鈕，按鍵等輸入設(shè)備，我們這里所選用的是觸摸屏，那么就可以把其他的都刪去。下面是幾處關(guān)鍵代碼：

最后，加入一個(gè)簡(jiǎn)單的示例，GUI 就可以運(yùn)行起來(lái)了，加如的程序如下所示：

static?void?btn_event_cb(lv_obj_t?*?btn,?lv_event_t?event)
{
????if(event?==?LV_EVENT_CLICKED)?{
????????static?uint8_t?cnt?=?0;
????????cnt++;

????????/*Get?the?first?child?of?the?button?which?is?the?label?and?change?its?text*/
????????lv_obj_t?*?label?=?lv_obj_get_child(btn,?NULL);
????????lv_label_set_text_fmt(label,?"Button:?%d",?cnt);
????}
}

/**
?*?Create?a?button?with?a?label?and?react?on?Click?event.
?*/
void?lv_ex_get_started_1(void)
{
????lv_obj_t?*?btn?=?lv_btn_create(lv_scr_act(),?NULL);?????/*Add?a?button?the?current?screen*/
????lv_obj_set_pos(btn,?10,?10);????????????????????????????/*Set?its?position*/
????lv_obj_set_size(btn,?120,?50);??????????????????????????/*Set?its?size*/
????lv_obj_set_event_cb(btn,?btn_event_cb);?????????????????/*Assign?a?callback?to?the?button*/

????lv_obj_t?*?label?=?lv_label_create(btn,?NULL);??????????/*Add?a?label?to?the?button*/
????lv_label_set_text(label,?"Button");?????????????????????/*Set?the?labels?text*/
}

主函數(shù)如下所示：

int?main(void)
{????????
????//LCD?初始化
????ILI9341_Init();??

????//觸摸屏初始化
????XPT2046_Init();

????BASIC_TIM_Init();

????lv_init();??????????/*?lv?系統(tǒng)初始化?*/
????lv_port_disp_init();????/*?lvgl?顯示接口初始化，放在?lv_init()后面?*/
????lv_port_indev_init();???/*?lvgl?輸入接口初始化，放在?lv_init()?后面?*/

????lv_ex_get_started_1();


????//其中0、3、5、6?模式適合從左至右顯示文字，
????//不推薦使用其它模式顯示文字?其它模式顯示文字會(huì)有鏡像效果??????????
????//其中?6?模式為大部分液晶例程的默認(rèn)顯示方向??
????ILI9341_GramScan?(?6?);????

????while?(?1?)
????{
????????lv_task_handler();
????}

}

最終的顯示效果如下圖所示：

官方的 github 倉(cāng)庫(kù)也有做好的比較完善的 demo 可供參考，下圖是 github 上的例程的截圖：

參照 README.md 文檔就可以順利跑起來(lái)，下圖是運(yùn)行 demo 的動(dòng)圖，效果還是很華麗的。

總結(jié)

上述就是移植 lvgl 的整個(gè)過(guò)程，寫(xiě)下來(lái)記錄一下，移植結(jié)束，可以學(xué)習(xí)如何制作一個(gè)精美的界面了，這次的內(nèi)容就到這里，如果在使用過(guò)程中，有新的體會(huì)，再進(jìn)行更文~

如果你覺(jué)得我的文章對(duì)你有所幫助，歡迎再看，點(diǎn)贊，轉(zhuǎn)發(fā)三連吶~歡迎各位添加好友，下圖是筆者的個(gè)人微信名片

歡迎關(guān)注筆者的公眾號(hào)，筆者將不定期更新文章~