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
+83 −20
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
2 changes: 2 additions & 0 deletions .github/styles/config/vocabularies/PSDK/accept.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ OpenVX
PVRCarbon
PVRTune
Sitara
Skia
Slint
TFLite
TVM
Expand All @@ -30,6 +31,7 @@ Zink
[Kk]eywriter
[Kk]irkstone
[Mm]ulticast
[Rr]enderers?
[Ss]carthgap
[Tt]oolchain
balenaEtcher
Expand Down
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
Comment thread
jeevantelukula marked this conversation as resolved.
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.

On |__PART_FAMILY_NAME__|, the image adapts to the board's graphics stack.
Devices with a GPU render through the hardware-accelerated Skia renderer.
Comment thread
jeevantelukula marked this conversation as resolved.
GPU-less devices fall back to the Skia software renderer.

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 :command:`slint-viewer`. The user manually starts a specific demo.
* - :file:`ti-image-slint-demos`
- 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.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": 146, "column": 59}}}, "severity": "WARNING"}

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):** :command:`slint-launcher` starts automatically on boot.
Select and start any demo from the graphical list.

**With tisdk-default-image:** Run demos manually. Stop the ti-apps-launcher first before starting any demo.
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

Check warning on line 179 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.Headings] Use sentence-style capitalization in 'Slint Viewer'.

Raw Output:
{"message": "[RedHat.Headings] Use sentence-style capitalization in 'Slint Viewer'.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 179, "column": 1}}}, "severity": "INFO"}
------------

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

Check warning on line 191 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.EmDash] Do not use em dashes. Use punctuation marks such as commas, parentheses, or colons instead.

Raw Output:
{"message": "[RedHat.EmDash] Do not use em dashes. Use punctuation marks such as commas, parentheses, or colons instead.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 191, "column": 27}}}, "severity": "WARNING"}
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