如何在MDK中部署LVGL

【說在前面的話】

LVGL的剛剛完成了對LVGL8的維護(hù)更新，發(fā)布了v8.3.5版。相對master分支上正在開發(fā)的LVGL9，該版本是一個(gè)吐血推薦的穩(wěn)定版本：

它是 LVGL8 的維護(hù)性更新，API保持不變，只做了一些修修補(bǔ)補(bǔ)的工作

修復(fù)和更新了對眾多GPU的支持，包括

Arm-2D

NXP-PXP 和 NXP-VGLite

部分重構(gòu)了 STM32 DMA2D 的驅(qū)動(dòng)

用LVGL做產(chǎn)品的小伙伴可以放心食用。

【如何獲取 LVGL cmsis-pack】

1、用戶可以通過LVGL在Github的倉庫直接下載：

https://github.com/lvgl/lvgl/tree/release/v8.3/env_support/cmsis-pack

2、關(guān)注公眾號【裸機(jī)思維】后，發(fā)送消息“LVGL”獲取網(wǎng)盤鏈接。

3、用戶也直接通過MDK的Pack-Installer進(jìn)行直接安裝，就像lwIP那樣：

無論采用哪種方法，一旦完成安裝，以后就可以通過Pack-Installer來獲取最新版本啦。

【如何在MDK中部署LVGL】

步驟一：配置RTE

在MDK中通過菜單 Project->Manage->Run-Time Enviroment 打開RTE配置窗口：

在RTE配置界面中找到LVGL，將其展開：

與其它平臺下部署LVGL不同，cmsis-pack允許大家像點(diǎn)菜那樣只將所需的模塊（或者功能）加入到工程中。

注意，這里必點(diǎn)的是“Essential”，它是LVGL的核心服務(wù)。一般來說，為了使用LVGL所攜帶的豐富控件（Widgets），我們還需要選中“Extra Themes”。如果你是第一次為當(dāng)前硬件平臺進(jìn)行LVGL移植，則非常推薦加點(diǎn)“Porting”——它會(huì)為你添加移植所需的模板，非常方便。 單擊“OK”關(guān)閉RTE配置窗口，我們會(huì)看到LVGL已經(jīng)被加入到工程列表中了：

此時(shí)，我們就已經(jīng)可以成功編譯了。

步驟二：配置LVGL

將LVGL展開，找到配置頭文件 lv_conf_cmsis.h：

該文件其實(shí)就是LVGL官方移植文檔中所提到的lv_conf.h，它是基于lv_conf_template.h修改而來。值得說明的是，一些模塊的開關(guān)宏都被刪除了，例如：

LV_USE_GPU_ARM2D
LV_USE_GPU_STM32_DMA2D
LV_USE_GPU_NXP_PXP
……

這是因?yàn)椋?strong>當(dāng)我們在RTE配置窗口中勾選對應(yīng)選項(xiàng)時(shí)，cmsis-pack就會(huì)自動(dòng)把對應(yīng)的宏定義加入到 RTE_Components.h 里——換句話說，再也不用我們手動(dòng)添加啦！

其它對LVGL的配置，請參考官方文檔，這里就不再贅述。

步驟三：使用模板進(jìn)行移植

當(dāng)我們在RTE中選擇了porting模塊后，三個(gè)移植模板會(huì)被加入到工程列表中。

它們是可以編輯的，保存在當(dāng)前工程的RTE/LVGL目錄中。

這些模板極大的簡化了我們的驅(qū)動(dòng)移植過程，下面，我們將以lv_port_disp_template為例，為大家介紹這些模板的使用方法：

1、打開 lv_port_disp_template.h，將開頭處 #if0 修改為 #if 1，使整個(gè)頭文件生效：

2、打開lv_port_disp_template.c，將開頭處#if0修改為#if 1，使整個(gè)遠(yuǎn)文件生效。

