Skip to content

feat(slint): Update Slint section in GUI frameworks guide #768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jeevantelukula wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(slint): Update Slint section in GUI frameworks guide #768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added source/images/slint_gallery.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 81 additions & 20 deletions source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,29 +93,62 @@
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 |__PART_FAMILY_NAME__|, providing a great
balance of performance and low resource usage out-of-the-box.
Slint uses a flexible architecture with configurable renderers and backends, controlled

Check warning on line 96 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.Spelling] Verify the word 'renderers'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.

Raw Output:
{"message": "[RedHat.Spelling] Verify the word 'renderers'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 96, "column": 54}}}, "severity": "WARNING"}

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renderers is actually considered a word by most online sources now. Please add it to the allow list if you want to use it: https://github.com/TexasInstruments/processor-sdk-doc/blob/master/CONTRIBUTING.md#vale-grammar-spelling-and-prose-checking

by ``PACKAGECONFIG`` in ``meta-slint``. See the `meta-slint features documentation
<https://github.com/slint-ui/meta-slint#features>`__ for the full list of available
renderers and backends and how to configure them.

Check warning on line 99 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.Spelling] Verify the word 'renderers'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.

Raw Output:
{"message": "[RedHat.Spelling] Verify the word 'renderers'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 99, "column": 1}}}, "severity": "WARNING"}

On |__PART_FAMILY_NAME__|, the image adapts to the board's graphics stack.
Devices with a GPU render through the hardware-accelerated Skia renderer.

Check warning on line 102 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.Spelling] Verify the word 'Skia'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.

Raw Output:
{"message": "[RedHat.Spelling] Verify the word 'Skia'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 102, "column": 60}}}, "severity": "WARNING"}

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Skia is also a valid name. Please add it to the allow list as well (just the uppercase spelling though, as that's the intended project spelling from what I can tell).

GPU-less devices fall back to the Skia software renderer.

Check warning on line 103 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.Spelling] Verify the word 'Skia'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.

Raw Output:
{"message": "[RedHat.Spelling] Verify the word 'Skia'. It is not in the American English or Red Hat terminology spelling dictionaries used by Vale.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 103, "column": 35}}}, "severity": "WARNING"}

Building with Slint
===================

#. Slint version 1.15 example demos are integrated by default in the :file:`tisdk-default-image`. User can download
the :file:`tisdk-default-image` wic image from |__SDK_DOWNLOAD_URL__|.
When ``meta-slint`` is included in the Yocto layer configuration, two image targets are available:

.. list-table::
:widths: 30 70
:header-rows: 1

* - Image target
- What you get
* - :file:`tisdk-default-image`
- Full TI SDK image with Slint demo binaries in :file:`/usr/bin` and :file:`slint-viewer`. Run demos manually.

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Full TI SDK image with Slint demo binaries in :file:`/usr/bin` and :file:`slint-viewer`. Run demos manually.
- Full TI SDK image with Slint demo binaries in :file:`/usr/bin` and :file:`slint-viewer`. The user manually starts a specific demo.

* - :file:`ti-image-slint-demos`
- Slint-focused image with the same demo binaries and :file:`slint-viewer`, plus :file:`slint-launcher` which starts

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Slint-focused image with the same demo binaries and :file:`slint-viewer`, plus :file:`slint-launcher` which starts
- Slint-focused image with the same demo binaries and :command:`slint-viewer`, plus :command:`slint-launcher` which starts

automatically on boot and presents a graphical list of demos to launch.

**Download a pre-built image**

- **TI SDK image:** Download :file:`tisdk-default-image` from |__SDK_DOWNLOAD_URL__|.
- **Slint demo image:** Download from the
`meta-slint releases page <https://github.com/slint-ui/meta-slint/releases/tag/demo-images>`__
(based on :file:`ti-image-slint-demos`, includes the demo launcher).

Flash the downloaded image to an SD card as described in :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>`.

Check warning on line 129 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.CaseSensitiveTerms] Use 'Linux' rather than 'linux'.

Raw Output:
{"message": "[RedHat.CaseSensitiveTerms] Use 'Linux' rather than 'linux'.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 129, "column": 96}}}, "severity": "WARNING"}

Check warning on line 129 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.UserReplacedValues] Separate words by underscores in user-replaced values.

Raw Output:
{"message": "[RedHat.UserReplacedValues] Separate words by underscores in user-replaced values.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 129, "column": 81}}}, "severity": "INFO"}

**Build from source**

Follow the steps in :ref:`building-the-sdk-with-yocto`. Use the default oe-config file, which includes
the ``meta-slint`` layer. See :ref:`Yocto Layer Configuration <yocto-layer-configuration>` to find the

Check warning on line 134 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.UserReplacedValues] Separate words by underscores in user-replaced values.

Raw Output:
{"message": "[RedHat.UserReplacedValues] Separate words by underscores in user-replaced values.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 134, "column": 63}}}, "severity": "INFO"}
correct oe-config file for the release.

.. code-block:: console

# Standard TI SDK image with Slint demos
MACHINE=<machine> bitbake tisdk-default-image

#. Follow the steps in :ref:`building-the-sdk-with-yocto` to build the image from sources.
Use the default oe-config file, which includes the ``meta-slint`` layer.
See :ref:`Yocto Layer Configuration <yocto-layer-configuration>` to find the correct oe-config file for the release.
# Slint-focused image with demo launcher
MACHINE=<machine> bitbake ti-image-slint-demos

#. Once the build is complete, flash the generated image at :file:`build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz`
onto a SD card. See :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>` for instructions.
Flash the generated image at :file:`build/deploy-ti/images/<machine>/<image>-<machine>.wic.xz`

Check warning on line 145 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.Slash] Use either 'or' or 'and' in 'ti/images'

Raw Output:
{"message": "[RedHat.Slash] Use either 'or' or 'and' in 'ti/images'", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 145, "column": 50}}}, "severity": "WARNING"}

