1.littleVGL介紹

LVGL（Light and Versatile Graphics Library）是一個(gè)免費(fèi)的開(kāi)源圖形庫(kù)，提供創(chuàng)建具有易于使用的圖形元素、漂亮的視覺(jué)效果和低內(nèi)存占用的嵌入式 GUI 所需的一切。

1.1 littleVGL 的主要特性如下:

? 具有非常豐富的內(nèi)置控件,像 buttons, charts, lists, sliders, images 等

? 高級(jí)圖形效果：動(dòng)畫(huà)，反鋸齒，透明度，平滑滾動(dòng)

? 支持多種輸入設(shè)備,像 touchpad, mouse, keyboard, encoder 等

? 支持多語(yǔ)言的 UTF-8 編碼

? 支持多個(gè)和多種顯示設(shè)備，例如同步顯示在多個(gè)彩色屏或單色屏上

? 完全自定制的圖形元素

? 硬件獨(dú)立于任何微控制器或顯示器

? 可以縮小到最小內(nèi)存 (64 kB Flash, 16 kB RAM)

? 支持操作系統(tǒng)、外部?jī)?chǔ)存和 GPU（非必須）

? 僅僅單個(gè)幀緩沖設(shè)備就可以呈現(xiàn)高級(jí)視覺(jué)特效

? 使用 C 編寫(xiě)以獲得最大兼容性(兼容 C++)

? 支持 PC 模擬器

? 為加速 GUI 設(shè)計(jì),提供教程,案例和主題,支持響應(yīng)式布局

? 提供了在線和離線文檔

? 基于自由和開(kāi)源的 MIT 協(xié)議

1.2 LVGL移植過(guò)程

獲取LVGL官方驅(qū)動(dòng)，例程。

https://gitcode.net/mirrors/lvgl/lvgl/-/tree/v6.0

LVGL版本眾多，更新很快，初學(xué)者建議使用老版本，資料多，便于學(xué)習(xí)。

現(xiàn)在我們獲取6.0版本。

https://gitcode.net/mirrors/lvgl/lv_examples

獲取LVGL官方例程。

開(kāi)始移植，先準(zhǔn)備好一個(gè)STM32工程，新建LVGL和LVGL_APP文件夾

LVGL ：存放官方驅(qū)動(dòng)和例程等庫(kù)文件

LVGL_APP ：存放自己的程序

將下載的官方驅(qū)動(dòng)文件和例程解壓并存放在LVGL文件夾中，接著把 LVGL/lvgl-v6.0/lv_conf_template.h和 LVGL/lv_examples-v6.0/lv_ex_conf_templ.h

倆個(gè)配置模板文件統(tǒng)統(tǒng)拷貝到 LVGL目錄下,然后對(duì)這個(gè) 2 文件分別重命名為

lv_conf.h和 lv_ex_conf.h。接著還要在LVGL目錄下新建一個(gè) lvgl_driver子目錄,這個(gè)目錄是用來(lái)放底層驅(qū)動(dòng)文件的。

找到LVGL/lvglv-6.0/porting里面的

lv_port_disp_template.c,lv_port_disp_template.h,

然后將兩個(gè)個(gè)文件拷貝到 LVGLlvgl_driver 目錄下面,并分別重命名為

lv_port_disp.c, lv_port_disp.h,

接著我們打開(kāi) Keil 工程,點(diǎn)擊圖標(biāo),打開(kāi)分組管理面板,在 Groups 欄下新建 LVGL、LVGL_APP 、LVGL_driver,選中 LVGL分組,接著點(diǎn)擊 Add Files 把，LVGLlvgl-v6.0src

文件下的所有c文件全部添加。

新建LVGL_driver，將底層驅(qū)動(dòng)文件添加進(jìn)去。

點(diǎn)擊圖標(biāo),選擇c/c++選項(xiàng)，將頭文件目錄添加，如下圖所示：

打開(kāi)lv_conf.h文件。

10行：0修改為1，使整個(gè)配置文件生效。

#if 1

23、24行：LV_HOR_RES_MAX和 LV_HOR_RES_MAX，這個(gè)是告訴LVGL顯示屏分辨率多大，請(qǐng)根據(jù)自己的屏幕大小將分辨率寫(xiě)入其中

LV_HOR_RES_MAX240

LV_HOR_RES_MAX320

32行：LV_COLOR_DEPTH 顏色深度，屏幕采用RGB565，選擇16。

#define LV_COLOR_DEPTH 16

56行：LV_DPI 的值,默認(rèn)值為 100,我們把他設(shè)置到 60,這個(gè)宏是用來(lái)調(diào)節(jié)界面縮 放比例的,此值越大,控件分布的就越散,控件自身的間隔也會(huì)變大

#define LV_DPI 60