4、根據(jù)官方 porting 文檔的指導(dǎo)，根據(jù)你的硬件實(shí)際情況，在三種緩沖模式中做出選擇：

需要特別強(qiáng)調(diào)的是：如果你的系統(tǒng)沒有DMA或者替用戶完成Frame Buffer刷新的專門LCD控制器，那么雙緩沖其實(shí)是沒有意義的（因?yàn)闊o論如何都是CPU在干活，因此不會(huì)比單緩沖模式有任何性能上的本質(zhì)不同）。

5、找到disp_init() 函數(shù)，并在其中添加LCD的初始化代碼。該函數(shù)會(huì)被 lv_port_disp_init()調(diào)用。

6、找到 disp_flush()函數(shù)，并根據(jù)你的硬件實(shí)際情況，將其改寫。比如這是使用 GLCD_DrawBitmap進(jìn)行實(shí)現(xiàn)的參考代碼：

/*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)
{
    if (disp_flush_enabled) {
        GLCD_DrawBitmap(area->x1,               //!< x
                        area->y1,               //!< y
                        area->x2 - area->x1 + 1,    //!< width
                        area->y2 - area->y1 + 1,    //!< height
????????????????????    (const?uint8_t?*)color_p);
????}
    /*IMPORTANT!!!
     *Inform the graphics library that you are ready with the flushing*/
    lv_disp_flush_ready(disp_drv);
}

GLCD_DrawBitmap 用于將給定的顯示緩沖區(qū)刷新到LCD，其函數(shù)原型如下：

/**
  fn          int32_t GLCD_DrawBitmap (uint32_t x, uint32_t y, uint32_t width, uint32_t height, const uint8_t *bitmap)
  rief       Draw bitmap (bitmap from BMP file without header)
  param[in]   x      Start x position in pixels (0 = left corner)
  param[in]   y      Start y position in pixels (0 = upper corner)
  param[in]   width  Bitmap width in pixels
  param[in]   height Bitmap height in pixels
  param[in]   bitmap Bitmap data
  
eturns
   -   0: function succeeded
   -  -1: function failed
*/
int32_t GLCD_DrawBitmap (uint32_t x, 
                         uint32_t y, 
                         uint32_t width, 
                         uint32_t height, 
                         const uint8_t *bitmap)

這里，5個(gè)參數(shù)之間的關(guān)系如下圖所示：

簡單來說，這個(gè)函數(shù)就是把bitmap指針?biāo)赶虻摹斑B續(xù)存儲區(qū)域”中保存的像素信息拷貝到LCD的一個(gè)指定矩形區(qū)域內(nèi)，這一矩形區(qū)域由位置信息（x,y）和體積信息（width，height）共同確定。

很多LCD都支持一個(gè)叫做“操作窗口”的概念，這里的窗口其實(shí)就是上圖中的矩形區(qū)域——一旦你通過指令設(shè)置好了窗口，隨后連續(xù)寫入的像素就會(huì)被依次自動(dòng)填充到指定的矩形區(qū)域內(nèi)（而無需用戶去考慮何時(shí)進(jìn)行折行的問題）。

此外，如果你有幸使用帶LCD控制器的芯片——LCD的顯示緩沖區(qū)被直接映射到Cortex-M芯片的4GB地址空間中，則我們可以使用簡單的存儲器讀寫操作來實(shí)現(xiàn)上述函數(shù)，以STM32F746G-Discovery開發(fā)板為例：

//!STM32F746G-Discovery
#define GLCD_WIDTH     480
#define GLCD_HEIGHT    272


#defineLCD_DB_ADDR   0xC0000000
#define LCD_DB_PTR    ((volatile uint16_t *)LCD_DB_ADDR)


