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_9.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

To add LVGL to a C project, Digi recommends you copy the library’s repository 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_9.3.0.bb recipe’s sources has LVGL included in the source tree as a Git submodule. For more information, visit the Building LVGL 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_9.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 Basic Examples and Major Concepts 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_9.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 8M Nano.

The main recipe files, lvgl-demo_9.3.0.bb and lv-conf.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-conf.inc can be used in any LVGL recipe, 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_conf.h to select your configuration options. You can also use the logic of the lv-conf.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_9.3.0.bb recipe 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.