Problem with ESP-IDF and Code Generated using LVGL Editor

What do you want to achieve?

I want to use code generated using the LVGL Editor version 0.3 with ESP-IDF framework, I tried and almost reached 99% state, but getting the following error.

What have you tried so far?

I tried commenting out this function, but then what I wanted to show is not visible, plus I tried to include the header files also, but nothing works, header file inclusion is also giving me an error.
Project CMake file is as below.

# The following lines of boilerplate have to be in your project's
# CMakeLists in this exact order for cmake to work correctly
cmake_minimum_required(VERSION 3.5)

include($ENV{IDF_PATH}/tools/cmake/project.cmake)
add_compile_options("-Wno-attributes") # For LVGL code
project(hello_world)

and the cmake file in main folder is as below.

# See the build system documentation in IDF programming guide
# for more information about component CMakeLists.txt files.

idf_component_register(
    SRCS main.c         # list the source files of this component
    gui_mng.c
    gui_mng_cfg.c
    hello_world_lvgl/screens/main_gen.c
    hello_world_lvgl/hello_world_lvgl_gen.c
    hello_world_lvgl/ui.c
    hello_world_lvgl/hello_world_lvgl.c
    hello_world_lvgl/fonts/Inter_SemiBold_ttf_data.c
    INCLUDE_DIRS        # optional, add here public include directories
    "." "hello_world_lvgl" "hello_world_lvgl/screens" ${LV_DEMO_DIR}
    PRIV_INCLUDE_DIRS   # optional, add here private include directories
    REQUIRES            # optional, list the public requirements (component names)
    PRIV_REQUIRES       # optional, list the private requirements
)

# Add the macro definition for this component
target_compile_definitions(${COMPONENT_LIB} PUBLIC LV_LVGL_H_INCLUDE_SIMPLE)

I am able to make LVGL working with ESP32P4 Evaulation Board without LVGL Editor Code, but the code generated by LVGL Editor is giving this build error which I am not able to fix.

Environment

  • ESP32P4 Function EV Board:
  • LVGL version: 9.3

Please suggest or an example project which uses ESP-IDF and LVGL Editor code, I will check myself.
If there is a working example of Code Generated using LVGL Editor and ESP-IDF framework working together, please share I will try to find my self the issue.

Hi @xpress_embedo,

Please check this project of mine where I have edited the CMakeLists.txt of the Editor project to be compatible with ESP-IDF

Mind that with the latest Editor release v1.1.0 (Releases · lvgl/lvgl_editor · GitHub) the CMakeLists.txt that the Editor generates will always be overwritten. SO you can not edit that one enymore.

What I’m doing now, I create a top level CMakeLists.txt that I can freely edit and add support for ESP-IDF. Let me share one I’ve been recently working:

# This basic file is used to compile the runtime for the Editor preview.
# It is also intended for you to customize it for your own target/project.

# Friendly name for this wrapper project (not the generated UI project name).
set(WRAPPER_PROJECT_NAME "watchface_lvgl_ui" CACHE STRING "CMake project name for this wrapper")

# Only set project if this is the top-level CMakeLists.txt (and not ESP-IDF)
if(NOT DEFINED IDF_PATH)
  if(CMAKE_SOURCE_DIR STREQUAL CMAKE_CURRENT_SOURCE_DIR)
    cmake_minimum_required(VERSION 3.10)
    project(${WRAPPER_PROJECT_NAME} C)
    set(IS_TOP_LEVEL TRUE)
  else()
    set(IS_TOP_LEVEL FALSE)
  endif()
endif()

# Generated UI project folder name (inside this repo).
set(UI_PROJECT_NAME "watchface_ui" CACHE STRING "Generated UI project folder name")

# Path to the generated LVGL UI project (exported by the Editor).
set(UI_DIR "${CMAKE_CURRENT_LIST_DIR}/${UI_PROJECT_NAME}" CACHE PATH "Path to generated LVGL UI project")
if(NOT EXISTS "${UI_DIR}/CMakeLists.txt")
  message(FATAL_ERROR "UI_DIR does not contain a CMakeLists.txt: ${UI_DIR}")
