#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二) 原创 精华

一口气吃不成胖子
发布于 2022-6-18 14:04
浏览
4收藏

移植littleVGL库到OpenHarmony过程分享

本文正在参加星光计划3.0–夏日挑战赛

一、宏定义文件修改——修改 lv_conf.h 和 lv_ex_conf.h 配置文件

先打开 GUI 下的 lv_conf.h 文件,里面的配置项还是很多的,大家先不要纠结每个 配置项到底什么意思,后面我会专门来讲解的
#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

1.1 修改液晶屏分辨率

打开文件之后,第一个#if 后面的 0 改为 1,使整个文件生效,接着修改 LV_HOR_RES_MAX 和 LV_HOR_RES_MAX 宏的值,这个是告诉 littleVGL 你所用的液晶屏 分辨率是多少,请根据自己手头液晶屏的实际分辨率大小相应设置,比如我购买的是240*240,,因此 我这里就设置如下:

#define LV_HOR_RES_MAX (240)
#define LV_VER_RES_MAX (240) 

1.2 修改颜色深度

接着我们修改 LV_COLOR_DEPTH 颜色深度,最常见的设置就是 1 或者 16 了,1 是用于单色 屏,而 16 是用于彩色屏,这里我们设置成 16 即可,即如下所示

/* Color depth:
 * - 1:  1 byte per pixel
 * - 8:  RGB233
 * - 16: RGB565
 * - 32: ARGB8888
 */
#define LV_COLOR_DEPTH     16

1.3 设置 界面缩放比例

再接着我们来设置 LV_DPI 的值,默认值为 100,我们不改变它,这个宏是用来调节界面缩 放比例的,此值越大,控件分布的就越散,控件自身的间隔也会变大

#define LV_DPI        100  

1.4 修改动态分配空间大小

再接着修改 LV_MEM_SIZE 的大小,这个就是控制 littleVGL 中所谓的动态数据堆的大小,是 用来给控件的创建动态分配空间的,我们这里设置为 32KB 的大小

#  define LV_MEM_SIZE    (32U * 1024U)

1.5 修改 GPU使能情况

再接着修改 LV_USE_GPU 的值,默认值是 1,我们把它设置为 0,即不使能 GPU 功能

#define LV_USE_GPU              0

1.6 设置主题

再接着再把 LV_THEME_LIVE_UPDATE, LV_USE_THEME_TEMPL, LV_USE_THEME_DEFAULT, LV_USE_THEME_ALIEN, LV_USE_THEME_NIGHT, LV_USE_THEME_MONO, LV_USE_THEME_MATERIAL, LV_USE_THEME_ZEN, LV_USE_THEME_NEMO 等所有宏 的值都设置为0,即全部不使能,这些宏都是跟littleVGL自带的主题相关的,因为后面我们要自己写一个,所以这里我们先全部不使能

#define LV_THEME_LIVE_UPDATE    0   /*1: Allow theme switching at run time. Uses 8..10 kB of RAM*/

#define LV_USE_THEME_TEMPL      0   /*Just for test*/
#define LV_USE_THEME_DEFAULT    0   /*Built mainly from the built-in styles. Consumes very few RAM*/
#define LV_USE_THEME_ALIEN      0   /*Dark futuristic theme*/
#define LV_USE_THEME_NIGHT      0   /*Dark elegant theme*/
#define LV_USE_THEME_MONO       0   /*Mono color theme for monochrome displays*/
#define LV_USE_THEME_MATERIAL   0   /*Flat theme with bold colors and light shadows*/
#define LV_USE_THEME_ZEN        0   /*Peaceful, mainly light theme */
#define LV_USE_THEME_NEMO       0   /*Water-like theme based on the movie "Finding Nemo"*/

注意,在实际项目中,我们一般最多使能一个, 如果我们项目根本就用不到其自带的主题,那么我们应该把这些宏全部禁止,因为这样可以节 省 flash 和 ram。

1.7 修改 lv_ex_conf.h 文件

至此 lv_conf.h 文件修改就完成了,接下来我们要修改 lv_ex_conf.h 文件,这个文件就简单 很多了,而且这个文件也不是很重要,只有当我们要演示官方自带的例程时,才会用到,下面就 简单做一下说明.

