6.4. GUI Frameworks

This document provides an overview of how to develop with different GUI frameworks on the AM62x platform. The SDK supports many GUI frameworks, including QT, Flutter and Slint. Use these frameworks to create rich graphical user interfaces for embedded applications.

See the TI Apps Launcher - User Guide documentation for more information about Qt-based demos. This guide provides a brief overview of Flutter and Slint, along with instructions on how to build and run demos for each.

6.4.1. How to Develop With Flutter

6.4.1.1. About Flutter

The Flutter software development kit from Google is a popular open source framework for building natively compiled, multi-platform applications from a single codebase. It offers fast development cycles, expressive GUI, and excellent performance.

6.4.1.2. Building with Flutter

Developers who want to use Flutter to build applications on TI embedded platforms, can follow the process described in the following steps:

Prepare your Yocto environment: Complete the one-time setup prerequisites listed in the Processor SDK Linux AM62x documentation at Building the SDK with Yocto.

Configure and build the SDK: The following commands will set up the necessary flutter layers(meta-flutter) and build the image.

# Set up the base SDK layers
git clone https://git.ti.com/git/arago-project/oe-layersetup.git tisdk
cd tisdk

# Replace <oeconfig-file> with the appropriate file for the release
# uncomment the meta-flutter layer configuration in the selected <oeconfig-file>
./oe-layertool-setup.sh -f configs/processor-sdk/<oeconfig-file>
cd build

# Add the flutter example demo package to the image
echo 'IMAGE_INSTALL:append = " flutter-wayland-client flutter-samples-material-3-demo"' >> conf/local.conf

# Source the environment and build the image
. conf/setenv
MACHINE=<machine> bitbake -k tisdk-default-image

Note

See the Yocto Layer Configuration guide to find the correct <oeconfig-file> for the SDK release. Set the <machine> variable to your target device as in Build Options.

Flash the SD Card: Once the build is complete, flash the generated image at build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz on to a SD card. See Flash an SD card for instructions.

6.4.1.3. Running the Demo

After booting the board with the new image, the following flutter-samples-material-3-demo shows on the Wayland display after running the following commands:

systemctl stop ti-apps-launcher
# Run the demo as weston user
su weston
WAYLAND_DISPLAY=/run/user/1000/wayland-1 LD_LIBRARY_PATH=/usr/share/flutter/flutter-samples-material-3-demo/3.38.3/release/lib flutter-client --bundle=/usr/share/flutter/flutter-samples-material-3-demo/3.38.3/release

For application specific performance imporvements, refer this App note.

6.4.2. How to Develop With Slint

6.4.2.1. About Slint

Slint is a declarative GUI toolkit to build native user interfaces for embedded systems and desktop applications. It is designed to be lightweight and efficient, making it a good choice for resource-constrained embedded systems.

Slint uses a flexible architecture with interchangeable rendering backends. By default, it uses its own built-in FemtoVG renderer, which is a lightweight, hardware-accelerated engine that leverages OpenGL ES 2.0. This makes it highly efficient and well-suited for embedded GPUs like the PowerVR series on the AM62x, providing a great balance of performance and low resource usage out-of-the-box.

6.4.2.2. Building with Slint

This guide provides instructions on how to add the meta-slint layer to the Yocto build system of the TI Processor SDK to build and run Slint applications.

Prepare your Yocto environment: Complete the one-time setup prerequisites listed in the Processor SDK Linux AM62x documentation at Building the SDK with Yocto.

Configure and build the SDK: The following commands will set up the necessary Slint and dependent layers and build the image.

# Set up the base SDK layers
git clone https://git.ti.com/git/arago-project/oe-layersetup.git tisdk
cd tisdk

# Create a new config for Slint and add the required meta-layers
# Replace <oeconfig-file> with the appropriate file for the release
cp configs/processor-sdk/<oeconfig-file> configs/slint-config.txt
echo "meta-slint,https://github.com/slint-ui/meta-slint.git,main,7406ee51c140968345b86f3927a8c67984a2dda8,layers=" >> configs/slint-config.txt
echo "meta-rust-bin,https://github.com/rust-embedded/meta-rust-bin.git,master,79c077fac9694eb5fbcee7b15e800c21e887bb5d,layers=" >> configs/slint-config.txt

# Set up the bitbake build environment
./oe-layertool-setup.sh -f configs/slint-config.txt
cd build/

# Add the slint-demos package to the image
echo 'IMAGE_INSTALL:append = " slint-demos"' >> conf/local.conf

# Source the environment and build the image
. conf/setenv
MACHINE=<machine> bitbake -k tisdk-default-image

Note

See the Yocto Layer Configuration guide to find the correct <oeconfig-file> for the SDK release. Set the <machine> variable to your target device as in Build Options.

Flash the SD Card: Once the build is complete, flash the generated image at build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz onto a SD card. See Flash an SD card for instructions.

6.4.2.3. Running the Demos

After booting the board with the new image, you will find several Slint demo binaries located in /usr/bin, including:

energy-monitor
gallery
home-automation
opengl_texture
opengl_underlay
printerdemo
slide_puzzle

To run a demo, first stop the ti-apps-launcher that runs out-of-box and then execute the desired binary. For example, to run the “home-automation” demo on a Wayland display:

systemctl stop ti-apps-launcher
# Run the demo as weston user
su weston
WAYLAND_DISPLAY=/run/user/1000/wayland-1 /usr/bin/home-automation

Here are some snapshots of the other demos running on the device.

Fig. 6.1 OpenGL Texture Demo	Fig. 6.2 OpenGL Underlay Demo
Fig. 6.3 Printer Demo	Fig. 6.4 Puzzle demo