引言

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

LVGL中的timer對象

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

在具體的MCU平臺上適配LVGL時，通常會使用SysTick定時器中斷服務(wù)程序調(diào)用lv_tick_inc（）函數(shù)驅(qū)動LVGL內(nèi)部的計數(shù)器遞增，然后在主線程中調(diào)用lv_timer_handler()函數(shù)以時間片為節(jié)點執(zhí)行LVGL的日常任務(wù)（輸入事件、刷屏等操作）。從源碼上看，整個LVGL的程序框架，就是建立在定時器刻度的輪詢調(diào)度之上的，可見包含LVGL的MCU工程的頂級業(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時間片輪詢. */  
    }  
}  
  
void SysTick_Handler(void)  
{  
    lv_tick_inc(10); /* 驅(qū)動LVGL的定時器. */  
}

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

• lv_timer_create()
• lv_timer_del()

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

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

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

在GUI Guider的編輯頁面中新建一個meter組件的對象，如圖x所示。

圖x 在GUI Guider中新建meter對象

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

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

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

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

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

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

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

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

圖x中所示，自定義編寫C源碼，當(dāng)觸發(fā)Screen的Loaded事件時，將執(zhí)行圖中代碼，創(chuàng)建timer_meter_speed定時器對象實例。保存工程后生成代碼，對應(yīng)地，可在GUI Guider工程中的./generated/event_init.c文件中看到對應(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不會自動更新。代碼如下：

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--;  
    }  
}

這里實現(xiàn)的內(nèi)容是，在MCU上運行LVGL時，一旦顯示完成當(dāng)前的屏幕頁面后，立即創(chuàng)建定時器對象timer_meter_speed，這個定時器將會每隔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對象中screen_meter_speed_scale_1_ndline_0屬性的值。每隔100ms改變一次screen_meter_speed對象的屬性值，將會觸發(fā)顯示內(nèi)容的刷新，從而在顯示屏上顯現(xiàn)出動畫效果。

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

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

最后，編譯Keil工程，下載到MCU開發(fā)板。可以看到在MCU開發(fā)板上運行動圖的效果，如圖x所示。

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

小結(jié)

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