图片部件可用于显示图片,图片源可以是 C 语言数组格式的文件、二进制的.bin 文件以及图标字体。值得注意的是,图片部件要显示 BMP、JPEG 等格式的图片,则必须经过解码。
图片部件的组成部分仅有一个:主体(LV_PART_MAIN)
图片源选择
图片部件的图片来源分为三种:C 语言数组;存储在外部的图片文件;图标字体(详见8.2 章节)。接下来,我们详细介绍上述三种图片源的使用方法:
C语言数组
上面的网址如下:Online image converter - BMP, JPG or PNG to C array or binary | LVGL
这里有几个问题需要我们注意下:
刚进入这个界面,估计看不到这个转换的界面,只能看到一些文字介绍,我们稍微等一等,就会出现了;
没有加载图片之前,转换界面是上面那样的,导入图片之后,就会多了个文件名称的选项,这里的名称默认就是图片的命名,如下所示:
我们可以修改这个名称,也可以不改,但是这个名称我们后面会用到,所以推荐做好管理。
选项选好之后我们点击Convert,转换完成后,我们就会得到一个以刚才那个名字命名的c文件
可以看到,这个文件有4M之大,我导入的图片尺寸是320*240的,图片本身大小为43K,竟然一下子变得那么大,那这个文件里面到底是什么样的内容呢?
在熟悉文件内容之前,有个问题得再次强调下:
运行之前内存中是没有数据的,所有代码信息都存在flash里面,内存中的数据是运行时从flash中加载进去的,用完就会释放,所以内存够不够,并不能看总的数据,而是要看同一时间加载进入内存的数据量是不是会溢出。
继续看文件内容。
打开看看
这个文件里面有两块内容
一个就是图片对应的数组变量
这个数组加了const前缀,所以处于常量区,数组的名称也是刚才上面取的名称后面加了个_map
这一块值得注意的是,在转换器C数组(变量)中,所有颜色深度(1、8、16或32)的位图都包含在C文件中
把文件接着往下拉,就会看到这些颜色深度通过宏定义进行了选择
1位或者8位对应的数据
16位并且不交换字节时对应的数据
16位并且交换了字节时对应的数据
32位对应的数据
虽然这些颜色深度的数据都放进来了,但是只有与lv_conf.h中的LV_COLOR_DEPTH匹配的颜色深度才会实际链接到生成的可执行文件。
第二块就是基于这些数据,LVGL为自己定义的一个变量,提供给我们引用的,这是个结构体变量,里面除了图片数据,还定义了图片的一些属性参数。
如下:
这里可引用的名称和我们之前转换时所取的名称是一样的。
我们只会用到一种颜色深度,所以尝试把其他不要的数据都删掉看看。
前提是别删错了数据。
删掉之后数据变成了900多K
可以大大减小图片文件的占用内存。
我们试着将删减前的完整文件导入程序中,看看能不能显示。
这里我担心一个问题,那就是4M大小的c文件,电脑倒是能放得下,但是工程链接之后,会占用多少单片机的Flash呢?运行之后会占用单片机多少内存呢?会不会不够用?
我们先看下没有加入图片之前的空间占用情况
内存占用82.41kB,Flash占用196.24kB
我用的是F407,内存192k,Flash是512k
接着看加入图片之后的情况
将刚才的文件复制进入工程文件里,然后在keil里导入
然后编译看看
此时,编译还不会产生空间占用,因为还没有使用,所以就不会被链接。
可见,此时这个4M大小的图片,占用的还只是我电脑上的存储空间,所以文件大也没什么关系,影响的只是我们的整个工程的占用空间,跟最终烧录的文件没关系。
我们尝试着使用这个图片文件
注意,图片源变量必须要先声明再引用,其实就算LVGL不引用,我们自己也要声明外部变量,才能被调用,并且,引用的是指针。
其实就三个步骤:
声明图片源;
创建图片对象;
设置图片源。
此时编译后查看空间占用情况
显然flash占用情况提高了将近150kB,但是内存占用没有太大的增长。
这样来看,如果图片太多了,自带的空间肯定就不够用了。
可是我现在想要用图片做背景,然后切换页面,需要用到几十张图片,怎么办呢?
虽然切换页面时,内存可以释放再切换,但是这个素材要怎么处理呢?
这个问题后续得想办法解决下,我们先把刚才使用的图片下载看看能不能显示。
经确认,可以正常显示。
我们再用加一张图片切换下试试看。
加了两张图片后,Flash占用又大了
下载看看,可以实现切换效果,但是过程中发现一个问题,那就是不断切换图片,图片切换越来越慢,猜想应该是不断切换,导致不断创建图片对象,而之前的图片对象还没有删除,所以导致内存空间越来越小。
于是又有个疑惑,这里都是局部变量,出函数就释放了,为啥还要手动删除?
就算我想删除,也识别不到对方的对象呀。
这种情况下,我们可以将页面对象都上升成全局变量
烧录后可以解决这个问题。关于更详细的多页面管理和切换,后续会专门讲解。
至此,就算完成了c数组作为图片源显示图片的操作。
其实这里还有个疑惑,开头说的这句话
这里说要解码,可是我这一顿操作下来,也没有哪里涉及到解码了呀。
咋回事
我们先来了解下什么是图片的编码。
各类型的图片为了实现对应的要求,比如不失真,比如体积小等等,就要对原始的像素数据进行相应的处理,不同的处理就对应了不同的图片格式,因此编码就是将原始像素数据给处理成其他的一套编码数据,方便传输加密等等。
有编码,就有解码,就是将这一套编码数据给解析成原始的像素数据,然后在屏幕上显示出来。
图片解码是将原始的图像数据转换为可用于显示的格式的过程。常见的图片格式包括JPEG、PNG、BMP等。为了能够在嵌入式设备上高效地进行图片解码,通常会使用专门的图像解码库,例如1ibjpeg、1ibpng等。这些库提供了丰富的API和算法,能够有效地解码各种图片格式。
图片解码的步骤通常包括以下几个环节:
更多可参考这篇文库《关于图片的解码和显示》
为了弄懂上面提到的解码库的问题,关键就是搞清楚网站生成的c数组是带图片格式的数据,还是就是像素数据,如果是带格式的数据,那么lvgl就肯定就是使用了内置的解码库,如果是像素数据,那么就说明网站所做的操作其实就是解码的过程,LVGL直接将其刷到显存中即可,不必再次解码。
怎么确定是哪种呢?
我做了张纯红色的图片,导入之后转换,结果如下:
全是F800,这其实就是纯红色的像素数据。
而且,之前的移植中根本就没有把解码库加进工程里。
由此可见,这个网站得到的就是像素数据,也就是说,这个网站已经把图片进行了解码。
我们导入后直接使用就行了。
关于图片编码和解码,上面有个现象可以结合理解,上面我的一张PNG图片只有40多K,但是解码后得到的文件大小有900多K,这就是因为PNG在磁盘里存的是带格式的编码数据,为了显示转化成原始像素数据后,就占用了很大的空间,我这里单片机开发是直接读取的解码后的数据,所以要将这些原始数据直接存放在flash中,但是电脑里放的就是PNG格式的编码数据,要想显示,就得在内存读取时,先经过解码器解析成原始数据,二者的逻辑是不一样的,要注意体会和区分。
外部图片源文件
在上面C语言数组方式中,有个很大的问题,那就是我只使用了两张图片,就已经占用了将近500k的falsh,这显然是不行的,我需要使用的图片有大概50张,如果一张的大小是150k,那么就需要8M的空间才行。
怎么办呢?
解决办法就是将这些图片以网站生成的bin文件形式放在外部Flash,然后使用LVGL自带的文件系统来读取素材。
这一部分内容较多,后续专题讲解。
图标字体
API函数
我们介绍 LVGL 图片部件常用的 API 函数:
解码库
根据各种资料我们知道,LVGL集成了图片的解码库,既然这种C语言数组的方式网站已经帮我们解码了,这个解码库有什么用呢?
我所能想到的应用场景就是,一个外部存储介质,比如SD卡或者U盘,里面放的就是一张PNG或者BMP等原格式的图片,里面存的是带格式的数据,现在我设备要读取这张照片,读到的就是带格式的数据,这种情况下没有网站给你转成像素数据,所以就只能LVGL自己来解码,将这个数据转成像素数据了。
这应该就是解码库的使用场景。
上面说的电脑里的PNG图片只有40多K,这就是存放的格式编码数据,计算机为了显示,就得集成对应的解码器,才能将其解析成像素数据然后显示出来。
而上面说的三种方式,网站已经帮我们解码了,所以这几个场景下,都无需使用解码库。
待解决问题
那么,就还剩下两个问题:
还有就是如何合理地管理和切换各个页面?
再就是图片作为整个背景,上面还能叠加一些小尺寸的图片吗?
后续再专门讲解。