Skip to content

Commit 36d8130

Browse files
Horion0415Horion0415
committed
Merge branch 'docs/add_gui_solution' into 'master'
docs(lcd): Add a GUI optimization solution document See merge request ae_group/esp-iot-solution!1228
2 parents 66de764 + 15ab9bd commit 36d8130

File tree

12 files changed

+331
-15
lines changed

12 files changed

+331
-15
lines changed

‎components/display/lcd/esp_lcd_usb_display/idf_component.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ dependencies:
1010
cmake_utilities: "0.*"
1111
espressif/usb_device_uvc:
1212
version: "1.1.*"
13-
override_path: "../../../../components/usb/usb_device_uvc"
1413
sbom:
1514
supplier: 'Organization: Espressif Systems (Shanghai) CO LTD'
1615
originator: 'Organization: Espressif Systems (Shanghai) CO LTD'

‎docs/en/display/lcd/gui_solution.rst‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
GUI Optimization Solutions
2+
========================================
3+
4+
:link_to_translation:`zh:[中文]`
5+
6+
.. _lvgl-tearing-prevention-and-frame-rate-optimization:
7+
8+
LVGL Tearing Prevention and Frame Rate Optimization
9+
---------------------------------------------------
10+
11+
- Supports tearing prevention mechanism based on full_fresh, direct_mode, and partial_mode
12+
- Supports full screen rotation optimization for RGB interface and MIPI-DSI interface
13+
14+
Applicable Scenarios:
15+
16+
- Need to balance tearing prevention and frame rate optimization
17+
18+
- Scenarios requiring full screen rotation in LVGL
19+
20+
Related Examples:
21+
22+
- https://github.com/espressif/esp-iot-solution/tree/master/examples/display/lcd/mipi_dsi_avoid_tearing
23+
- https://github.com/espressif/esp-iot-solution/tree/master/examples/display/lcd/rgb_avoid_tearing
24+
25+
.. _lvgl-decoder-component:
26+
27+
LVGL Image Decoder Component
28+
----------------------------
29+
30+
- Supports LVGL v8 and v9 versions
31+
- Supports PNG, JPG, QOI, PJPG, SJPG, SPNG format decoding with optimized decoding speed
32+
- Supports JPEG hardware decoding for ESP32-P4
33+
- Supports JPEG decoding acceleration for ESP32-S3
34+
35+
Description of special formats:
36+
37+
- PJPG format: Based on PNG format conversion, supports transparency and hardware JPEG decoding
38+
- SJPG format, SPNG format: Segmented decoding, suitable for ESP32-C series with small RAM and no PSRAM
39+
- QOI format: Compared to software JPEG, QOI decoding is faster but with lower compression ratio
40+
41+
Component Link: https://github.com/espressif/esp-iot-solution/tree/master/components/display/tools/esp_lv_decoder
42+
43+
Related Example: https://github.com/espressif/esp-iot-solution/tree/master/examples/hmi/perf_benchmark
44+
45+
.. _mmap-file-system-and-script-tool:
46+
47+
MMAP File System and Script Tool
48+
--------------------------------
49+
50+
- Automatically packages user files
51+
- Script automatically converts formats, supporting SJPG, SPNG, QOI, PJPG formats, etc.
52+
- Reads materials through file system using mmap method
53+
54+
Applicable Scenarios:
55+
56+
- When SPIFFS and other file systems do not meet reading speed requirements, mmap can be used to read materials.
57+
- Need image materials in SJPG, SPNG, QOI, PJPG and other formats
58+
59+
Component Link: https://components.espressif.com/components/espressif/esp_mmap_assets
60+
61+
Related Example: https://github.com/espressif/esp-iot-solution/tree/master/examples/hmi/perf_benchmark
62+
63+
.. _Thorvg component:
64+
65+
Thorvg Component
66+
----------------
67+
68+
Supports Lottie animation and TVG vector graphics parsing and rendering, noglic version supported
69+
70+
Component Link: https://components.espressif.com/components/espressif/thorvg
71+
72+
Related Example:
73+
74+
- Lottie: https://components.espressif.com/components/espressif/thorvg/versions/0.13.8/examples/thorvg-example
75+
76+
.. _freetype-label-component:
77+
78+
freetype_label Component
79+
------------------------
80+
81+
User component based on freetype, supports font size management, rendering, coloring, supports Chinese and English, supports swap16
82+
83+
Applicable Scenarios:
84+
85+
- Supports direct rendering of images and files
86+
87+
Component Link: https://github.com/espressif/idf-extra-components/tree/master/freetype
88+
89+
Related Example: https://github.com/espressif/esp-iot-solution/tree/master/examples/hmi/lvgl_freetype
90+
91+
.. _tinyGL 3D graphics library:
92+
93+
tinyGL 3D Graphics Library
94+
--------------------------
95+
96+
- tinyGL is a lightweight 3D graphics library that supports a subset of OpenGL ES 1.1, suitable for ESP32-P4 platform.
97+
98+
Applicable Scenarios:
99+
100+
- Need to implement 3D graphics rendering.
101+
102+
Component Link: https://github.com/espressif2022/TinyGL
103+
104+
.. _SDL3 development library:
105+
106+
SDL3 Development Library
107+
------------------------
108+
109+
SDL is a cross-platform development library designed to provide low-level access to audio, keyboard, mouse, joystick, and graphics hardware via OpenGL/Direct3D/Metal/Vulkan. It is used by video playback software, emulators, and many popular games including Valve's award-winning games and Humble Bundle games.
110+
111+
Applicable Scenarios:
112+
113+
- Users with emulator development, game porting, and cross-platform application development requirements.
114+
115+
Component Link: https://components.espressif.com/components/georgik/sdl/versions/3.1.2~9
116+
117+
Related Example: https://github.com/georgik/esp32-sdl3-test/tree/main
118+
119+
.. _Lottie player:
120+
121+
Lottie Player Component
122+
-----------------------
123+
124+
lottie_player is a lightweight and efficient Lottie animation player designed specifically for LVGL v8. It can seamlessly integrate vector-based animations into LVGL projects. By leveraging ThorVG as the rendering engine, this module ensures high performance and flexibility for modern embedded GUI applications.
125+
126+
Applicable Scenarios:
127+
128+
- Users using LVGL v8 who need to play Lottie animations
129+
130+
Component Link: https://components.espressif.com/components/espressif2022/lottie_player
131+
132+
.. _esp_emote_gfx:
133+
134+
esp_emote_gfx
135+
-------------
136+
137+
esp_emote_gfx is a lightweight animation rendering library for resource-constrained platforms, supporting conversion of GIF to custom EAF animation format for playback, with advantages of fast decoding, small memory footprint, and flexible display, suitable for efficient dynamic graphics playback needs in HMI scenarios.
138+
139+
Features:
140+
141+
- Supports text scrolling effects
142+
- Supports simultaneous playback of multiple animations with independent frame rate control
143+
- Adapts to multiple screen sizes
144+
145+
Applicable Scenarios:
146+
147+
- Guide animations, boot animations, emoticons and text rendering on various screens
148+
149+
- Dynamic UI component display on resource-constrained platforms (ESP32-C2/C3, etc.)
150+
151+
Component Link: https://components.espressif.com/components/espressif2022/esp_emote_gfx/

