引言

設(shè)計(jì)GUI的顯示元素動(dòng)起來(lái)，實(shí)際上是多張圖按照一定的節(jié)奏和變化依次刷屏實(shí)現(xiàn)的。LVGL在內(nèi)核設(shè)計(jì)了timer對(duì)象，用于實(shí)現(xiàn)周期回調(diào)的功能，開發(fā)者可以在周期調(diào)用的回調(diào)函數(shù)中，修改GUI顯示內(nèi)容的屬性，觸發(fā)LVGL顯示內(nèi)容的刷新，然后由LVGL的例行執(zhí)行程序重新刷屏，從而實(shí)現(xiàn)動(dòng)畫效果。

LVGL中的timer對(duì)象

LVGL的后臺(tái)是通過時(shí)間片輪詢對(duì)LVGL的交互任務(wù)進(jìn)行調(diào)度的。

在具體的MCU平臺(tái)上適配LVGL時(shí)，通常會(huì)使用SysTick定時(shí)器中斷服務(wù)程序調(diào)用lv_tick_inc（）函數(shù)驅(qū)動(dòng)LVGL內(nèi)部的計(jì)數(shù)器遞增，然后在主線程中調(diào)用lv_timer_handler()函數(shù)以時(shí)間片為節(jié)點(diǎn)執(zhí)行LVGL的日常任務(wù)（輸入事件、刷屏等操作）。從源碼上看，整個(gè)LVGL的程序框架，就是建立在定時(shí)器刻度的輪詢調(diào)度之上的，可見包含LVGL的MCU工程的頂級(jí)業(yè)務(wù)邏輯代碼如下：

lv_ui guider_ui;  
  
int main(void)  
{  
    BOARD_Init();  
    SysTick_Config(CLOCK_SYS_FREQ / 100); /* 10ms. */  
  
    lv_init();  
    lv_port_disp_init();  
    setup_ui(&guider_ui);  
    events_init(&guider_ui);  
    custom_init(&guider_ui);  
  
    while (1)  
    {  
        lv_timer_handler(); /* 執(zhí)行LVGL時(shí)間片輪詢. */  
    }  
}  
  
void SysTick_Handler(void)  
{  
    lv_tick_inc(10); /* 驅(qū)動(dòng)LVGL的定時(shí)器. */  
}

在LVGL中，當(dāng)需要實(shí)現(xiàn)一些基于時(shí)間變化顯示內(nèi)容的效果（動(dòng)畫），可以借用LVGL內(nèi)部的定時(shí)器對(duì)象來(lái)實(shí)現(xiàn)周期執(zhí)行程序的效果。關(guān)于LVGL應(yīng)用程序中使用定時(shí)器的API主要有兩個(gè)：

• lv_timer_create()
• lv_timer_del()

其中，使用lv_timer_create()函數(shù)創(chuàng)建一個(gè)定時(shí)器實(shí)例，并會(huì)向其中傳送初始化參數(shù)，指定本定時(shí)器的觸發(fā)周期和觸發(fā)時(shí)執(zhí)行的回調(diào)函數(shù)。而lv_timer_del()函數(shù)會(huì)回收這個(gè)定時(shí)器的資源（包括變量，以及掛在定時(shí)器任務(wù)列表中的指針），以減輕LVGL后臺(tái)調(diào)度器的負(fù)擔(dān)。

基于timer對(duì)象實(shí)現(xiàn)儀表走針

這里以設(shè)計(jì)一個(gè)速度表盤指針轉(zhuǎn)動(dòng)的樣例，展示timer定時(shí)器對(duì)象的用法。實(shí)現(xiàn)原理，在定時(shí)器組件的回調(diào)函數(shù)中，會(huì)周期性地改變meter組件中speed_scale_1_ndline_0屬性的值。當(dāng)改變LVGL顯示組件的任何可視化組件的屬性后，LVGL會(huì)自動(dòng)刷新顯示內(nèi)容，從而形成動(dòng)畫效果。

在GUI Guider的編輯頁(yè)面中新建一個(gè)meter組件的對(duì)象，如圖x所示。

圖x 在GUI Guider中新建meter對(duì)象

將新建meter對(duì)象改名為meter_speed，這個(gè)名字將會(huì)在后面自定義編寫代碼時(shí)，用于引用這個(gè)meter對(duì)象實(shí)例。手工調(diào)整一下表盤的尺寸。

然后，選中主編輯區(qū)的頁(yè)面區(qū)域（對(duì)應(yīng)選中當(dāng)前的screen對(duì)象），再在編輯區(qū)域的右側(cè)，在事件（Events）頁(yè)面中，單擊加號(hào)，創(chuàng)建一個(gè)事件，編輯事件。

編輯事件的觸發(fā)方式，即在什么時(shí)機(jī)產(chǎn)生當(dāng)前編輯的事件，常見的事件觸發(fā)方式有：Load Start（開始載入當(dāng)前對(duì)象時(shí)）、Loaded（完成載入當(dāng)前對(duì)象時(shí)）、Unload Start（開始從本對(duì)象切換到別處時(shí)）、Unloaded（完成從本對(duì)象切換到別處時(shí)）等，如圖x所示。每種顯示元素的對(duì)象都有各自的觸發(fā)方式，甚至還有一些顯示元素的對(duì)象沒有觸發(fā)事件可創(chuàng)建。

圖x 在GUI Guider中為事件編輯觸發(fā)方式

選定Trigger觸發(fā)方式后，還需要選定Target目標(biāo)對(duì)象。此時(shí)，目標(biāo)對(duì)象的下拉列表中會(huì)自動(dòng)整理出當(dāng)前整個(gè)GUI Guider工程中已經(jīng)創(chuàng)建的有所顯示元素對(duì)象。如圖x所示。

