How to run LVGL on M5Stack



  • I'll try to create a GitHub repository tonight in order to reproduce it easily, and help people if we can make it works :p



  • I did not take the same approach because I am not using the M5.Lcd class but TFT_eSPI
    What I understand is that M5.Lcd is also based on TFT_eSPI but M5Stack did their own implementation.
    As I want full portability on my other displays and ESP boards I decided not to use M5.Lcd.
    However it should work in your case.
    From what I see you are missing several initialization steps and I guess this is the reason why it is not working

    Here is a sample you can use:

    #include "M5Core2.h"
    #include "lvgl.h"
    #include "MyLVEventHandler.h"

    #define DISP_HOR_RES 320
    #define DISP_VER_RES 240

    TFT_eSPI tft = TFT_eSPI(DISP_HOR_RES, DISP_VER_RES);

    static lv_disp_draw_buf_t draw_buf;

    void tft_lv_initialization()
    {

    lv_init();
    
    static lv_color_t buf1[(DISP_HOR_RES * DISP_VER_RES) / 10]; /*Declare a buffer for 1/10 screen size*/
    static lv_color_t buf2[(DISP_HOR_RES * DISP_VER_RES) / 10]; // second buffer is optionnal
    
    lv_disp_draw_buf_init(&draw_buf, buf1, buf2, (DISP_HOR_RES * DISP_VER_RES) / 10); // Initialize `disp_buf` display buffer with the buffer(s). With only one buffer use NULL instead buf_2
    
    tft.begin();        // TFT init
    tft.setRotation(1); // 1=horizontal 3=upside down 0=left 2=right
    

    }

    // Display flushing
    void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
    {
    uint32_t w = (area->x2 - area->x1 + 1);
    uint32_t h = (area->y2 - area->y1 + 1);

    tft.startWrite();
    tft.setAddrWindow(area->x1, area->y1, w, h);
    tft.pushColors(&color_p->full, w * h, true);
    tft.endWrite();
    
    lv_disp_flush_ready(disp);
    

    }

    void init_disp_driver()
    {

    // Initialize the display
    static lv_disp_drv_t disp_drv;     /*Descriptor of a display driver / //disp_drv.full_refresh = true;  direct mode can also be set true*/
    lv_disp_drv_init(&disp_drv);       /*Basic initialization*/
    disp_drv.flush_cb = my_disp_flush; /*Set your driver function*/
    disp_drv.draw_buf = &draw_buf;     /*Assign the buffer to the display*/
    disp_drv.hor_res = DISP_HOR_RES;   /*Set the horizontal resolution of the display*/
    disp_drv.ver_res = DISP_VER_RES;   /*Set the vertical resolution of the display*/
    lv_disp_drv_register(&disp_drv);   /*Finally register the driver*/
    

    }



  • It seems you're not using the latest version of lvgl (the 8)

    I'm trying to make it work here: https://github.com/PierreRambaud/drawing-board



  • lol I'm from Toulouse :)

    Yes I am using version 8, what makes you think otherwise?
    I'll have a look at your GitHub files ;)



  • @got said in How to run LVGL on M5Stack:

    lv_conf.h

    btw as you've already guessed, you have to tweak the lvgl_conf.h file otherwise it won't probably work out of the box



  • @erich haha that's funny how the world is really small ^^

    About the version 8, my bad, I was thinking about something else, I add an error with:
    tft.pushColors(&color_p->full, w * h, true);
    I had to change it to:
    tft.pushColors((uint16_t*) &color_p->full, w * h, true);

    here's my lv_conf.h

    /**
     * @file lv_conf.h
     * Configuration file for v8.0.2
     */
    
    /*
     * COPY THIS FILE AS `lv_conf.h` NEXT TO the `lvgl` FOLDER
     */
    
    #if 1 /*Set it to "1" to enable content*/
    
    #ifndef LV_CONF_H
    #define LV_CONF_H
    /*clang-format off*/
    
    #include <stdint.h>
    
    #define LV_HOR_RES_MAX 320
    #define LV_VER_RES_MAX 240
    /*====================
       COLOR SETTINGS
     *====================*/
    
    /*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
    #define LV_COLOR_DEPTH     32
    
    /*Swap the 2 bytes of RGB565 color. Useful if the display has a 8 bit interface (e.g. SPI)*/
    #define LV_COLOR_16_SWAP   0
    
    /*Enable more complex drawing routines to manage screens transparency.
     *Can be used if the UI is above another layer, e.g. an OSD menu or video player.
     *Requires `LV_COLOR_DEPTH = 32` colors and the screen's `bg_opa` should be set to non LV_OPA_COVER value*/
    #define LV_COLOR_SCREEN_TRANSP    0
    
    /*Images pixels with this color will not be drawn if they are  chroma keyed)*/
    #define LV_COLOR_CHROMA_KEY    lv_color_hex(0x00ff00)         /*pure green*/
    
    /*=========================
       MEMORY SETTINGS
     *=========================*/
    
    /*1: use custom malloc/free, 0: use the built-in `lv_mem_alloc()` and `lv_mem_free()`*/
    #define LV_MEM_CUSTOM      0
    #if LV_MEM_CUSTOM == 0
    /*Size of the memory available for `lv_mem_alloc()` in bytes (>= 2kB)*/
    #  define LV_MEM_SIZE    (32U * 1024U)          /*[bytes]*/
    
    /*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*/
    #else       /*LV_MEM_CUSTOM*/
    #  define LV_MEM_CUSTOM_INCLUDE <stdlib.h>   /*Header for the dynamic memory function*/
    #  define LV_MEM_CUSTOM_ALLOC     malloc
    #  define LV_MEM_CUSTOM_FREE      free
    #  define LV_MEM_CUSTOM_REALLOC   realloc
    #endif     /*LV_MEM_CUSTOM*/
    
    /*Use the standard `memcpy` and `memset` instead of LVGL's own functions. (Might or might not be faster).*/
    #define LV_MEMCPY_MEMSET_STD    0
    
    /*====================
       HAL SETTINGS
     *====================*/
    
    /*Default display refresh period. LVG will redraw changed ares with this period time*/
    #define LV_DISP_DEF_REFR_PERIOD     30      /*[ms]*/
    
    /*Input device read period in milliseconds*/
    #define LV_INDEV_DEF_READ_PERIOD    30      /*[ms]*/
    
    /*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*/
    #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]*/
    
    /*=======================
     * FEATURE CONFIGURATION
     *=======================*/
    
    /*-------------
     * Drawing
     *-----------*/
    
    /*Enable complex draw engine.
     *Required to draw shadow, gradient, rounded corners, circles, arc, skew lines, image transformations or any masks*/
    #define LV_DRAW_COMPLEX 1
    #if LV_DRAW_COMPLEX != 0
    
    /*Allow buffering some shadow calculation.
     *LV_SHADOW_CACHE_SIZE is the max. shadow size to buffer, where shadow size is `shadow_width + radius`
     *Caching has LV_SHADOW_CACHE_SIZE^2 RAM cost*/
    #define LV_SHADOW_CACHE_SIZE    0
    #endif /*LV_DRAW_COMPLEX*/
    
    /*Default image cache size. Image caching keeps the images opened.
     *If only the built-in image formats are used there is no real advantage of caching. (I.e. if no new image decoder is added)
     *With complex image decoders (e.g. PNG or JPG) caching can save the continuous open/decode of images.
     *However the opened images might consume additional RAM.
     *0: to disable caching*/
    #define LV_IMG_CACHE_DEF_SIZE       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)
    /*-------------
     * GPU
     *-----------*/
    
    /*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 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
    
    /*-------------
     * Logging
     *-----------*/
    
    /*Enable the log module*/
    #define LV_USE_LOG      1
    #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
    
    /*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
    
    #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 in the right bottom corner*/
    #define LV_USE_PERF_MONITOR     0
    
    /*1: Show the used memory and the memory fragmentation  in the left bottom corner
     * Requires LV_MEM_CUSTOM = 0*/
    #define LV_USE_MEM_MONITOR      0
    
    /*1: Draw random colored rectangles over the redrawn areas*/
    #define LV_USE_REFR_DEBUG       0
    
    /*Change the built in (v)snprintf functions*/
    #define LV_SPRINTF_CUSTOM   0
    #if LV_SPRINTF_CUSTOM
    #  define LV_SPRINTF_INCLUDE <stdio.h>
    #  define lv_snprintf     snprintf
    #  define lv_vsnprintf    vsnprintf
    #else   /*LV_SPRINTF_CUSTOM*/
    #  define LV_SPRINTF_USE_FLOAT 0
    #endif  /*LV_SPRINTF_CUSTOM*/
    
    #define LV_USE_USER_DATA      1
    
    /*Garbage Collector settings
     *Used if lvgl is binded 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*/
    
    /*=====================
     *  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
    
    /*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
    
    /*Complier 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
    
    /*Prefix variables that are used in GPU accelerated operations, often these need to be placed in RAM sections that are DMA accessible*/
    #define LV_ATTRIBUTE_DMA
    
    /*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     0
    #define LV_FONT_MONTSERRAT_10    0
    #define LV_FONT_MONTSERRAT_12    0
    #define LV_FONT_MONTSERRAT_14    1
    #define LV_FONT_MONTSERRAT_16    0
    #define LV_FONT_MONTSERRAT_18    0
    #define LV_FONT_MONTSERRAT_20    0
    #define LV_FONT_MONTSERRAT_22    0
    #define LV_FONT_MONTSERRAT_24    0
    #define LV_FONT_MONTSERRAT_26    0
    #define LV_FONT_MONTSERRAT_28    0
    #define LV_FONT_MONTSERRAT_30    0
    #define LV_FONT_MONTSERRAT_32    0
    #define LV_FONT_MONTSERRAT_34    0
    #define LV_FONT_MONTSERRAT_36    0
    #define LV_FONT_MONTSERRAT_38    0
    #define LV_FONT_MONTSERRAT_40    0
    #define LV_FONT_MONTSERRAT_42    0
    #define LV_FONT_MONTSERRAT_44    0
    #define LV_FONT_MONTSERRAT_46    0
    #define LV_FONT_MONTSERRAT_48    0
    
    /*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 0  /*Hebrew, Arabic, Perisan letters and all their forms*/
    #define LV_FONT_SIMSUN_16_CJK            0  /*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 subpixel rendering*/
    #define LV_USE_FONT_SUBPX       0
    #if LV_USE_FONT_SUBPX
    /*Set the pixel order of the display. Physical order of RGB channels. Doesn't matter with "normal" fonts.*/
    #define LV_FONT_SUBPX_BGR       0  /*0: RGB; 1:BGR order*/
    #endif
    
    /*=================
     *  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 Bidirectioanl 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
    
    /*==================
     *  WIDGET USAGE
     *================*/
    
    /*Documentation of the widgets: https://docs.lvgl.io/latest/en/html/widgets/index.html*/
    
    #define LV_USE_ARC          1
    
    #define LV_USE_ANIMIMG	    1
    
    #define LV_USE_BAR          1
    
    #define LV_USE_BTN          1
    
    #define LV_USE_BTNMATRIX    1
    
    #define LV_USE_CANVAS       1
    
    #define LV_USE_CHECKBOX     1
    
    
    #define LV_USE_DROPDOWN     1   /*Requires: lv_label*/
    
    #define LV_USE_IMG          1   /*Requires: lv_label*/
    
    #define LV_USE_LABEL        1
    #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_LINE         1
    
    #define LV_USE_ROLLER       1   /*Requires: lv_label*/
    #if LV_USE_ROLLER
    #  define LV_ROLLER_INF_PAGES       7   /*Number of extra "pages" when the roller is infinite*/
    #endif
    
    #define LV_USE_SLIDER       1   /*Requires: lv_bar*/
    
    #define LV_USE_SWITCH    1
    
    #define LV_USE_TEXTAREA   1     /*Requires: lv_label*/
    #if LV_USE_TEXTAREA != 0
    #  define LV_TEXTAREA_DEF_PWD_SHOW_TIME     1500    /*ms*/
    #endif
    
    #define LV_USE_TABLE  1
    
    /*==================
     * EXTRA COMPONENTS
     *==================*/
    
    /*-----------
     * Widgets
     *----------*/
    #define LV_USE_CALENDAR     1
    #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_CHART        1
    
    #define LV_USE_COLORWHEEL   1
    
    #define LV_USE_IMGBTN       1
    
    #define LV_USE_KEYBOARD     1
    
    #define LV_USE_LED          1
    
    #define LV_USE_LIST         1
    
    #define LV_USE_METER        1
    
    #define LV_USE_MSGBOX       1
    
    #define LV_USE_SPINBOX      1
    
    #define LV_USE_SPINNER      1
    
    #define LV_USE_TABVIEW      1
    
    #define LV_USE_TILEVIEW     1
    
    #define LV_USE_WIN          1
    
    #define LV_USE_SPAN         1
    #if LV_USE_SPAN
    /*A line text can contain maximum num of span descriptor */
    #  define LV_SPAN_SNIPPET_STACK_SIZE   64
    #endif
    
    /*-----------
     * Themes
     *----------*/
    /*A simple, impressive and very complete theme*/
    #define LV_USE_THEME_DEFAULT    1
    #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_TRANSITON_TIME    80
    #endif /*LV_USE_THEME_DEFAULT*/
    
    /*An very simple them that is a good starting point for a custom theme*/
     #define LV_USE_THEME_BASIC    1
    
    /*A theme designed for monochrome displays*/
    #define LV_USE_THEME_MONO       1
    
    /*-----------
     * Layouts
     *----------*/
    
    /*A layout similar to Flexbox in CSS.*/
    #define LV_USE_FLEX     1
    
    /*A layout similar to Grid in CSS.*/
    #define LV_USE_GRID     1
    
    /*==================
    * EXAMPLES
    *==================*/
    
    /*Enable the examples to be built with the library*/
    #define LV_BUILD_EXAMPLES   1
    
    /*--END OF LV_CONF_H--*/
    
    #endif /*LV_CONF_H*/
    
    #endif /*End of "Content enable"*/
    

    I'll try to play with this configuration, thanks for helping me!



  • I found something interesting:

    
    rst:0xc (SW_CPU_RESET),boot:0x17 (SPI_FAST_FLASH_BOOT)
    configsip: 0, SPIWP:0xee
    clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
    mode:DIO, clock div:1
    load:0x3fff0018,len:4
    load:0x3fff001c,len:1044
    load:0x40078000,len:10124
    load:0x40080400,len:5856
    entry 0x400806a8
    Guru Meditation Error: Core  0 panic'ed (LoadProhibited). Exception was unhandled.
    Core 0 register dump:
    PC      : 0x400d864f  PS      : 0x00060b30  A0      : 0x800d7c45  A1      : 0x3ffe3a10  
    A2      : 0x00000000  A3      : 0x3ffba588  A4      : 0x00000120  A5      : 0x00003400  
    A6      : 0xffffffff  A7      : 0x00000000  A8      : 0x3ffcfdcc  A9      : 0x00000020  
    A10     : 0x00000000  A11     : 0x40086244  A12     : 0x00000000  A13     : 0x00000120  
    A14     : 0x00000001  A15     : 0x00000120  SAR     : 0x00000011  EXCCAUSE: 0x0000001c  
    EXCVADDR: 0x00000022  LBEG    : 0x400888a4  LEND    : 0x400888c0  LCOUNT  : 0xffffffff  
    
    ELF file SHA256: 0000000000000000
    
    Backtrace: 0x400d864f:0x3ffe3a10 0x400d7c42:0x3ffe3a30 0x400f2833:0x3ffe3a50 0x400d1585:0x3ffe3a70 0x400d15fe:0x3ffe3a90 0x400d1b9d:0x3ffe3ab0 0x4010a0ef:0x3ffe3bb0 0x40082c8d:0x3ffe3bd0 0x40082eb4:0x3ffe3c20 0x40079247:0x3ffe3c40 0x400792ad:0x3ffe3c70 0x400792b8:0x3ffe3ca0 0x40079465:0x3ffe3cc0 0x400806da:0x3ffe3df0 0x40007c15:0x3ffe3eb0 0x4000073d:0x3ffe3f20
    
    Rebooting...
    

    I think, I've a lot of things to learn about Cpp and its ecosystem before continue ^^'



  • Honestly I started off reading the LVGL online help and even though I am still learning I did not have much problem making the lib work on the Core2.
    However I spent some significant time before understanding the whole concept (probably because I am getting too old :) ) and you seem to be way more experienced than me so you will make it work quickly :)

    My GitHub project is private (because it might end up being commercially used) but if you want I can extract the minimum code I used to display something if it can help and make it public.

    By looking at the error (If I remember I got more or less the same) this looks like invalide pointer / memory allocation.

    I realized that just initializing everything for LVGL to work is a real pain (when you've never played with it) but after you've understood the basic concepts it comes much clearer.
    At this stage all basic things are working fine I am now moving on to Event management (button press, sliders move etc...).

    Btw you can also have a look at the EdgeLine application which is a kind of LVGL companion allowing you to WYSIWYG to C/Python code automatically for you. I am very bad at designing UIs so I am starting using it for my project and it can also help you understand the code which is generated.



  • Haha, thank you, but I started learning C/C++ this Monday 👀
    I'll try to investigate more about pointers /memory exceptions.
    Everything I'll do will be on my GitHub in public repositories, my aim is to create a Tamagotchi for my daughter ^^'



  • FYI, I correctly display a button, I have many things left to do next, like finding the reason why my DrawingBoard.cpp pointers are badly set, but in the end, you help me a lot!
    Thanks again!

    For people reading this, I'll do my best to improve my GitHub repository in order to have a simple example for M5Core, explaining which parameters must be configured in lv_conf.h :)



  • Hi Pierre,

    Sorry I don't feel I did much for you but my (real) work is really taking much of my time (even what is supposed to be my free time) and I wish I could have spent more time working this out with you.
    In any case my offer still stands, I can help you building up a simple template with comments for people to get started.
    I already spent much time on it and I believe I have understood all the basic concepts .
    As already said, now i need to go one step further with event management.
    Also I am quite used to code in C (this is the language I started with a loooong time ago) I am not an expert but at least I can understand the most of what I do :)
    Btw a good platform that I have adopted now since several months is VSCode + PIO...Very neat combination!



  • I will omit the details,
    Currently, M5Stack Core2 is working with LVGL v8.1.0 and Arduino IDE.

    0_1641616885852_LVGL_8.1.0_Core2.jpg

    About lv_conf.h
    The following three settings are required.

    lvgl-master v8.1.0 / src / lv_conf.h

    1. /* clang-format off */
      #if 1 /Set it to "1" to enable content/

    2. #define LV_COLOR_DEPTH 16

    3. #define LV_TICK_CUSTOM 1
      #if LV_TICK_CUSTOM
      #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"



  • Thank you @macsbug , this is exactly what I add to edit in my lv_conf.h in order to make it works!
    https://github.com/PierreRambaud/drawing-board/blob/master/drawing-board.ino#L4

    @erich I updated my repository, it now works, but not as expected. I've two issues:

    • I'm not able to change the label text each time I press a button (the reason of the seg fault)
    • I'm not able to draw on the right side like the lvgl take the wrong space, or the tft I don't know yet which one ^^'

    After that, everything will be ok (at least for this first project)

    As you said, a good platform for development is the key, I work with emacs for years, but I never configured it for C language.
    I've Arduino software open beside, only to compile & transfer.



  • Thank you @GoT , This is a great program.
    0_1641678571847_Got.jpg
    Thank you for publishing to github.

    problem

    1. not able to change the label text.
    2. The right side cannot be drawn.

    Change DrawingBoard.cpp.

    static lv_style_t style_color_label;
    static lv_style_t style_size_label;
    static lv_style_t style_clear_label;
    static lv_style_t style_label;

    void DrawingBoard::setup() {
    //lv_obj_t* _size_label = lv_label_create(lv_scr_act());
    _size_label = lv_label_create(lv_scr_act());

    //lv_obj_add_style(_size_label, &style_label, 0);
    lv_obj_add_style(_size_label, &style_size_label, 0);

    //lv_obj_add_style(_clear_label, &style_label, 0);
    lv_obj_add_style(_clear_label, &style_clear_label, 0);

    void DrawingBoard::drawPoint(int32_t x, int32_t y) {
    //_tft.drawCircle(x, y, _size, getColor());
    //_tft.fillCircle(x, y, _size, getColor());
    M5.Lcd.drawCircle(x, y, _size, getColor());
    M5.Lcd.fillCircle(x, y, _size, getColor());

    void DrawingBoard::changeSize() {
    //lv_label_set_text_fmt(_size_label, "Size: %d", _size);
    lv_label_set_text_fmt(_size_label, "Size: %d", _size);

    void DrawingBoard::clear() {
    //_tft.fillScreen(TFT_BLACK);
    M5.Lcd.fillScreen(TFT_WHITE);

    postscript:
    All 'tft's are possible with 'M5.Lcd'.
    It is possible with M5.Lcd without using TFT_eSPI.
    Development environment: LVGL 8.1.0 + Arduino IDE 1.8.19



  • @macsbug you're right, I did mention using TFT_eSPI instead of M5.Lcd only for portability reason.
    I would like to create a set of sample files that I can use with any display and not only with M5Stack devices.



  • OMG, it works as expected! <3
    If both of you have GitHub account, I'd be glad to add you as credit for the awesome help!



  • Great, I'm glad it works for you!
    I don't feel I did much to help but anyways here is my GH account: https://github.com/erich74
    At the moment I juste have a couple of private reps but I am planning to add public stuff when I get more used to M5Stack devices as this is becoming my main development/iot device platform.
    I will come back to this thread as I will probably need some help when I progress with my current project ;)



  • @erich you did more than you think.
    Feel free to ask when you will need it, if the M5Core2 is enough to run your program, I would be glad to help as you did



  • @got thanks, I will for sure ;)



  • Here is what I came up with (and works with lvgl/lvgl 8.1 on my Core 2).

    #include <M5Core2.h>
    #include <Arduino.h>
    #include <lvgl.h>
    #include <Wire.h>
    #include <SPI.h>
    
    // init the tft espi
    static lv_disp_draw_buf_t draw_buf;
    static lv_disp_drv_t disp_drv;  // Descriptor of a display driver
    static lv_indev_drv_t indev_drv; // Descriptor of a touch driver
    
    M5Display *tft;
    
    static void ta_event_cb(lv_event_t * e);
    static lv_obj_t * kb;
    
    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);
        if(code == LV_EVENT_CLICKED || code == LV_EVENT_FOCUSED) {
            /*Focus on the clicked text area*/
            if(kb != NULL) lv_keyboard_set_textarea(kb, ta);
        }
    
        else if(code == LV_EVENT_READY) {
            LV_LOG_USER("Ready, current text: %s", lv_textarea_get_text(ta));
        }
    }
    
    static void btnPowerOff_event(lv_event_t * event)
    {
        M5.Axp.PowerOff();
    }
    
    void tft_lv_initialization() {
      M5.begin();
    
      lv_init();
    
      static lv_color_t buf1[(LV_HOR_RES_MAX * LV_VER_RES_MAX) / 10];  // Declare a buffer for 1/10 screen siz
      static lv_color_t buf2[(LV_HOR_RES_MAX * LV_VER_RES_MAX) / 10];  // second buffer is optionnal
    
      // Initialize `disp_buf` display buffer with the buffer(s).
      lv_disp_draw_buf_init(&draw_buf, buf1, buf2, (LV_HOR_RES_MAX * LV_VER_RES_MAX) / 10);
    
      tft = &M5.Lcd;
    }
    
    // Display flushing
    void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
      uint32_t w = (area->x2 - area->x1 + 1);
      uint32_t h = (area->y2 - area->y1 + 1);
    
      tft->startWrite();
      tft->setAddrWindow(area->x1, area->y1, w, h);
      tft->pushColors((uint16_t *)&color_p->full, w * h, true);
      tft->endWrite();
    
      lv_disp_flush_ready(disp);
    }
    
    void init_disp_driver() {
      lv_disp_drv_init(&disp_drv);  // Basic initialization
    
      disp_drv.flush_cb = my_disp_flush;  // Set your driver function
      disp_drv.draw_buf = &draw_buf;      // Assign the buffer to the display
      disp_drv.hor_res = LV_HOR_RES_MAX;  // Set the horizontal resolution of the display
      disp_drv.ver_res = LV_VER_RES_MAX;  // Set the vertical resolution of the display
    
      lv_disp_drv_register(&disp_drv);                   // Finally register the driver
      lv_disp_set_bg_color(NULL, lv_color_hex3(0x000));  // Set default background color to black
    }
    
    void my_touchpad_read(lv_indev_drv_t * drv, lv_indev_data_t * data)
    {
      TouchPoint_t pos = M5.Touch.getPressPoint();
      bool touched = ( pos.x == -1 ) ? false : true;  
    
      if(!touched) {    
        data->state = LV_INDEV_STATE_RELEASED;
      } else {
        data->state = LV_INDEV_STATE_PRESSED; 
        data->point.x = pos.x;
        data->point.y = pos.y;
      }
    }
    
    void init_touch_driver() {
      lv_disp_drv_register(&disp_drv);
    
      lv_indev_drv_init(&indev_drv);
      indev_drv.type = LV_INDEV_TYPE_POINTER;
      indev_drv.read_cb = my_touchpad_read;
      lv_indev_t * my_indev = lv_indev_drv_register(&indev_drv);  // register
    }
    
    void setup()
    {
      tft_lv_initialization();
      init_disp_driver();
      init_touch_driver();
    
      lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
      lv_obj_t * label = lv_label_create(btn1);
      lv_obj_align(btn1, LV_ALIGN_CENTER, 0, 0);
      lv_label_set_text(label, "Power Off");
      lv_obj_center(label);
      lv_obj_add_event_cb(btn1, btnPowerOff_event, LV_EVENT_CLICKED, NULL);
    }
    
    void loop()
    {
      M5.update();
      lv_task_handler();
    }