Introduction into Little and Versatile Graphic Library (version 7):

The LVGL is great open-source embedded GUI library which is ease to implement to the different project with different hardware. It provide everything you need for creating of some embedded GUI with easy to use graphical elements, great visual effects and low memory footprint. Authors of that project constantly developing it, repair and give a support to users.

Good for start is visit their web site https:lvgl.io/. Here you can found all necessary things and of course a get-started page.

How to start with Mbed and its tools:

Online compiler

• Add your board to the online compiler - In this we will talk about ST board DISCO-F746NG
• Go to the Online compiler and create new project via New button top right
• Choose one of board what I mentioned above
• Choose Empty program as a template
• Give it a name of project and press OK
• Add current MbedOS version from github. Click on Import button or right click on project's folder and select Import Library >> From URL and place https://github.com/ARMmbed/mbed-os. With this method can be imported also another libraries from the github or Mbed web.
• Right click on the project's folder or again use New button and choose New file, type "main.cpp" and press OK.
• Optional - for Bare metal profile repeat the previous step and type "mbed_app.json", press OK and inside of that file put this code

{
    "requires": ["bare-metal"]
}

MbedStudio

• Run the studio and Login (current version is 0.7)
• Click on File top left on the application's main panel and select New Program...
• Choose Empty Mbed OS program and give it a name and press Add Program
• Let the studio download the MbedOS library that will take a time
• In dropdown menu top left make sure the target is board what I mentioned above
• Optional - for Bare metal profile click on File top left on the application's main panel or right click on project's folder and select New File. Type "mbed_app.json", press OK and inside of that file put in - same as above.
• Additional libraries you can import via the Libraries window (if it is not visible then check in the View on the application's main panel) in the bottom part of the application. Here click on + button and then simply put a github or Mbed web link, wait for a loading and press Finish

MbedStudio Online

• MbedStudio Online will be similar like MbedStudio IDE for desktop.

Import libraries into the project:

• With method descripted above for each tool, import the lvgl library from github via this link https://github.com/lvgl/lvgl into the project's folder.
• For demo GUI - you will need to import https://github.com/lvgl/lv_examples for running some examples. Also need to be imported into project's folder.
• In this step we need to import ST drivers for the F746NG to project's folder.
  • Link to BSP driver - https://os.mbed.com/teams/ST/code/BSP_DISCO_F746NG

Setup the lvgl library:

• From folder lvgl copy lv_conf_templ.h file into your project's folder and rename it to lv_conf.h
• For demo GUIs and so on, you need also additional config. From folder lv_examples copy lv_ex_conf_templ.h to the project's folder and rename it to lv_ex_conf.h

• Inside that lv_conf.h set at least LV_HOR_RES_MAX, LV_VER_RES_MAX and LV_COLOR_DEPTH macros. Itn context of DiscoF746NG
  • LV_HOR_RES_MAX 480
  • LV_VER_RES_MAX 272
  • LV_COLOR_DEPTH 32
• For demo GUI - In lv_ex_conf.h set macro LV_USE_DEMO_WIDGETS from 0 to 1

main.cpp setting:

• #Include the following:
  • lvgl/lvgl.h
  • lv_examples.h for the demo GUI
  • Also include necessary .h for display and touch screen driving

• In the main.cpp need to be periodically call via a ticker or a loop
  • lv_tick_inc(x) x are milliseconds (1 - 10ms).
  • lv_task_handler()

• As next need to be set some necessary things
  • initialize the touch screen according to the example programs from board's page That can be followed by a lv_indev_drv_t input driver struct for connect with your input device via callbacks.
  • initialize the display according to the example programs from board's page. That can be followed by initialization of a lv_init() function, its graphic driver struct for connect with your display device via some callbacks of lv_disp_drv_t. And as last add a lv_disp_buf_t as a buffer for that graphic library.

• And as last need to be call lv_demo_widgets();

Final code can look like this

#include "mbed.h"
#include "lvgl/lvgl.h"
#include "stm32f7xx.h"
#include "stm32746g_discovery.h"
#include "stm32746g_discovery_lcd.h"
#include "stm32746g_discovery_ts.h"
#include "lv_examples.h"

#define LVGL_TICK 5                             //Time tick value for lvgl in ms (1-10msa)
#define TICKER_TIME 0.001 * LVGL_TICK           //modified to miliseconds

Ticker ticker;                                  //Initialize your system tick                    
TS_StateTypeDef TS_State;  

void lv_ticker_func();
void display_init(void);
void touchpad_init(void);
static void my_disp_flush_cb(lv_disp_drv_t* disp_drv, const lv_area_t* area, lv_color_t* color_p);
static bool touchpad_read(lv_indev_drv_t *indev, lv_indev_data_t *data);

int main()
{
    printf("LittlevGL DEMO");
    display_init();
    touchpad_init();
    ticker.attach(callback(&lv_ticker_func),TICKER_TIME);

     lv_demo_widgets();

    while(1);
}

void lv_ticker_func(){
    lv_tick_inc(LVGL_TICK); 
    //Call lv_tick_inc(x) every x milliseconds in a Timer or Task (x should be between 1 and 10). 
    //It is required for the internal timing of LittlevGL.
    lv_task_handler(); 
    //Call lv_task_handler() periodically every few milliseconds. 
    //It will redraw the screen if required, handle input devices etc.
}

void display_init(void){
    //Init the touch screen display via the BSP driver. Based on ST's example.
    BSP_LCD_Init();
    BSP_LCD_LayerDefaultInit(0, LCD_FB_START_ADDRESS);
    BSP_LCD_DisplayOn();
    BSP_LCD_SelectLayer(0);
    BSP_LCD_Clear(LCD_COLOR_TRANSPARENT );
    BSP_LCD_SetFont(&LCD_DEFAULT_FONT);
    BSP_LCD_SetBackColor(LCD_COLOR_WHITE);
    BSP_LCD_SetTextColor(LCD_COLOR_DARKBLUE);
    
    lv_init();                                  //Initialize the LittlevGL
    static lv_disp_buf_t disp_buf;
    static lv_color_t buf[LV_HOR_RES_MAX * 10]; //Declare a buffer for 10 lines                                                              
    lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10); //Initialize the display buffer
    
    //Implement and register a function which can copy a pixel array to an area of your display
    lv_disp_drv_t disp_drv;                     //Descriptor of a display driver
    lv_disp_drv_init(&disp_drv);                //Basic initialization
    disp_drv.flush_cb = my_disp_flush_cb;       //Set your driver function
    disp_drv.buffer = &disp_buf;                //Assign the buffer to the display
    lv_disp_drv_register(&disp_drv);            //Finally register the driver
}

