LVGL学习(2):图片的转换和显示

2023-10-30

我们在设计UI的过程中可能需要显示一些图片,本篇文章将介绍如何转换并显示一个固定的图片到lv_img中。

1 图片转换

和之前我写的一篇字体转换的文章一样:LVGL学习(1):中文字体的转换和汉字显示,图片的转换也有两种方法,也是GUI Guider和在线转换。

1.1 GUI Guider

使用GUI Guider来转换图片的格式并显示比较简单,如下图所示:
在这里插入图片描述
只需要点击Import,然后导入图片即可。接着在主界面添加一个img组件,然后就可以在右侧Attribute下的image中选择刚刚导入的图片,这样就可以了。
在这里插入图片描述
对于图片的尺寸,直接修改img组件的size即可。原图的大小为333x566px,为了保证图片的比例,可以根据实际情况对长和宽进行等比例缩放,以显示不同大小的图片,比如这里缩放三倍,则设置size为111x174px。
最后点击生成代码,GUI Guider就在/generated/images中生成了_1_111x174.c文件,即图片大小为111x174px对应的数组。

1.2 在线转换

LVGL官方提供了一个在线图片转换的工具:Online image converter
在这里插入图片描述
我们只需要上传图片文件,然后选择颜色格式和输出格式即可。其中颜色格式如果不需要透明通道的话,一般选择CF_TRUE_COLOR。而输出格式选择C array,即生成C语言数组。这个文件中会生成所有LV_COLOR_DEPTH的转换结果,包括RGB332RGB565RGB888等格式,然后根据LV_COLOR_DEPTH来决定使用哪个转换结果。


可以看到,对于在线转换来说,图片的大小需要自己提前缩放好,后面如果想修改则比较麻烦,所以我还是建议大家使用GUI Guider来生成图片对应的数组。

2 图片的显示

刚刚转换出来的图片文件,有两种保存方式,一种当然是随着程序一起编译保存在NOR Flash中,另外一种则是可以保存在Fatfs文件系统中。

对于第一种情况,我们需要使用LV_IMG_DECLARE来声明刚刚的图片,然后就可以使用lv_img_set_src显示图片了。

/* DECLARE的参数为C文件最下面的LV_ATTRIBUTE_LARGE_CONST类型的结构体变量名 */
LV_IMG_DECLARE(_1_111x174);
lv_img_set_src(ui->screen_img_1,&_1_111x174);

对于第二种情况来说,需要在前面的在线转换工具中选择你要输出的颜色深度,如RGB565,这样转换出来的就是图片对应的bin文件。而GUI Guider中有一个Convert按钮,一样可以转换图片为bin文件,但似乎只有透明通道的输出格式选择。
在这里插入图片描述
然后将这个bin文件拷贝到Fatfs文件系统中,假设拷贝在根目录下,就可以直接输入文件的路径即可显示。

lv_img_set_src(ui->screen_img_1,"3:/_1_111x174.bin");

当然,这种情况下需要根据自己的硬件初始化好Fatfs文件系统,然后将宏定义LV_USE_FS_FATFS 置1。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

