【說在前面的話】

• 資源相對緊張的MCU，無法負擔(dān)起傳統(tǒng)的嵌入式GUI（比如以體積“小巧”著稱的LVGL）：
• Flash <= 64K，或者
• 應(yīng)用本身已經(jīng)占用了大量Flash空間，留給GUI的空間非常有限
• SRAM <= 16K
• 需要實現(xiàn)的GUI界面較為簡單（這點在隨后會詳細介紹）
• 幀率要求較低（傳說中的8幀不卡、9幀流暢、10幀電競）
  

【基于面板的界面設(shè)計】

就本文要討論的內(nèi)容來說，我們可以簡單的關(guān)注以下的一些要點：

• 智能設(shè)備的界面強調(diào)“簡潔”、并希望“讓用戶的注意力一次只集中在一件簡單的事物上”。

• 與Windows不同，智能設(shè)備的界面很少（或者極力避免）窗口重疊
• 界面的基本單位不是“窗體（Window）”，而是以整個屏幕為基本單位的“面板（Panel）”
• 每個面板的內(nèi)容都盡可能簡單、通過留白的方式強調(diào)那些需要用戶注意的內(nèi)容；
• 每個面板的功能都盡可能單一：
• 一般避免在同一個面板中擠進多個不太相關(guān)的功能；
• 相關(guān)的內(nèi)容，如果能夠放得下，且美觀，則可以有主次的布置在同一個面板中以減少用戶切換面板帶來的不便；
• 如果相關(guān)的內(nèi)容如果無法在同一個面板中展示，則一定會添加快捷方式方便用戶快速進行面板的切換；
• 面板間的切換方式以大家熟悉的PPT頁面切換方式類似
• 對滑動切換來說，要么不做，要做就要“絲滑”（差不多30FPS），否則會給用戶帶來“卡頓”的不適感
• 完全沒有動畫的切換往往會給用戶“設(shè)備反應(yīng)迅速”的錯覺，對負擔(dān)不起高幀率的嵌入式設(shè)備來說，反而是最好的選擇
  

仔細回想一下，身邊的智能設(shè)備，是不是都基本滿足上述特點？——其實我們熟悉的手機和平板也是如此。

基于上述原則，我們甚至可以總結(jié)出一套簡單有效的“嵌入式界面設(shè)計八股”：

• 用戶界面分成三個部分：狀態(tài)面板、導(dǎo)航面板和功能面板
• 狀態(tài)面板：又叫待機面板，用于顯示狀態(tài)信息（比如溫度、時間、產(chǎn)品Logo、產(chǎn)品當(dāng)前狀態(tài)等等）。
• 通常在待機界面上按下任意鍵（或者進行任意觸摸）進入導(dǎo)航面板
• 一般用戶超過一段時間沒有與界面進行交互后會自動進入狀態(tài)面板，所以狀態(tài)面板有時候又叫待機面板
• 導(dǎo)航面板：也就是大家常說的菜單。
• 一般導(dǎo)航面板以圖標(biāo)、列表或者按鈕的形式存在，
• 一般避免超出屏幕范圍的內(nèi)容，最好做到讓用戶對所有選項“盡收眼底”
• 導(dǎo)航面板可以通過子面板的形式實現(xiàn)多級菜單，從而簡化開發(fā)
• 功能面板：實現(xiàn)具體功能的面板，一般由導(dǎo)航面板進入
• 每個面板的功能都盡可能單一，比如專門設(shè)置溫度、專門設(shè)置時間等等
• 相關(guān)的導(dǎo)航面板之間可以通過類似左右箭頭（或者底部導(dǎo)航快捷按鈕）的機制進行快捷切換
  

【什么是場景（scene）】

【場景（scene）的數(shù)據(jù)結(jié)構(gòu)和構(gòu)成】

