【例说Arm-2D界面设计】“手撸GUI”的利器——场景播放器

【说在前面的话】

• 资源相对紧张的MCU，无法负担起传统的嵌入式GUI（比如以体积“小巧”著称的LVGL）：
• Flash <= 64K，或者
• 应用本身已经占用了大量Flash空间，留给GUI的空间非常有限
• SRAM <= 16K
• 需要实现的GUI界面较为简单（这点在随后会详细介绍）
• 帧率要求较低（传说中的8帧不卡、9帧流畅、10帧电竞）
  

【基于面板的界面设计】

就本文要讨论的内容来说，我们可以简单的关注以下的一些要点：

• 智能设备的界面强调“简洁”、并希望“让用户的注意力一次只集中在一件简单的事物上”。

• 与Windows不同，智能设备的界面很少（或者极力避免）窗口重叠
• 界面的基本单位不是“窗体（Window）”，而是以整个屏幕为基本单位的“面板（Panel）”
• 每个面板的内容都尽可能简单、通过留白的方式强调那些需要用户注意的内容；
• 每个面板的功能都尽可能单一：
• 一般避免在同一个面板中挤进多个不太相关的功能；
• 相关的内容，如果能够放得下，且美观，则可以有主次的布置在同一个面板中以减少用户切换面板带来的不便；
• 如果相关的内容如果无法在同一个面板中展示，则一定会添加快捷方式方便用户快速进行面板的切换；
• 面板间的切换方式以大家熟悉的PPT页面切换方式类似
• 对滑动切换来说，要么不做，要做就要“丝滑”（差不多30FPS），否则会给用户带来“卡顿”的不适感
• 完全没有动画的切换往往会给用户“设备反应迅速”的错觉，对负担不起高帧率的嵌入式设备来说，反而是最好的选择
  

仔细回想一下，身边的智能设备，是不是都基本满足上述特点？——其实我们熟悉的手机和平板也是如此。

基于上述原则，我们甚至可以总结出一套简单有效的“嵌入式界面设计八股”：

• 用户界面分成三个部分：状态面板、导航面板和功能面板
• 状态面板：又叫待机面板，用于显示状态信息（比如温度、时间、产品Logo、产品当前状态等等）。
• 通常在待机界面上按下任意键（或者进行任意触摸）进入导航面板
• 一般用户超过一段时间没有与界面进行交互后会自动进入状态面板，所以状态面板有时候又叫待机面板
• 导航面板：也就是大家常说的菜单。
• 一般导航面板以图标、列表或者按钮的形式存在，
• 一般避免超出屏幕范围的内容，最好做到让用户对所有选项“尽收眼底”
• 导航面板可以通过子面板的形式实现多级菜单，从而简化开发
• 功能面板：实现具体功能的面板，一般由导航面板进入
• 每个面板的功能都尽可能单一，比如专门设置温度、专门设置时间等等
• 相关的导航面板之间可以通过类似左右箭头（或者底部导航快捷按钮）的机制进行快捷切换
  

【什么是场景（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：指向一个由用户提供的绘图函数：

• 绘制一个场景中所有的内容；或者

• 当场景中存在“不会变化且不会被覆盖的背景”和“少数”内容会发生变化的前景时，专门用于绘制前景——此时就需要通过ptDirtyRegion来指向描述前景变化区域的脏矩阵（Dirty Region List）。

• fnBackground：指向一个由用户提供的绘图函数，专门绘制一个场景中那些“只需要绘制一次”且“未来不会被前景覆盖或者变化”的内容，最典型的就是绘制场景中的背景图片；

需要特别说明的是：

• fnBackground 只会在绘制每个场景的第一帧时调用；

• 随后的每一帧就只会调用 fnScene；

• fnBackground 会绘制整个屏幕；

• 脏矩阵（ptDirtyRegion）只对 fnScene 有效；

• 当ptDirtyRegion 为 NULL时，fnScene也是绘制整个屏幕。

• 这意味着，当 ptDirtyRegion为NULL时，fnBackground 绘制的内容会 100% 被覆盖掉——也就是说完全没用。这意味着：

• 当且仅当我们指定了有效的脏矩阵时，fnBackground 才是实际有意义的。

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

在这个场景中：

• 作为背景的狗头实际上不会发生变化，因此我们只需在 fnBackground 所指向的绘图函数中绘制即可；

• 动态进度条由于其内容一直在变化，因此需要在 fnScene所指向的绘图函数中“配合脏矩阵”进行重复绘制。

• 用户可以预先生成多个场景，并通过函数arm_2d_scene_player_append_scenes压入队列中；
• 队列的头部就是当前生效的场景；
• 用户可以在任意时刻通过函数arm_2d_scene_player_switch_to_next_scene来安全的触发场景切换，
• 所谓的场景切换就是丢弃队列当前的头部场景——换成下一个；
• 场景切换后，被丢弃的场景会调用 fnDepose ，用户可以利用这个函数为对应场景“擦屁股”
• 比如，假设一个场景（arm_2d_scene_t）对象本身就是动态分配的（从 malloc中分配），那么就可以通过 fnDepose 方法来将内存释放掉（比如调用 free函数）。
• 场景播放器提供了 arm_2d_scene_player_flush_fifo 方法，它会清空整个队列。
• 被清空出去的场景都会被依次调用 fnDepose，因此不用担心内存泄露的问题。
• 场景切换是支持特效的，比如：淡入淡出、滑动和擦除等等

【用场景开发也太简单了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); /* 设置切换持续时间为 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(); }  }