Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions configs/AM62PX/AM62PX_linux_toc.txt
Original file line number Diff line number Diff line change
Expand Up @@ -180,5 +180,6 @@ linux/Demo_User_Guides/TI_Apps_Launcher_User_Guide
linux/Demo_User_Guides/Seva_Store
linux/Demo_User_Guides/Display_Cluster_User_Guide
linux/Demo_User_Guides/Chromium_Browser
linux/Demo_User_Guides/GUI_Frameworks_User_Guide

linux/Documentation_Tarball
1 change: 1 addition & 0 deletions configs/AM62X/AM62X_linux_toc.txt
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ linux/Demo_User_Guides/index_Demos
linux/Demo_User_Guides/TI_Apps_Launcher_User_Guide
linux/Demo_User_Guides/Seva_Store
linux/Demo_User_Guides/Chromium_Browser
linux/Demo_User_Guides/GUI_Frameworks_User_Guide

common/PRU-ICSS/Getting_Started_with_PSSP
common/PRU-ICSS/Header_Files
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/slint_home_automation.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/slint_opengl_texture.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/slint_opengl_underlay.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/slint_printer_demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/slint_puzzle_demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
199 changes: 199 additions & 0 deletions source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
.. _GUI_Frameworks_User_Guide:

Check warning on line 1 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.ReadabilityGrade] Simplify your language. The calculated Flesch–Kincaid grade level of 10.01 is above the recommended reading grade level of 9. Raw Output: {"message": "[RedHat.ReadabilityGrade] Simplify your language. The calculated Flesch–Kincaid grade level of 10.01 is above the recommended reading grade level of 9.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 1, "column": 1}}}, "severity": "INFO"}

Comment on lines +1 to +2
Copy link
Member

Choose a reason for hiding this comment

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

This label is unnecessary right now.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I have added this reference in source/linux/Demo_User_Guides/TI_Apps_Launcher_User_Guide.rst file.

#############
UI Frameworks

Check warning on line 4 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 'UI Frameworks'. Raw Output: {"message": "[RedHat.Headings] Use sentence-style capitalization in 'UI Frameworks'.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 4, "column": 1}}}, "severity": "INFO"}
#############
Comment on lines +3 to +5
Copy link
Member

Choose a reason for hiding this comment

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

Mixed usage of GUI and UI in this document. This is solely about graphical user interfaces.


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

Check warning on line 9 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 'Slint'. It is not in the American English spelling dictionary used by Vale. Raw Output: {"message": "[RedHat.Spelling] Verify the word 'Slint'. It is not in the American English spelling dictionary used by Vale.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 9, "column": 17}}}, "severity": "WARNING"}

Check warning on line 9 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.OxfordComma] Use the Oxford comma in 'QT, Flutter and Slint.'. Raw Output: {"message": "[RedHat.OxfordComma] Use the Oxford comma in 'QT, Flutter and Slint.'.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 9, "column": 1}}}, "severity": "INFO"}
for embedded applications.

See the :ref:`TI-Apps-Launcher-User-Guide-label` 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.

Check warning on line 13 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 'Slint'. It is not in the American English spelling dictionary used by Vale. Raw Output: {"message": "[RedHat.Spelling] Verify the word 'Slint'. It is not in the American English spelling dictionary used by Vale.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 13, "column": 53}}}, "severity": "WARNING"}
Comment on lines +12 to +13
Copy link
Member

Choose a reason for hiding this comment

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

Should we really be directing people here? We already have a Qt overview and listed demos under the graphics section.


***************************
How to Develop With Flutter

Check warning on line 16 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 'How to Develop With Flutter'. Raw Output: {"message": "[RedHat.Headings] Use sentence-style capitalization in 'How to Develop With Flutter'.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 16, "column": 1}}}, "severity": "INFO"}
***************************

Overview
========

The `Flutter <https://flutter.dev/>`__ 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 UI, and excellent performance.

Build Instructions

Check warning on line 26 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 'Build Instructions'. Raw Output: {"message": "[RedHat.Headings] Use sentence-style capitalization in 'Build Instructions'.", "location": {"path": "source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst", "range": {"start": {"line": 26, "column": 1}}}, "severity": "INFO"}
==================

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 |__SDK_FULL_NAME__| documentation at :ref:`building-the-sdk-with-yocto`.

#. **Configure and build the SDK:**
The following commands will set up the necessary flutter layers(`meta-flutter <https://layers.openembedded.org/layerindex/branch/master/layer/meta-flutter/>`__) and build the image.

.. code-block:: bash
# 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

Check warning on line 44 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": 44, "column": 17}}}, "severity": "INFO"}
# uncomment the meta-flutter layer configuration in the selected <oeconfig-file>

Check warning on line 45 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": 45, "column": 72}}}, "severity": "INFO"}
./oe-layertool-setup.sh -f configs/processor-sdk/<oeconfig-file>

Check warning on line 46 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": 46, "column": 56}}}, "severity": "INFO"}
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::

Please refer to the :ref:`Yocto Layer Configuration <yocto-layer-configuration>` guide to
find the correct :file:`<oeconfig-file>` for the SDK release. The ``<machine>`` variable should
be set to your target device as in :ref:`Build_Options`.

#. **Flash the SD Card:**
Once the build is complete, flash the generated image at :file:`build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz`
on to a SD card. Please follow the instructions from here to :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>`.

Running the Demo
================

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

.. code-block:: bash
systemctl stop ti-apps-launcher
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
Copy link
Member

Choose a reason for hiding this comment

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

You should not tell people to run graphical applications as root.

.. image:: /images/flutter-samples-material-3-demo.png
:width: 50%
:align: center
:alt: Flutter Samples Material 3 Demo

For application specific performance imporvements, refer this `App note <https://www.ti.com/lit/po/sprt761a/sprt761a.pdf>`__.

*************************
How to Develop With Slint
*************************

Overview
========

`Slint <https://slint.dev/>`_ 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 |__PART_FAMILY_NAME__|, providing a great
balance of performance and low resource usage out-of-the-box.

Build Instructions
==================

This guide provides instructions on how to add the `meta-slint <https://layers.openembedded.org/layerindex/branch/master/layer/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 |__SDK_FULL_NAME__| documentation at :ref:`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.

.. code-block:: bash
# 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::

Please refer to the :ref:`Yocto Layer Configuration <yocto-layer-configuration>` guide to
find the correct ``<oeconfig-file>`` for your SDK release. The ``<machine>`` variable should
be set to your target device as in :ref:`Build_Options`.

#. **Flash the SD Card:**
Once the build is complete, flash the generated image at :file:`build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz`
on to a SD card. Please follow the instructions from here to :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>`.

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

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

* :file:`energy-monitor`
* :file:`gallery`
* :file:`home-automation`
* :file:`opengl_texture`
* :file:`opengl_underlay`
* :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:

.. code-block:: bash
systemctl stop ti-apps-launcher
WAYLAND_DISPLAY=/run/user/1000/wayland-1 /usr/bin/home-automation
.. image:: /images/slint_home_automation.png
:width: 50%
:alt: Slint Home Automation Demo

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

.. list-table::
:widths: 50 50
:header-rows: 0

* - .. figure:: /images/slint_opengl_texture.png
:align: center
:alt: Slint OpenGL Texture Demo

OpenGL Texture Demo

- .. figure:: /images/slint_opengl_underlay.png
:align: center
:alt: Slint OpenGL Underlay Demo

OpenGL Underlay Demo

* - .. figure:: /images/slint_printer_demo.png
:align: center
:alt: Slint Printer Demo

Printer Demo

- .. figure:: /images/slint_puzzle_demo.png
:align: center
:alt: Slint Puzzle Demo

Puzzle demo
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
TI Apps Launcher - User Guide
=============================

.. note::

The TI Apps Launcher uses the Qt framework. The SDK also supports other modern UI toolkits,
such as Flutter and Slint. For instructions on building applications with these frameworks,
see the :ref:`GUI_Frameworks_User_Guide`.

Comment on lines +6 to +11
Copy link
Member

Choose a reason for hiding this comment

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

Why a note? This is just a general statement. Not really noteworthy in my opinion.

Overview
--------

Expand Down
1 change: 1 addition & 0 deletions source/linux/Demo_User_Guides/index_Demos.rst
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ The SDK supports the following Out-Of-Box demo-applications
Webserver_Demo_User_Guide
Display_Cluster_User_Guide
TI_LVGL_Demo_User_Guide
GUI_Frameworks_User_Guide
AM62D_Dsp_Offload_User_Guide.rst
AM62D_2DFFT_User_Guide.rst

Expand Down
Loading