DESK-MX8M-L-TN-0004: Using Slint to create embedded GUI

Info Box Applies to MITO 8M Mini Technical Notes

This application note has been validated using the kit version in the History table.

History
Issue Date	Notes
2025/03/28	DESK-MX8M-L 4.2.1

Introduction

Slint is a declarative GUI toolkit to build native user interfaces for embedded, desktop, and mobile applications written in Rust, C++, JavaScript, or Python.

The main advantages of the Slint library are that (as reported in the Slint github main page):

• Scalable: supports responsive UI design and multiple programming languages.
• Lightweight: should require minimal resources, in terms of memory and processing power, and yet deliver a smooth, smartphone-like user experience on any device.
• Intuitive: the design creation tools should be intuitive to use for the designers. Similarly for the developers, the APIs should be consistent and easy to use, no matter which programming language they choose.
• Native: the UI design should be compiled to machine code and provide flexibility that only a native application can offer: Access full operating system APIs, utilize all CPU and GPU cores, connect to any peripheral.

Slint architecture

In the Slint architecture, an application is composed of the business logic written in Rust, C++, or JavaScript and the .slint user interface design markup, which is compiled to native code.

Slit architecture (from Slint github main page)

Building Slint runtime and demos

For running Slint in the powerful MITO 8M Mini SOM, the related meta-layers have to be enabled in the Yocto build and the related recipes have to be added o in the BSP target recipe. Here below, and example on how to add Slint in the Yocto build for DESK-MX8M-L:

• in the kas/common-desk.yml file add the dedicated meta-layers:

+  meta-rust:
+    url: https://github.com/meta-rust/meta-rust
+    branch: master
+    path: sources/meta-rust
+
+  meta-rust-bin:
+    url: https://github.com/rust-embedded/meta-rust-bin
+    branch: master
+    path: sources/meta-rust-bin
+
+  meta-slint:
+    url: https://github.com/slint-ui/meta-slint
+    branch: main
+    path: sources/meta-slint
+

• in the recipes-core/images/dave-image-devel.bb file (build target devel image) add the slint recipes (and the rust too for convenience):

+# install SLINT packages
+IMAGE_INSTALL:append = " \
+    slint-cpp \
+    slint-demos \
+"

Slint demos

The Slint demos show different complex use-cases for building UIs with Slint.

A powerful example is the Energy Monitor:

Slint - Energy Monitor demo

Running Slint demos in the target

The Slint demos will be added directly in the executable $PATH, so it is enough to start the demo application:

root@desk-mx8mm:~# which energy-monitor
/usr/bin/energy-monitor
root@desk-mx8mm:~# energy-monitor
Using Skia OpenGL renderer
Rendering at 1280x720

Other demos are made available by the slint-demos recipes like:

• gallery
• printerdemo
• slide_puzzle