OneOS基于 LVGL 移植轻量化图形组件

随着触摸屏和物联网技术的发展，各类电子产品呈现两个趋势：一是各类智能硬件从无屏到有屏，从黑 白屏到高清彩屏，带电子屏的产品数量激增；二是人机界面更加酷炫流畅，交互功能趋向智能化。图形 用户界面（ GUI ）快速推进了嵌入式产品的智能化，大幅提升了用户体验，降低了用户使用门槛，普惠 更广泛的社会人群。

轻量化图形组件可以依托于 OneOS ，在各种各样带屏幕的 MCU 产品上大放光彩。比如：智能家居、工业 控制、汽车表盘、医疗设备、穿戴设备等，可谓是大有可为！如果说 MCU 上的 CPU 核是灵魂，那么屏幕 则是它美丽的容颜，让人一眼难忘。

1 组件信息

本轻量化图形组件基于 LVGL 移植，目前支持版本： LVGL7.9 及 LVGL8.2 。支持之初，我们考量了市面上常用的开源图形框架，最终在 QT for MCU ， LVGL ，以及 GUIX 三者中选择了 LVGL ，也和其 LVGL 开源项目的发起者 Kiss-Vámosi 建立了友好的合作。而后，我们增加了 Arm-2D 用以支撑硬件加速，以及更小资源的图形显示。

目前为止，本轻量化图形界面 GUI 组件达到如下的设计目标及功能：

1.  强大的构建块，例如按钮、图表、列表、滑块、图像等
2. 带有动画、抗锯齿、不透明度、平滑滚动的高级图形
3. 支持各种输入设备，如触摸板、鼠标、键盘、编码器等
4. 具有类似 CSS 样式的完全可定制的图形元素
5. 独立于硬件：与任何微控制器或显示器一起使用
6. 即具有高级图形效果，也可进行单帧缓冲区操作
7. 用 C 编写以获得最大的兼容性（C++ 兼容）
8. 多语言支持 UTF-8 编码
9. 多显示器支持，即同时使用多个 TFT、单色显示器
10. 可扩展：能够以很少的内存运行（64 kB Flash，16 kB RAM）
11. 高性能：在 Cortex-M4 架构 MCU 芯片，GUI 渲染帧率达到 40FPS 

2 开始体验

体验的第一步就是高效使用 menuconfig 对轻量级框架进行快速使用和配置。该章节对配置进行了较为详细的阐明。

(Top) → Components→ GUI 
(lcd) GUI display dev name 
(touch) GUI input dev name 
[*] Enable LVGL --->

touch 和 lcd 是 GUI 的输入输出设备，选中 Enable LVGL 即可使能 LVGL ，目前支持的版本为 LVGL7.9 和 LVGL8.2 。

LVGL (Enable lvgl 8.2) --->
LVGL basic menu --->
Widget usage ---> 
Extra Widgets ---> 
Themes ---> 
Layouts ---> 
Text Settings ---> 
Font usage ---> 
LVGL FileSystem ---> 
LVGL Log ---> 
LVGL Asserts ---> 
Third party Lib ---> 
Extra ---> 
[ ] Enable LVGL examples ---- 
[*] Enable LVGL Demo --->

以上是适配支持的 LVGL 主要 menuconfig 配置。从上到下一一解释。

1. LVGL basic menu 是 LVGL 最基本的配置，也是最重要的配置
2. Widget usage 是对基础控件的支持与使能
3. Extra Widgets 是对额外的高级控件的支持与使能
4. Themes 是自带的一些主题
5. Layouts 布局
6. Text Settings 文本编码设置
7. Font usage 字体选择
8. LVGL FileSystem 文件系统支持
9. LVGL Log 信息打印辅助开发
10. LVGL Asserts 断言
11. Third party Lib 第三方库
12. Extra 其它功能
13. Enable LVGL examples 一些简单的示例
14. Enable LVGL Demo 一些复杂的示例

LVGL basic menu

(120) LVGL buff lines 
(20) LVGL display refresh period(ms) 
(30) Input device read period(ms) 
(10) GUI task priority 
(4096) GUI task stack size 
(5) GUI task msleep 
[ ] Enable LVGL two buff 
[ ] Enable CPU usage and FPS count Show 
[ ] Show the used memory and the memory fragmentation 
[ ] LVGL minimal configuration. 
[*] Enable graphics acceleration 
[*] Enable complex draw engine 