int32_t GLCD_DrawBitmap (uint32_t x, 
                         uint32_t y, 
                         uint32_t width, 
                         uint32_t height, 
                         const uint8_t *bitmap) 
{
volatileuint16_t*phwDes=LCD_DB_PTR+y*GLCD_WIDTH+x;
    const uint16_t *phwSrc = (const uint16_t *)bitmap;
    for (int_fast16_t i = 0; i < height; i++) {
        memcpy ((uint16_t *)phwDes, phwSrc, width * 2);
        phwSrc += width;
        phwDes += GLCD_WIDTH;
    }


????return 0;
}

7、在 main.c 中加入對 lv_port_disp_template.h 的引用：

#include "lv_port_disp_template.h"

8、在main()函數(shù)中對LVGL進(jìn)行初始化：

int main(void)
{
...
    lv_init();
lv_port_disp_init();
    ...
    while(1) {
        
}
}

至此，我們就完成了LVGL在MDK工程的部署。是不是特別簡單？

【時(shí)間相關(guān)的移植】

根據(jù)官方移植文檔的要求，我們實(shí)際上還需要處理兩個(gè)問題：

讓lvgl 知道從復(fù)位開始經(jīng)歷了多少毫秒

以差不多5ms為間隔，調(diào)用函數(shù)lv_timer_handler() 來進(jìn)行事件處理（包括刷新）

依據(jù)平臺的不同，小伙伴們當(dāng)然有自己的解決方案。這里，我推薦一個(gè)MDK環(huán)境下基于perf_counter的方案，它更通用，也更簡單。關(guān)于它的使用文章，小伙伴可以參考《【喂到嘴邊了的模塊】超級嵌入式系統(tǒng)“性能/時(shí)間”工具箱》，這里就不再贅述。 步驟一：獲取 perf_counter 的cmsis-pack

關(guān)注公眾號【裸機(jī)思維】后，向后臺發(fā)送關(guān)鍵字“perf_counter”獲取對應(yīng)的cmsis-pack網(wǎng)盤鏈接。下載后安裝。

步驟二：在工程中部署 perf_counter

打開RTE配置窗口，找到 Utilities 后展開，選中 perf_counter的 Core：

需要說明的是，無論你用不用操作系統(tǒng)，這里關(guān)于各類操作系統(tǒng)的 Patch 你即便不選擇也能正常工作，不必?fù)?dān)心。單擊OK后即完成了部署。 在main()函數(shù)中初始化 perf_counter（別忘記添加對頭文件 perf_counter.h 的包含）：

#include "perf_counter.h"


intmain(void)
{
/*配置MCU的系統(tǒng)時(shí)鐘頻率 */

/*重要：更新 SystemCoreClock 變量*/
SystemCoreClockUpdate(); 

/*初始化perf_counter*/
init_cycle_counter(true);
...
while(1) {
}
...
}

需要特別說明的是：

調(diào)用 init_cycle_counter() 之前，最好通過 SystemCoreClockUpdate() 來將當(dāng)前的系統(tǒng)頻率更新到關(guān)鍵全局變量 SystemCoreClock 上。你當(dāng)然也可以自己用賦值語句來做，比如：

extern uint32_t SystemCoreClock;
SystemCoreClock=72000000ul;  /* 72MHz */

如果你已經(jīng)有應(yīng)用或者RTOS占用了SysTick（一般都是這樣），則應(yīng)該將 true 傳遞給 init_cycle_counter() 作為參數(shù)——告訴 perf_counter SysTick已經(jīng)被占用了；反之則應(yīng)該傳遞 false，此時(shí) perf_counter 會(huì)用最大值 0x00FFFFFF來初始化SysTick。

步驟三：更新超級循環(huán)

最新版本的LVGL為用戶提供了一個(gè)全新的方式來周期性的刷新 LVGL任務(wù)函數(shù)：lv_timer_handler_run_in_period(毫秒數(shù))。無論是裸機(jī)還是RTOS環(huán)境，你都可以簡單的將其插入超級循環(huán)中——以指定的ms數(shù)為間隔刷新LVGL的任務(wù)函數(shù)，例如：

