LVGL常用部件使用总结之图片部件

图片部件可用于显示图片,图片源可以是 C 语言数组格式的文件、二进制的.bin 文件以及图标字体。值得注意的是,图片部件要显示 BMPJPEG 等格式的图片,则必须经过解码。

图片部件的组成部分仅有一个:主体(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,这就是存放的格式编码数据,计算机为了显示,就得集成对应的解码器,才能将其解析成像素数据然后显示出来。

而上面说的三种方式,网站已经帮我们解码了,所以这几个场景下,都无需使用解码库。

待解决问题

那么,就还剩下两个问题:

还有就是如何合理地管理和切换各个页面?

再就是图片作为整个背景,上面还能叠加一些小尺寸的图片吗?

后续再专门讲解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/713836.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

URI到底是个啥

URI是统一资源标识符(Uniform Resource Identifier),URL是统一资源定位符(Uniform Resource Locator)。 具体如何标记和区分服务器上的资源用的其实就是URI,因为其经常出现在浏览器的地址栏里,…

Verilog(未完待续)

Verilog教程 这个教程写的很好,可以多看看。本篇还没整理完。 一、Verilog简介 什么是FPGA?一种可通过编程来修改其逻辑功能的数字集成电路(芯片) 与单片机的区别?对单片机编程并不改变其地电路的内部结构&#xff0…

Parallel Computing - 一文讲懂并行计算

目录 Throughput/LatencySerial ComputingParallel ComputingTypes of parallel computersSimple 4-width SIMDAmdahls lawTypes of parallelism**Data Parallel Model**Task parallel PartitioningDomain DecompositionFunctional Decomposition CommunicationsExample that d…

java调用chatgpt接口,实现专属于自己的人工智能助手

文章目录 前言导包基本说明请求参数响应参数创建请求和响应的VO类 代码编写使用最后说明 前言 今天突然突发奇想,就想要用java来调用chatget的接口,实现自己的聊天机器人,但是网上找文章,属实是少的可怜(可能是不让发吧)。找到了…

ESP32 web 对接华为云平台--MQTT协议

文章目录 前言一、MQTT协议二、如何使用MQTT协议对接华为云1.注册华为云账号2.设备接入中创建资源空间3.如何连接4.通过MQTT.fx工具做初步对接4.1 设置连接信息4.2 连接平台 5.查看平台设备信息 三. 设备测对接平台1.ESP测引入MQTT库2.编码2.1前端编码修改2.2 后端接口修改 3.M…

element-plus+vue3表单含图片(可预览)(线上图片)

一、要实现的效果: 二、如果期间出现这样的效果(表格穿透过来了),加上了这行代码就可以了: preview-teleported“true” 如果仅测试用,建议使用线上图片链接的形式,免得本地地址不生效&#xf…

yolov9从头开始训练

yolov9从头开始训练 一、准备数据集 数据集相关文件存放布局如下 yolov9-datasets ├── train │ ├── images │ │ ├── image.jpg │ │ ├── │ └── labels │ ├── image.txt │ ├── ├── valid │ ├── images │ │ ├── image.jpg │ │ ├─…

吴恩达deeplearning.ai:模型选择交叉验证测试集的训练方法

以下内容有任何不理解可以翻看我之前的博客哦:吴恩达deeplearning.ai专栏 在上一节中,我们了解了如何利用测试集来评估模型性能。今天我们来进一步完善这个想法,让你使用该技术自动选择一个更好的模型。 文章目录 模型选择交叉验证 Cross Va…

SpringBoot 框架(上)

SpringBoot SpringBoot概述依赖管理自动配置SpringBoot 注解使用ConfigurationImport(value {Cat.class,Dog.class})ImportResource(locations "classpath:beans.xml") yaml 标记语言概述基本语法数据类型字面量对象数组 使用细节 Rest 风格请求处理概述注意事项 接…

vue2 开发记录

el-select 如何修改选择项的样式/el-select-dropdown__item 文字上下显示 测试代码 <div stylemargin-left: 100px><!-- 测试代码--><el-select filterablesizemini><div classxxx-el-select><el-optionv-foritem in [{key:1,des:2,…

AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。

AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。

TikTok矩阵系统功能怎么写?常用源代码是什么?

TikTok矩阵系统的功能是如何编写的?又有哪些常用的源代码支撑这些功能呢?本文将通过五段源代码的分享&#xff0c;为大家揭开TikTok矩阵系统的神秘面纱。 一、TikTok矩阵系统的核心功能 TikTok的矩阵系统涵盖了多个核心功能&#xff0c;包括但不限于用户管理、内容分发、推…

【接口测试】HTTP协议介绍

目录 介绍 HTTP状态码 HTTP报文 请求方法 HTTP版本 HTTP标头 通用标头 请求标头 响应标头 get 编码 post 编码 RESTful风格 HTTPS 绝大多数的Web服务接口都是基于HTTP协议进行通信的&#xff0c;包括RESTful API和SOAP等。了解HTTP协议可以帮助测试人员理解接口的…

【多线程】CAS详解

目录 &#x1f334;什么是 CAS&#x1f338;CAS 伪代码 &#x1f38d;CAS 是怎么实现的&#x1f340;CAS 有哪些应⽤&#x1f338;实现原子类&#x1f338;实现自旋锁 &#x1f333;CAS 的 ABA 问题&#x1f338;**什么是 ABA 问题**&#xff1f;&#x1f338;ABA 问题引来的 B…

智慧城市建设的新里程碑:公共服务电子支付大屏

随着科技的飞速发展&#xff0c;我们的生活正在经历前所未有的变革。电子支付的出现&#xff0c;无疑是这场变革中的一大亮点&#xff0c;它不仅改变了我们日常的支付方式&#xff0c;更成为智慧城市建设的重要一环&#xff0c;为公众提供了更加便捷、高效的服务体验。 在以前&…

政府采购标书制作的要点解析

导语&#xff1a;政府采购是政府为满足公共利益&#xff0c;按照法定程序和标准&#xff0c;通过招标、竞争性谈判等方式&#xff0c;购买商品、工程和服务的行为。标书作为政府采购活动中的重要文件&#xff0c;其制作质量直接影响到项目的顺利进行。本文将围绕政府采购标书制…

二路归并排序的算法设计和复杂度分析and周记

数据结构实验报告 实验目的: 通过本次实验&#xff0c;了解算法复杂度的分析方法&#xff0c;掌握递归算法时间复杂度的递推计算过程。 实验内容&#xff1a; 二路归并排序的算法设计和复杂度分析 实验过程&#xff1a; 1.算法设计 第一步&#xff0c;首先要将数组进行…

【网站项目】314学生二手书籍交易平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

JVM相关面试题(2024大厂高频面试题系列)

一、JVM的组成 1、JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 回答&#xff1a;在JVM中共有四大部分&#xff0c;分别是Class Loader&#xff08;类加载器&#xff09;、Runtime Data Area&#xff08;运行时数据区&#xff0c;内存分区&#xff09;、Execut…

MyBatis的补充用法

说明&#xff1a;之前介绍过MyBatis的用法&#xff0c;像 用注解和Mapper.xml操作数据库、在Mapper.xml里写动态SQL。最近在一次用MyBatis批量更新数据库对象的场景中&#xff0c;意识到对MyBatis的一些标签用法不太熟悉&#xff0c;所以去 MyBatis官网 看了一些文档&#xff0…