‎docs/en/display/lcd/index.rst‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ LCD Screen
1313
RGB LCD Introduction <rgb_lcd>
1414
MIPI DSI LCD Introduction <mipi_dsi_lcd>
1515
LCD Screen Tearing Introduction <lcd_screen_tearing>
16-
LCD Application solution <lcd_application_solution>
16+
LCD Application Solution <lcd_application_solution>
17+
GUI Optimization Solutions <gui_solution>

‎docs/zh_CN/display/lcd/gui_solution.rst‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
GUI 优化解决方案
2+
========================================
3+
4+
:link_to_translation:`en:[English]`
5+
6+
.. _lvgl-tearing-prevention-and-frame-rate-optimization:
7+
8+
LVGL 防撕裂与帧率优化
9+
-----------------------------------
10+
11+
- 支持基于 full_fresh、direct_mode、partial_mode 三种模式的防撕裂机制
12+
- 支持针对 RGB 接口和 MIPI-DSI 接口的全屏幕旋转优化
13+
14+
适用场景：
15+
16+
- 需要兼顾防撕裂和帧率优化
17+
18+
- 需要进行 LVGL 整屏旋转的场景
19+
20+
相关示例：
21+
22+
- https://github.com/espressif/esp-iot-solution/tree/master/examples/display/lcd/mipi_dsi_avoid_tearing
23+
- https://github.com/espressif/esp-iot-solution/tree/master/examples/display/lcd/rgb_avoid_tearing
24+
25+
.. _lvgl-decoder-component:
26+
27+
LVGL 图像解码组件
28+
-------------------------
29+
30+
- 支持 LVGL v8 和 v9 版本
31+
- 支持 PNG、JPG、QOI、PJPG、SJPG、SPNG 等格式解码，并优化了解码速率
32+
- 针对 ESP32-P4 支持 JPEG 硬件解码
33+
- 针对 ESP32-S3 支持 JPEG 解码加速
34+
35+
对于其中特殊格式的说明：
36+
37+
- PJPG 格式： 基于 PNG 格式转换，支持透明度，支持硬件 JPEG 解码
38+
- SJPG 格式、SPNG 格式：分段解码，适用于 ESP32-C 系列 RAM 较小且没有 PSRAM 的场景
39+
- QOI 格式：对比软件 JPEG，QOI 解码速度更快，但是压缩率更低
40+
41+
组件链接：https://github.com/espressif/esp-iot-solution/tree/master/components/display/tools/esp_lv_decoder
42+
43+
相关示例：https://github.com/espressif/esp-iot-solution/tree/master/examples/hmi/perf_benchmark
44+
45+
.. _mmap-file-system-and-script-tool:
46+
47+
基于 MMAP 的文件系统与脚本工具
48+
-----------------------------------
49+
50+
- 自动打包用户文件
51+
- 脚本自动转换格式，支持 SJPG，SPNG，QOI，PJPG 格式等
52+
- 通过文件系统以 mmap 的方式读取素材
53+
54+
适用场景：
55+
56+
- 不满足于 SPIFFS 等文件系统的读取速度，可使用 mmap 的方式读取素材。
57+
- 需要 SJPG，SPNG，QOI，PJPG 等格式的图片素材
58+
59+
组件链接：https://components.espressif.com/components/espressif/esp_mmap_assets
60+
61+
相关示例：https://github.com/espressif/esp-iot-solution/tree/master/examples/hmi/perf_benchmark
62+
63+
.. _Thorvg component:
64+
65+
Thorvg 组件
66+
-------------------------
67+
68+
支持 Lottie 动画和 TVG 矢量图形解析渲染刷图，noglic 版本支持
69+
70+
组件链接：https://components.espressif.com/components/espressif/thorvg
71+
72+
相关示例：
73+
74+
- Lottie：https://components.espressif.com/components/espressif/thorvg/versions/0.13.8/examples/thorvg-example
75+
76+
.. _freetype-label-component:
77+
78+
freetype_label 组件
79+
-------------------------
80+
81+
基于 freetype 的用户组件，支持字体字号管理，渲染，着色，支持中英文，支持 swap16
82+
83+
适用场景：
84+
85+
- 支持图片和文件的直接渲染
86+
87+
组件链接：https://github.com/espressif/idf-extra-components/tree/master/freetype
88+
89+
相关示例：https://github.com/espressif/esp-iot-solution/tree/master/examples/hmi/lvgl_freetype
90+
91+
.. _tinyGL 3D graphics library:
92+
93+
tinyGL 3D 图形库
94+
-------------------------
95+
96+
- tinyGL 是一个轻量级的 3D 图形库，支持 OpenGL ES 1.1 的子集，适用于 ESP32-P4 平台。
97+
98+
适用场景：
99+
100+
- 需要实现 3D 图形渲染。
101+
102+
组件链接：https://github.com/espressif2022/TinyGL
103+
104+
.. _SDL3 development library:
105+
106+
SDL3 开发库
107+
-------------------------
108+
109+
SDL 是一个跨平台的开发库，旨在通过 OpenGL/Direct3D/Metal/Vulkan 提供对音频、键盘、鼠标、摇杆和图形硬件的低级访问。它被视频播放软件、模拟器以及包括 Valve 获奖游戏在内的许多流行游戏和 Humble Bundle 游戏使用。
110+
111+
适用场景：
112+
113+
- 有模拟器开发、游戏移植和跨平台应用开发需求的用户。
114+
115+
组件链接：https://components.espressif.com/components/georgik/sdl/versions/3.1.2~9
116+
117+
相关示例：https://github.com/georgik/esp32-sdl3-test/tree/main
118+
119+
.. _Lottie player:
120+
121+
Lottie 播放组件
122+
-------------------------
123+
124+
lottie_player 是一款专为 LVGL v8 设计的轻量级高效 Lottie 动画播放器。它可以将基于矢量的动画无缝集成到 LVGL 项目中。通过利用 ThorVG 作为渲染引擎，该模块确保了现代嵌入式 GUI 应用程序的高性能和灵活性。
125+
126+
适用场景：
127+
128+
- 使用 LVGL v8 需要播放 Lottie 动画的用户
129+
130+
组件链接：https://components.espressif.com/components/espressif2022/lottie_player
131+
132+
.. _esp_emote_gfx:
133+
134+
esp_emote_gfx
135+
-----------------------------------
136+
137+
esp_emote_gfx 是一款面向资源受限平台的轻量级动画渲染库，支持将 GIF 转换为自定义 EAF 动画格式进行播放，具备解码快、内存占用小、显示灵活的优势，适用于 HMI 场景中的高效动态图形播放需求。
138+
139+
特性：
140+
141+
- 支持文字滚动效果
142+
- 支持同时播放多个动图，帧率独立控制
143+
- 适应多尺寸屏幕
144+
145+
适用场景：
146+
147+
- 各类屏幕上的引导动效、开机动画、表情和文字渲染等
148+
149+
- 资源受限平台（ESP32-C2/C3 等）上的动态 UI 组件展示
150+
151+
组件链接：https://components.espressif.com/components/espressif2022/esp_emote_gfx/