void my_disp_flush_cb(lv_disp_drv_t* disp_drv, const lv_area_t* area, lv_color_t* color_p)
{
    //The most simple case (but also the slowest) to put all pixels to the screen one-by-one
    uint16_t x, y;
    for(y = area->y1; y <= area->y2; y++) {
        for(x = area->x1; x <= area->x2; x++) {
            //put_px(x, y, *color_p)
            BSP_LCD_DrawPixel( x, y, color_p->full);
            color_p++;
        }
    }
    //IMPORTANT!!!* Inform the graphics library that you are ready with the flushing
    lv_disp_flush_ready(disp_drv);
}


void touchpad_init(void){
    BSP_TS_Init(480, 272);
    lv_indev_drv_t indev_drv;                       //Descriptor of an input device driver
    lv_indev_drv_init(&indev_drv);                  //Basic initialization
    indev_drv.type = LV_INDEV_TYPE_POINTER;         //The touchpad is pointer type device
    indev_drv.read_cb = touchpad_read;              //Set the touchpad_read function
    lv_indev_drv_register(&indev_drv);              //Register touch driver in LvGL
}

static bool touchpad_read(lv_indev_drv_t *indev, lv_indev_data_t *data){
    // Read your touchpad
    BSP_TS_GetState(&TS_State);
    if(TS_State.touchDetected) {
        data->point.x = TS_State.touchX[0];
        data->point.y = TS_State.touchY[0];
        data->state = LV_INDEV_STATE_PR;
    } else {
        data->point.x = 0;
        data->point.y = 0;
        data->state = LV_INDEV_STATE_REL;
    }
    return false;   //false: no more data to read because we are no buffering
}

Or advanced version using GPU (Updated to MbedOS 6.10 and LVGL 7.11)

The LVGL few weeks ago also started with self GUI editor (currently beta) - Introducing LVGL's UI editor - Edgeline, for more information you can visit Edgeline section of LVGL forum.

I hope that will help to start. GL & HF