Gui guider使用自定义字体总结

在实际开发中,我们通常是使用自定义字体。

LVGL 中,用户需要使用自定义的字库,其实现方法可分为两类:

① 通过 C 语言数组(内部读取);

② 通过文件系统读取字库(外部读取)。

使用 C语言数组的方式来读取字库是非常便捷的,工程中需要配置的地方很少,这对于初

学者来说非常友好。

对于LVGL本身如何使用字体,可以直接参考《LVGL开发指南》的第八章 LVGL 字库使用。

此处不赘述。

注意,LVGL的字体总是要有个默认字体,在lv_conf.h中设置

如果将LVGL自带的字体都写0,那么就要换一个自定义的字体来作为默认字体,如果都没有,就会报错。

本文重点讲解guider如何使用自定义字体。

使用gui-guider之后,就不用自己去生成图片的c数组了,字体也同样如此。

参考这篇文章:

LVGL学习(1):中文字体的转换和汉字显示_lvgl显示中文-CSDN博客

具体过程我们继续往下看。

Gui Guider使用自定义字体

打开GUI-Guider-1.4.0-GA,点击工具-导入字体

导入的字体格式支持ttf/woff/woff2三种格式。

不过,很多时候我们下载到的字体格式可能是.otf,比如

此时,可以强制将.otf后缀改成.ttf后缀,如下

直接将otf等字体的后缀名改为ttf导入,一样是可以使用的。

导入后,就会在字体选项中出现对应的字体

此时,我们就可以在使用标签部件时选择对应的自定义字体了。

然后在生成代码时,就会自动转换字体

注意,每个按钮都有个默认值,如果我们不使用这个默认值可以将其删除掉。

很容易被忽略,要注意。

自定义字体移植到LVGL中

当我们使用GUI Guider生成代码之后,在工程目录下的/generated/guider_fonts中就出现对应的字体文件。

这样就不需要我们手动去看我们所有的界面中使用了哪些文字,然后用转换工具一个一个地转换了,包括后期如果觉得字体太小或太大,在guider中修改都是非常方便的。所以这也是我常用的和推荐的转换方式。

我们随便打开一个字体c文件看看

文件开头就列出了后续要使用该字体时被引用的名字,然后就是字库的数据信息。

另外,在该目录下,有一个guider_fonts.h头文件,打开

这里面是所有字体文件的声明。

我们将所有字体导入到keil工程中,并添加对应的头文件路径。

之后编译看看,可能会有大量报错,根据提示来修改即可。

错误1:

主要是头文件路径的问题:

找到对应位置:

查找lv_font.h的路径如下

根据实际的相对位置,更改头文件路径如下:

错误2:

另外,还有个custom的报错,这里因为我们没有使用custom这个目录,所以直接找到对应位置将其屏蔽掉。

经过多次修改画面,发现屏蔽该头文件太麻烦,所以还是连带custom文件夹一起拷贝过来,虽然不用,但是放着也无妨。

错误3:

只要有中文的地方,就会报错

原因:keil5不认识UTF-8无BOM编码

解决办法参考:

keil error:#8:missing closing quote 处理_error: #8: missing closing quote-CSDN博客

直接使用该解决方式:

在KEIL中Options for Target 'Flash' -> C/C++ -> Misc Controls添加“--locale=english”。

自定义图标字体

图标字体是 web 前端中流行的一种技术,它以字体的形式,呈现出一个单色的图标。在LVGL 中,自带了许多常用图标字体,这极大地方便了用户的界面开发。大家需要使用这些图标字体,可以打开lv_symbol_def.h文件,查找相应的图标字体枚举,部分示例如下:

当用户调用上述的图标字体枚举,它们将显示成图标,如下图所示:

不过,guider里面没法直接使用图标字体,需要生成后,自行在代码里实现。

Solved: Gui-Guider 使用LVGL默认字体图标问题 - NXP Community

而且,LVGL内部图标字体样式是固定的,没法设置大小颜色等,局限性较大。

我们这里主要讲解自定义图标字体的使用。

打开阿里巴巴矢量图标库,然后注册

iconfont-阿里巴巴矢量图标库

搜索想要的图标,如wifi

把光标移动到对应的图标上,点击“购物车”,将对应的图标添加到购物车。注意,别点直接下载,而是先加入购物车。

这一步,我们将所有要用到的图标都加入购物车,而不是一个一个地去下载。

选完图标后。点击网页右上角的“购物车”图标

接着将这些图标加入项目,可以创建一个项目并加入其中

之后点击确定,就会自动进入我的项目界面,可以看到选中的所有图标,在下载这些图标之前,我们可以对其进行编辑,将其修改成我们想要的样式

比如

