-
Notifications
You must be signed in to change notification settings - Fork 76
feat: Add documentation for slint and flutter #608
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.
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
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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
|
||
|
|
||
| ############# | ||
| UI Frameworks | ||
|
Check warning on line 4 in source/linux/Demo_User_Guides/GUI_Frameworks_User_Guide.rst
|
||
| ############# | ||
|
Comment on lines
+3
to
+5
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
|
||
| 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
|
||
|
Comment on lines
+12
to
+13
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
|
||
| *************************** | ||
|
|
||
| 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
|
||
| ================== | ||
|
|
||
| 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
|
||
| # 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
|
||
| ./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
|
||
| 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 | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
|---|---|---|
|
|
@@ -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
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
| -------- | ||
|
|
||
|
|
||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.rstfile.