‎docs/zh_CN/display/lcd/index.rst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ LCD 显示屏
1414
MIPI DSI LCD 详解 <mipi_dsi_lcd>
1515
LCD 屏幕撕裂详解 <lcd_screen_tearing>
1616
LCD 应用解决方案 <lcd_application_solution>
17+
GUI 优化解决方案 <gui_solution>

‎docs/zh_CN/display/lcd/rgb_lcd.rst‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,13 @@ RGB LCD 驱动流程可大致分为三个部分：初始化接口设备、移植
481481
};
482482
ESP_ERROR_CHECK(esp_lcd_rgb_panel_register_event_callbacks(panel_handle, &cbs, &example_user_ctx));
483483
484+
.. note::
485+
486+
针对 ESP32-P4 RGB 屏幕使用场景的说明：
487+
488+
- 由于 ESP32-P4 有多路 VDDPST，其控制对应区域的 GPIO 最大输出电平（对应关系见 Datasheet）。因此如果不配置 VDDPST，可能部分 GPIO 最大输出 1.8V 导致引脚电压不足，从而导致 RGB 屏幕颜色异常。
489+
- ESP32-S3 最大可支持 30 M 的 RGB 时钟频率。而 ESP32-P4 的 RGB 时钟频率无 30M 限制，因此接口帧率可以更高，可支持更大分辨率的 RGB 屏幕。
490+
484491
相关文档
485492
---------------------
486493

