Since LVGL does not come packaged as shared libraries that are loaded at runtime, you can add it to C projects via static linking or by compiling it along with the rest of the project. The lvgl-demo_8.3.0.bb recipe provided in meta-digi-dey serves as reference for adding and configuring LVGL in your application.

Add LVGL to a C project

The meta-openembedded Yocto layer provides recipes for both lvgl and lv_drivers, as well as additional LVGL libraries. These recipes provide development packages containing the header files and static libraries you need to link the library to your project. However, many of LVGL’s configurations, especially the ones affecting lv_drivers, need to be set at build time, requiring you to patch and re-build the recipes to change the configuration.

To add LVGL to a C project, Digi recommends you copy the library’s repositories directly to your project’s source tree. You can then include the library’s directories in your Makefile so they get built along with your application. For example, the lvgl-demo_8.3.0.bb recipe’s sources have both lvgl and lv_drivers included in the source tree as Git submodules. For more information, visit the Set up a project section of the LVGL documentation.

Develop an LVGL application

Developing an LVGL application consists of two parts:

  • Back end: integrating the application in a specific environment: platform/OS, output display, or inputs. You can use Digi’s lvgl-demo_8.3.0.bb recipe as reference.

  • Front end: developing the UI and integrating it with your application’s logic. This is independent of the hardware used and is documented in LVGL’s official documentation. See the Quick overview and Overview sections for more. The UI designer SquareLine Studio also allows you to create LVGL UIs, preview them, and export them to C code.

Examine the LVGL demo

To gain a better understanding on how to configure LVGL for your own use case, you can examine the lvgl-demo_8.3.0.bb recipe in meta-digi-dey as well as the demo’s source code in GitHub. This demo is meant to provide reference implementations for different LVGL back ends. Digi recommends using our modifications for optimal performance on the ConnectCore 6UL.

The main recipe files, lvgl-demo_8.3.0.bb and lv-drivers.inc, export some LVGL configurations to the Yocto layer so they can be customized more easily. They also manage the dependencies needed for each back end, modifying the sources accordingly so that they link to the libraries required for the selected back end. lv-drivers.inc can be used in any recipe requiring lv_drivers, but you can also hardcode your preferred configuration directly in your project’s sources.

Configure LVGL for your use case

Digi recommends following these steps to configure the LVGL back end for your specific use case:

  1. Use the lvgl-demo to test different configuration combinations until you find one that best suits your use case.

  2. Modify lv_drv_conf.h and lv_conf.h to select your configuration options.

    LV_COLOR_DEPTH must have a value of 16 for the fbdev back end to work properly.

    You can also use the logic of the lv-drivers.inc file in meta-digi-dey to be able to switch configurations easily.

  3. Add the back-end initialization code to your application, using the lvgl-demo sources as reference. Make sure your project links to your selected back end’s required libraries.

Develop with LVGL GUI

The NXP tool GUI Guider provides an IDE for designing graphical embedded application user interfaces with drag-and-drop widgets. Visit GUI-GUIDER for more information.