把 LV_EX_KEYBOARD, LV_EX_MOUSEWHEEL, LV_USE_TESTS, LV_USE_TUTORIALS, LV_USE_BENCHMARK, LV_USE_DEMO, LV_USE_TERMINAL 等宏的值全部设置为 0,其 他宏保持默认即可。

#define LV_EX_PRINTF       0       /*Enable printf-ing data in demoes and examples*/
#define LV_EX_KEYBOARD     0       /*Add PC keyboard support to some examples (`lv_drivers` repository is required)*/
#define LV_EX_MOUSEWHEEL   0       /*Add 'encoder' (mouse wheel) support to some examples (`lv_drivers` repository is required)*/
/*Show some widget*/
#define LV_USE_DEMO_WIDGETS        1
#if LV_USE_DEMO_WIDGETS
#define LV_DEMO_WIDGETS_SLIDESHOW  0
#endif

/*Printer demo, optimized for 800x480*/
#define LV_USE_DEMO_PRINTER     0

/*Demonstrate the usage of encoder and keyboard*/
#define LV_USE_DEMO_KEYPAD_AND_ENCODER     0

/*Benchmark your system*/
#define LV_USE_DEMO_BENCHMARK   0

/*Stress test for LVGL*/
#define LV_USE_DEMO_STRESS      0

/*Music player for LVGL*/
#define LV_USE_DEMO_MUSIC      0
#if LV_USE_DEMO_MUSIC
#define LV_DEMO_MUSIC_AUTO_PLAY 0

二、创建OpenHarmony字体

2.1 littleVGL 字体介绍

​ 在 littleVGL 中的字体功能也是非常强大的,支持最高 8bpp(在老版本中存在)的抗锯齿, 另外还有 1bpp,2bpp,4bpp 三个值可选,实现灵活性配置,选择越大的 bpp 值时,要求的 flash 存 储资源也是成倍的增加的,比如 4bpp 的存储消耗是 1bpp 存储消耗的 4 倍,除了存储消耗变大 之外,bpp 值越大,在界面上进行字体渲染时,绘制速度也会越慢,当然了,bpp 值越大,也是有好 处的,那就是绘制出来的字体边缘越平滑,没有毛刺,使我们产品的 UI 界面看上去更高大上,所 以在实际项目中,我们应该根据硬件平台的实际性能来选出一个比较合适的 bpp 值,一般的项 目都是默认采用 4bpp 就可以了。

2.2 使用字体

​ 不论是使用 littleVGL 系统自带的字体,还是使用我们自己创建的字体,他们的使用方法 都是一样的,为了大家更容易接受,我先给大家介绍怎么使用字体,后面我再给大家介绍怎么 创建字体并使用它,我们就先以系统自带的字体为例来讲解怎么使用它,littleVGL 内置了 5 个 字库,如下所示:

字库
lv_font_roboto_16
lv_font_roboto_22
lv_font_roboto_28
lv_font_unscii_8
lv_font_roboto_12
2.2.1 字体类型介绍

​ 其中的 lv_font_roboto_12, lv_font_roboto_16, lv_font_roboto_22,lv_font_roboto_28 都是 Roboto 字体,只不过是细分出了 4 个不同的字体大小,这四个字库全都是 4bpp 抗锯齿的,这四 个字库中每一个字库除了包含所有的可见英文字符外,还都包含了一套相同的图标字符,也就 是我们前面所说的图标字体,这套图标字符有一个自己的字体名为 FontAwesome ,然后 lv_font_unscii_8 是一种非常好的单色屏字体,是 1bpp 的,相当于无抗锯齿的功能,另外 lv_font_unscii_8 字库只包含英文字符,不包含上面所说的图标字符.

​ 本次移植我用的是OpenHarmony开源的字体,所以都没有使能, 如果想使能其他的字体或者想设置默认的字体等,就必须得在 lv_conf.h 头文件中进行配置, 相关的配置宏如下:

#define LV_FONT_ROBOTO_12    0
#define LV_FONT_ROBOTO_16    0
#define LV_FONT_ROBOTO_22    0
#define LV_FONT_ROBOTO_28    0

/*Pixel perfect monospace font
 * http://pelulamu.net/unscii/ */
#define LV_FONT_UNSCII_8     0

2.3 如何创建自己的字体

2.3.1 安装node.js