‎examples/display/lcd/qspi_without_ram/README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,15 +111,15 @@ I (1125) main_task: Returned from app_main()
111111
| Buffering Mode | Description | Special Configurations |
112112
| :------------: | :-----------------------------------------------: | :---------------------------: |
113113
| Mode1 | One buffer with 100-line heights in internal SRAM | * |
114-
| Mode2 | One buffer with frame-size in internal PSRAM | sdkconfig.test.psram_buffer |
115-
| Mode3 | Full-refresh with two frame-size PSRAM buffers | sdkconfig.test.full_refresh_1 |
116-
| Mode4 | Direct-mode with two frame-size PSRAM buffers | sdkconfig.test.direct_mode |
117-
| Mode5 | Full-refresh with three frame-size PSRAM buffers | sdkconfig.test.full_refresh_2 |
114+
| Mode2 | One buffer with frame-size in internal PSRAM | sdkconfig.ci.avoid_tear_mode1 |
115+
| Mode3 | Full-refresh with two frame-size PSRAM buffers | sdkconfig.ci.avoid_tear_mode2 |
116+
| Mode4 | Direct-mode with two frame-size PSRAM buffers | sdkconfig.ci.avoid_tear_mode3 |
117+
| Mode5 | Full-refresh with three frame-size PSRAM buffers | sdkconfig.ci.avoid_tear_mode4 |
118118

119119
**Note:** To test the above modes, run the following commands to configure project (take ESP32-S3R8 and `Mode4` as an example):
120120
```
121121
rm -rf build sdkconfig sdkconfig.old
122-
idf.py -D SDKCONFIG_DEFAULTS="sdkconfig.defaults.psram_octal_ddr;sdkconfig.test.direct_mode" reconfigure
122+
idf.py -D SDKCONFIG_DEFAULTS="sdkconfig.defaults;sdkconfig.ci.avoid_tear_mode3" reconfigure
123123
```
124124

125125
### Average FPS using ESP32-S3R2

‎examples/display/lcd/qspi_without_ram/main/lvgl_port.c‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,11 @@ IRAM_ATTR static bool qspi_lcd_on_trans_event(esp_lcd_panel_handle_t panel, cons
347347
}
348348
#elif LVGL_PORT_AVOID_TEAR_ENABLE
349349
// Notify that the current QSPI frame buffer has been transmitted
350-
xTaskNotifyFromISR(lvgl_task_handle, ULONG_MAX, eNoAction, &need_yield);
350+
if (lvgl_task_handle) {
351+
xTaskNotifyFromISR(lvgl_task_handle, ULONG_MAX, eNoAction, &need_yield);
352+
} else {
353+
ESP_LOGE(TAG, "lvgl_task_handle is NULL");
354+
}
351355
#endif
352356

353357
return (need_yield == pdTRUE);

‎examples/display/lcd/qspi_without_ram/sdkconfig.ci.avoid_tear_mode1‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_ENABLE=y
2-
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_MODE_1=y
3-
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_MODE=0
1+
CONFIG_EXAMPLE_LVGL_PORT_BUF_PSRAM=y
2+
CONFIG_EXAMPLE_LVGL_PORT_BUF_HEIGHT=400

‎examples/display/lcd/qspi_without_ram/sdkconfig.ci.avoid_tear_mode2‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_ENABLE=y
2-
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_MODE_2=y
3-
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_MODE=1
2+
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_MODE_1=y
3+
CONFIG_EXAMPLE_LVGL_PORT_AVOID_TEAR_MODE=0

0 commit comments

Comments
 (0)