/*! * \brief a class for describing scenes which are the combination of a *        background and a foreground with a dirty-region-list support *  */typedef struct arm_2d_scene_t arm_2d_scene_t;struct arm_2d_scene_t { arm_2d_scene_t *ptNext; //!< next scene arm_2d_scene_player_t *ptPlayer; //!< points to the host scene player arm_2d_region_list_item_t *ptDirtyRegion; //!< dirty region list for the foreground  arm_2d_helper_draw_handler_t *fnBackground; //!< the function pointer for the background  arm_2d_helper_draw_handler_t *fnScene; //!< the function pointer for the foreground void (*fnOnBGStart)(arm_2d_scene_t *ptThis); //!< on-start-drawing-background event handler void (*fnOnBGComplete)(arm_2d_scene_t *ptThis); //!< on-complete-drawing-background event handler void (*fnOnFrameStart)(arm_2d_scene_t *ptThis); //!< on-frame-start event handler void (*fnOnFrameCPL)(arm_2d_scene_t *ptThis); //!< on-frame-complete event handler  /*! * \note We use fnDepose to free the resources */ void (*fnDepose)(arm_2d_scene_t *ptThis); //!< on-scene-depose event handler struct { uint8_t bOnSwitchingIgnoreBG    : 1; //!< ignore background during switching period uint8_t bOnSwitchingIgnoreScene : 1; //!< ignore forground during switching period };};

其數(shù)據(jù)結(jié)構(gòu)并不復(fù)雜。

數(shù)據(jù)結(jié)構(gòu)的主體是這兩個指針：

• fnScene：指向一個由用戶提供的繪圖函數(shù)：

• 繪制一個場景中所有的內(nèi)容；或者

• 當(dāng)場景中存在“不會變化且不會被覆蓋的背景”和“少數(shù)”內(nèi)容會發(fā)生變化的前景時，專門用于繪制前景——此時就需要通過ptDirtyRegion來指向描述前景變化區(qū)域的臟矩陣（Dirty Region List）。

• fnBackground：指向一個由用戶提供的繪圖函數(shù)，專門繪制一個場景中那些“只需要繪制一次”且“未來不會被前景覆蓋或者變化”的內(nèi)容，最典型的就是繪制場景中的背景圖片；

需要特別說明的是：

• fnBackground 只會在繪制每個場景的第一幀時調(diào)用；

• 隨后的每一幀就只會調(diào)用 fnScene；

• fnBackground 會繪制整個屏幕；

• 臟矩陣（ptDirtyRegion）只對 fnScene 有效；

• 當(dāng)ptDirtyRegion 為 NULL時，fnScene也是繪制整個屏幕。

• 這意味著，當(dāng) ptDirtyRegion為NULL時，fnBackground 繪制的內(nèi)容會 100% 被覆蓋掉——也就是說完全沒用。這意味著：

• 當(dāng)且僅當(dāng)我們指定了有效的臟矩陣時，fnBackground 才是實際有意義的。

如果你對“背景”和“前景”的分工感到似懂非懂，不妨看下面這個例子：

在這個場景中：

• 作為背景的狗頭實際上不會發(fā)生變化，因此我們只需在 fnBackground 所指向的繪圖函數(shù)中繪制即可；

• 動態(tài)進度條由于其內(nèi)容一直在變化，因此需要在 fnScene所指向的繪圖函數(shù)中“配合臟矩陣”進行重復(fù)繪制。

• 用戶可以預(yù)先生成多個場景，并通過函數(shù)arm_2d_scene_player_append_scenes壓入隊列中；
• 隊列的頭部就是當(dāng)前生效的場景；
• 用戶可以在任意時刻通過函數(shù)arm_2d_scene_player_switch_to_next_scene來安全的觸發(fā)場景切換，
• 所謂的場景切換就是丟棄隊列當(dāng)前的頭部場景——換成下一個；
• 場景切換后，被丟棄的場景會調(diào)用 fnDepose ，用戶可以利用這個函數(shù)為對應(yīng)場景“擦屁股”
• 比如，假設(shè)一個場景（arm_2d_scene_t）對象本身就是動態(tài)分配的（從 malloc中分配），那么就可以通過 fnDepose 方法來將內(nèi)存釋放掉（比如調(diào)用 free函數(shù)）。
• 場景播放器提供了 arm_2d_scene_player_flush_fifo 方法，它會清空整個隊列。
• 被清空出去的場景都會被依次調(diào)用 fnDepose，因此不用擔(dān)心內(nèi)存泄露的問題。
• 場景切換是支持特效的，比如：淡入淡出、滑動和擦除等等

【用場景開發(fā)也太簡單了8！】

這里的 arm_2d_scene_0.h 和 arm_2d_scene_0.c 分別對應(yīng)我們新加入的場景的頭文件和源代碼。

#include "arm_2d_scene_0.h"

其實，所謂的 Display Adapter 就是場景播放器（arm_2d_scene_player_t）：

ARM_NOINITexternarm_2d_scene_player_t DISP0_ADAPTER;

在初始化完 Display Adapter 后，我們調(diào)用場景的初始化函數(shù)arm_2d_scene0_init()——將它們加入指定的場景播放器隊列中：

#include "arm_2d_scene_0.h"...int main (void) { arm_irq_safe { arm_2d_init(); }   disp_adapter0_init();  arm_2d_scene0_init(&DISP0_ADAPTER);  while(1) { disp_adapter0_task(); }  }

調(diào)用函數(shù) arm_2d_scene_player_switch_to_next_scene() 來切換到我們新加入的場景中：

#include "arm_2d_scene_0.h"...int main (void) { arm_irq_safe { arm_2d_init(); }   disp_adapter0_init();  arm_2d_scene0_init(&DISP0_ADAPTER); arm_2d_scene_player_switch_to_next_scene(&DISP0_ADAPTER);  while(1) { disp_adapter0_task(); }  }

#include "arm_2d_scene_0.h"...int main (void) { arm_irq_safe { arm_2d_init(); }   disp_adapter0_init();  /* 初始化場景 scene0，并將其加入到場景播放器 DISP0_ADAPTER 中 */ arm_2d_scene0_init(&DISP0_ADAPTER);  /* 設(shè)置切換特效為 淡入淡出（白色） */ arm_2d_scene_player_set_switching_mode(  &DISP0_ADAPTER, ARM_2D_SCENE_SWITCH_MODE_FADE_WHITE); /* 設(shè)置切換持續(xù)時間為 3000ms */ arm_2d_scene_player_set_switching_period( &DISP0_ADAPTER,  3000);  /* 申請切換到新加入的場景中 */ arm_2d_scene_player_switch_to_next_scene(&DISP0_ADAPTER);  while(1) { disp_adapter0_task(); }  }