1. LVGL 的单绘制缓冲区的行数
2. 默认显示刷新周期， LVGL 将在此期间重新绘制更改的区域
3. 输入设备读取周期
4. GUI 任务的优先级设置
5. GUI 任务的栈大小设置
6. GUI 任务的默认睡眠时间
7. 使能 LVGL 双绘制缓冲区
8. 显示 CPU 使用率和 FPS 计数显示
9. 显示已用内存和内存碎片
10. LVGL 最小化配置，一般用于硬件资源很小的情况
11. 使能硬件加速
12. 使能复杂绘图引擎

3 提高帧率 

帧率 FPS 是图像领域中的定义，是指画面每秒传输帧数，通俗来讲就是指动画或视频的画面数。FPS 是 测量用于保存、显示动态视频的信息数量。每秒钟帧数越多，所显示的动作就会越流畅。通常，要避免动作不流畅的最低是 10。对于帧率，我们主要关注以下几个方面：

1. 硬件本身性能
2. OneOS-Lite 系统影响
3. LVGL 本身

通常，要使得 FPS 更高，硬件选型是第一步

1. 内核，处理能力越强，对 FPS 会有提升。
2. 内存，尽量选择 SRAM，对 FPS 提升很大，SDRAM 相比于 SRAM 逊色不少。
3. 传输方式 SPI/LCD/DSI，使用 SPI 传输缓存数据至屏幕，显然不如 LCD 或者 DSI。
4. 具有专门处理图形图像的硬件，比如 stm32 的 DMA2D。
5. 更小的屏幕（分辨率）。

OneOS-Lite 系统影响

LVGL 本身是运行在 OneOS 之上的，因此，OneOS 的配置会对帧率产生影响。硬件的支持也需要系统的管理。

1. tick frequecy 设置低一些，可能会提高帧率。想一想也是哈，tick frequecy 影响的是时钟中断。设置低一些，时钟中断会来得没有那么频繁。
2. 尽量使用 SRAM。即使同样是 SRAM，使用全局变量会比使用 malloc 分配，获得更高的帧率。想一 想也是哈，内存管理需要消耗时间。
3. OneOS-Lite 支持 LTDC，DSI，DMA2D 等。
4. 不要让 lvgl 优先级太低，如果更高优先级的任务频繁执行，会影响图形显示性能。
5. 尽量让存储帧缓冲器的存储器仅用于帧缓冲，如果用于存储帧缓冲器的存储器还用于其他应用，那可能会影响系统的图形性能。
6. 使用更高的优化级别，能提高帧率。

VGL 本身的配置也是影响其性能

1. 不要打开性能监控 LV_USE_PERF_MONITOR && LV_USE_MEM_MONITOR
2. 如果支持，建议开启相关硬件加速，比如： LV_USE_GPU_STM32_DMA2D
3. 建议帧缓存区不要低于屏幕的 1/4，建议双缓存

4 运行 Demo

Benchmark 是 LVGL 性能测试的测试用例。其在矩形、边框、阴影、文本、图像混合、图像变换、混合模式等各种情况下进行性能测试。测试期间对象的大小和位置使用伪随机数设置，以使得性能测试可重复。我们现在来运行它！

使用 menuconfifig 配置 Benchmark 性能测试用例，并使用 keil 或者 gcc 编译，并烧写程序到 stm32f469-st-disco 板子上去。

重启开发板，此时，性能测试将会运行，屏幕顶部显示当前测试步骤的标题和上一步骤的结果。

FPS 的代码测量原理如下：

1. 构造 scene_dsc_t 结构体，并在其中保存各种场景下的帧率测试所需数据，包含：场景名、用于场景测试的回调函数、消耗渲染时间、刷新次数，以及权重。其中测试场景 48 个，叠加显示不透明度与完全不透明度方式，则测试总场景 96 个。
2. 在显示驱动的回调函数 monitor_cb 中，实现每一个测试场景的累积渲染时间和帧数。获取到此数据后，便可得到每秒钟帧数，即 FPS= 帧数 / 累积渲染时间。
3. 在 lv_demo_benchmark 帧率测试入口函数中，调用 scene_next_task_cb 函数，并在其中调用每一个 scene_dsc_t 结构体中的场景测试回调函数，对每一个场景进行测试。
4. 测试完每一个场景，即可得到每一个场景对应的帧率 FPS，通过加权平均的方式，获取到平均帧率。

测试原理逻辑图如下：

5 未来与期待

 最后，轻量化图形组件仍然在持续地迭代开发中，并计划加入更多的功能，目前已计划的有：

• 增加高级语言 JS 的支持增加高级语言 MicroPython 的支持
• 增加字体转换库
• 增加图片转换库

一起走过的路，回首看，定满是繁花 🌷 。