离线工具是用 node.js 开发出来的,所以我们需要先安装 node.js 的运行环境,安装 node.js,过程有点久,请耐心等待!

我这里给出一个网上的参考教程:Node.js 安装配置 | 菜鸟教程 (runoob.com)

2.3.2 安装离线工具包

在安装完 node.js(会附带把 npm 包管 理器给装好)之后,我们接下来要安装 lv_font_conv 离线转换工具了,操作很简单,先打开 cmd 命令窗口,然后直接输入 npm i lv_font_conv -g 命令,回车运行就会把 lv_font_conv 给安装 好

npm i lv_font_conv -g

#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

2.3.3 lv_font_conv 的主要命令行参数

–bpp: 抗锯齿大小,可选值为 1-4

–size: 字体的大小,实际就是指字符的高度

-o(或者–output): 输出路径,比如为 C:\Users\han\Desktop\my_font.c

–format: 输出格式,可选值有 dump,bin,lvgl,我们只用 lvgl 就行了

–font: ttf/woff/woff2 字体文件的路径

-r(或–range): 所需字符的 unicode 编码范围,可选值为单个字符,字符范围,加可选的映射 地址,首先你得必须保证你所需要的字符范围在–font 指定的字体文件中能找得到,-r 命令行 参数可以在一条命令中多次出现,如下面例子所示:

-r 0xF450 单个字符,十六进制和十进制都行
-r 0xF450-0xF470 字符范围
-r '0xF450=>0x81' 单个字符加映射地址
-r '0xF450-0xF470=>0x81' 字符范围加映射地址
-r 0xF450 -r 0xF451-0xF470 一下使用 2 次-r 命令行参数
-r 0xF450,0xF451-0xF470 用单个-r 表示多种可选值

–symbols: 和-r 的作用差不多,都是用来指示所要用到的字符,不过他们的表达形式不一样, 对–symbols 而言,它是接受字符的字面量形式,而-r 是接受字符的编码形式, --symbols 和-r 可以同时使用,也可以只使用它们其中的一个,请看如下例子:

--symbols 0123456789 中 ABCD 国 EFG

–no-compress: 禁止进行 RLE 压缩,我们在生成字体时,请禁止进行压缩

2.3.4 字体下载

这里我们要下载一下OpenHarmony的字体,附件已给出

下载链接:https://developer.harmonyos.com/cn/docs/design/des-resources/general-0000001157315901

#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

下载后挑选自己喜欢的安装即可

#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

2.3.5 字体创建

下面给出一条完整的创建命令示例(复制到 cmd 命令窗口运行的):

lv_font_conv --no-compress --format lvgl --font C:\Users\han\Desktop\HarmonyOS_Sans_SC_Thin.ttf -o C:\Users\han\Desktop\my_font.c --bpp 4 --size 25 --symbols 我爱OpenHarmonyar -r 0x30-0x39 -r 0x41-0x5A -r 0x61-0x7A -r 0x95F4

#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

注意:

1.上面的文件路径要改成自己的

2.上面给出的代码可能会出现换行,请自行调整
生成的代码如下
#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区
将代码拉取到GUI文件目录下
#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

2.4 测试代码

2.4.1 声明字体
LV_FONT_DECLARE(my_font);//申明字体
2.4.2 入口函数
void lv_font_test_start()
{
lv_obj_t* scr = lv_scr_act();
lv_obj_t* label1 = lv_label_create(scr,NULL);
static lv_style_t style1;
lv_style_copy(&style1,&lv_style_plain_color);
style1.text.font = &my_font;//在样式中使用这个字体
lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&style1);
lv_label_set_text(label1,"我爱OpenHarmony");//设置文本
lv_label_set_body_draw(label1,true);
lv_obj_align(label1,NULL,LV_ALIGN_CENTER,0,0);
}

2.5 测试效果

#夏日挑战赛#移植littleVGL库到OpenHarmony过程分享(二)-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
HarmonyOS Sans.zip 49.75M 29次下载
已于2022-11-29 12:06:26修改
10
收藏 4
回复
举报
2条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

贴下楼主第一篇的链接:https://ost.51cto.com/posts/13963

回复
2022-6-20 10:08:31
旧城ᝰ冷⁰巷℡
旧城ᝰ冷⁰巷℡

爱死了,666

回复
2022-6-20 19:51:46
回复
    相关推荐