feat(LVGL port): Generate C arrays for images during build process

espressif · Apr 17, 2024 · b49e39d · b49e39d
1 parent 9e882f3
commit b49e39d
Show file tree

Hide file tree

Showing 18 changed files with 329 additions and 633 deletions.
diff --git a/components/esp_lvgl_port/CHANGELOG.md b/components/esp_lvgl_port/CHANGELOG.md
@@ -1,16 +1,17 @@
 # Changelog
 
-## 2.0.1
+## 2.1.0
 
 ### Features
 - Added unit test
-- Allow to sleep main LVGL task
-- Wake LVGL task from touch and display, when set big maximum sleep
-- Allow to select display color mode (only with LVGL9)
+- Allowed to sleep main LVGL task
+- Allowed wake LVGL task from touch and display, when set big maximum sleep
+- Allowed to select display color mode (only with LVGL9)
+- Added script for generating C array images during build (depends on LVGL version)
 
 ### Fixes
-- Apply display rotation from configuration
-- Wait for stop task when deinit
+- Applied display rotation from configuration
+- Added wait for stop task when deinit
 - Added esp_idf_version.h
 
 ## 2.0.0

diff --git a/components/esp_lvgl_port/README.md b/components/esp_lvgl_port/README.md
@@ -280,6 +280,30 @@ If the SRAM is insufficient, you can use the PSRAM as a canvas and use a small t
     }
 ```
 
+### Generating images (C Array)
+
+Images can be generated during build by adding these lines to end of the main CMakeLists.txt:
+```
+# Generate C array for each image
+lvgl_port_create_c_image("images/logo.png" "images/" "ARGB8888" "NONE")    
+lvgl_port_create_c_image("images/image.png" "images/" "ARGB8888" "NONE")
+# Add generated images to build
+lvgl_port_add_images(${COMPONENT_LIB} "images/")
+```
+
+Usage of create C image function:
+```
+lvgl_port_create_c_image(input_image output_folder color_format compression)   
+```
+
+Available color formats:
+L8,I1,I2,I4,I8,A1,A2,A4,A8,ARGB8888,XRGB8888,RGB565,RGB565A8,RGB888,TRUECOLOR,TRUECOLOR_ALPHA,AUTO
+
+Available compression:
+NONE,RLE,LZ4
+
+**Note:** Parameters `color_format` and `compression` are used only in LVGL 9. 
+
 ## Power Saving
 
 The LVGL port can be optimized for power saving mode. There are two main features.

diff --git a/components/esp_lvgl_port/examples/touchscreen/main/CMakeLists.txt b/components/esp_lvgl_port/examples/touchscreen/main/CMakeLists.txt
@@ -1,2 +1,5 @@
 idf_component_register(SRCS "main.c"
                     INCLUDE_DIRS ".")
+
+lvgl_port_create_c_image("images/esp_logo.png" "images/" "ARGB8888" "NONE")
+lvgl_port_add_images(${COMPONENT_LIB} "images/")
diff --git a/components/esp_lvgl_port/examples/touchscreen/main/images/.gitignore b/components/esp_lvgl_port/examples/touchscreen/main/images/.gitignore
@@ -0,0 +1 @@
+*.c
diff --git a/components/esp_lvgl_port/examples/touchscreen/main/images/esp_logo.png b/components/esp_lvgl_port/examples/touchscreen/main/images/esp_logo.png
diff --git a/components/esp_lvgl_port/examples/touchscreen/main/main.c b/components/esp_lvgl_port/examples/touchscreen/main/main.c
@@ -51,6 +51,9 @@
 
 static const char *TAG = "EXAMPLE";
 
+// LVGL image declare
+LV_IMG_DECLARE(esp_logo)
+
 /* LCD IO and panel */
 static esp_lcd_panel_io_handle_t lcd_io = NULL;
 static esp_lcd_panel_handle_t lcd_panel = NULL;
@@ -226,6 +229,11 @@ static void app_main_display(void)
 
     /* Your LVGL objects code here .... */
 
+    /* Create image */
+    lv_obj_t *img_logo = lv_img_create(scr);
+    lv_img_set_src(img_logo, &esp_logo);
+    lv_obj_align(img_logo, LV_ALIGN_TOP_MID, 0, 20);
+
     /* Label */
     lv_obj_t *label = lv_label_create(scr);
     lv_obj_set_width(label, EXAMPLE_LCD_H_RES);
@@ -236,7 +244,7 @@ static void app_main_display(void)
 #else
     lv_label_set_text(label, LV_SYMBOL_BELL" Hello world Espressif and LVGL "LV_SYMBOL_BELL"\n "LV_SYMBOL_WARNING" For simplier initialization, use BSP "LV_SYMBOL_WARNING);
 #endif
-    lv_obj_align(label, LV_ALIGN_CENTER, 0, -30);
+    lv_obj_align(label, LV_ALIGN_CENTER, 0, 20);
 
     /* Button */
     lv_obj_t *btn = lv_btn_create(scr);

diff --git a/components/esp_lvgl_port/idf_component.yml b/components/esp_lvgl_port/idf_component.yml
@@ -1,4 +1,4 @@
-version: "2.0.0"
+version: "2.1.0"
 description: ESP LVGL port
 url: https://github.com/espressif/esp-bsp/tree/master/components/esp_lvgl_port
 dependencies:

diff --git a/components/esp_lvgl_port/project_include.cmake b/components/esp_lvgl_port/project_include.cmake
@@ -0,0 +1,59 @@
+# lvgl_port_create_c_image
+#
+# Create a C array of image for using with LVGL
+function(lvgl_port_create_c_image image_path output_path color_format compression)
+
+    #Get LVGL version
+    idf_component_get_property(lvgl_ver lvgl__lvgl COMPONENT_VERSION)
+    set(LVGL_NAME "lvgl__lvgl")
+    if(lvgl_ver EQUAL "")
+        idf_component_get_property(lvgl_ver lvgl COMPONENT_VERSION)
+    set(LVGL_NAME "lvgl")
+    endif()
+
+    get_filename_component(image_full_path ${image_path} ABSOLUTE)
+    get_filename_component(output_full_path ${output_path} ABSOLUTE)
+    if(NOT EXISTS ${image_full_path})
+        message(FATAL_ERROR "Input image (${image_full_path}) not exists!")
+    endif()
+
+    message(STATUS "Generating C array image: ${image_path}")
+
+    #Create C array image by LVGL version
+    if(lvgl_ver VERSION_LESS "9.0.0")
+        execute_process(COMMAND git clone https://github.com/W-Mai/lvgl_image_converter.git "${CMAKE_BINARY_DIR}/lvgl_image_converter")
+        execute_process(COMMAND pip install -r "${CMAKE_BINARY_DIR}/lvgl_image_converter/requirements.txt")
+        execute_process(COMMAND ${PYTHON} "${CMAKE_BINARY_DIR}/lvgl_image_converter/lv_img_conv.py"  
+                -ff C
+                -f true_color_alpha 
+                -cf RGB565
+                -o ${output_full_path}
+                ${image_full_path})
+    else()
+        idf_component_get_property(lvgl_dir ${LVGL_NAME} COMPONENT_DIR)
+        get_filename_component(script_path ${lvgl_dir}/scripts/LVGLImage.py ABSOLUTE)
+        set(lvglimage_py ${PYTHON} ${script_path})
+
+        #Install dependencies
+        execute_process(COMMAND pip3 install pypng)
+        execute_process(COMMAND pip3 install lz4)
+
+        execute_process(COMMAND ${lvglimage_py} 
+                --ofmt=C
+                --cf=${color_format}
+                --compress=${compression}
+                -o ${output_full_path}
+                ${image_full_path})
+    endif()
+
+endfunction()
+
+# lvgl_port_add_images
+#
+# Add all images to build
+function(lvgl_port_add_images component output_path)
+    #Add images to sources
+    file(GLOB_RECURSE IMAGE_SOURCES ${output_path}*.c)
+    target_sources(${component} PRIVATE ${IMAGE_SOURCES})
+    idf_build_set_property(COMPILE_OPTIONS "-DLV_LVGL_H_INCLUDE_SIMPLE=1" APPEND)
+endfunction()
diff --git a/examples/display/main/.gitignore b/examples/display/main/.gitignore
@@ -0,0 +1 @@
+*.c
diff --git a/examples/display/main/CMakeLists.txt b/examples/display/main/CMakeLists.txt
@@ -1,2 +1,12 @@
-idf_component_register(SRCS "display_main.c" "esp_logo.c" "esp_text.c" "lvgl_demo_ui.c"
+idf_component_register(SRCS "display_main.c" "lvgl_demo_ui.c"
                     INCLUDE_DIRS ".")
+
+if(COMMAND lvgl_port_create_c_image)
+    lvgl_port_create_c_image("images/esp_logo.png" "images/" "ARGB8888" "NONE")
+    lvgl_port_create_c_image("images/esp_text.png" "images/" "ARGB8888" "NONE")
+    lvgl_port_add_images(${COMPONENT_LIB} "images/")
+else()
+    file(GLOB_RECURSE IMAGE_SOURCES images/*.c)
+    target_sources(${COMPONENT_LIB} PRIVATE ${IMAGE_SOURCES})
+    idf_build_set_property(COMPILE_OPTIONS "-DLV_LVGL_H_INCLUDE_SIMPLE=1" APPEND)
+endif()