【esp32&lvgl】-2.3 #lvgl-图片

weixin_43326110

已于 2022-08-17 16:34:34 修改

阅读量2.3k

点赞数 6

分类专栏： lvgl 文章标签：单片机

于 2022-08-14 20:41:22 首次发布

本文链接：https://blog.csdn.net/weixin_43326110/article/details/126335529

版权

lvgl 专栏收录该内容

8 篇文章 12 订阅

订阅专栏

一、前言

lvgl插入图片的方法主要有三种：

将图片利用工具生成c文件，写入单片机程序并进行烧录，这种方式实现起来较为简单，但是由于硬件限制，图片的大小会受限，且占用内存，可以用在加载界面等地方。
将图片利用工具生成bin文件用lvgl的文件系统访问
通过图片解码库利用lvgl的文件系统访

二、c文件

首先将所需的图片进行初步处理，通过ps简单调整一下图片的像素尺寸。像素较大的图片转化为c文件一个是转化速度慢，另一个单片机的内存有限烧录不进去。这里推荐调整为自己的屏幕尺寸大小左右（长宽100像素左右）。

然后就可以开始进行图片的转化，一般有两种方式：

通过官方的在线工具转换
下载大佬的离线转换工具

我这里是测试一下，用官方的在线工具转换即可（大佬的离线工具有一些批量转换之类的功能，比官方的要好用一些），设置可以看下图。其中color format可以导出不同类型的数据，选择带alpha词条的类型会多出透明度的设定，选择chroma词条的类型可以让图片一些固定颜色的部分不显示这里就用一般的CF_COLOR_TRUE格式即可。

导出c文件后放到项目的代码里，记得在cmake文件里编译一下，然后代码里就可以引用，文件里自己会带一个变量，与导出时设定的文件名一致。然后通过lv代码就可以调用图片了。这里简单贴一下我的代码画图部分，代码的其他部分可以看前一篇文章，就把界面绘制的部分替换一下就行。

这里简单说两个函数：

lv_img_set_zoom—调整图片的大小（函数值255是100%大小，128是50%）.
lv_obj_set_style_bg_opa——调整背景的透明度，测试一下0是完全不透明，255是完全透明（底色是白色）。

void gui_test(){
    lv_obj_t *scr = lv_scr_act();
    lv_obj_clean(scr);

    lv_obj_remove_style_all(scr);
    lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 255);
    lv_obj_set_style_bg_color(scr, lv_color_black(), 0);

    LV_IMG_DECLARE(tju);
    lv_obj_t *img1 = lv_img_create(scr);
    lv_img_set_src(img1, &tju);
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
    lv_img_set_zoom(img1,255);
}

至此，图片已经在屏幕上成功显示出来了。

三、bin文件

bin图片的加载与c文件相比，首先需要进行文件系统的加载，加载完文件系统后，只需要将bin图片放在sd卡内然后对gui_test函数稍作修改即可：

    lv_obj_t *scr = lv_scr_act();
    lv_obj_clean(scr);

    lv_obj_remove_style_all(scr);
    lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0);//0不透明
    lv_obj_set_style_bg_color(scr, lv_color_black(), 0);

    //LV_IMG_DECLARE(tju);
    lv_obj_t *img1 = lv_img_create(scr);
    lv_img_set_src(img1,"S:/image/tju_120.bin");
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
    //lv_img_set_zoom(img1,255);

如上所示，将LV_IMG_DECLARE这一声明图片的语句注释掉，然后将图片更换为图片在内存卡中的路径即可。

值得注意的是，bin文件是不能修改显示的大小的，lv_img_set_zoom函数会使图片无法显示，记得将图片修改为合适大小的像素进行显示（经过测试如果图片较大，会显示图片的一部分充满屏幕，而且会加载的比较慢）。

而其他的图片调整函数是否会引起这一问题还没有进行测试（如旋转等），之后测试完也贴在这：

todo

除此之外，图片就可以在屏幕上正常显示了：

四、解码库

todo

LVGL V8 图片解码库移植 - 哔哩哔哩 (bilibili.com)

参考资料

Images — LVGL documentation (100ask.net)

Online image converter - BMP, JPG or PNG to C array or binary | LVGL

LVGL库入门教程 - 动画 - 冰封残烛 - 博客园 (cnblogs.com)