编辑完成之后,就可以保存为副本了。仅保存就是效果应用于当前图标,不会建立副本。

确认无误后,点击下载至本地

下载后解压并打开,可以看到里面有对应的字体文件

接下来有两种使用方式

第一种,手动撸代码

使用 LVGL 官方的在线字体转换工具(网址:https://lvgl.io/tools/fontconverter),将字库文件(例如 TTF)转换成 C 语言数组字体文件

选择上面生成的ttf字体文件。

注意,范围Range那里对应的就是图标网站里对应的unicode码

后四位就是我们想要的,我们将其改成十六进制的形式填写入上方的Range框内,之间用英文逗号隔开。

确认无误后,就可以点击Convert进行转换了。

此时,会生成对应的字体c文件。

然后将该文件添加到工程中,并为其添加对应头文件

然后在头文件里进行字体的声明和宏定义,便于调用。

注意,lvgl默认只能识别UTF-8编码,所以我们这里的宏定义所定义的内容需要按照上述格式进行书写,并将对应的UTF-8编码填入。不过,我们知道的是Unicode编码,并不知道对应的UTF-8编码,因此需要进行编码转换。

提供该转换网站:

Unicode编码转换,UTF编码转换(UTF-8、UTF-16、UTF-32)

然后,就按照常规使用图标字体的方式来使用即可。

示例如下:

注意,图标字体基本只能设置位置,其他样式设置无效。

不过……………………………………】

一顿操作猛如虎,最后发现根本就显示不了,而且没找到是啥原因。

所以只能暂时放弃这种方式,另谋出路。

第二种,使用guider来绘制

图标字体,本质上是一种字体,所以我们尝试着按照普通字体的形式来使用。

上面我们已经从图标网下载好了我们的目标字体文件,此时,我们将其当做普通字体导入guider里面。

接着,选择一个label标签组件,然后将图标对应的字符粘贴进入,然后为其选择对应的字体。就能显示对应的图案了。

我们还能像字体一样设置该图案的大小和颜色。

这里的关键就是,文本内容填啥?

填的就是我们上面unicode编码转换成的字符

我们将该字符复制到文本区域即可。

虽然看起来是个框,但确实是有实际内容的。

之后,正常生成代码使用即可。

这种方式,不用我们自己去手撸代码了。

我们再接着看下对应的程序代码

这里面设置的字体是对应的字体,文本内容看起来像个空格,但确实是有对应的内容,也可以正常显示。

不过,这种方式有个缺点,那就是只能显示guider自动生成的图标字体,自己把字符拷贝过去粘贴到代码里就没效果了。因此只适合图案固定不变的图标内容。样式我们可以在代码里自行修改。一般图标都不会改变图案形状,顶多只会变变颜色样式。而且,我们在下载图标时不用编辑他们的样式,而是留到guider里面去设置。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Databend 开源周报第 137 期

Databend 是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展,遇到更贴近你心意的 Databend 。 支持查询匹配倒…

大型网络游戏设计与AI赋能-4

接上文---- 第一个要去搭建的就是这个运行平台层。在此之上,我们会引入一些第三方SDK包。 为什么要引入第三方的SDK包?大家要知道一点,任何研发一款软件从来都不会从头造轮子。就是我们在开发一款软件的时候,从来都不会从头造轮子…

PyTorch使用cuda场合与Apple M1的GPU MPS的转换

此示例仅仅是一个简单的VGG模型调用。

T2. 排队选人 - 小米前端笔试编程题解

考试平台: 赛码 题目类型: 20道选择 2道编程题 考试时间: 2024-03-23 (两小时) 题目描述 小D是一名老师,他想选出一些同学参加一个团体比赛。 总共有n个同学,每个同学有一个能力值x和一个合作…

深入探讨iOS开发:从创建第一个iOS程序到纯代码实现全面解析

iOS开发作为移动应用开发的重要领域之一,对于开发人员具有重要意义。本文将深入探讨iOS开发的各个方面,从创建第一个iOS程序到纯代码实现iOS开发,带领读者全面了解iOS应用程序的开发流程和技术要点。 📱 第一个iOS程序 在创建第…

【数据结构】 HashMap源码分析(常量+构造方法+方法)

文章目录 HashMap源码分析一、成员常量二、构造方法三、方法1.此时假定为进行了无参构造,没有分配内存2.当发生有参构造时,完成对容量的大小判断后,将容量大小,传进tableSizeFor方法中: HashMap源码分析 一、成员常量…

IDEA2023版本创建spring boot项目时,Java版本无法选择Java8问题解决

先简单说下出现本问题的原因: spring boot3.0发布时提到未来Java17将会成为主流版本,所有的Java EE Api都需要迁移到Jakarta EE上来。而spring boot3.0及以上版本已经不支持Java8了,支持Java17及以上版本。同时官方支持项目初始化的 Spring B…

FreeRTOS(三)

第二部分 事件组 一、事件组的简介 1、事件 事件是一种实现任务间通信的机制,主要用于实现多任务间的同步,但事件通信只能是事件类型的通信,无数据传输。其实事件组的本质就是一个整数(16/32位)。可以是一个事件发生唤醒一个任务&#xff…

微服务(基础篇-006-Docker)

Docker是一个开源的应用容器引擎,它让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何Linux机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间没有任何接口(类似 iPhone 的 app&…

【晴问算法】入门篇—递归—汉诺塔

题目描述 汉诺塔(又称河内塔)问题源于印度一个古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上。并且规定,在小圆盘…

Count Color 线段树统计颜色

线段树统计颜色 先压位存储 类似一个bitset 输出答案的时候看看有几个1就好了 pushup的话或一下左右区间 #include<iostream> #include<cstring> using namespace std;const int N 1e610;struct Segment{int l,r,id,lz; }tr[N<<2];void pushup(int u){t…

oracle19c adg搭建

一、环境搭建 主机IPora19192.168.232.111ora19std192.168.232.112 本文结合&#xff1a;https://blog.csdn.net/weixin_63131036/article/details/136635553 1.配置网络yum源 1.删除redhat7.0系统自带的yum软件包&#xff1b; rpm -qa|grep yum >oldyum.pkg 备份原信息 …

工作12年了,我还没能过上自己想要的生活

写这篇文章之前&#xff0c;我想了很久&#xff0c;不知道该如何下笔&#xff0c;如何向读者说明这些年我是怎么走过来的&#xff0c;我只是依稀的记得当时的自己犹如在昨天。 2009年大学毕业&#xff0c;我和大多数的毕业生一样写简历求职。不管是招聘会还是网上投简历&#x…

YOLOv9改进策略:卷积魔改 | DCNv2升级版本,助力检测

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a;在DCN的基础上&#xff0c;增加了2个创新点&#xff0c;分别是调制模块和使用多个调制后的DCN模块&#xff0c;从形成了DCN的升级版本——DCNv2 &#x1f4a1;&#x1f4a1;&#x1f4a1;如何使用&#xff1a…

循环神经网络(RNN):处理序列数据的利器

目录 1. 引言 2.RNN原理与时间步展开 3.LSTM与GRU工作机制与优势 3.1.LSTM&#xff08;Long Short-Term Memory&#xff09; 3.2.GRU&#xff08;Gated Recurrent Unit&#xff09; 4.应用案例 4.1文本生成 4.2情感分析 5.总结 1. 引言 循环神经网络&#xff08;Recurr…

UE5学习日记——Rope Swing 人物与绳索摆动知识准备

rope swing荡绳 比我想的要复杂&#xff0c;目前还没查到简单的做法。本文为查资料的记录&#xff0c;积累后再做一个自己满意的荡绳蓝图。 一、某国外网友的解释 原文 https://forums.unrealengine.com/t/implementing-rope-swing/83098/15 Project Flake - Physics Rope De…

JavaScript Uncaught ReferenceError: WScript is not defined

项目场景&#xff1a; 最近在Visual Studio 2019上编译libmodbus库&#xff0c;出现了很多问题&#xff0c;一一解决特此记录下来。 问题描述 首先就是configure.js文件的问题&#xff0c;它会生成两个很重要的头文件modbus_version.h和config.h&#xff0c;这两个头文件其中…

软件测试过程中如何有效的开展接口自动化测试

一.简介 接口自动化测试是指使用自动化测试工具和脚本对软件系统中的接口进行测试的过程。其目的是在软件开发过程中&#xff0c;通过对接口的自动化测试来提高测试效率和测试质量&#xff0c;减少人工测试的工作量和测试成本&#xff0c;并且能够快速发现和修复接口错误&…

使用Qt生成图片

Qt之生成png/jpg/bmp格式图片_qt生成图片-CSDN博客 (1)使用QPainter 示例关键代码&#xff1a; QImage image(QSize(this->width(),this->height()),QImage::Format_ARGB32);image.fill("white");QPainter *painter new QPainter(&image);painter->…

关于振弦式渗压计的基本知识详解

振弦式渗透压力计的组成主要包括振弦、高灵敏度金属薄膜、渗透石以及激励和接收线圈等。其运作机制是&#xff1a;水压力施加在金属薄膜上导致其形变&#xff0c;进而影响连接的钢弦的拉力。由于钢弦振动频率与其拉力密切相关&#xff0c;通过测量钢弦的频率变化即可计算出渗透…