圖x 在GUI Guider中為事件編輯目標(biāo)對(duì)象

這里需要重點(diǎn)說(shuō)明的是，觸發(fā)方式描述的當(dāng)前在編輯區(qū)域中選中的對(duì)象的動(dòng)作，當(dāng)選定觸發(fā)方式后，本事件的標(biāo)簽名稱也就自動(dòng)改成了<當(dāng)前對(duì)象名>_<觸發(fā)方式>。目標(biāo)對(duì)象反映的是即將改變屬性的對(duì)象，對(duì)應(yīng)部分可選的屬性也在事件頁(yè)面下方展示出來(lái)，可在圖形頁(yè)面中配置。當(dāng)然，并不是所有的可編輯屬性都被做成了在對(duì)話框中可配置的，本例就在最后一行，選擇了執(zhí)行自定義程序，在彈出的代碼編輯對(duì)話框中添加了創(chuàng)建定時(shí)器對(duì)象timer_meter_speed的語(yǔ)句。如圖x所示。

圖x 在GUI Guider中為事件編輯自定義執(zhí)行的程序代碼

圖x中所示，自定義編寫C源碼，當(dāng)觸發(fā)Screen的Loaded事件時(shí)，將執(zhí)行圖中代碼，創(chuàng)建timer_meter_speed定時(shí)器對(duì)象實(shí)例。保存工程后生成代碼，對(duì)應(yīng)地，可在GUI Guider工程中的./generated/event_init.c文件中看到對(duì)應(yīng)生成的代碼。

#include "events_init.h"  
#include < stdio.h >  
#include "lvgl.h"  
#include "custom.h"  
  
static lv_timer_t * timer_meter_speed;  
  
void events_init(lv_ui *ui)  
{  
}  
  
static void screen_event_handler(lv_event_t *e)  
{  
 lv_event_code_t code = lv_event_get_code(e);  
 switch (code)  
 {  
 case LV_EVENT_SCREEN_LOADED:  
 {  
  timer_meter_speed = lv_timer_create(timer_meter_speed_cb, 100, &guider_ui);  
 }  
  break;  
 case LV_EVENT_SCREEN_UNLOADED:  
 {  
  lv_timer_del(timer_meter_speed);  
 }  
  break;  
 default:  
  break;  
 }  
}  
  
void events_init_screen(lv_ui *ui)  
{  
 lv_obj_add_event_cb(ui- >screen, screen_event_handler, LV_EVENT_ALL, ui);  
}

但是回調(diào)函數(shù)timer_meter_speed_cb()仍需要開發(fā)者自行在custom.c文件中自行創(chuàng)建，GUI Guider不會(huì)自動(dòng)更新。代碼如下：

static int32_t speed = 50;  
static bool is_increase = true;  
  
  
/**  
 * Create a demo application  
 */  
  
void custom_init(lv_ui *ui)  
{  
    /* Add your codes here */  
}  
  
void timer_meter_speed_cb(lv_timer_t *t)  
{  
    lv_ui * gui = t- >user_data;  
    lv_meter_set_indicator_value(gui- >screen_meter_speed, gui- >screen_meter_speed_scale_1_ndline_0, speed);  
  
    if (speed >= 90)  
    {  
        is_increase = false;  
    }  
    if (speed <= 20)  
    {  
        is_increase = true;  
    }  
    if (is_increase)  
    {  
        speed++;  
    }  
    else  
    {  
        speed--;  
    }  
}

這里實(shí)現(xiàn)的內(nèi)容是，在MCU上運(yùn)行LVGL時(shí)，一旦顯示完成當(dāng)前的屏幕頁(yè)面后，立即創(chuàng)建定時(shí)器對(duì)象timer_meter_speed，這個(gè)定時(shí)器將會(huì)每隔100ms調(diào)用一次回調(diào)函數(shù)timer_meter_speed_cb()，在timer_meter_speed_cb()函數(shù)中，更新變量speed的值，然后通過lv_meter_set_indicator_value()函數(shù)，改變screen_meter_speed對(duì)象中screen_meter_speed_scale_1_ndline_0屬性的值。每隔100ms改變一次screen_meter_speed對(duì)象的屬性值，將會(huì)觸發(fā)顯示內(nèi)容的刷新，從而在顯示屏上顯現(xiàn)出動(dòng)畫效果。

將GUI Guider生成的程序下載到MCU之前，可以先在GUI Guider的工程中模擬運(yùn)行一次，一方面可以幫忙排除編譯錯(cuò)誤（GUI Guider使用armgcc將LVGL和生成的源碼一起編譯），另一方面也方便預(yù)覽運(yùn)行效果。使用LVGL組件的過程不涉及到對(duì)具體MCU硬件的依賴，因此完全可以在模擬環(huán)境中預(yù)覽實(shí)際執(zhí)行的效果。如圖x所示。

圖x 預(yù)覽在GUI Guider中創(chuàng)建的表盤對(duì)象

最后，編譯Keil工程，下載到MCU開發(fā)板?？梢钥吹皆贛CU開發(fā)板上運(yùn)行動(dòng)圖的效果，如圖x所示。

圖x 在MCU開發(fā)板上運(yùn)行轉(zhuǎn)動(dòng)指針的表盤

小結(jié)

timer對(duì)象本身只是一個(gè)實(shí)現(xiàn)周期調(diào)度的機(jī)制，開發(fā)者可以在周期回調(diào)的函數(shù)內(nèi)部，修改和重置顯示各種對(duì)象的屬性，觸發(fā)LVGL刷屏，從而實(shí)現(xiàn)動(dòng)畫的效果。