LVGL学习(2):图片的转换和显示 的相关文章

  • Python学习笔记--exe文件打包与UI界面设计

    exe文件打包与UI界面设计 前言 一 基于tkinter实现的UI设计 1 1 库的选择及思路 1 2 定位方法的选用 1 3 Frame控件 1 4 变量设置 1 5 批量设置 1 6 Text文本框 1 7 总体界面设计 1 8 功能
  • PySide6-控件教程-006-QLabel标签控件-信号

    QLabel 标签控件 本文摘录自我的开源教程 PySide6 代码式教程 QLabel CSDN 平台仅做镜像 答疑 纠错请至 GitHub 提交 issue 信号 QLabel的可用信号只有链接被悬停 链接被点击两种 具体如下 link
  • Unity中Shader实现UI去色功能的实现思路

    文章目录 前言 一 在开发过程中 在UI中会涉及一些需要置灰UI的需求 有很多实现的方法 1 做两套纹理 通过程序控制切换 2 使用shader实现对纹理去色 二 这里主要记录用shader实现的思路 1 基础纹理的采样 2 支持组件中的调
  • 如何创建项目

    1 MvvmLight框架的引用 引用 头部选项卡的 工具栏 NuGet 包管理器 管理解决方案的NuGet 程序包 搜索 MVVM Light MvvmLight 作者 Laurent Bugnion GalaSoft 勾选项目 Do n
  • 24.qint64转QString 以及获取文件属性

    qint64转QString 1 qint64 size info size 2 qint64 转QString 3 QString size2 tr 1 arg size 获取文件属性 1 include mainwindow h 2 i
  • 一些大厂的开源平台

    百度 http fex baidu com http efe baidu com 饿了么 https fe ele me 腾讯 http www alloyteam com 美团 https tech meituan com 滴滴 http
  • Qt5学习之路(vs2012下创建一个QT应用程序)2013-10-14

    刚开始学习QT在网上找的资料基本都是使用QT Create进行开发的 VS下开发的学习资料感觉很少很难找的到 视频教程也基本没看到过貌似 因为我们研发中心是使用MFC进行开发开发工具是VS2010 使用QT开发的话基本我们不会再使用QT C
  • UE4命令行使用,解释

    命令行在外部 从命令行运行编辑项目 1 导航到您的 LauncherInstall VersionNumber Engine Binaries Win64 目录中 2 右键单击上 UE4Editor exe 的可执行文件 并选择创建快捷方式
  • Qt—帮助系统

    一个完善的应用程序应该提供尽可能丰富的帮助信息 Qt中可以使用工具提示 状态提示以及 What s This 等简单的帮助提示 也可以使用Qt Assistant来提供强大的在线帮助 简单的帮助提示 已经讲到了工具提示和状态提示 这里简单介
  • MapReduce作业状态一直为ACCEPTED解决过程

    toc 今天在测试Hadoop文件压缩功能时 在之前本地搭建的Hadoop集群上提交了一个MapReduce作业 但是提交后发现一直卡在那不动 18 07 20 17 21 50 WARN util NativeCodeLoader Una
  • 【前端】Vue+Element UI案例:通用后台管理系统-项目总结

    文章目录 相关链接 前言 效果 登录页 首页 管理员的首页 xiaoxiao的首页 用户管理 总结 项目搭建 左侧 CommonAside 上侧 CommonHeader和CommonTag 首页 Home vue 用户管理 User vu
  • Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式的解释)

    在进行UI设计时 我们经常需要将屏幕设置成无标题栏或者全屏 要实现起来也非常简单 主要有两种方法 配置xml文件和编写代码设置 1 在xml文件中进行配置 在项目的清单文件AndroidManifest xml中 找到需要全屏或设置成无标题
  • Android4.0 SDK功能详解

    我在eoe的论坛找到的 就复制过来了 跟大家分享一下 Android 4 0 平台API等级 14 Android 4 0 是一次重要的平台发布版 为用户和应用程序开发者增加了大量的新特性 在下面我们将讨论的所有新特性和API中 因为它将
  • WPF应用实战开发指南 - 如何实现动态内容展示

    在我们开发一些复杂信息的时候 由于需要动态展示一些相关信息 因此我们需要考虑一些控件内容的动态展示 可以通过动态构建控件的方式进行显示 如动态选项卡展示不同的信息 或者动态展示一个自定义控件的内容等等 目的就是能够减少一些硬编码的处理方式
  • 独立搭建UI自动化测试框架分享

    今天给大家分享一个selenium testng maven ant的UI自动化 可以用于功能测试 也可按复杂的业务流程编写测试用例 今天此篇文章不过多讲解如何实现CI CD 只讲解自己能独立搭建UI框架 如果有其他好的框架也可以联系我 分
  • 独立搭建UI自动化测试框架分享

    今天给大家分享一个selenium testng maven ant的UI自动化 可以用于功能测试 也可按复杂的业务流程编写测试用例 今天此篇文章不过多讲解如何实现CI CD 只讲解自己能独立搭建UI框架 如果有其他好的框架也可以联系我 分
  • element ui backTop源码解析-逐行逐析

    backTop 回到顶部 组件简介 基础概念 返回页面顶部的操作按钮 代码
  • element ui弹窗在别的弹窗下方,优先级不高的问题

    在 弹窗 的标签中加入append to body即可解决该问题
  • 创意无限,绘图轻松——Sketch for Mac矢量绘图软件全面介绍

    在现代设计领域 矢量绘图软件是设计师们必不可少的工具之一 而在众多矢量绘图软件中 Sketch for Mac凭借其强大的功能和友好的用户界面脱颖而出 成为众多设计师的首选 Sketch for Mac是一款专为Mac用户开发的矢量绘图软件
  • 一文从0到1手把手教学UI自动化测试之数据驱动!

    在UI的自动化测试中 我们需要把测试使用到的数据分离到文件中 如果单纯的写在我们的测试模块里面 不是一个好的设计 所以不管是什么类型的自动化测试 都是需要把数据分离出来的 当然分离到具体的文件里面 文件的形式其实有很多的 这里主要说明JSO

