Merge branch 'bugfix/fix_examples_readme' into 'master'

fix(examples): correct 'esp_ui_phone_s3_lcd_ev_board' README resolution

See merge request ae_group/esp-ui!4

CHANGELOG.md

@@ -1,5 +1,19 @@
 # ChangeLog
 
+## v0.1.1 - 2024-08-12
+
+### Enhancements:
+
+* feat(examples): replace 'esp-idf' stylesheet with Espressif Registry package
+
+### Bugfixes:
+
+* fix(core & recents_app): fix build missing LV_USE_SNAPSHOT error
+* fix(examples): correct 'esp_ui_phone_s3_lcd_ev_board' README resolution
+* fix(examples): disable 'ESP_UI_Phone' external stylesheet by default
+* fix(examples): fix 'esp-idf' CMakeLists.txt to use custom memory functions
+* fix(app_examples): modify 'squareline' ui to use LV_FONT_DEFAULT
+
 ## v0.1.0 - 2024-08-12
 
 ### Enhancements:

examples/arduino/ESP_UI_Phone/ESP_UI_Phone.ino

@@ -34,6 +34,7 @@
  * 3. For **lvgl**:
  *
  *     - [optional] Follow the [steps](https://github.com/esp-arduino-libs/ESP32_Display_Panel?tab=readme-ov-file#configuring-lvgl) to add *lv_conf.h* file and change the configurations.
+ *     - [mandatory] Enable the `LV_USE_SNAPSHOT` macro in the *lv_conf.h* file.
  *     - [optional] Modify the macros in the [lvgl_port_v8.h](./lvgl_port_v8.h) file to configure the lvgl porting parameters.
  *
  * 4. Navigate to the `Tools` menu in the Arduino IDE to choose a ESP board and configure its parameters. For supported boards, please refter to [Configuring Supported Development Boards](https://github.com/esp-arduino-libs/ESP32_Display_Panel?tab=readme-ov-file#configuring-supported-development-boards)
@@ -83,7 +84,7 @@
 #define EXAMPLE_SHOW_MEM_INFO             (1)
 
 /* To use the external stylesheets, please install the dependent libraries and enable the macro */
-#define EXAMPLE_USE_EXTERNAL_STYLESHEET   (1)
+#define EXAMPLE_USE_EXTERNAL_STYLESHEET   (0)
 #if EXAMPLE_USE_EXTERNAL_STYLESHEET
     #if (ESP_PANEL_LCD_WIDTH == 1024) && (ESP_PANEL_LCD_HEIGHT == 600)
         #include "esp_ui_phone_1024_600_stylesheet.h"

examples/arduino/ESP_UI_Phone/README.md

@@ -8,7 +8,7 @@ The example is suitable for touchscreens with a resolution of `240 x 240` or hig
 
 To use this example, please firstly install the following dependent libraries:
 
-- ESP32_Display_Panel  (0.1.*)
+- ESP32_Display_Panel  (0.1.5)
 - lvgl (>= v8.3.9, < v9)
 
 To use the external stylesheets, please also install the following dependent libraries and set the `EXAMPLE_USE_EXTERNAL_STYLESHEET` macro to `1`:
@@ -32,6 +32,7 @@ Then, follow the steps below to configure the libraries and upload the example:
 3. For **lvgl**:
 
     - [optional] Follow the [steps](https://github.com/esp-arduino-libs/ESP32_Display_Panel?tab=readme-ov-file#configuring-lvgl) to add *lv_conf.h* file and change the configurations.
+    - [mandatory] Enable the `LV_USE_SNAPSHOT` macro in the *lv_conf.h* file.
     - [optional] Modify the macros in the [lvgl_port_v8.h](./lvgl_port_v8.h) file to configure the lvgl porting parameters.
 
 4. Navigate to the `Tools` menu in the Arduino IDE to choose a ESP board and configure its parameters. For supported boards, please refter to [Configuring Supported Development Boards](https://github.com/esp-arduino-libs/ESP32_Display_Panel?tab=readme-ov-file#configuring-supported-development-boards)

examples/arduino/ESP_UI_Phone/README_CN.md

@@ -8,7 +8,7 @@
 
 要使用此示例，请首先安装以下依赖库：
 
-- ESP32_Display_Panel (0.1.*)
+- ESP32_Display_Panel (0.1.5)
 - lvgl (>= v8.3.9, < v9)
 
 要使用外部样式表，还需安装以下依赖库，并将 `EXAMPLE_USE_EXTERNAL_STYLESHEET` 宏设置为 `1`：
@@ -32,6 +32,7 @@
 3. 对于 **lvgl**：
 
     - [可选] 按照[步骤](https://github.com/esp-arduino-libs/ESP32_Display_Panel?tab=readme-ov-file#configuring-lvgl)添加 *lv_conf.h* 文件并更改配置。
+    - [必需] 在 *lv_conf.h* 文件中使能 `LV_USE_SNAPSHOT` 宏。
     - [可选] 修改 [lvgl_port_v8.h](./lvgl_port_v8.h) 文件中的宏，以配置 lvgl 端口参数。
 
 4. 在 Arduino IDE 中导航到 `工具` 菜单，选择 ESP 板并配置其参数。对于受支持的板，请参阅[配置受支持的开发板](https://github.com/esp-arduino-libs/ESP32_Display_Panel?tab=readme-ov-file#configuring-supported-development-boards)。

examples/esp_idf/esp_ui_phone_p4_function_ev_board/main/CMakeLists.txt

@@ -2,8 +2,25 @@ idf_component_register(
     SRCS "main.cpp"
     INCLUDE_DIRS ".")
 
+# If want to use custom memory allocation functions, refer to the following macros:
 if(CONFIG_ESP_UI_MEMORY_USE_CUSTOM)
-    idf_component_get_property(ESP_UI_LIB esp-ui COMPONENT_LIB)
+    # Get the exact component name
+    idf_build_get_property(build_components BUILD_COMPONENTS)
+    foreach(COMPONENT ${build_components})
+        if(COMPONENT MATCHES "esp-ui" OR COMPONENT MATCHES "espressif__esp-ui")
+            set(TARGET_COMPONENT ${COMPONENT})
+            break()
+        endif()
+    endforeach()
+
+    # Get the component library
+    if(TARGET_COMPONENT STREQUAL "")
+        message(FATAL_ERROR "Component 'esp-ui' not found.")
+    else()
+        idf_component_get_property(ESP_UI_LIB ${TARGET_COMPONENT} COMPONENT_LIB)
+    endif()
+
+    # Add the custom memory allocation functions
     target_compile_options(
         ${ESP_UI_LIB}
         PUBLIC

examples/esp_idf/esp_ui_phone_p4_function_ev_board/main/idf_component.yml

@@ -2,9 +2,8 @@
 dependencies:
   ## Required IDF version
   idf: ">=5.3"
-  esp32_p4_function_ev_board: "^3"
-  esp-ui:
+  espressif/esp32_p4_function_ev_board: "^3"
+  espressif/esp-ui:
     version: "*"
     override_path: "../../../../../esp-ui"
-  esp-ui-phone_1024_600_stylesheet:
-    git: https://github.com/esp-arduino-libs/esp-ui-phone_1024_600_stylesheet.git
+  espressif/esp-ui-phone_1024_600_stylesheet: "0.1.*"

examples/esp_idf/esp_ui_phone_p4_function_ev_board/sdkconfig.defaults

@@ -1,6 +1,3 @@
-# This file was generated using idf.py save-defconfig. It can be edited manually.
-# Espressif IoT Development Framework (ESP-IDF) 5.3.0 Project Minimal Configuration
-#
 CONFIG_IDF_TARGET="esp32p4"
 CONFIG_ESPTOOLPY_FLASHMODE_QIO=y
 CONFIG_ESPTOOLPY_FLASHSIZE_16MB=y
@@ -14,6 +11,7 @@ CONFIG_CACHE_L2_CACHE_LINE_128B=y
 CONFIG_FREERTOS_HZ=1000
 CONFIG_FREERTOS_VTASKLIST_INCLUDE_COREID=y
 CONFIG_FREERTOS_GENERATE_RUN_TIME_STATS=y
+CONFIG_ESP_UI_MEMORY_USE_CUSTOM=y
 CONFIG_LV_COLOR_SCREEN_TRANSP=y
 CONFIG_LV_MEM_CUSTOM=y
 CONFIG_LV_MEMCPY_MEMSET_STD=y

examples/esp_idf/esp_ui_phone_s3_lcd_ev_board/README.md

@@ -2,7 +2,7 @@
 
 [中文版本](./README_CN.md)
 
-This example demonstrates how to run the ESP-UI Phone on the [ESP32-S3-LCD-EV-Board](https://docs.espressif.com/projects/esp-dev-kits/en/latest/esp32s3/esp32-s3-lcd-ev-board/index.html) with a `1024 x 600` resolution UI stylesheet.
+This example demonstrates how to run the ESP-UI Phone on the [ESP32-S3-LCD-EV-Board](https://docs.espressif.com/projects/esp-dev-kits/en/latest/esp32s3/esp32-s3-lcd-ev-board/index.html) with `480 x 480` and `800 x 480` resolution UI stylesheets.
 
 ## Getting Started
 

examples/esp_idf/esp_ui_phone_s3_lcd_ev_board/main/CMakeLists.txt

@@ -2,8 +2,25 @@ idf_component_register(
     SRCS "main.cpp"
     INCLUDE_DIRS ".")
 
+# If want to use custom memory allocation functions, refer to the following macros:
 if(CONFIG_ESP_UI_MEMORY_USE_CUSTOM)
-    idf_component_get_property(ESP_UI_LIB esp-ui COMPONENT_LIB)
+    # Get the exact component name
+    idf_build_get_property(build_components BUILD_COMPONENTS)
+    foreach(COMPONENT ${build_components})
+        if(COMPONENT MATCHES "esp-ui" OR COMPONENT MATCHES "espressif__esp-ui")
+            set(TARGET_COMPONENT ${COMPONENT})
+            break()
+        endif()
+    endforeach()
+
+    # Get the component library
+    if(TARGET_COMPONENT STREQUAL "")
+        message(FATAL_ERROR "Component 'esp-ui' not found.")
+    else()
+        idf_component_get_property(ESP_UI_LIB ${TARGET_COMPONENT} COMPONENT_LIB)
+    endif()
+
+    # Add the custom memory allocation functions
     target_compile_options(
         ${ESP_UI_LIB}
         PUBLIC

examples/esp_idf/esp_ui_phone_s3_lcd_ev_board/main/idf_component.yml

@@ -3,10 +3,8 @@ dependencies:
   ## Required IDF version
   idf: ">=5.1.0"
   espressif/esp32_s3_lcd_ev_board: "2.1.*"
-  esp-ui:
+  espressif/esp-ui:
     version: "*"
     override_path: "../../../../../esp-ui"
-  esp-ui-phone_800_480_data:
-    git: https://github.com/esp-arduino-libs/esp-ui-phone_800_480_stylesheet.git
-  esp-ui-phone_480_480_data:
-    git: https://github.com/esp-arduino-libs/esp-ui-phone_480_480_stylesheet.git
+  espressif/esp-ui-phone_480_480_stylesheet: "0.1.*"
+  espressif/esp-ui-phone_800_480_stylesheet: "0.1.*"

examples/esp_idf/esp_ui_phone_s3_lcd_ev_board/sdkconfig.defaults

@@ -12,6 +12,7 @@ CONFIG_ESP_DEFAULT_CPU_FREQ_MHZ_240=y
 CONFIG_ESP_CONSOLE_UART_CUSTOM=y
 CONFIG_ESP_CONSOLE_UART_BAUDRATE=2000000
 CONFIG_FREERTOS_HZ=1000
+CONFIG_ESP_UI_MEMORY_USE_CUSTOM=y
 CONFIG_BSP_LCD_RGB_BUFFER_NUMS=2
 CONFIG_BSP_DISPLAY_LVGL_TASK_STACK_SIZE_KB=6
 CONFIG_BSP_DISPLAY_LVGL_AVOID_TEAR=y

idf_component.yml

@@ -1,4 +1,4 @@
-version: 0.1.0
+version: 0.1.1
 description: This package is a UI runtime framework based on LVGL, designed to provide a consistent UI development experience for screens of various sizes and shapes.
 url: https://github.com/espressif/esp-ui
 issues: https://github.com/espressif/esp-ui/issues

library.properties

@@ -1,5 +1,5 @@
 name=esp-ui
-version=0.1.0
+version=0.1.1
 author=espressif
 maintainer=espressif
 sentence=This package is a UI runtime framework based on LVGL, designed to provide a consistent UI development experience for screens of various sizes and shapes.
@@ -8,4 +8,4 @@ category=Other
 architectures=esp32
 url=https://github.com/espressif/esp-ui
 includes=esp_ui.hpp
-depends=lvgl (>=8 && <9)
+depends=lvgl (>=8.3 && <9)

src/app_examples/phone/squareline/src/ui/components/ui_comp_small_label.c

@@ -21,7 +21,7 @@ lv_obj_t * ui_Label_Small_Label_create(lv_obj_t * comp_parent)
     lv_label_set_text(cui_Label_Small_Label, "12");
     lv_obj_set_style_text_color(cui_Label_Small_Label, lv_color_hex(0x000746), LV_PART_MAIN | LV_STATE_DEFAULT);
     lv_obj_set_style_text_opa(cui_Label_Small_Label, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
-    lv_obj_set_style_text_font(cui_Label_Small_Label, &lv_font_montserrat_18, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_font(cui_Label_Small_Label, LV_FONT_DEFAULT, LV_PART_MAIN | LV_STATE_DEFAULT);
 
     lv_obj_t ** children = lv_mem_alloc(sizeof(lv_obj_t *) * _UI_COMP_LABEL_SMALL_LABEL_NUM);
     children[UI_COMP_LABEL_SMALL_LABEL_LABEL_SMALL_LABEL] = cui_Label_Small_Label;
@@ -30,4 +30,3 @@ lv_obj_t * ui_Label_Small_Label_create(lv_obj_t * comp_parent)
     ui_comp_Label_Small_Label_create_hook(cui_Label_Small_Label);
     return cui_Label_Small_Label;
 }
-

src/core/esp_ui_core_manager.cpp

@@ -297,14 +297,17 @@ bool ESP_UI_CoreManager::processAppClose(ESP_UI_CoreApp *app)
 
 bool ESP_UI_CoreManager::saveAppSnapshot(ESP_UI_CoreApp *app)
 {
+#if !LV_USE_SNAPSHOT
+    ESP_UI_CHECK_FALSE_RETURN(false, false, "`LV_USE_SNAPSHOT` is not enabled");
+#else
     bool resize_app_screen = false;
     uint8_t *snapshot_buffer = nullptr;
     uint32_t snapshot_buffer_size = 0;
     lv_res_t ret = LV_RES_INV;
     lv_area_t app_screen_area = {};
     shared_ptr<ESP_UI_AppSnapshot_t> snapshot = nullptr;
 
-    ESP_UI_CHECK_NULL_RETURN(app, false, "Invalid active screen");
+    ESP_UI_CHECK_NULL_RETURN(app, false, "Invalid app");
     ESP_UI_LOGD("Save app(%d) snapshot", app->_id);
 
     ESP_UI_CHECK_FALSE_RETURN(lv_obj_is_valid(app->_active_screen), false, "Invalid active screen");
@@ -331,7 +334,7 @@ bool ESP_UI_CoreManager::saveAppSnapshot(ESP_UI_CoreApp *app)
         ESP_UI_CHECK_NULL_GOTO(snapshot, err, "Make snapshot object failed");
 
         snapshot_buffer = (uint8_t *)ESP_UI_MEMORY_MALLOC(snapshot_buffer_size);
-        ESP_UI_CHECK_NULL_GOTO(snapshot_buffer, err, "Alloc napshot buffer(%d) fail", (int)snapshot_buffer_size);
+        ESP_UI_CHECK_NULL_GOTO(snapshot_buffer, err, "Alloc snapshot buffer(%d) fail", (int)snapshot_buffer_size);
 
         snapshot->image_buffer = snapshot_buffer;
     } else if (snapshot_buffer_size != snapshot->image_resource.data_size) {
@@ -363,11 +366,12 @@ bool ESP_UI_CoreManager::saveAppSnapshot(ESP_UI_CoreApp *app)
     }
 
     return false;
+#endif
 }
 
 bool ESP_UI_CoreManager::releaseAppSnapshot(ESP_UI_CoreApp *app)
 {
-    ESP_UI_CHECK_NULL_RETURN(app, false, "Invalid active screen");
+    ESP_UI_CHECK_NULL_RETURN(app, false, "Invalid app");
     ESP_UI_LOGD("Release app(%d) snapshot", app->_id);
 
     auto it = _id_app_snapshot_map.find(app->_id);

src/widgets/recents_screen/esp_ui_recents_screen.cpp

@@ -12,9 +12,6 @@
 #define ESP_UI_LOGD(...)
 #endif
 
-#if !defined(LV_USE_SNAPSHOT) || !LV_USE_SNAPSHOT
-#error "LVGL snapshot is not enabled, please enable `LV_USE_SNAPSHOT` first"
-#endif
 #define MEMORY_LABEL_TEXT_FORMAT        "%d + %d %s of %d + %d %s available"
 #define MEMORY_LABEL_TEXT_UNIT          "KB"