轻量化图形组件，给你的设备点缀一些色彩

随着触摸屏和物联网技术的发展，各类电子产品呈现两个趋势：一是各类智能硬件从无屏到有屏，从黑白屏到高清彩屏，带电子屏的产品数量激增；二是人机界面更加酷炫流畅，交互功能趋向智能化。图形用户界面（ 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的支持
• 增加字体转换库
• 增加图片转换库

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