Check warning on line 145 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.Slash] Use either 'or' or 'and' in 'build/deploy'

Raw Output:
{"message": "[RedHat.Slash] Use either 'or' or 'and' in 'build/deploy'", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 145, "column": 37}}}, "severity": "WARNING"}
onto a SD card. See :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>` for instructions.

Check warning on line 146 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[RedHat.UserReplacedValues] Separate words by underscores in user-replaced values.

Raw Output:
{"message": "[RedHat.UserReplacedValues] Separate words by underscores in user-replaced values.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 146, "column": 44}}}, "severity": "INFO"}

Running the Demos
=================

After booting the board with the new image, you will find several Slint demo binaries located in :file:`/usr/bin`, including:
The following Slint demo binaries are available in :file:`/usr/bin` on both image types:

* :file:`energy-monitor`
* :file:`gallery`
Expand All @@ -125,8 +158,11 @@
* :file:`printerdemo`
* :file:`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:
**With ti-image-slint-demos (or Slint pre-built image):** :file:`slint-launcher` starts automatically on boot.

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**With ti-image-slint-demos (or Slint pre-built image):** :file:`slint-launcher` starts automatically on boot.
**With ti-image-slint-demos (or Slint pre-built image):** :command:`slint-launcher` starts automatically on boot.

Select and launch any demo from the graphical list.

**With tisdk-default-image:** Run demos manually. Stop the ti-apps-launcher first, then execute the desired binary.
For example, to run the :file:`home-automation` demo on a Wayland display:

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For example, to run the :file:`home-automation` demo on a Wayland display:
For example, to run the :command:`home-automation` demo on a Wayland display:


.. code-block:: console

Expand All @@ -140,7 +176,26 @@
:width: 50%
:alt: Slint Home Automation Demo

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

The images now include :file:`slint-viewer`, a tool for previewing :file:`.slint` UI files directly

@StaticRocket StaticRocket Jul 31, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The images now include :file:`slint-viewer`, a tool for previewing :file:`.slint` UI files directly
The images now include :command:`slint-viewer`, a tool for previewing :file:`.slint` UI files directly

on the board. Run it in remote mode to connect from your development machine and push live UI updates
to the board as you edit, without rebuilding:

.. code-block:: console

# View all available options
slint-viewer --help

# Start in remote mode — board waits for editor to connect
slint-viewer --remote

In your editor's Slint live preview, select **Remote** and enter the address shown on the board.
See the `Slint Viewer documentation <https://docs.slint.dev/latest/docs/slint/guide/tooling/slint-viewer/>`__
for full usage.

Here are some snapshots of the other demos running on the device (OpenGL demos require a GPU).

.. list-table::
:widths: 50 50
Expand Down Expand Up @@ -170,8 +225,14 @@

Puzzle demo

.. figure:: /images/slint_energy_monitor.png
:align: left
:alt: Slint Energy Monitor Demo
* - .. figure:: /images/slint_energy_monitor.png
:align: center
:alt: Slint Energy Monitor Demo

Energy Monitor

- .. figure:: /images/slint_gallery.png
:align: center
:alt: Slint Gallery Demo

Energy Monitor
Gallery Demo
Loading