How start with the LVGL on the Disco F746NG with Mbed

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 Here you can found all necessary things and of course a get-started page.


If you are familiar with Mbed tools basics just follow instraction from the LittlevGL documentation.

How to start with Mbed and its tools:


Experts can skip that basics :)

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 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"]


  • 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:

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


All config or porting .c or .h files need to be enabled firstly. Open it and set the macro #if statemet form 0 to 1

  • 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
  • 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");



void lv_ticker_func(){
    //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.
    //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_LayerDefaultInit(0, LCD_FB_START_ADDRESS);
    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);
    //IMPORTANT!!!* Inform the graphics library that you are ready with the flushing

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
    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)

Import programDISCO-F746NG_MbedOs_LvGL_example

Example of using the LVGL (8.3.4) with the MbedOS (6.16 - bare metal) on the Disco-F746NG board

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

6 comments on How start with the LVGL on the Disco F746NG with Mbed:

16 Apr 2020

Hi Mr. Kamidra,

We are having some trouble with littleVGL on STM32F407 with Mbed. When updating display, there seems to be always an extra vertical line after the updated text. Underscored in attached picture after15.

Did you run into such problem?


17 Apr 2020

Dear Zhiyong Li,

we will discuss in your post on the Mbed forum.

BR, Jan

25 May 2020


I'm trying to run the demo but I don't know where to find demo.h.

Do I need to paste it from a specific folder ?


27 May 2020

Hi Adrien,

at the moment the page is not actual with latest LVGL. How you can see I made last update on version 6.x of LvGL at 16 Apr 2020. But 18.5.2020 was released new version (7) of LVGL. I must do some work and update my examples and the guide, I will make the update ASAP. However, you can still download my example which is still based on LvGL6.x.

However, you need to have lv_examples library. I wrote about it in the section "Import libraries into the project" of the guide and its second point "For demo GUI". The demo.h file is come from \ lv_examples\lv_apps\demo\demo.h.

But how I wrote above 18.5.2020 was released new version so if you download latest version of LVGL, there is no demo.h and you need to make some change:

  • #include "demo.h" change to #include "lv_examples.h"
  • create_demo(); change to lv_demo_widgets();

Documetation of LVGL 7

BR, Jan

16 Oct 2020

Has anyone gotten LVGL v7 to run on mbed OS6 on the F429? Would appreciate some assistance if anyone can help.

16 Oct 2020

Hello David,

I do not have this hardware but I think the basic will be similar like the snipe of code above. You only need correct libraries and setting of the display from But here is not good place to talk about it, just visit the forum.

BR, Jan

Please log in to post comments.