【例說Arm-2D界面設計】“手擼GUI”的利器——場景播放器

【說在前面的話】

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

【基于面板的界面設計】

就本文要討論的內容來說，我們可以簡單的關注以下的一些要點：

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

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

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

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

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

【什么是場景（scene）】

【場景（scene）的數據結構和構成】

/*! * \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 };};

其數據結構并不復雜。

數據結構的主體是這兩個指針：

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

• 繪制一個場景中所有的內容；或者

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

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

需要特別說明的是：

• fnBackground 只會在繪制每個場景的第一幀時調用；

• 隨后的每一幀就只會調用 fnScene；

• fnBackground 會繪制整個屏幕；

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

• 當ptDirtyRegion 為 NULL時，fnScene也是繪制整個屏幕。

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

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

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

在這個場景中：

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

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

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

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

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

#include "arm_2d_scene_0.h"

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

ARM_NOINITexternarm_2d_scene_player_t DISP0_ADAPTER;

在初始化完 Display Adapter 后，我們調用場景的初始化函數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(); }  }

調用函數 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);  /* 設置切換特效為 淡入淡出（白色） */ arm_2d_scene_player_set_switching_mode(  &DISP0_ADAPTER, ARM_2D_SCENE_SWITCH_MODE_FADE_WHITE); /* 設置切換持續(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(); }  }