随机推荐

  • Excel如何合并单元格

    Excel除了具有强大的数据处理能力之外 在绘制表格方面也是表现的非常出色 如何快速合并单元格 这3种方法你要学会 在使用Excel的时候经常会遇到对单元格进行合并和拆分的操作 使用恰当的方式 可以极大的提高编辑Excel的工作效率 总体而
  • 【vue3】远程组件加载

    远程加载组件 动态更新组件 主框架不更新 参考 https gitee com fanzhengshao remote components library 用vite创建一个vue项目 添加remote目录 存放远程组件 添加rollup
  • 编译问题处理:undefined symbol: OPENSSL_init_crypto

    编译问题处理 undefined symbol OPENSSL init crypto 结论 Python 2 7 编译 hashlib so 提示undefined symbol OPENSSL init crypto问题 原因为open
  • net core 建立webservice项目

    1 创建项目 2 通过NuGet安装SoapCore 3 创建服务接口及实现类 本项目会创建2个webservice服务文件用于测试 所以创建了2个model类和2个接口文件 Model类 DataContract public class
  • electron-vue 打包桌面应用程序并封装

    Electron是一个使用 JavaScript HTML 和 CSS 构建桌面应用程序的框架 嵌入 Chromium 和 Node js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windo
  • Win10下Linux虚拟机安装

    作为编程新手 由于公司需要使用Linux 而自己的电脑是Windows系统 这时候安装Linux虚拟机就是一个非常好的熟悉Linux的方法了 需要下载的资源如下 1 VMware workstation14 1 2 2 CentOS 7 x
  • spring mvc+mybatis+ spring 基于全注解事务配置

    spring mvc 自动扫描注解时 不需要扫描 Service
  • 根据页面高度变化动态改变element的table组件的最大高度

    本文提供方法 主要用来解决流体高度的element的表格组件 还需要根据页面高度变化而变化最大高度 js部分 定义方法后需要在页面刚刚创建时就调用一次 使表格获得合适的初始表格高度 再监听页面resize事件 function listen
  • 在linux下搜索一个文件

    在windows下有一个搜索工具 可以让我们很快的找到一个文件 这是很有用的 然而在linux下搜索功能更加强大 which 用来查找可执行文件的绝对路径 在前面已经用到该命令 需要注意的一点是 which只能用来查找PATH环境变量中出现
  • 深信服产品介绍

    传统防火墙 包过滤防火墙 判断信息 数据包的源ip地址 协议类型 源端口 目的端口 五元组 工作范围 网络层 传输层 3 4层 和路由器的区别 1 普通的路由器只检查数据包的目标地址 并选择一个达到目的地址的最佳路径 2 防火墙除了要决定目
  • 2020年蓝桥杯国赛-答疑

    题目 题目链接 题解 贪心 有点像 排队打水 比较好想 而且我甚至都能证明 贪心思路 按照 s a e s a e s a e 从小到大排序即可 证明 首先 每个人的
  • 服务器IP经常更换对网站会产生怎样的影响

    随着互联网的发展 越来越多的用户都在使用其带给我们的好处 但是很多朋友可能很多朋友应该都听过服务器 ip以及域名这些名词 但是它们到底是什么 能作什么用 可能一些朋友就不太清楚了 ip地址是一台服务器所必须的 只有输入正确的ip地址 才能找
  • MySQL架构和运行机制解析

    先来看看 mysql 技术架构 MySQL 技术架构和运行机制 连接器 connect 连接器负责跟客户端建立连接 获取权限 维持和管理连接 有些时候 MySQL 占用内存涨得特别快 是因为在执行过程中临时使用的内存 join buffer
  • 深入理解单例模式:静态内部类单例原理

    本文主要介绍java的单例模式 以及详细剖析静态内部类之所以能够实现单例的原理 OK 废话不多说 进入正文 首先我们要先了解下单例的四大原则 1 构造私有 2 以静态方法或者枚举返回实例 3 确保实例只有一个 尤其是多线程环境 4 确保反序
  • 步进电机芯片

    步进电机芯片 LV8728 128细分 1 8A LV8727 128细分 4A THB6064AH 64细分 THB6064MQ 64细分 256细分 512细分
  • funcanary[CISCN2023初赛]-爆破canary+pie

    funcanary 一 保护检查 二 IDA分析 三 exp编写 四 exp 一 保护检查 先检查文件的保护以及文件的类型 保护全开 64位程序 通过题目大概也知道想考察的内容是canary保护绕过或者canary泄露 二 IDA分析 首当
  • Java 代码块学习笔记(基础)

    目录 代码块 阉割的方法 只剩下方法体 1 普通代码块 定义在方法体内且无修饰符的代码块 2 静态代码块 定义在方法体外 类里面且须用 static 修饰的代码块 3 构造代码块 定义在方法体外 类里面但不用修饰的代码块 4 同步代码块 r
  • 【Springboot】整合wxjava实现 微信小程序:模板消息

    文章目录 一 模板消息是什么 二 整合步骤 1 微信小程序后台配置模板消息 2 发送模板消息 后端逻辑代码 controller service impl 前端逻辑代码 测试 提示 以下是本篇文章正文内容 下面案例可供参考 一 模板消息是什
  • linux2==阿里云ECS centos8安装mysql,通过上传tar.gz

    安装地址 usr local mysql 1 检测当前系统是否安装过MySQL相关数据库 需要通过rpm相关指令 来查询当前系统中是否存在已安装的mysql软件包 执行指令如下 rpm qa 查询当前系统中安装的所有软件 rpm qa gr
  • LVGL学习(2):图片的转换和显示

    我们在设计UI的过程中可能需要显示一些图片 本篇文章将介绍如何转换并显示一个固定的图片到lv img中 文章目录 1 图片转换 1 1 GUI Guider 1 2 在线转换 2 图片的显示 1 图片转换 和之前我写的一篇字体转换的文章一样