lvgl8.2 自定义符号

1. 符号(symbol)

符号即图标(在 lvgl 中称作 symbol)嵌入式设备使用的芯片存储空间有限,使用字库图标能极大的丰富界面,使得图形界面更加生动形象和易于理解,又能控制 ROM 的占用,lvgl 官方自带了 20 几个 symbol,在实际的使用过程中,已有的 symbol 一般无法满足所有的项目场景,此时就需要自己添加一些 symbol,下面将来说明如何在 lvgl 中使用我们自己设计或使用互联网上别人制作分享的 symbol

2. lvgl 官方 symbol

lvgl8.2 自定义符号_第1张图片

3. 自定义符号

自定义符号指的是使用第三方制作并提供给开发者免费使用的符号。

3.1 使用阿里 iconfont 平台

lvgl8.2 自定义符号_第2张图片
iconfont:https://www.iconfont.cn/

平台要求需要登陆才能够使用,所以如果没有账号需要注册或使用第三方账号授权登陆使用。
lvgl8.2 自定义符号_第3张图片

登录后先创建一个项目
lvgl8.2 自定义符号_第4张图片
lvgl8.2 自定义符号_第5张图片

接下来点击首页,搜索需要的图标,例如天气在想要的图标上单击购物车图标先添加到购物车
lvgl8.2 自定义符号_第6张图片
然后单击右上角的购物车图标
lvgl8.2 自定义符号_第7张图片
选择添加到项目
lvgl8.2 自定义符号_第8张图片
lvgl8.2 自定义符号_第9张图片

然后单击主页上的菜单资源管理->我的项目,你刚才选择的图标会在这个项目下,单击下载到本地
lvgl8.2 自定义符号_第10张图片

通过以上步骤即可将我们需要的图标字体下载到本地,图标下方的类似 编码即为该图标的 unicode 编码。

3.2 使用工具转换字体图标

lvgl8.2 自定义符号_第11张图片

3.3 unicode 和 utf 编码转换

lvgl8.2 自定义符号_第12张图片
unicodeutf 编码转换:https://www.qqxiuzi.cn/bianma/Unicode-UTF.php

3.4 定义符号宏

#define USR_SYMBOL_VOLUME_20 "\xEE\xA2\xAE",其中 "\xEE\xA2\xAE" 为通过下载图标的 unicode 编码通过编码转换得到的 utf-8 编码。

3.5 声明字体图标

LV_FONT_DECLARE(symbol_volume_20); 使用前需要声明字体图标其中 symbol_volume_20 即为我们使用字体转换工具转换得到的图标字体。

你可能感兴趣的:(LVGL8.X,stm32,lvgl,lvgl8,嵌入式图形界面)