此筆記主要是記錄在 LVGL 中使用圖片的幾種方式，以及使用過程中遇到的問題。最近在 ARM linux 中使用 LVGL 時，發現載入圖片變得很卡，一開始還好，當連續載入的圖片變多後，特別是動畫的過程中直接無法看，折騰了一會直接懵逼了，嘗試了各種辦法都沒搞定，後來發現是我沒有好好看文檔，導致的問題，這裡特意記錄一下。

一、基本信息

• lvgl 版本：8.3
• 使用環境：linux
• 屏幕大小：480 *800

二、lvgl外部文件使用

為了方便後面的學習，這裡先記錄一下在 linux 中通過 lvgl 使用外部文件的方式，有需要的可以參考一下，好像其他博主很少特意記錄這個問題，我也折騰了好一會

1. 打開外部文件使用
   lvgl 在8.0後就已經集成了 文件系統的使用，不需要像之前那樣進行移植，只需要打開一下對應的配置巨集即可。
   打開 LV_USE_FS_POSIX 巨集，如下圖所示：
   

   註意：

   • 註意圖中的四部分，其中②就是在 linux 中使用外部文件必須要打開的，開啟方式如圖所示，特別需要註意的是其中的A可以配置成任意字元，這裡只是標號，稍後在使用的時候會有介紹。
   • ①部分開啟的是在 SD 之類的外設中使用的，比如 STM32 和 esp32 等
   • ③部分開啟的是在 windows 中的外設使用。
   • ④部分打開後使用的是通過自定義的文件系統進行使用的。

2. 使用方式
   使用方式分相對路徑和絕對路徑，如下所示

   lv_obj_t *img_btn = lv_imgbtn_create(home_scroll_objx);     // 創建按鈕
   
   /* 通過相對路徑使用 */
   lv_imgbtn_set_src(img_btn, LV_IMGBTN_STATE_RELEASED, NULL, "A:./lv_res/images/home/img_cogwheel_argb.jpg", NULL);
   
   /* 通過絕對路徑使用 */
   lv_imgbtn_set_src(img_btn, LV_IMGBTN_STATE_RELEASED, NULL, "A:/home/lv_res/images/home/img_cogwheel_argb.jpg", NULL);
   

   註意：因為配置是 LV_FS_POSIX_LETTER 'A'，所以在路徑中要添加 A: 進行匹配，這裡我嘗試過不能將 "A:" 配置到 LV_FS_POSIX_PATH 巨集中，不然無法使用，
   也有不一樣的配置方式，如下所示：

   /*API for open, read, etc*/
   #define LV_USE_FS_POSIX 1
   #if LV_USE_FS_POSIX
       #define LV_FS_POSIX_LETTER '/'     /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
       #define LV_FS_POSIX_PATH "/"         /*Set the working directory. File/directory paths will be appended to it.*/
       #define LV_FS_POSIX_CACHE_SIZE  0   /*>0 to cache this number of bytes in lv_fs_read()*/
   #endif
   
   /* 使用方式 */
   lv_imgbtn_set_src(img_btn, LV_IMGBTN_STATE_RELEASED, NULL, "/home/lv_res/images/home/img_cogwheel_argb.jpg", NULL);
   

   但是這樣操作後，就不能通過相對路徑進行使用，可以根據自己的需要進行配置。

三、圖片載入

這裡主要有三種載入方式，如下所示：

• 通過 JPG 解碼器將 JPG 轉換為 C 數組

• 通過轉換器將 JPG 轉換為 SJPG

• 直接 LVGL 集成的解碼器直接使用外部的 jpg、png、bim圖片

1. 通過 JPG 解碼器將 JPG 轉換為 C 數組
   這裡我之前有筆記記錄過，所以就不詳細介紹了，有需要的可以看看，LVGL 顯示圖片。

2. 通過轉換器將 JPG 轉換為 SJPG

   • 這裡是通過 LVGL 提供的插件將 jpg 轉成 sjpg，插件是 python 插件，所以在使用之前需要安裝 python 環境

   • 轉換器在源碼中可以找到，路徑是：lvgl/scripts 目錄下的 jpg_to_sjpg.py

   • 在使用之前先確保全裝 pillow 組件，安裝命令如下

     # 安裝命令
     pip install pillow
     # 卸載命令
     pip uninstall pillow
     

   • 進行圖片裝換，操作如下

     # windows CMD 
     jpg_to_sjpg.py img_cogwheel_argb.jpg
     
     # windows PowerShell
     ./jpg_to_sjpg.py img_cogwheel_argb.jpg
     
     # linux
     python3 jpg_to_sjpg.py img_cogwheel_argb.jpg
     

     

   • 轉換完成後會在文件中生成一個 SJPG 和 C 文件，系統的小伙伴可以發現，這裡的使用方式和方式1的區別不是很大，只是在 SJPG 文件中加入了一些描述信息

   • 使用方式：lv_imgbtn_set_src(img_btn, LV_IMGBTN_STATE_RELEASED, NULL, "A:./lv_res/images/home/img_cogwheel_argb.sjpg", NULL);

3. 直接 LVGL 集成的解碼器直接使用外部的 jpg、png、bim圖片
   這裡比較簡單了，上面中已經演示了使用方式，開啟外部文件使用後，直接載入圖片名稱即可，如下所示

   lv_imgbtn_set_src(img_btn, LV_IMGBTN_STATE_RELEASED, NULL, "A:./lv_res/images/home/img_cogwheel_argb.png", NULL);
   

   註意：在使用外部圖片時，連續載入圖片時會很慢，這個是因為沒有打開對應的圖片緩存機制，每次使用時都是通過解析器進行解析，所以速度比較慢。
   直接打開 #define LV_IMG_CACHE_DEF_SIZE 1 巨集即可，但是這個操作會消耗記憶體控制項，此操作對於方式1來說是沒有意義的。

註意：在更改頭文件的巨集時，最好清除一下工程從新編譯，不然可能出現各種奇怪的問題。筆記到此結束，有寫的不好的地方望各位大佬指出。

參考鏈接

JPG decoder(JPG解碼器)：http://lvgl.100ask.net/8.1/libs/sjpg.html
ESP32開發學習 LVGL Littlevgl 解碼顯示JPG圖片三種方式：https://blog.csdn.net/cnicfhnui/article/details/119377567