本文主要介绍【屏显MCU】的基本概念,用于开发过程中的理解
以下是图层叠加示例
【屏显MCU】多媒体接口总结
- 0. 个人简介 && 授权须知
- 1. 三大引擎
- 1.1 【显示引擎】Display Engine
- 1.1.1 【UI】 图层的概念
- 1.1.2 【Video】 图层的概念
- 1.1.3 图层的 Blending 的概念
- 1.1.4 图层的 Blending 的示例
- 1.2 【图像引擎】Graphics Engine-
- 1.2.1 图像旋转
- 1.2.2 图像缩放
- 1.2.3 矩形填充
- 1.2.4 位块搬移
- 1.3 【视频引擎】Video Engine
- 2. UI 层的透明度 alpha
- 3. 图像 stride 和 plane 的概念
- 3.1 YUV 模型图像存储
- 3.2 NV12 格式
0. 个人简介 && 授权须知
📋 个人简介
- 💖 作者简介:大家好,我是喜欢记录零碎知识点的菜鸟打工人。😎
- 📝 个人主页:欢迎访问我的博客主页🔥
- 🎉 支持我:点赞👍+收藏⭐️+留言📝
- 📣 系列专栏:嵌入式开发专栏 🍁 🍁
- 💬格言:写文档啊不是写文章,重要的还是直白!🔥
转载文章,禁止声明原创;不允许直接二次转载,转载请根据原文链接联系作者
若无需改版,在文首清楚标注作者及来源/原文链接,并删除【原创声明】,即可直接转载。
但对于未注明转载来源/原文链接的文章,我将保留追述的权利。作者:积跬步、至千里
1. 三大引擎
1.1 【显示引擎】Display Engine
功能:用于提供 【显示图层叠加】 的功能。支持一个 video 图层
+ UI 图层
叠加,通过显示接口输出
常见的 UI
图层图像格式:
ARGB8888/XRGB8888/RGB888/ARGB4444/ARGB1555/RGB565
常见的video
图层的图像格式:
ARGB8888/XRGB8888/RGB888/ARGB4444/ARGB1555/RGB565
NV12/NV21/NV16/NV61/YUYV/YVYU/UYVY/VYUY/YUV400
1.1.1 【UI】 图层的概念
UI
图层即用户界面(User Interface
)图层,用于显示图形用户界面元素,如按钮、图标、文本、菜单等。在lvgl
中创建的控件都属于UI
层。
1.1.2 【Video】 图层的概念
通俗的理解为,视频播放时的一帧一帧的图像画面。
1.1.3 图层的 Blending 的概念
- 在图形处理中,
UI
图层(User Interface Layer,用户界面图层)和video
图层(视频图层)的Blending
(混合、融合)指的是将这两个图层的图像按照一定的规则和比例进行 合成 的过程。 - 通过
Blending
,可以实现不同图层之间的 透明度、颜色、亮度 等方面的融合效果,从而创造出各种视觉效果。
1.1.4 图层的 Blending 的示例
在视频播放器的界面中,可以将【video图层】和 【UI 图层】(如播放控制按钮、进度条等) blending
混合显示,以便在 不遮挡视频 的情况下显示控制元素,同时使整个界面看起来更加协调和美观。
1.2 【图像引擎】Graphics Engine-
GE
(Graphics Engine)模块是一个用来进行 2D 图形加速 的 硬件模块 。
主要包括格式转换、旋转、镜像、 缩放、Alpha混合、Color Key、位块搬移、Dither等功能。
1.2.1 图像旋转
一帧图像本质上是一个大的【二维矩阵】,图像旋转本质上是对矩阵的运算,点屏 MCU 硬件上支持矩阵的复杂运算。
1.2.2 图像缩放
1.2.3 矩形填充
1.2.4 位块搬移
1.3 【视频引擎】Video Engine
视频/图片编 解码加速 引擎,该模块支持 JPEG
编解码以及 PNG
图片解码。
该部分原理,不做深究,会使用接口即可
2. UI 层的透明度 alpha
alpha
是一个数值,用于表示图层的不透明程度。取值范围 0-255
0
表示完全透明,即该图层不可见
255
表示完全不透明,该图层或遮挡住后边的内容
如下图所示,透明度 alpha
值大概在140
左右,设置完透明度和 Video
层叠加显示的效果如下。
3. 图像 stride 和 plane 的概念
Stride
:指的是在内存中每行像素所占的空间,
Plane
:(平面)一般是以“luma plane”(亮度平面)、“chroma plane”(色度平面)的形式出现。
例如在 YUV 图像中,YUV 分量可以分别存储在不同的 plane 中。Y在一个平面,UV在一个平面,使用2个plane
3.1 YUV 模型图像存储
可参考资料:【摄像头YUV图像常见数据格式介绍】
对于4:2:2
采样的图,如果图片的宽为width
,高为heigth
,在内存中占的空间为width * height * 2
其中width * height
的空间存放Y
分量, width * height/ 2
的空间存放U
分量,width * height / 2
的空间存放V
分量
3.2 NV12 格式
NV12
存储顺序是先存Y
值,再UV
交替存储:YYYYUVUVUV
以 4 X 4
图片为例子,占用内存为 4 X 4 X 3 / 2 = 24
个字节,如下图所示: