摘要
在esp32s3上使用LVGL 9.0显示图片.
关键信息
- 编译环境:ESP-IDF v4.4
- LVGL : 9.0
- board: 酷世DIY ESP32S3开发板 Link:https://item.taobao.com/item.htm?&id=655913924680
- flash size: 8MB
- LCD driver: ILI9341
- LCD module: 2.4 TFT SPI 240x320 v1.2
- Touch driver: XPT2046
原理简介
[https://github.com/lvgl/lv_port_esp32]
LVGL 9.0简介
[https://lvgl.io]
LVGL is the most popular free and open-source embedded graphics library to create beautiful UIs for any MCU, MPU and display type.
LVGL是最受欢迎的免费开源嵌入式图形库，可用于为任何微控制器单元（MCU）、微处理器单元（MPU）和显示器类型创建漂亮的用户界面。
LVGL 9对比LVGL 8
[https://docs.lvgl.io/master/CHANGELOG.html#v9-0-0]
As v9 is a major version it contains API breaking changes too. Most of the conceptual changes in v9 were internal, however the API was affected some widgets reword and refactoring as well.
由于v9是一个重大版本，因此它也包含了破坏性的API更改。在v9中，大部分的概念性变化是内部的，但是一些小部件的命名和重构也对API产生了影响。
实现
[https://github.com/Kevincoooool/lvgl_v9_esp32s3]
1. 生成图片数组
在线生成https://lvgl.io/tools/imageconverter_v9
使用RGB565模式转换.
生成后原始:
weekend_dragon_320x240.c
#ifdef __has_include
#if __has_include("lvgl.h")
#ifndef LV_LVGL_H_INCLUDE_SIMPLE
#define LV_LVGL_H_INCLUDE_SIMPLE
#endif
#endif
#endif
#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
#ifndef LV_ATTRIBUTE_MEM_ALIGN
#define LV_ATTRIBUTE_MEM_ALIGN
#endif
#ifndef LV_ATTRIBUTE_IMAGE_WEEKEND_DRAGON_320X240
#define LV_ATTRIBUTE_IMAGE_WEEKEND_DRAGON_320X240
#endif
const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMAGE_WEEKEND_DRAGON_320X240 uint8_t weekend_dragon_320x240_map[] = {
// 省略
}
const lv_image_dsc_t weekend_dragon_320x240 = {
.header.cf = LV_COLOR_FORMAT_RGB565,
.header.magic = LV_IMAGE_HEADER_MAGIC,
.header.w = 320,
.header.h = 240,
.data_size = 76800 * 2,
.data = weekend_dragon_320x240_map,
};
修改:(注意:修改颜色模式,否则显示图片会发虚)
weekend_dragon_320x240.c(相关结构体定义在lv_img_buf.h)
- const lv_image_dsc_t weekend_dragon_320x240 = {
+ const lv_img_dsc_t weekend_dragon_320x240 = {
- .header.cf = LV_COLOR_FORMAT_RGB565,
- .header.magic = LV_IMAGE_HEADER_MAGIC,
+ .header.cf = LV_IMG_CF_TRUE_COLOR,
.header.w = 320,
.header.h = 240,
- .data_size = 76800 * 2,
+ .data_size = 76800 * LV_COLOR_SIZE / 8,
+ .header.always_zero = 0,
.data = weekend_dragon_320x240_map,
};
2. 配置lvgl
复制lvgl_conf_template.h到lvgl_conf.h.
lvgl_conf.h
/**
* @file lv_conf.h
* Configuration file for v9.0.0-dev
*/
/*
* Copy this file as `lv_conf.h`
* 1. simply next to the `lvgl` folder
* 2. or any other places and
* - define `LV_CONF_INCLUDE_SIMPLE`
* - add the path as include path
*/
/* clang-format off */
#if 1 /*Set it to "1" to enable content*/
#ifndef LV_CONF_H
#define LV_CONF_H
#include <stdint.h>
/*====================
COLOR SETTINGS
*====================*/
/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 16
#define LV_COLOR_CHROMA_KEY lv_color_hex(0x00ff00)
/*=========================
STDLIB WRAPPER SETTINGS
*=========================*/
/*Enable and configure the built-in memory manager*/
#define LV_USE_BUILTIN_MALLOC 1
#if LV_USE_BUILTIN_MALLOC
/*Size of the memory available for `lv_malloc()` in bytes (>= 2kB)*/
// #define LV_MEM_SIZE (128U * 1024U) /*[bytes]*/
#define LV_MEM_SIZE (256U * 1024U) /*[bytes]*/
/*Size of the memory expand for `lv_malloc()` in bytes*/
#define LV_MEM_POOL_EXPAND_SIZE 0
/*Set an address for the memory pool instead of allocating it as a normal array. Can be in external SRAM too.*/
#define LV_MEM_ADR 0 /*0: unused*/
/*Instead of an address give a memory allocator that will be called to get a memory pool for LVGL. E.g. my_malloc*/
#if LV_MEM_ADR == 0
#undef LV_MEM_POOL_INCLUDE
#undef LV_MEM_POOL_ALLOC
#endif
#endif /*LV_USE_BUILTIN_MALLOC*/
/*Enable lv_memcpy_builtin, lv_memset_builtin, lv_strlen_builtin, lv_strncpy_builtin*/
#define LV_USE_BUILTIN_MEMCPY 1
/*Enable and configure the built-in (v)snprintf */
#define LV_USE_BUILTIN_SNPRINTF 1
#if LV_USE_BUILTIN_SNPRINTF
#define LV_SPRINTF_USE_FLOAT 0
#endif /*LV_USE_BUILTIN_SNPRINTF*/
#define LV_STDLIB_INCLUDE <stdint.h>
#define LV_STDIO_INCLUDE <stdint.h>
#define LV_STRING_INCLUDE <stdint.h>
#define LV_MALLOC lv_malloc_builtin
#define LV_REALLOC lv_realloc_builtin
#define LV_FREE lv_free_builtin
#define LV_MEMSET lv_memset_builtin
#define LV_MEMCPY lv_memcpy_builtin
#define LV_SNPRINTF lv_snprintf_builtin
#define LV_VSNPRINTF lv_vsnprintf_builtin
#define LV_STRLEN lv_strlen_builtin
#define LV_STRNCPY lv_strncpy_builtin
/*====================
HAL SETTINGS
*====================*/
/*Use a custom tick source that tells the elapsed time in milliseconds.
*It removes the need to manually update the tick with `lv_tick_inc()`)*/
#define LV_TICK_CUSTOM 0
#if LV_TICK_CUSTOM
#define LV_TICK_CUSTOM_INCLUDE "Arduino.h" /*Header for the system time function*/
#define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis()) /*Expression evaluating to current system time in ms*/
/*If using lvgl as ESP32 component*/
// #define LV_TICK_CUSTOM_INCLUDE "esp_timer.h"
// #define LV_TICK_CUSTOM_SYS_TIME_EXPR ((esp_timer_get_time() / 1000LL))
#endif /*LV_TICK_CUSTOM*/
/*Default Dot Per Inch. Used to initialize default sizes such as widgets sized, style paddings.
*(Not so important, you can adjust it to modify default sizes and spaces)*/
#define LV_DPI_DEF 130 /*[px/inch]*/
/*========================
* DRAW CONFIGURATION
*========================*/
/*Enable the built in mask engine.
*Required to draw shadow, rounded corners, circles, arc, skew lines, or any other masks*/
#define LV_USE_DRAW_MASKS 1
#define LV_USE_DRAW_SW 1
#if LV_USE_DRAW_SW
/*Enable complex draw engine.
*Required to draw shadow, gradient, rounded corners, circles, arc, skew lines, image transformations or any masks*/
#define LV_DRAW_SW_COMPLEX 1
/* If a widget has `style_opa < 255` (not `bg_opa`, `text_opa` etc) or not NORMAL blend mode
* it is buffered into a "simple" layer before rendering. The widget can be buffered in smaller chunks.
* "Transformed layers" (if `transform_angle/zoom` are set) use larger buffers
* and can't be drawn in chunks. */
/*The target buffer size for simple layer chunks.*/
#define LV_DRAW_SW_LAYER_SIMPLE_BUF_SIZE (24 * 1024) /*[bytes]*/
/*Used if `LV_DRAW_SW_LAYER_SIMPLE_BUF_SIZE` couldn't be allocated.*/
#define LV_DRAW_SW_LAYER_SIMPLE_FALLBACK_BUF_SIZE (3 * 1024) /*[bytes]*/
/*Allow buffering some shadow calculation.
*LV_DRAW_SW_SHADOW_CACHE_SIZE is the max. shadow size to buffer, where shadow size is `shadow_width + radius`
*Caching has LV_DRAW_SW_SHADOW_CACHE_SIZE^2 RAM cost*/
#define LV_DRAW_SW_SHADOW_CACHE_SIZE 0
/* Set number of maximally cached circle data.
* The circumference of 1/4 circle are saved for anti-aliasing
* radius * 4 bytes are used per circle (the most often used radiuses are saved)
* 0: to disable caching */
#define LV_DRAW_SW_CIRCLE_CACHE_SIZE 4
/*Default gradient buffer size.
*When LVGL calculates the gradient "maps" it can save them into a cache to avoid calculating them again.
*LV_DRAW_SW_GRADIENT_CACHE_DEF_SIZE sets the size of this cache in bytes.
*If the cache is too small the map will be allocated only while it's required for the drawing.
*0 mean no caching.*/
#define LV_DRAW_SW_GRADIENT_CACHE_DEF_SIZE 0
/*Allow dithering the gradients (to achieve visual smooth color gradients on limited color depth display)
*LV_DRAW_SW_GRADIENT_DITHER implies allocating one or two more lines of the object's rendering surface
*The increase in memory consumption is (32 bits * object width) plus 24 bits * object width if using error diffusion */
#define LV_DRAW_SW_GRADIENT_DITHER 0
#if LV_DRAW_SW_GRADIENT_DITHER
/*Add support for error diffusion dithering.
*Error diffusion dithering gets a much better visual result, but implies more CPU consumption and memory when drawing.
*The increase in memory consumption is (24 bits * object's width)*/
#define LV_DRAW_SW_GRADIENT_DITHER_ERROR_DIFFUSION 0
#endif
/*Enable subpixel rendering*/
#define LV_DRAW_SW_FONT_SUBPX 0
#if LV_DRAW_SW_FONT_SUBPX
/*Set the pixel order of the display. Physical order of RGB channels. Doesn't matter with "normal" fonts.*/
#define LV_DRAW_SW_FONT_SUBPX_BGR 0 /*0: RGB; 1:BGR order*/
#endif
#endif
/*Use SDL renderer API*/
#define LV_USE_DRAW_SDL 0
#if LV_USE_DRAW_SDL
#define LV_DRAW_SDL_INCLUDE_PATH <SDL2/SDL.h>
/*Texture cache size, 8MB by default*/
#define LV_DRAW_SDL_LRU_SIZE (1024 * 1024 * 8)
/*Custom blend mode for mask drawing, disable if you need to link with older SDL2 lib*/
#define LV_DRAW_SDL_CUSTOM_BLEND_MODE (SDL_VERSION_ATLEAST(2, 0, 6))
#endif
/*=====================
* GPU CONFIGURATION
*=====================*/
/*Use Arm's 2D acceleration library Arm-2D */
#define LV_USE_GPU_ARM2D 0
/*Use STM32's DMA2D (aka Chrom Art) GPU*/
#define LV_USE_GPU_STM32_DMA2D 0
#if LV_USE_GPU_STM32_DMA2D
/*Must be defined to include path of CMSIS header of target processor
e.g. "stm32f769xx.h" or "stm32f429xx.h"*/
#define LV_GPU_DMA2D_CMSIS_INCLUDE
#endif
/*Use GD32 IPA GPU
* This adds support for Image Processing Accelerator on GD32F450 and GD32F470 series MCUs
*
* NOTE: IPA on GD32F450 has a bug where the fill operation overwrites data beyond the
* framebuffer. This driver works around it by saving and restoring affected memory, but
* this makes it not thread-safe. GD32F470 is not affected. */
#define LV_USE_GPU_GD32_IPA 0
/*Use NXP's PXP GPU iMX RTxxx platforms*/
#define LV_USE_GPU_NXP_PXP 0
#if LV_USE_GPU_NXP_PXP
/*1: Add default bare metal and FreeRTOS interrupt handling routines for PXP (lv_gpu_nxp_pxp_osa.c)
* and call lv_gpu_nxp_pxp_init() automatically during lv_init(). Note that symbol SDK_OS_FREE_RTOS
* has to be defined in order to use FreeRTOS OSA, otherwise bare-metal implementation is selected.
*0: lv_gpu_nxp_pxp_init() has to be called manually before lv_init()
*/
#define LV_USE_GPU_NXP_PXP_AUTO_INIT 0
#endif
/*Use NXP's VG-Lite GPU iMX RTxxx platforms*/
#define LV_USE_GPU_NXP_VG_LITE 0
/*Use SWM341's DMA2D GPU*/
#define LV_USE_GPU_SWM341_DMA2D 0
#if LV_USE_GPU_SWM341_DMA2D
#define LV_GPU_SWM341_DMA2D_INCLUDE "SWM341.h"
#endif
/*=======================
* FEATURE CONFIGURATION
*=======================*/
/*-------------
* Logging
*-----------*/
/*Enable the log module*/
#define LV_USE_LOG 0
#if LV_USE_LOG
/*How important log should be added:
*LV_LOG_LEVEL_TRACE A lot of logs to give detailed information
*LV_LOG_LEVEL_INFO Log important events
*LV_LOG_LEVEL_WARN Log if something unwanted happened but didn't cause a problem
*LV_LOG_LEVEL_ERROR Only critical issue, when the system may fail
*LV_LOG_LEVEL_USER Only logs added by the user
*LV_LOG_LEVEL_NONE Do not log anything*/
#define LV_LOG_LEVEL LV_LOG_LEVEL_WARN
/*1: Print the log with 'printf';
*0: User need to register a callback with `lv_log_register_print_cb()`*/
#define LV_LOG_PRINTF 0
/*1: Enable print timestamp;
*0: Disable print timestamp*/
#define LV_LOG_USE_TIMESTAMP 1
/*Enable/disable LV_LOG_TRACE in modules that produces a huge number of logs*/
#define LV_LOG_TRACE_MEM 1
#define LV_LOG_TRACE_TIMER 1
#define LV_LOG_TRACE_INDEV 1
#define LV_LOG_TRACE_DISP_REFR 1
#define LV_LOG_TRACE_EVENT 1
#define LV_LOG_TRACE_OBJ_CREATE 1
#define LV_LOG_TRACE_LAYOUT 1
#define LV_LOG_TRACE_ANIM 1
#define LV_LOG_TRACE_MSG 1
#endif /*LV_USE_LOG*/
/*-------------
* Asserts
*-----------*/
/*Enable asserts if an operation is failed or an invalid data is found.
*If LV_USE_LOG is enabled an error message will be printed on failure*/
#define LV_USE_ASSERT_NULL 1 /*Check if the parameter is NULL. (Very fast, recommended)*/
#define LV_USE_ASSERT_MALLOC 1 /*Checks is the memory is successfully allocated or no. (Very fast, recommended)*/
#define LV_USE_ASSERT_STYLE 0 /*Check if the styles are properly initialized. (Very fast, recommended)*/
#define LV_USE_ASSERT_MEM_INTEGRITY 0 /*Check the integrity of `lv_mem` after critical operations. (Slow)*/
#define LV_USE_ASSERT_OBJ 0 /*Check the object's type and existence (e.g. not deleted). (Slow)*/
/*Add a custom handler when assert happens e.g. to restart the MCU*/
#define LV_ASSERT_HANDLER_INCLUDE <stdint.h>
#define LV_ASSERT_HANDLER while(1); /*Halt by default*/
/*-------------
* Others
*-----------*/
/*1: Show CPU usage and FPS count*/
#define LV_USE_PERF_MONITOR CONFIG_LV_USE_PERF_MONITOR
#if LV_USE_PERF_MONITOR
#define LV_USE_PERF_MONITOR_POS LV_ALIGN_BOTTOM_RIGHT
#endif
/*1: Show the used memory and the memory fragmentation
* Requires `LV_USE_BUILTIN_MALLOC = 1`*/
#define LV_USE_MEM_MONITOR 0
#if LV_USE_MEM_MONITOR
#define LV_USE_MEM_MONITOR_POS LV_ALIGN_BOTTOM_LEFT
#endif
/*1: Draw random colored rectangles over the redrawn areas*/
#define LV_USE_REFR_DEBUG 0
/*Maximum buffer size to allocate for rotation.
*Only used if software rotation is enabled in the display driver.*/
#define LV_DISP_ROT_MAX_BUF (10*1024)
#define LV_USE_USER_DATA 1
/*Garbage Collector settings
*Used if lvgl is bound to higher level language and the memory is managed by that language*/
#define LV_ENABLE_GC 0
#if LV_ENABLE_GC != 0
#define LV_GC_INCLUDE "gc.h" /*Include Garbage Collector related things*/
#endif /*LV_ENABLE_GC*/
/*Default image cache size. Image caching keeps some images opened.
*If only the built-in image formats are used there is no real advantage of caching.
*With other image decoders (e.g. PNG or JPG) caching save the continuous open/decode of images.
*However the opened images consume additional RAM.
*0: to disable caching*/
#define LV_IMG_CACHE_DEF_SIZE 0
/*Number of stops allowed per gradient. Increase this to allow more stops.
*This adds (sizeof(lv_color_t) + 1) bytes per additional stop*/
#define LV_GRADIENT_MAX_STOPS 2
/* Adjust color mix functions rounding. GPUs might calculate color mix (blending) differently.
* 0: round down, 64: round up from x.75, 128: round up from half, 192: round up from x.25, 254: round up */
#define LV_COLOR_MIX_ROUND_OFS 0
/*=====================
* COMPILER SETTINGS
*====================*/
/*For big endian systems set to 1*/
#define LV_BIG_ENDIAN_SYSTEM 0
/*Define a custom attribute to `lv_tick_inc` function*/
#define LV_ATTRIBUTE_TICK_INC
/*Define a custom attribute to `lv_timer_handler` function*/
#define LV_ATTRIBUTE_TIMER_HANDLER
/*Define a custom attribute to `lv_disp_flush_ready` function*/
#define LV_ATTRIBUTE_FLUSH_READY
/*Required alignment size for buffers*/
#define LV_ATTRIBUTE_MEM_ALIGN_SIZE 1
/*Will be added where memories needs to be aligned (with -Os data might not be aligned to boundary by default).
* E.g. __attribute__((aligned(4)))*/
#define LV_ATTRIBUTE_MEM_ALIGN
/*Attribute to mark large constant arrays for example font's bitmaps*/
#define LV_ATTRIBUTE_LARGE_CONST
/*Compiler prefix for a big array declaration in RAM*/
#define LV_ATTRIBUTE_LARGE_RAM_ARRAY
/*Place performance critical functions into a faster memory (e.g RAM)*/
#define LV_ATTRIBUTE_FAST_MEM
/*Export integer constant to binding. This macro is used with constants in the form of LV_<CONST> that
*should also appear on LVGL binding API such as Micropython.*/
#define LV_EXPORT_CONST_INT(int_value) struct _silence_gcc_warning /*The default value just prevents GCC warning*/
/*Extend the default -32k..32k coordinate range to -4M..4M by using int32_t for coordinates instead of int16_t*/
#define LV_USE_LARGE_COORD 0
/*==================
* FONT USAGE
*===================*/
/*Montserrat fonts with ASCII range and some symbols using bpp = 4
*https://fonts.google.com/specimen/Montserrat*/
#define LV_FONT_MONTSERRAT_8 CONFIG_LV_FONT_MONTSERRAT_8
#define LV_FONT_MONTSERRAT_10 CONFIG_LV_FONT_MONTSERRAT_10
#define LV_FONT_MONTSERRAT_12 CONFIG_LV_FONT_MONTSERRAT_12
#define LV_FONT_MONTSERRAT_14 CONFIG_LV_FONT_MONTSERRAT_14
#define LV_FONT_MONTSERRAT_16 CONFIG_LV_FONT_MONTSERRAT_16
#define LV_FONT_MONTSERRAT_18 CONFIG_LV_FONT_MONTSERRAT_18
#define LV_FONT_MONTSERRAT_20 CONFIG_LV_FONT_MONTSERRAT_20
#define LV_FONT_MONTSERRAT_22 CONFIG_LV_FONT_MONTSERRAT_22
#define LV_FONT_MONTSERRAT_24 CONFIG_LV_FONT_MONTSERRAT_24
#define LV_FONT_MONTSERRAT_26 CONFIG_LV_FONT_MONTSERRAT_26
#define LV_FONT_MONTSERRAT_28 CONFIG_LV_FONT_MONTSERRAT_28
#define LV_FONT_MONTSERRAT_30 CONFIG_LV_FONT_MONTSERRAT_30
#define LV_FONT_MONTSERRAT_32 CONFIG_LV_FONT_MONTSERRAT_32
#define LV_FONT_MONTSERRAT_34 CONFIG_LV_FONT_MONTSERRAT_34
#define LV_FONT_MONTSERRAT_36 CONFIG_LV_FONT_MONTSERRAT_36
#define LV_FONT_MONTSERRAT_38 CONFIG_LV_FONT_MONTSERRAT_38
#define LV_FONT_MONTSERRAT_40 CONFIG_LV_FONT_MONTSERRAT_40
#define LV_FONT_MONTSERRAT_42 CONFIG_LV_FONT_MONTSERRAT_42
#define LV_FONT_MONTSERRAT_44 CONFIG_LV_FONT_MONTSERRAT_44
#define LV_FONT_MONTSERRAT_46 CONFIG_LV_FONT_MONTSERRAT_46
#define LV_FONT_MONTSERRAT_48 CONFIG_LV_FONT_MONTSERRAT_48
/*Demonstrate special features*/
#define LV_FONT_MONTSERRAT_12_SUBPX 0
#define LV_FONT_MONTSERRAT_28_COMPRESSED 0 /*bpp = 3*/
#define LV_FONT_DEJAVU_16_PERSIAN_HEBREW 1 /*Hebrew, Arabic, Persian letters and all their forms*/
#define LV_FONT_SIMSUN_16_CJK 1 /*1000 most common CJK radicals*/
/*Pixel perfect monospace fonts*/
#define LV_FONT_UNSCII_8 0
#define LV_FONT_UNSCII_16 0
/*Optionally declare custom fonts here.
*You can use these fonts as default font too and they will be available globally.
*E.g. #define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(my_font_1) LV_FONT_DECLARE(my_font_2)*/
#define LV_FONT_CUSTOM_DECLARE
/*Always set a default font*/
#define LV_FONT_DEFAULT &lv_font_montserrat_14
/*Enable handling large font and/or fonts with a lot of characters.
*The limit depends on the font size, font face and bpp.
*Compiler error will be triggered if a font needs it.*/
#define LV_FONT_FMT_TXT_LARGE 0
/*Enables/disables support for compressed fonts.*/
#define LV_USE_FONT_COMPRESSED 0
/*Enable drawing placeholders when glyph dsc is not found*/
#define LV_USE_FONT_PLACEHOLDER 1
/*=================
* TEXT SETTINGS
*=================*/
/**
* Select a character encoding for strings.
* Your IDE or editor should have the same character encoding
* - LV_TXT_ENC_UTF8
* - LV_TXT_ENC_ASCII
*/
#define LV_TXT_ENC LV_TXT_ENC_UTF8
/*Can break (wrap) texts on these chars*/
#define LV_TXT_BREAK_CHARS " ,.;:-_)]}"
/*If a word is at least this long, will break wherever "prettiest"
*To disable, set to a value <= 0*/
#define LV_TXT_LINE_BREAK_LONG_LEN 0
/*Minimum number of characters in a long word to put on a line before a break.
*Depends on LV_TXT_LINE_BREAK_LONG_LEN.*/
#define LV_TXT_LINE_BREAK_LONG_PRE_MIN_LEN 3
/*Minimum number of characters in a long word to put on a line after a break.
*Depends on LV_TXT_LINE_BREAK_LONG_LEN.*/
#define LV_TXT_LINE_BREAK_LONG_POST_MIN_LEN 3
/*The control character to use for signalling text recoloring.*/
#define LV_TXT_COLOR_CMD "#"
/*Support bidirectional texts. Allows mixing Left-to-Right and Right-to-Left texts.
*The direction will be processed according to the Unicode Bidirectional Algorithm:
*https://www.w3.org/International/articles/inline-bidi-markup/uba-basics*/
#define LV_USE_BIDI 0
#if LV_USE_BIDI
/*Set the default direction. Supported values:
*`LV_BASE_DIR_LTR` Left-to-Right
*`LV_BASE_DIR_RTL` Right-to-Left
*`LV_BASE_DIR_AUTO` detect texts base direction*/
#define LV_BIDI_BASE_DIR_DEF LV_BASE_DIR_AUTO
#endif
/*Enable Arabic/Persian processing
*In these languages characters should be replaced with an other form based on their position in the text*/
#define LV_USE_ARABIC_PERSIAN_CHARS 0
/*==================
* WIDGETS
*================*/
/*Documentation of the widgets: https://docs.lvgl.io/latest/en/html/widgets/index.html*/
#define LV_USE_ANIMIMG CONFIG_LV_USE_ANIMIMG
#define LV_USE_ARC CONFIG_LV_USE_ARC
#define LV_USE_BAR CONFIG_LV_USE_BAR
#define LV_USE_BTN CONFIG_LV_USE_BTN
#define LV_USE_BTNMATRIX CONFIG_LV_USE_BTNMATRIX
#define LV_USE_CALENDAR CONFIG_LV_USE_CALENDAR
#if LV_USE_CALENDAR
#define LV_CALENDAR_WEEK_STARTS_MONDAY 0
#if LV_CALENDAR_WEEK_STARTS_MONDAY
#define LV_CALENDAR_DEFAULT_DAY_NAMES {"Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"}
#else
#define LV_CALENDAR_DEFAULT_DAY_NAMES {"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"}
#endif
#define LV_CALENDAR_DEFAULT_MONTH_NAMES {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"}
#define LV_USE_CALENDAR_HEADER_ARROW 1
#define LV_USE_CALENDAR_HEADER_DROPDOWN 1
#endif /*LV_USE_CALENDAR*/
#define LV_USE_CANVAS CONFIG_LV_USE_CANVAS
#define LV_USE_CHART CONFIG_LV_USE_CHART
#define LV_USE_CHECKBOX CONFIG_LV_USE_CHECKBOX
#define LV_USE_COLORWHEEL CONFIG_LV_USE_COLORWHEEL
#define LV_USE_DROPDOWN CONFIG_LV_USE_DROPDOWN /*Requires: lv_label*/
#define LV_USE_IMG CONFIG_LV_USE_IMG /*Requires: lv_label*/
#define LV_USE_IMGBTN CONFIG_LV_USE_IMGBTN
#define LV_USE_KEYBOARD CONFIG_LV_USE_KEYBOARD
#define LV_USE_LABEL CONFIG_LV_USE_LABEL
#if LV_USE_LABEL
#define LV_LABEL_TEXT_SELECTION 1 /*Enable selecting text of the label*/
#define LV_LABEL_LONG_TXT_HINT 1 /*Store some extra info in labels to speed up drawing of very long texts*/
#endif
#define LV_USE_LED CONFIG_LV_USE_LED
#define LV_USE_LINE CONFIG_LV_USE_LINE
#define LV_USE_LIST CONFIG_LV_USE_LIST
#define LV_USE_MENU CONFIG_LV_USE_MENU
#define LV_USE_METER CONFIG_LV_USE_METER
#define LV_USE_MSGBOX CONFIG_LV_USE_MSGBOX
#define LV_USE_ROLLER CONFIG_LV_USE_ROLLER /*Requires: lv_label*/
#define LV_USE_SLIDER CONFIG_LV_USE_SLIDER /*Requires: lv_bar*/
#define LV_USE_SPAN CONFIG_LV_USE_SPAN
#if LV_USE_SPAN
/*A line text can contain maximum num of span descriptor */
#define LV_SPAN_SNIPPET_STACK_SIZE 64
#endif
#define LV_USE_SPINBOX CONFIG_LV_USE_SPINBOX
#define LV_USE_SPINNER CONFIG_LV_USE_SPINNER
#define LV_USE_SWITCH CONFIG_LV_USE_SWITCH
#define LV_USE_TEXTAREA CONFIG_LV_USE_TEXTAREA /*Requires: lv_label*/
#if LV_USE_TEXTAREA != 0
#define LV_TEXTAREA_DEF_PWD_SHOW_TIME 1500 /*ms*/
#endif
#define LV_USE_TABLE CONFIG_LV_USE_TABLE
#define LV_USE_TABVIEW CONFIG_LV_USE_TABVIEW
#define LV_USE_TILEVIEW CONFIG_LV_USE_TILEVIEW
#define LV_USE_WIN CONFIG_LV_USE_WIN
/*==================
* THEMES
*==================*/
/*A simple, impressive and very complete theme*/
#define LV_USE_THEME_DEFAULT CONFIG_LV_USE_THEME_DEFAULT
#if LV_USE_THEME_DEFAULT
/*0: Light mode; 1: Dark mode*/
#define LV_THEME_DEFAULT_DARK 0
/*1: Enable grow on press*/
#define LV_THEME_DEFAULT_GROW 1
/*Default transition time in [ms]*/
#define LV_THEME_DEFAULT_TRANSITION_TIME 80
#endif /*LV_USE_THEME_DEFAULT*/
/*A very simple theme that is a good starting point for a custom theme*/
#define LV_USE_THEME_BASIC CONFIG_LV_USE_THEME_BASIC
/*A theme designed for monochrome displays*/
#define LV_USE_THEME_MONO 1
/*==================
* LAYOUTS
*==================*/
/*A layout similar to Flexbox in CSS.*/
#define LV_USE_FLEX CONFIG_LV_USE_FLEX
/*A layout similar to Grid in CSS.*/
#define LV_USE_GRID CONFIG_LV_USE_GRID
/*====================
* 3RD PARTS LIBRARIES
*====================*/
/*File system interfaces for common APIs */
/*API for fopen, fread, etc*/
#define LV_USE_FS_STDIO CONFIG_LV_USE_FS_STDIO
#if LV_USE_FS_STDIO
#define LV_FS_STDIO_LETTER '\0' /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
#define LV_FS_STDIO_PATH "" /*Set the working directory. File/directory paths will be appended to it.*/
#define LV_FS_STDIO_CACHE_SIZE 0 /*>0 to cache this number of bytes in lv_fs_read()*/
#endif
/*API for open, read, etc*/
#define LV_USE_FS_POSIX CONFIG_LV_USE_FS_POSIX
#if LV_USE_FS_POSIX
#define LV_FS_POSIX_LETTER '\0' /*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
/*API for CreateFile, ReadFile, etc*/
#define LV_USE_FS_WIN32 CONFIG_LV_USE_FS_WIN32
#if LV_USE_FS_WIN32
#define LV_FS_WIN32_LETTER '\0' /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
#define LV_FS_WIN32_PATH "" /*Set the working directory. File/directory paths will be appended to it.*/
#define LV_FS_WIN32_CACHE_SIZE 0 /*>0 to cache this number of bytes in lv_fs_read()*/
#endif
/*API for FATFS (needs to be added separately). Uses f_open, f_read, etc*/
#define LV_USE_FS_FATFS CONFIG_LV_USE_FS_FATFS
#if LV_USE_FS_FATFS
#define LV_FS_FATFS_LETTER '\0' /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
#define LV_FS_FATFS_CACHE_SIZE 0 /*>0 to cache this number of bytes in lv_fs_read()*/
#endif
/*PNG decoder library*/
#define LV_USE_PNG CONFIG_LV_USE_PNG
/*BMP decoder library*/
#define LV_USE_BMP CONFIG_LV_USE_BMP
/* JPG + split JPG decoder library.
* Split JPG is a custom format optimized for embedded systems. */
#define LV_USE_SJPG CONFIG_LV_USE_SJPG
/*GIF decoder library*/
#define LV_USE_GIF CONFIG_LV_USE_GIF
/*QR code library*/
#define LV_USE_QRCODE CONFIG_LV_USE_QRCODE
/*Barcode code library*/
#define LV_USE_BARCODE CONFIG_LV_USE_BARCODE
/*FreeType library*/
#define LV_USE_FREETYPE CONFIG_LV_USE_FREETYPE
#if LV_USE_FREETYPE
/*Memory used by FreeType to cache characters [bytes]*/
#define LV_FREETYPE_CACHE_SIZE (64 * 1024)
/*Let FreeType to use LVGL memory and file porting*/
#define LV_FREETYPE_USE_LVGL_PORT 0
/* 1: bitmap cache use the sbit cache, 0:bitmap cache use the image cache. */
/* sbit cache:it is much more memory efficient for small bitmaps(font size < 256) */
/* if font size >= 256, must be configured as image cache */
#define LV_FREETYPE_SBIT_CACHE 0
/* Maximum number of opened FT_Face/FT_Size objects managed by this cache instance. */
/* (0:use system defaults) */
#define LV_FREETYPE_CACHE_FT_FACES 4
#define LV_FREETYPE_CACHE_FT_SIZES 4
#endif
/* Built-in TTF decoder */
#define LV_USE_TINY_TTF 0
#if LV_USE_TINY_TTF
/* Enable loading TTF data from files */
#define LV_TINY_TTF_FILE_SUPPORT 0
#endif
/*Rlottie library*/
#define LV_USE_RLOTTIE CONFIG_LV_USE_RLOTTIE
/*FFmpeg library for image decoding and playing videos
*Supports all major image formats so do not enable other image decoder with it*/
#define LV_USE_FFMPEG CONFIG_LV_USE_FFMPEG
#if LV_USE_FFMPEG
/*Dump input information to stderr*/
#define LV_FFMPEG_DUMP_FORMAT 0
#endif
/*==================
* OTHERS
*==================*/
/*1: Enable API to take snapshot for object*/
#define LV_USE_SNAPSHOT CONFIG_LV_USE_SNAPSHOT
/*1: Enable Monkey test*/
#define LV_USE_MONKEY CONFIG_LV_USE_MONKEY
/*1: Enable grid navigation*/
#define LV_USE_GRIDNAV CONFIG_LV_USE_GRIDNAV
/*1: Enable lv_obj fragment*/
#define LV_USE_FRAGMENT CONFIG_LV_USE_FRAGMENT
/*1: Support using images as font in label or span widgets */
#define LV_USE_IMGFONT CONFIG_LV_USE_IMGFONT
#if LV_USE_IMGFONT
/*Imgfont image file path maximum length*/
#define LV_IMGFONT_PATH_MAX_LEN 64
/*1: Use img cache to buffer header information*/
#define LV_IMGFONT_USE_IMG_CACHE_HEADER 0
#endif
/*1: Enable a published subscriber based messaging system */
#define LV_USE_MSG CONFIG_LV_USE_MSG
/*1: Enable Pinyin input method*/
/*Requires: lv_keyboard*/
#define LV_USE_IME_PINYIN 1
#if LV_USE_IME_PINYIN
/*1: Use default thesaurus*/
/*If you do not use the default thesaurus, be sure to use `lv_ime_pinyin` after setting the thesauruss*/
#define LV_IME_PINYIN_USE_DEFAULT_DICT 1
/*Set the maximum number of candidate panels that can be displayed*/
/*This needs to be adjusted according to the size of the screen*/
#define LV_IME_PINYIN_CAND_TEXT_NUM 6
/*Use 9 key input(k9)*/
#define LV_IME_PINYIN_USE_K9_MODE 1
#if LV_IME_PINYIN_USE_K9_MODE == 1
#define LV_IME_PINYIN_K9_CAND_TEXT_NUM 3
#endif // LV_IME_PINYIN_USE_K9_MODE
#endif
/*1: Enable file explorer*/
/*Requires: lv_table*/
#define LV_USE_FILE_EXPLORER CONFIG_LV_USE_FILE_EXPLORER
#if LV_USE_FILE_EXPLORER
/*Maximum length of path*/
#define LV_FILE_EXPLORER_PATH_MAX_LEN (128)
/*Quick access bar, 1:use, 0:not use*/
/*Requires: lv_list*/
#define LV_FILE_EXPLORER_QUICK_ACCESS 1
#endif
/*==================
* EXAMPLES
*==================*/
/*Enable the examples to be built with the library*/
#define LV_BUILD_EXAMPLES CONFIG_LV_BUILD_EXAMPLES
/*===================
* DEMO USAGE
====================*/
/*Show some widget. It might be required to increase `LV_MEM_SIZE` */
#define LV_USE_DEMO_WIDGETS 1
#if LV_USE_DEMO_WIDGETS
#define LV_DEMO_WIDGETS_SLIDESHOW 0
#endif
/*Demonstrate the usage of encoder and keyboard*/
#define LV_USE_DEMO_KEYPAD_AND_ENCODER 1
/*Benchmark your system*/
#define LV_USE_DEMO_BENCHMARK 1
#if LV_USE_DEMO_BENCHMARK
/*Use RGB565A8 images with 16 bit color depth instead of ARGB8565*/
#define LV_DEMO_BENCHMARK_RGB565A8 0
#endif
/*Stress test for LVGL*/
#define LV_USE_DEMO_STRESS 1
/*Music player demo*/
#define LV_USE_DEMO_MUSIC 1
#if LV_USE_DEMO_MUSIC
#define LV_DEMO_MUSIC_SQUARE 0
#define LV_DEMO_MUSIC_LANDSCAPE 0
#define LV_DEMO_MUSIC_ROUND 1
#define LV_DEMO_MUSIC_LARGE 0
#define LV_DEMO_MUSIC_AUTO_PLAY 1
#endif
/*Flex layout demo*/
#define LV_USE_DEMO_FLEX_LAYOUT 1
/*--END OF LV_CONF_H--*/
#endif /*LV_CONF_H*/
#endif /*End of "Content enable"*/
3. 主程序
main.c
/*
* @OriginalAuthor : Kevincoooool
* @Author:qsbye
* @Date : 2022-12-29 16:11:59
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-2-12 19:58:36
* @FilePath: main.c
*/
#include <stdio.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "freertos/semphr.h"
#include "lvgl/demos/lv_demos.h"
#include "lvgl_helpers.h"
#include "esp_freertos_hooks.h"
#include "weekend_dragon_320x240.c" // 图片数组(RGB565)
static void lv_tick_task(void *arg){
(void)arg;
lv_tick_inc(10);
}
SemaphoreHandle_t xGuiSemaphore;
static void ta_event_cb(lv_event_t * e){
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * ta = lv_event_get_target(e);
lv_obj_t * kb = lv_event_get_user_data(e);
if(code == LV_EVENT_FOCUSED) {
if(lv_indev_get_type(lv_indev_get_act()) != LV_INDEV_TYPE_KEYPAD) {
lv_keyboard_set_textarea(kb, ta);
lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
}
}
else if(code == LV_EVENT_CANCEL) {
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_obj_clear_state(ta, LV_STATE_FOCUSED);
lv_indev_reset(NULL, ta); /*To forget the last clicked object to make it focusable again*/
}
}
void lv_example_dragon_img(void){
// 创建图像对象
lv_obj_t* img_obj = lv_img_create(lv_scr_act());
// 设置背景颜色
lv_obj_set_style_bg_color(img_obj,lv_color_hex(0xCC0033),0);
// 设置图像位置和大小
lv_obj_set_pos(img_obj, 0, 0);
lv_obj_set_size(img_obj, LV_HOR_RES, LV_VER_RES);
lv_img_set_src(img_obj, &weekend_dragon_320x240);
}
static void gui_task(void *arg){
xGuiSemaphore = xSemaphoreCreateMutex();
lv_init(); //lvgl内核初始化
lvgl_driver_init(); //lvgl显示接口初始化
/* Example for 1) */
static lv_disp_draw_buf_t draw_buf;
lv_color_t *buf1 = heap_caps_malloc(DISP_BUF_SIZE * 2, MALLOC_CAP_DMA);
lv_color_t *buf2 = heap_caps_malloc(DISP_BUF_SIZE * 2, MALLOC_CAP_DMA);
lv_disp_draw_buf_init(&draw_buf, buf1, buf2, DLV_HOR_RES_MAX * DLV_VER_RES_MAX); /*Initialize the display buffer*/
static lv_disp_drv_t disp_drv; /*A variable to hold the drivers. Must be static or global.*/
lv_disp_drv_init(&disp_drv); /*Basic initialization*/
disp_drv.draw_buf = &draw_buf; /*Set an initialized buffer*/
disp_drv.flush_cb = disp_driver_flush; /*Set a flush callback to draw to the display*/
disp_drv.hor_res = 320; /*Set the horizontal resolution in pixels*/
disp_drv.ver_res = 240; /*Set the vertical resolution in pixels*/
lv_disp_drv_register(&disp_drv); /*Register the driver and save the created display objects*/
/*触摸屏输入接口配置*/
lv_indev_drv_t indev_drv;
lv_indev_drv_init(&indev_drv);
indev_drv.read_cb = touch_driver_read;
indev_drv.type = LV_INDEV_TYPE_POINTER;
lv_indev_drv_register(&indev_drv);
/* 创建一个定时器中断来进入 lv_tick_inc 给lvgl运行提供心跳 这里是10ms一次 主要是动画运行要用到 */
const esp_timer_create_args_t periodic_timer_args = {
.callback = &lv_tick_task,
.name = "periodic_gui"};
esp_timer_handle_t periodic_timer;
ESP_ERROR_CHECK(esp_timer_create(&periodic_timer_args, &periodic_timer));
ESP_ERROR_CHECK(esp_timer_start_periodic(periodic_timer, 10 * 1000));
lv_example_dragon_img();
while (1)
{
/* Delay 1 tick (assumes FreeRTOS tick is 10ms */
vTaskDelay(pdMS_TO_TICKS(10));
/* Try to take the semaphore, call lvgl related function on success */
if (pdTRUE == xSemaphoreTake(xGuiSemaphore, portMAX_DELAY))
{
lv_timer_handler();
xSemaphoreGive(xGuiSemaphore);
}
}
}
void app_main(void){
xTaskCreatePinnedToCore(gui_task, "gui task", 1024 * 4, NULL, 1, NULL, 0);
}
编译&烧录
cd ./software/exp24_esp32s3_lvgl9
alias esp-idf='docker run --rm --privileged -v $PWD:/project -w /project -it espressif/idf:release-v4.4 bash -c'
esp-idf "cd /project && idf.py build"
/opt/homebrew/bin/esptool.py -b 460800 --before default_reset --after hard_reset --chip esp32s3 write_flash --flash_mode dio --flash_size detect --flash_freq 80m 0x0 build/bootloader/bootloader.bin 0x8000 build/partition_table/partition-table.bin 0x10000 build/hello-world.bin
效果
| 显示图片 |
|---|
 |