体验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 文件应该始终能够工作)。

操作步骤如下：

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

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

  1. 将生成的 C 文件复制到 LVGL 我的项目中
  2. 在应用程序的 C 文件中，将图像申明为:LV_IMG_DECLARE(my_image_name);
  3. 将图像设置为图像对象的源: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();#endif    os_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: 送你一朵小花花呀

执行成果如下，可恶小菇凉呀：