|
| 1 | +.. _GUI_Frameworks_User_Guide: |
| 2 | + |
| 3 | +############## |
| 4 | +GUI Frameworks |
| 5 | +############## |
| 6 | + |
| 7 | +This document provides an overview of how to develop with different GUI frameworks on |
| 8 | +the |__PART_FAMILY_NAME__| platform. The SDK supports many GUI frameworks, including |
| 9 | +QT, Flutter and Slint. Use these frameworks to create rich graphical user interfaces |
| 10 | +for embedded applications. |
| 11 | + |
| 12 | +See the :ref:`TI-Apps-Launcher-User-Guide-label` documentation for more information about Qt-based demos. |
| 13 | +This guide provides a brief overview of Flutter and Slint, along with instructions on how to build and run demos for each. |
| 14 | + |
| 15 | +*************************** |
| 16 | +How to Develop With Flutter |
| 17 | +*************************** |
| 18 | + |
| 19 | +Overview |
| 20 | +======== |
| 21 | + |
| 22 | +The `Flutter <https://flutter.dev/>`__ software development kit from Google is a popular |
| 23 | +open source framework for building natively compiled, multi-platform applications from a |
| 24 | +single codebase. It offers fast development cycles, expressive GUI, and excellent performance. |
| 25 | + |
| 26 | +Build Instructions |
| 27 | +================== |
| 28 | + |
| 29 | +Developers who want to use Flutter to build applications on TI embedded platforms, |
| 30 | +can follow the process described in the following steps: |
| 31 | + |
| 32 | +#. **Prepare your Yocto environment:** |
| 33 | + Complete the one-time setup prerequisites listed in the |__SDK_FULL_NAME__| documentation at :ref:`building-the-sdk-with-yocto`. |
| 34 | + |
| 35 | +#. **Configure and build the SDK:** |
| 36 | + 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. |
| 37 | + |
| 38 | + .. code-block:: bash |
| 39 | +
|
| 40 | + # Set up the base SDK layers |
| 41 | + git clone https://git.ti.com/git/arago-project/oe-layersetup.git tisdk |
| 42 | + cd tisdk |
| 43 | +
|
| 44 | + # Replace <oeconfig-file> with the appropriate file for the release |
| 45 | + # uncomment the meta-flutter layer configuration in the selected <oeconfig-file> |
| 46 | + ./oe-layertool-setup.sh -f configs/processor-sdk/<oeconfig-file> |
| 47 | + cd build |
| 48 | +
|
| 49 | + # Add the flutter example demo package to the image |
| 50 | + echo 'IMAGE_INSTALL:append = " flutter-wayland-client flutter-samples-material-3-demo"' >> conf/local.conf |
| 51 | +
|
| 52 | + # Source the environment and build the image |
| 53 | + . conf/setenv |
| 54 | + MACHINE=<machine> bitbake -k tisdk-default-image |
| 55 | +
|
| 56 | + .. note:: |
| 57 | + |
| 58 | + Please refer to the :ref:`Yocto Layer Configuration <yocto-layer-configuration>` guide to |
| 59 | + find the correct :file:`<oeconfig-file>` for the SDK release. The ``<machine>`` variable should |
| 60 | + be set to your target device as in :ref:`Build_Options`. |
| 61 | + |
| 62 | +#. **Flash the SD Card:** |
| 63 | + Once the build is complete, flash the generated image at :file:`build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz` |
| 64 | + on to a SD card. Please follow the instructions from here to :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>`. |
| 65 | + |
| 66 | +Running the Demo |
| 67 | +================ |
| 68 | + |
| 69 | +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: |
| 70 | + |
| 71 | +.. code-block:: bash |
| 72 | +
|
| 73 | + systemctl stop ti-apps-launcher |
| 74 | + # Run the demo as weston user |
| 75 | + su weston |
| 76 | + 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 |
| 77 | +
|
| 78 | +.. image:: /images/flutter-samples-material-3-demo.png |
| 79 | + :width: 50% |
| 80 | + :align: center |
| 81 | + :alt: Flutter Samples Material 3 Demo |
| 82 | + |
| 83 | +For application specific performance imporvements, refer this `App note <https://www.ti.com/lit/po/sprt761a/sprt761a.pdf>`__. |
| 84 | + |
| 85 | +************************* |
| 86 | +How to Develop With Slint |
| 87 | +************************* |
| 88 | + |
| 89 | +Overview |
| 90 | +======== |
| 91 | + |
| 92 | +`Slint <https://slint.dev/>`_ is a declarative GUI toolkit to build native user interfaces |
| 93 | +for embedded systems and desktop applications. It is designed to be lightweight and efficient, |
| 94 | +making it a good choice for resource-constrained embedded systems. |
| 95 | + |
| 96 | +Slint uses a flexible architecture with interchangeable rendering backends. By default, |
| 97 | +it uses its own built-in **FemtoVG** renderer, which is a lightweight, hardware-accelerated |
| 98 | +engine that leverages OpenGL ES 2.0. This makes it highly efficient and well-suited for |
| 99 | +embedded GPUs like the PowerVR series on the |__PART_FAMILY_NAME__|, providing a great |
| 100 | +balance of performance and low resource usage out-of-the-box. |
| 101 | + |
| 102 | +Build Instructions |
| 103 | +================== |
| 104 | + |
| 105 | +This guide provides instructions on how to add the `meta-slint <https://layers.openembedded.org/layerindex/branch/master/layer/meta-slint/>`__ layer |
| 106 | +to the Yocto build system of the TI Processor SDK to build and run Slint applications. |
| 107 | + |
| 108 | +#. **Prepare your Yocto environment:** |
| 109 | + Complete the one-time setup prerequisites listed in the |__SDK_FULL_NAME__| documentation at :ref:`building-the-sdk-with-yocto`. |
| 110 | + |
| 111 | +#. **Configure and build the SDK:** |
| 112 | + The following commands will set up the necessary Slint and dependent layers and build the image. |
| 113 | + |
| 114 | + .. code-block:: bash |
| 115 | +
|
| 116 | + # Set up the base SDK layers |
| 117 | + git clone https://git.ti.com/git/arago-project/oe-layersetup.git tisdk |
| 118 | + cd tisdk |
| 119 | +
|
| 120 | + # Create a new config for Slint and add the required meta-layers |
| 121 | + # Replace <oeconfig-file> with the appropriate file for the release |
| 122 | + cp configs/processor-sdk/<oeconfig-file> configs/slint-config.txt |
| 123 | + echo "meta-slint,https://github.com/slint-ui/meta-slint.git,main,7406ee51c140968345b86f3927a8c67984a2dda8,layers=" >> configs/slint-config.txt |
| 124 | + echo "meta-rust-bin,https://github.com/rust-embedded/meta-rust-bin.git,master,79c077fac9694eb5fbcee7b15e800c21e887bb5d,layers=" >> configs/slint-config.txt |
| 125 | +
|
| 126 | + # Set up the bitbake build environment |
| 127 | + ./oe-layertool-setup.sh -f configs/slint-config.txt |
| 128 | + cd build/ |
| 129 | +
|
| 130 | + # Add the slint-demos package to the image |
| 131 | + echo 'IMAGE_INSTALL:append = " slint-demos"' >> conf/local.conf |
| 132 | +
|
| 133 | + # Source the environment and build the image |
| 134 | + . conf/setenv |
| 135 | + MACHINE=<machine> bitbake -k tisdk-default-image |
| 136 | +
|
| 137 | + .. note:: |
| 138 | + |
| 139 | + Please refer to the :ref:`Yocto Layer Configuration <yocto-layer-configuration>` guide to |
| 140 | + find the correct ``<oeconfig-file>`` for your SDK release. The ``<machine>`` variable should |
| 141 | + be set to your target device as in :ref:`Build_Options`. |
| 142 | + |
| 143 | +#. **Flash the SD Card:** |
| 144 | + Once the build is complete, flash the generated image at :file:`build/deploy-ti/images/<machine>/tisdk-default-image-<machine>.wic.xz` |
| 145 | + on to a SD card. Please follow the instructions from here to :ref:`Flash an SD card <processor-sdk-linux-create-sd-card>`. |
| 146 | + |
| 147 | +Running the Demos |
| 148 | +================= |
| 149 | + |
| 150 | +After booting the board with the new image, you will find several Slint demo binaries located in :file:`/usr/bin`, including: |
| 151 | + |
| 152 | +* :file:`energy-monitor` |
| 153 | +* :file:`gallery` |
| 154 | +* :file:`home-automation` |
| 155 | +* :file:`opengl_texture` |
| 156 | +* :file:`opengl_underlay` |
| 157 | +* :file:`printerdemo` |
| 158 | +* :file:`slide_puzzle` |
| 159 | + |
| 160 | +To run a demo, first stop the ti-apps-launcher that runs out-of-box and then execute the desired binary. |
| 161 | +For example, to run the "home-automation" demo on a Wayland display: |
| 162 | + |
| 163 | +.. code-block:: bash |
| 164 | +
|
| 165 | + systemctl stop ti-apps-launcher |
| 166 | + # Run the demo as weston user |
| 167 | + su weston |
| 168 | + WAYLAND_DISPLAY=/run/user/1000/wayland-1 /usr/bin/home-automation |
| 169 | +
|
| 170 | +
|
| 171 | +.. image:: /images/slint_home_automation.png |
| 172 | + :width: 50% |
| 173 | + :alt: Slint Home Automation Demo |
| 174 | + |
| 175 | +Here are some snapshots of the other demos running on the device. |
| 176 | + |
| 177 | +.. list-table:: |
| 178 | + :widths: 50 50 |
| 179 | + :header-rows: 0 |
| 180 | + |
| 181 | + * - .. figure:: /images/slint_opengl_texture.png |
| 182 | + :align: center |
| 183 | + :alt: Slint OpenGL Texture Demo |
| 184 | + |
| 185 | + OpenGL Texture Demo |
| 186 | + |
| 187 | + - .. figure:: /images/slint_opengl_underlay.png |
| 188 | + :align: center |
| 189 | + :alt: Slint OpenGL Underlay Demo |
| 190 | + |
| 191 | + OpenGL Underlay Demo |
| 192 | + |
| 193 | + * - .. figure:: /images/slint_printer_demo.png |
| 194 | + :align: center |
| 195 | + :alt: Slint Printer Demo |
| 196 | + |
| 197 | + Printer Demo |
| 198 | + |
| 199 | + - .. figure:: /images/slint_puzzle_demo.png |
| 200 | + :align: center |
| 201 | + :alt: Slint Puzzle Demo |
| 202 | + |
| 203 | + Puzzle demo |
0 commit comments