Skip to main content
Version: BSP 7.x.y

LVGL on Toradex Linux BSP

Introduction​

This article provides general information and instructions for Graphical User Interfaces (GUIs) development with LVGL on images built on top of the Toradex Linux BSP.

LVGL stands for Light and Versatile Graphics Library. It's a popular free and open-source embedded graphics library that can be used on Toradex's Systems on Modules and also with Torizon OS.

If you want to use LVGL on TorizonOS, please follow the instructions on the LVGL on TorizonOS article.

Prerequisites​

You must have one of the Toradex Modules with support for LVGL:

Besides, if you want to use the Cross-Compilation Examples, you will need to use one of the Toradex Reference Images, which can be downloaded on this page.

Cross-Compilation Examples​

On this section we provide access dedicated repositories with step-by-step instructions for running cross-compiled LVGL applications for the following Toradex System on Modules:

Using Yocto​

It is also possible to build a custom image by creating an Yocto recipe for running applications using LVGL.

You can find more information on how you can prepare your environment and follow the instructions on this article to understand how to build Reference Images using Yocto.

Yocto Recipe Example Using Verdin AM62​

warning

The following example aims to provide a reference documentation to integrate the code from the cross compilation examples provided by LVGL with Yocto. Even though this was tested at the moment of writing this article, it is not being actively maintained, and therefore, it may not provide an out-of-the-box experience.

For the rest of the article, we will assume you followed the instructions available on Host Machine Setup for Building with Yocto and executed the repo sync command on the oe-core folder.

For this example, we will create a new layer containing the recipes for compiling the lvglsim application, using the source code from the cross compilation example repositories. If you don't know how to create layers on Yocto, check Custom Meta Layers, Recipes and Images in Yocto Project for more information.

Create and add a new layer with the following commands:

$ bitbake-layers create-layer layers/meta-lvgl-am62
$ bitbake-layers add-layer layers/meta-lvgl-am62

After that, you need to create the recipe files lv-port-verdin-am62.bb and tdx-reference-multimedia-image.bbappend which contain instructions to compile the application.

Please create the following folder structure on your meta-lvgl-am62 layer directory:

.
├── conf
│   └── layer.conf
├── README
├── recipes-graphics
│   └── lv-port-verdin-am62
│       ├── COPYING.MIT
│       └── lv-port-verdin-am62.bb
└── recipes-images
    └── images
        └── tdx-reference-multimedia-image.bbappend

After creating the files and folders on the indicated places, add the following content on them:

lv-port-verdin-am62.bb
SUMMARY = "Recipe to install lvglsim application using Verdin AM62"
LICENSE = "MIT"
LIC_FILES_CHKSUM = "file://${WORKDIR}/COPYING.MIT;md5=04026fa0bcdc69bf6b9e72d6c96e25ae"

inherit cmake pkgconfig

SRC_URI = " \
    gitsm://github.com/lvgl/lv_port_toradex_verdin_am62.git;branch=master;protocol=https \
"

# The following SRCREV value corresponds to the last tested version. 
SRCREV="9c1d29b79b833fd2c949de23179b1ae1633dd083"

# If you want to use the top of the branch, exchange the SRCREV value for the following:
#SRCREV = "${AUTOREV}"  
# Please notice that this recipe was not tested using newer versions.

S = "${WORKDIR}/git/lv_port_linux"
DEPENDS += "python3-native"

do_configure:prepend() {

    # Use this if you want to change the default lv_conf.h file
    # For more information, see https://github.com/lvgl/lv_port_toradex_verdin_am62#run-the-default-project
    if [ -f "${WORKDIR}/git/lv_conf_example/" ]; then
        install -m 0644 "${WORKDIR}/git/lv_conf_example/lv_conf_fb_2_threads.h" "${S}/lv_conf.h"
    fi
}


do_install() {
    install -d ${D}${bindir}
    # Application binary will be installed on /usr/bin/lvglsim
    # depending on CMake config it may be ${B}/bin or ${S}/bin.
    if [ -e "${B}/bin/lvglsim" ]; then
        install -m 0755 "${B}/bin/lvglsim" "${D}${bindir}/lvglsim"
    elif [ -e "${S}/bin/lvglsim" ]; then
        install -m 0755 "${S}/bin/lvglsim" "${D}${bindir}/lvglsim"
    else
        bbfatal "lvglsim not found in ${B}/bin or ${S}/bin"
    fi
}

FILES:${PN} += "${bindir}/lvglsim"
PV = "1.0+git${SRCPV}"

warning

Use the md5sum program to extract the MD5 hash of your COPYING.MIT license file and change it accordingly in the recipe:

LIC_FILES_CHKSUM = "file://${WORKDIR}/COPYING.MIT;md5=<your-hash>"
tdx-reference-multimedia-image.bbappend
IMAGE_INSTALL:append = " lv-port-verdin-am62"

After making those changes, build the modified Toradex Reference Multimedia Image with the following command:

$ MACHINE="verdin-am62" bitbake tdx-reference-multimedia-image

The image will be available in the build/deploy/images/<MACHINE> directory. For instructions on how to install images using the Toradex Easy Installer, refer to Flash a New Image Using Toradex Easy Installer.

LVGL Yocto Documentation​

For additional information on this topic, see LVGL in Yocto.

Send Feedback!