int main(void)
{
...
lv_init();
    lv_port_disp_init();
    lv_port_indev_init();
    ...
while(1){
lv_timer_handler_run_in_period(LV_DISP_DEF_REFR_PERIOD);
    }
    
}

【跑分從未如此簡單】

完成移植后，也許你會(huì)急于想知道當(dāng)前環(huán)境下自己的平臺能跑出怎樣的幀率吧？別著急，LVGL的cmsis-pack已經(jīng)為您最好了準(zhǔn)備。打開RTE配置窗口，勾選benchmark：

在main.c 中加入對lv_demo_benchmark.h 的“間接”引用：

#include"demos/lv_demos.h"

在 LVGL 初始化代碼后，加入benchmark 無腦入口函數(shù)：

int main(void)
{
    lv_init();
    lv_port_disp_init();
    
#if LV_USE_DEMO_BENCHMARK
    lv_demo_benchmark();
#endif
    
    while(1) {
        lv_timer_handler_run_in_period(5);
    }
    
}

編譯，運(yùn)行，走起：

嗯…… Slow but common case……

最新的 benchmark 允許我們通過lv_demo_benchmark_set_finished_cb()注冊一個(gè)回調(diào)函數(shù)——用于告知我們所有測試已經(jīng)完成：

static void on_benchmark_finished(void)
{

}


int main(void)
{
    lv_init();
    lv_port_disp_init();
lv_port_indev_init();
    
    lv_demo_benchmark_set_finished_cb(&on_benchmark_finished);
    lv_demo_benchmark();
    //lv_demo_benchmark_set_max_speed(true);
    
//lv_demo_benchmark_run_scene(43);//runsceneno31


    while(1) {
        lv_timer_handler();
}
}

如果我們對具體某一個(gè)測試場景感興趣，還可以在注釋掉 lv_demo_benchmark()后通過函數(shù)lv_demo_benchmark_run_scene() 來運(yùn)行指定編號的場景。

【裝逼從未如此簡單】

完成移植后，也許你“又”會(huì)急于想知道當(dāng)前環(huán)境下自己的平臺能跑出怎樣的效果吧？（咦？為什么要說又？）別著急，LVGL的cmsis-pack已經(jīng)為您最好了準(zhǔn)備。打開RTE配置窗口，勾選Demo:Widgets：

在main.c中加入對lv_demo_widgets.h的“間接”引用：

#include "demos/lv_demos.h"

在 LVGL 初始化代碼后，加入Demo Widgets的無腦入口函數(shù)：

int main(void)
{


    lv_init();
    lv_port_disp_init();
    
#if LV_USE_DEMO_BENCHMARK
    lv_demo_benchmark();
#endif
    
#if LV_USE_DEMO_WIDGETS
    lv_demo_widgets();
#endif


    while(1) {
        lv_timer_handler_run_in_period(5);
    }
    
}

需要特別注意的是：要跑這個(gè)Demo，Stack（棧）不能小于 4K，切記，切記！

編譯，運(yùn)行，走起：

【說在后面的話】

最后，對在MDK中用cmsis-pack來部署LVGL的過程感到好奇，但又想有個(gè)參考的小伙伴，可以關(guān)注下面這個(gè)開源項(xiàng)目（也是我負(fù)責(zé)維護(hù)的）： https://github.com/lvgl/lv_port_an547_cm55_sim 按照readme的教程，你甚至不需要硬件就可以在MDK中免費(fèi)模擬一個(gè)Arm開發(fā)板來跑LVGL。加之最近MDK為非商業(yè)應(yīng)用場景提供了幾乎沒有什么限制的社區(qū)版，大家已經(jīng)可以挺直腰板白嫖MDK啦。

此外，如果你是Raspberry Pi Pico的愛好者，還可以參考這個(gè)官方倉庫（“又”是我維護(hù)的哦）：

https://github.com/lvgl/lv_port_raspberry_pi_pico_mdk

審核編輯：湯梓紅