好嗨哟！OneOS 图形组件显示自己喜欢的图片嵌入式

体验OneOS图形显示
一直对图形心心念念，还能想到以前使用QT的日子，而后接触到了资源比较受限的MCU，发现QT便没有什么优势了，更多的则是：GUIX、ucGUI、storyboard，LVGL等，没有一家独大，而是百花争鸣。其中，OneOS联合LVGL，组成OneOS下的图形组件，也让OneOS的图形功能得到了很好的扩展和延伸。
此篇文章，主要使用其图形组件，结合LVGL的图片在线转换工具，简单体验一下图片显示的感觉。
图片显示的几种方式
在LVGL中，图片显示有几种方式呢？
我能想到的有两种，其一是在文件系统的支撑下，把图片直接放入sd卡或者其它文件系统中去。然后调用相关接口，便可把图片从屏幕上显示出来。其二则是把图片直接转化为C源码文件，然后直接编译进可执行文件中去。
如何体验这两种方式呢？其实也已经存在于GUI的配置中了，其提供了图形的example，可以快速体验一下下~

GUI → Enable LVGL → Enable LVGL examples → Third party Lib example [ ] Enable LVGL example bmp [ ] Enable LVGL example gif [*] Enable LVGL example png [ ] Enable LVGL example jpg [ ] Enable LVGL example qrcode [ ] Enable LVGL example freetype

其中的example代码存在于文件：OneOS\components\gui\lvgl8.2\lvgl\examples\libs，我就以png为例，其代码如下，分别展示了文件系统以及转化为C源码的方式。

void lv_example_png_1(void) { LV_IMG_DECLARE(img_wink_png); lv_obj_t * img; //C源码方式 img = lv_img_create(lv_scr_act()); lv_img_set_src(img, &img_wink_png); lv_obj_align(img, LV_ALIGN_LEFT_MID, 20, 0); //文件系统方式 img = lv_img_create(lv_scr_act()); /* Assuming a File system is attached to letter 'A' * E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */ lv_img_set_src(img, "A:lvgl/examples/libs/png/wink.png"); lv_obj_align(img, LV_ALIGN_RIGHT_MID, -20, 0); }

实战体验
学习的最好方式，是自己实际操作，纸上得来终觉浅，绝知此事要躬行。古人说的好哇！好咧，那我要把下图放到板子上显示，一张可爱小菇凉的图片！

文章图片

使用的工具是LVGL官方在线图像转换器：https://lvgl.io/tools/imageco...
这个免费的在线图像转换工具，可以从图像创建 C 数组或原始二进制文件。浏览器支持的任何图像格式都应该可以工作(PNG、 JPG 和 BMP 文件应该始终可以工作)。

文章图片

【好嗨哟！OneOS 图形组件显示自己喜欢的图片】操作步骤如下：

选择一个或多个图像(png、 jpg 或 bmp)
给输出文件起一个名字(例如“ wallpaper 1”)
指定所需的颜色格式
启用抖动（可选项）
单击 Convert 按钮下载生成的 C 文件

如何使用生成的C源码呢？也是步骤如下：

将生成的 C 文件复制到 LVGL 项目中
在应用程序的 C 文件中，将图像声明为:LV_IMG_DECLARE(my_image_name);
将图像设置为图像对象的源:lv_img_set_src(img, &my_image_name);

这里为了简单，直接把源码放大板级project下面了：

文章图片

然后使用中移的cube工具加入到keil工程中：

文章图片

最后，为了简单，直接在gui_ex，执行如下代码：

void gui_ex(void) { #ifdef OS_USING_LVGL_EXTRA_FREETYPE void lv_example_freetype_1(void); lv_example_freetype_1(); #endifos_kprintf("gui example,please use shell command\r\n"); LV_IMG_DECLARE(haha); lv_obj_t * img; img = lv_img_create(lv_scr_act()); lv_img_set_src(img, &haha); lv_obj_align(img, LV_ALIGN_CENTER, 0, 0); }

源码仓库和实战效果
最后，把源码放在码云啦，有兴趣的，可以参考一下哟！源码仓库：flower: 送你一朵小花花呀
执行效果如下，可爱小菇凉呀：