endif()

# Allow parent projects to override the UI library name.
set(UI_TARGET "lib-ui" CACHE STRING "UI library target name")
if(DEFINED LVGL_COMPONENT_LIB_NAME)
  set(UI_TARGET "${LVGL_COMPONENT_LIB_NAME}")
else()
  set(LVGL_COMPONENT_LIB_NAME "${UI_TARGET}")
endif()

# Prefer "lvgl.h" includes for generated UI headers.
option(UI_USE_LVGL_SIMPLE_INCLUDE "Use lvgl.h include style in UI sources" ON)

# Allow passing LVGL include dirs from the parent project (semicolon-separated).
set(UI_LVGL_INCLUDE_DIRS "" CACHE STRING "LVGL include dirs for UI (semicolon-separated)")
if(TARGET lvgl)
  get_target_property(_lvgl_includes lvgl INTERFACE_INCLUDE_DIRECTORIES)
  if(_lvgl_includes)
    list(APPEND UI_LVGL_INCLUDE_DIRS ${_lvgl_includes})
  endif()
endif()
if(NOT DEFINED COMMON_INCLUDE_DIRS AND UI_LVGL_INCLUDE_DIRS)
  set(COMMON_INCLUDE_DIRS ${UI_LVGL_INCLUDE_DIRS})
endif()

# Required custom sources (not part of the generated list).
set(UI_REQUIRED_SOURCES
#   "${UI_DIR}/custom/search_table_data.c"
)

# Optional extra sources you can extend without touching generated files.
set(UI_EXTRA_SOURCES
  "${UI_DIR}/custom/app_simulator.c"
)

if(DEFINED IDF_PATH)
  # === ESP-IDF Support ===
  include(${UI_DIR}/file_list_gen.cmake)
  include(${UI_DIR}/component_lib_list_gen.cmake)

  set(UI_SOURCES ${LV_EDITOR_PROJECT_SOURCES} ${UI_REQUIRED_SOURCES} ${UI_EXTRA_SOURCES})

  idf_component_register(
      SRCS ${UI_SOURCES}
      INCLUDE_DIRS "${UI_DIR}"
      REQUIRES lvgl
  )

  if(DEFINED LV_EDITOR_COMPONENT_LIB_LIST)
    target_link_libraries(${COMPONENT_LIB} PUBLIC ${LV_EDITOR_COMPONENT_LIB_LIST})
  endif()

  if(UI_USE_LVGL_SIMPLE_INCLUDE)
    target_compile_definitions(${COMPONENT_LIB} PUBLIC LV_LVGL_H_INCLUDE_SIMPLE)
  endif()
  target_compile_definitions(${COMPONENT_LIB} PUBLIC LV_CONF_INCLUDE_SIMPLE)

  # LVGL include dirs are provided by `REQUIRES lvgl`
else()
  # Bring in the generated UI project.
  add_subdirectory("${UI_DIR}" "${CMAKE_CURRENT_BINARY_DIR}/${UI_PROJECT_NAME}")

  if(NOT TARGET ${UI_TARGET})
    message(FATAL_ERROR "UI target not found: ${UI_TARGET}")
  endif()

  target_sources(${UI_TARGET} PRIVATE ${UI_REQUIRED_SOURCES} ${UI_EXTRA_SOURCES})

  if(UI_USE_LVGL_SIMPLE_INCLUDE)
    target_compile_definitions(${UI_TARGET} PUBLIC LV_LVGL_H_INCLUDE_SIMPLE)
  endif()
endif()

Basically I’m structuring the projects like this

watchface_lvgl_ui $ tree -L 2
.
├── CMakeLists.txt (TOP LEVEL CMakeLists.txt)
├── README.md
└── watchface_ui (THIS IS THE EDITOR PROJECT)
    ├── CMakeLists.txt
    ├── ......