[88掌控日文字稿]简析掌控板 3.0 屏幕技术更新：从framebuf到LVGL

PPT：https://ouyhq.lanzoum.com/iQ4i22xqm72d 密码:dyoh 本文字稿以 CC BY-NC-SA 4.0 协议贡献署名为Frez79(欧阳泓骞)

开场白

ok各位好我是欧阳泓骞今天让我们简单地聊聊掌控板屏幕软件部分

引入

众所周知啊掌控板 v2用的是单色OLED显示屏分辨率128x64

通过阅览代码 (亮出mpython.py) 可知掌控板上搭载的驱动类 (聚焦至继承类部分) 继承了framebuf

何为framebuf?

framebuf是一个提供通用帧缓冲区的模块 (展示https://docs.micropython.org/en/v1.12/library/framebuf.html 并聚焦展示翻译动效) 它将整个屏幕的内容存储于一个位于RAM的字节数组中.

右下小字：何为帧缓冲区：即屏幕画面的草稿纸程序先在这层草稿纸上作画作画完毕后再显示出来

你可以在这层帧缓冲区上随意作画 (聚焦展示翻译动效) 我们使用掌控板 v2时点亮像素绘制线条显示矩形展示文本都离不开它(聚焦依次展示翻译动效)

这样看来掌控板 v2的设计还挺不错

衔接

但是呢掌控板 v3发布了！(掌控板v3图片展示)

奇怪的是 v3没有沿用framebuf 而是选用LGVL为掌控板 v3的图形处理方案

LGVL!

LVGL呢是一款轻量、免费、开源的嵌入式多功能图形库可为任何 MCU、MPU 和各类显示器绘制漂亮的 UI

MCU、MPU:即Microcontroller Unit/Micro Processor Unit(单片机/微处理器)

简析优势

它相比fbuf 具有极大的优势

就例如说它提供的是对象化UI组件它提供层级化对象管理它提供丰富的UI组件它支持增量刷新

可能这些功能大家听起来没什么概念现在让我们来分点解析一下这些特性

分点详解

对象化UI组件

抨击fbuf

我们先从这个对象化UI组件讲起吧我们先来看看在fbuf 中我们是如何存储屏幕内容的

这里由于篇幅有限我们就不实际样式这段代码了让我们来模拟运行看看

首先我们执行初始化/清屏 (执行前4line)

我们可以看到 buffer成为了一个占用1kb的字节数组

接下来我们在x0 y0处绘制文字 Hello World (展示) 可以看到字节数组的前一部分出现了改变但是总量还是1kb

实际上在字节数组初始化完成的那一刻总量就已经固定哪怕你再怎么操作也无济于事 (不断显示各类绘制代码此时fbuf详细内容隐藏表示总量的文字放大)

虽然1kb看起来很小但如果我们把这个方案运用到v3上缓冲区大小就是长乘以宽乘以4个颜色通道ARGB

即320乘以170乘以4 这里注明一下我们的分辨率数据最开始给的是320乘以172

也就是212.5kb 要知道掌控板v3的SRAM也只有512kb 更何况这还没有计入固件本身运行时所占的RAM

这么一来 fbuf原先依赖2.0屏幕数据量小所得的优势在掌控板v3上肯定是行不通了

LVGL

而LVGL 提供的是对象化UI组件也就是说它只存储这些组件的信息而不会具体存储它的样貌/样式自然而然空间就小很多了

层级化对象管理

接下来我们再来说说 LVGL 的层级化对象管理它其实就是我们经常谈论的：图层(layers)

但是在LVGL中图层也变得多样化了起来 Layers在LVGL中一共有这三种解释：

分别是： •Order of Creation（图层顺序） •Draw Layers（绘制图层） •Screen Layers（屏幕图层）由于翻译原因他们听起来有些怪异但其实他们都对应了三个不同环节中的先后顺序调节

图层顺序

其中图层顺序在开发中最为常见

我们主要看Order of Creation 图层顺序

默认情况下，LVGL会将新添加的控件绘制在旧的控件之上和framebuf绘制的逻辑相同

但它与fbuf绘制逻辑不同的是我们可以改变控件的顺序

LVGL提供了多样化的API用于处理先后顺序其中对于父子组件的绑定的顺序处理也有涉及大大便利了开发者的编码过程

丰富的UI组件

而关于UI组件那更是多种多样 LVGL的每个组件都有详细的文档/说明/示例

并且LVGL还开放了第三方库甚至可以集成ffmpeg进行视频播放/展示二维码

对象刷新

关于对象刷新我们拿之前的Hello World举例吧

如图这段代码中的最后一行便是负责刷新的部分它的主要逻辑如右图

我们主要看有关渲染管线的部分

从中我们可以看到在渲染管线中 LVGL先是收集这次渲染与上次不同的零碎区域即脏区域

然后 LVGL会把所有的脏区域叠加起来形成一个需要重新渲染的区域

接着 LVGL将会按照我们上文提到的图层顺序进行渲染/处理形成最终画面之后调用屏幕驱动显示最终画面

这个渲染流程有一个特点：它是选择性渲染也就是说它不会无脑的把每个对象都重新计算一遍而是合理地以一种最小化计算占用资源的形式重新渲染

这样一来刷新屏幕这一操作就大大地减少了数据运算量加快了刷新速度

易用性

除此之外盛思针对LVGL特地再封装了一个库相比于LVGL更加复杂高级的响应式UI的怎么做

盛思封装的lv_gui库通过声明式UI 的做什么大大简化了UI绘制过程中在开发者层面的繁琐步骤

使得掌控板3.0上的LVGL变得更加易用

总结

综上所述

盛思依托LVGL的高性能/多组件/少占用为掌控板集成了一套近乎完美的UI 而在这之上又通过 lv_gui 模块和图形化适配为心有余而力不足的开发者牵线搭桥可以说是相当优秀的设计了

我的分享到此结束接下来有请Can1425为我们带来有关的LVGL实战演练