72行：LV_MEM_SIZE 的大小,這個(gè)就是控制 littleVGL中所謂的動(dòng)態(tài)數(shù)據(jù)堆的大小,是用來(lái)給控件的創(chuàng)建動(dòng)態(tài)分配空間的,我們這里設(shè)置為 20KB 的大小

#define LV_MEM_SIZE(20U * 1024U)

145行：LV_USE_GPU ,我們把它設(shè)置為 0,即不使能 GPU 功能

#define LV_USE_GPU 0

148行：LV_USE_FILESYSTEM ,設(shè)置為0,即不使能文件系統(tǒng) 的功能

#define LV_USE_FILESYSTEM 0

234行：

LV_THEME_LIVE_UPDATE,

LV_USE_THEME_TEMPL,

LV_USE_THEME_DEFAULT,

LV_USE_THEME_ALIEN,

LV_USE_THEME_NIGHT,

LV_USE_THEME_MONO,

LV_USE_THEME_MATERIAL,

LV_USE_THEME_ZEN,

LV_USE_THEME_NEMO

這些宏都是跟littleVGL自帶的主題相關(guān)的,如果要演示官方自帶的例程,這些全部使能,注意,在實(shí)際項(xiàng)目中,我們一般最多使能一個(gè)，如果我們項(xiàng)目根本就用不到其自帶的主題,那么我們應(yīng)該把這些宏全部禁止,因?yàn)檫@樣可以節(jié)省 flash 和 ram。現(xiàn)在我們要演示官方例程，可以把他們?nèi)渴鼓堋?/span>

修改 lv_ex_conf.h 文件

9行：0修改為1 使能整個(gè)文件

#if 1

然后把下面這些宏設(shè)定為1，其余保持不變即可。

LV_EX_KEYBOARD,

LV_EX_MOUSEWHEEL,

LV_USE_TESTS,

LV_USE_TUTORIALS,

LV_USE_BENCHMARK,

LV_USE_DEMO,

LV_USE_TERMINAL

為 lVGL 提供心跳節(jié)拍

Lvgl有自己的任務(wù)系統(tǒng)，所以在此咱們?yōu)?/span>LVGL提供一個(gè)系統(tǒng)基準(zhǔn)時(shí)間。

打開(kāi)delay.c，添加#include "lvgl.h"頭文件，在系統(tǒng)定時(shí)器中斷服務(wù)函數(shù)里面添加lv_tick_inc(1);

（這里可以使用任何一個(gè)定時(shí)器的中斷服務(wù)函數(shù)作為時(shí)間基準(zhǔn)，并不是只能是系統(tǒng)定時(shí)器。但是要注意，中斷服務(wù)函數(shù)需每1ms觸發(fā)一次。）

編譯 工程報(bào)錯(cuò)。

仔細(xì)觀察錯(cuò)誤，這一共是兩種錯(cuò)誤。

第一個(gè)錯(cuò)誤：點(diǎn)擊跳轉(zhuǎn)，lv_conf.h文件 485行。

將頭文件lvgl修改為lvgl-v6.0

第二個(gè)錯(cuò)：

將這5個(gè)文件，將頭文件都修改為#include "lvgl.h"即可

再編譯一下,就只剩下警告,沒(méi)有錯(cuò)誤了,接下來(lái)我們來(lái)解決警告。在這些警告中,仔細(xì)看其實(shí)就只有 68, 111, 550 這三種警告,我可以告訴大家,這個(gè)警告對(duì)我們項(xiàng)目沒(méi)有任何影響的,但是強(qiáng)迫癥患者看著就是難受,辛虧 Keil 可以通過(guò)設(shè)置,把某種警告給屏蔽掉,點(diǎn)擊

圖標(biāo),切換到 C/C++選項(xiàng)卡,在 Misc Controls 中填入 --diag_suppress=68 --diag_supp

ress=111 --diag_suppress=550,如下圖所示.

點(diǎn)擊確定，再次編譯就沒(méi)有警告了。

修改底層驅(qū)動(dòng)：打開(kāi)lv_port_disp.c文件

7行：0修改為1

12行：頭文件修改為：#include "lv_port_disp.h"

然后就是修改

void lv_port_disp_init(void)

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

這兩個(gè)函數(shù)。

第一個(gè)函數(shù)是用來(lái)給LVGL提供一個(gè)繪制對(duì)象的緩沖區(qū)。內(nèi)容修改如下：

第二個(gè)函數(shù)是為了給LCD屏寫(xiě)入數(shù)據(jù)顯示的函數(shù)，所以咱們調(diào)用LCD顯示函數(shù)。如下：

然后修改h文件：

至此，顯示底層驅(qū)動(dòng)就修改好了。

LVGL移植成功。

測(cè)試：寫(xiě)如下函數(shù)：

在主函數(shù)里面調(diào)用：

編譯下載：出現(xiàn)兩個(gè)基礎(chǔ)的對(duì)象。

到此，LVGL移植成功