Buttons - Handling User Input and Navigation

Welcome to the UNA SDK tutorial series! The Buttons app demonstrates fundamental concepts of user interaction on the UNA Watch platform. This tutorial focuses on building an application with screens reaction via hardware buttons, providing a foundation for more complex user interfaces.

Project Folder

What You’ll Learn

  • How to implement GUI applications with TouchGFX

  • Handling hardware button events for navigation

  • Understanding the UNA app framework for interactive applications

Getting Started

Prerequisites

Before building the Buttons app, you need to set up the UNA SDK environment. Follow the toolchain setup for complete installation instructions, including:

  • UNA SDK cloned with submodules (git clone --recursive)

  • ST ARM GCC Toolchain (from STM32CubeIDE/CubeCLT, not system GCC)

  • CMake 3.21+ and make

  • Python 3 with pip packages installed

Minimum requirements for Buttons:

  • UNA_SDK environment variable pointing to SDK root

  • ARM GCC toolchain in PATH

  • CMake and build tools

For GUI development/modification:

Building and Running Buttons

  1. Verify your environment setup (see toolchain setup for details):

    echo $UNA_SDK                   # Should point to SDK root.
                                # Note for backward compatibility with linux path notation it uses '/'

which arm-none-eabi-gcc         # Should find ST toolchain
which cmake                     # Should find CMake

  2. Navigate to the Buttons directory:

    cd $UNA_SDK/Docs/Tutorials/Buttons

  3. Build the application:

    mkdir build && cd build
cmake -G "Unix Makefiles" ../Software/Apps/Buttons-CMake
make

The app will start and display an initial black screen. Use the hardware buttons to navigate between different colored screens, demonstrating buttons navigation patterns.

Running on Simulator

To test the app on the simulator (Windows only):

  1. Open Buttons.touchgfx in TouchGFX Designer and click Generate Code (F4) (do this once).

  2. Navigate to Buttons\Software\Apps\TouchGFX-GUI\simulator\msvs

  3. Open Application.vcxproj in Visual Studio

  4. Press F5 to start debugging and run the simulator

In the simulator, use keyboard keys to simulate hardware buttons:

  • 1 = L1 (Red screen)

  • 2 = L2 (Black screen)

  • 3 = R1 (Blue screen)

  • 4 = R2 (Green screen, double-press to exit)

The simulator will display color changes based on button presses. For detailed simulator setup and button mapping, see Simulator.

Buttons App Overview

Architecture Components

The Service Layer (Backend)

  • Manages the application lifecycle

  • Handles communication with the GUI layer

  • Minimal implementation since no sensors are used

The GUI Layer (Frontend)

  • Built with TouchGFX framework. For detailed information about the TouchGFX port implementation, see TouchGFX Port Architecture

  • Handles button events and screen transitions

  • Updates the display based on user input

  • Manages screen state and visual elements

Button Event Handling

The app responds to hardware button presses through the handleKeyEvent method in MainView.cpp. Each button press triggers a screen change by updating the background color and potentially displaying text.

Screen Updates

After changing screen properties (like color), the invalidate() method is called to refresh the display, ensuring changes are visible to the user.

Buttons app creation process

  1. Copy HelloWorld tutorial

  2. Change naming: Rename project directory, cmake directory and name of the project in CMakeLists.txt; Also change APP_ID to something else.

  3. Commit initial changes: it’s a good practice to use version control system like git

  4. *Edit TouchGFX:

    • Rename *.touchgfx to Buttons.touchgfx

    • Rename Buttons.touchgfx:163 "Name": "Buttons"

    • Add 240x240 a box box1 at X:0 Y:0

    • Click Generate code

  5. Edit MainView.cpp:

    • You can see touchgfx::Box box1; in MainViewBase.cpp

    • Add box1 color set to void MainView::handleKeyEvent(uint8_t key):

      void MainView::handleKeyEvent(uint8_t key)
{
   if (key == Gui::Config::Button::L1) {
      box1.setColor(touchgfx::Color::getColorFromRGB(0, 0, 0));
   }

   if (key == Gui::Config::Button::L2) {
      box1.setColor(touchgfx::Color::getColorFromRGB(0xff, 0, 0));
   }

   if (key == Gui::Config::Button::R1) {
      box1.setColor(touchgfx::Color::getColorFromRGB(0, 0, 0xff));
   }

   if (key == Gui::Config::Button::R2) {
      box1.setColor(touchgfx::Color::getColorFromRGB(0, 0xff, 0));
   }
}

    • Add lastKeyPressed state to exit on double R2 clicks:

      class MainView : public MainViewBase
{
   uint8_t lastKeyPressed = {'\0'};
public:
   MainView();
   virtual ~MainView() {}
   virtual void setupScreen();
   virtual void tearDownScreen();

protected:
   virtual void handleKeyEvent(uint8_t key) override;
};

      Exit:

         if (key == Gui::Config::Button::R2) {
      box1.setColor(touchgfx::Color::getColorFromRGB(0, 0xff, 0));
      if (lastKeyPressed == key) presenter->exit();
   }
   lastKeyPressed = key;

  6. Add Screen refresh: box1.invalidate();

    if (key == Gui::Config::Button::R2) {
   box1.setColor(touchgfx::Color::getColorFromRGB(0, 0xff, 0));
   if (lastKeyPressed == key) presenter->exit();
}
lastKeyPressed = key;
box1.invalidate();

  7. Compile code using SDK setup instructions.

PS C:\Users\sd\Desktop\una-dev\una-sdk> cd .\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\
PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake> mkdir build


    Directory: C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2/18/2026   9:37 PM                build


PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake> cd .\build\
PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build>  cmake -G 'Unix Makefiles'  ..
-- The ASM compiler identification is GNU
-- Found assembler: C:/ST/STM32CubeIDE_2.0.0/STM32CubeIDE/plugins/com.st.stm32cube.ide.mcu.externaltools.gnu-tools-for-stm32.13.3.rel1.win32_1.0.100.202509120712/tools/bin/arm-none-eabi-gcc.exe
-- The C compiler identification is GNU 13.3.1
-- The CXX compiler identification is GNU 13.3.1
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Check for working C compiler: C:/ST/STM32CubeIDE_2.0.0/STM32CubeIDE/plugins/com.st.stm32cube.ide.mcu.externaltools.gnu-tools-for-stm32.13.3.rel1.win32_1.0.100.202509120712/tools/bin/arm-none-eabi-gcc.exe - skipped
-- Detecting C compile features
-- Detecting C compile features - done
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Check for working CXX compiler: C:/ST/STM32CubeIDE_2.0.0/STM32CubeIDE/plugins/com.st.stm32cube.ide.mcu.externaltools.gnu-tools-for-stm32.13.3.rel1.win32_1.0.100.202509120712/tools/bin/arm-none-eabi-g++.exe - skipped
-- Detecting CXX compile features
-- Detecting CXX compile features - done
[2026-02-18 21:37:08] Starting una-version.sh script
[2026-02-18 21:37:08] Default BUILD_VERSION set to: 0.0.0-dev
[2026-02-18 21:37:08] No argument provided, using current directory as UNA_GIT_DIR: C:/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/Buttons-CMake
[2026-02-18 21:37:08] Workspace: C:/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/Buttons-CMake
[2026-02-18 21:37:08] Successfully changed directory to: C:/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/Buttons-CMake
[2026-02-18 21:37:09] git rev-parse --git-dir output: 'C:/Users/sd/Desktop/una-dev/una-sdk/.git'
[2026-02-18 21:37:09] git rev-parse --show-toplevel output: 'C:/Users/sd/Desktop/una-dev/una-sdk'
[2026-02-18 21:37:09] toplevel: C:/Users/sd/Desktop/una-dev/una-sdk
[2026-02-18 21:37:09] Successfully changed directory to toplevel: C:/Users/sd/Desktop/una-dev/una-sdk
[2026-02-18 21:37:09] UNA_WORKSPACE set to: C:/Users/sd/Desktop/una-dev/una-sdk
[2026-02-18 21:37:09] Git directory found, proceeding with version detection
[2026-02-18 21:37:09] COMMIT_HASH: bf09e2b
[2026-02-18 21:37:09] Not on exact tag
[2026-02-18 21:37:09] DESC: v0.1.1-22-gbf09e2b
[2026-02-18 21:37:09] Tags found, parsing TAG and HASH
[2026-02-18 21:37:09] TAG before removing 'v': v0.1.1-22
[2026-02-18 21:37:09] TAG after removing 'v': 0.1.1-22
[2026-02-18 21:37:09] HASH: bf09e2b
[2026-02-18 21:37:09] BUILD_VERSION set to TAG-HASH: 0.1.1-22-bf09e2b
[2026-02-18 21:37:09] Checking for uncommitted changes
[2026-02-18 21:37:09] git status --porcelain output: ''
[2026-02-18 21:37:09] No uncommitted changes
[2026-02-18 21:37:09] Final BUILD_VERSION=0.1.1-22-bf09e2b
[2026-02-18 21:37:09] Script completed successfully
Detected BUILD_VERSION: 0.1.1-22-bf09e2b
UNA_APP_SERVICE_STACK_SIZE: 10*1024
UNA_APP_SERVICE_RAM_LENGTH: 500K
APP_ID: F1E2D3C448669782
APP_NAME: Buttons
DEV_ID: UNA
UNA_APP_GUI_STACK_SIZE: 10*1024
UNA_APP_GUI_RAM_LENGTH: 600K
App autostart is OFF
-- Configuring done (2.8s)
-- Generating done (0.1s)
-- Build files have been written to: C:/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/Buttons-CMake/build
PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build> make
[  0%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Libs/Sources/ActivityWriter.cpp.obj
[  1%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Libs/Sources/Service.cpp.obj
[  2%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/AtExitImpl.cpp.obj
[  3%] Building ASM object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/startup_user_app.s.obj
[  4%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/system.cpp.obj
[  5%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Kernel/KernelBuilder.cpp.obj
[  5%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/UnaLogger/Logger.cpp.obj
[  6%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/EntryPoint/Service/main.cpp.obj
[  7%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/FitHelper/FitHelper.cpp.obj
[  8%] Building C object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/ThirdParty/FitSDKRelease_21.171.00/c/fit.c.obj
[  9%] Building C object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/ThirdParty/FitSDKRelease_21.171.00/c/fit_convert.c.obj
[ 10%] Building C object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/ThirdParty/FitSDKRelease_21.171.00/c/fit_crc.c.obj
[ 10%] Building C object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/ThirdParty/FitSDKRelease_21.171.00/c/fit_product.c.obj
[ 11%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/JSON/JsonStreamReader.cpp.obj
[ 12%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/JSON/JsonStreamWriter.cpp.obj
[ 13%] Building C object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/ThirdParty/coreJSON/source/core_json.c.obj
[ 14%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/SensorLayer/SensorConnection.cpp.obj
[ 15%] Building CXX object CMakeFiles/ButtonsService.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/TrackMap/TrackMapBuilder.cpp.obj
[ 16%] Linking CXX executable ButtonsService.elf
Packing ButtonsService.elf
INFO:root:ELF-file    : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\ButtonsService.elf
INFO:root:Out         : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Tmp
INFO:root:Version     : 1.0
INFO:root:Output file : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Tmp\ButtonsService.srv

[ 16%] Built target ButtonsService.elf
[ 17%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/ApplicationFontProvider.cpp.obj
[ 18%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/CachedFont.cpp.obj
[ 19%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/CompressedFontCache.cpp.obj
[ 20%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/CompressedUnmappedFontCache.cpp.obj
[ 21%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/FontCache.cpp.obj
[ 21%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Italic_18_2bpp_0.cpp.obj
[ 22%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Italic_18_2bpp_4.cpp.obj
[ 23%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Italic_20_2bpp_0.cpp.obj
[ 24%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_LightItalic_18_2bpp_0.cpp.obj
[ 25%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Light_60_2bpp_0.cpp.obj
[ 26%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Medium_10_2bpp_0.cpp.obj
[ 26%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Medium_18_2bpp_0.cpp.obj
[ 27%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Medium_50_2bpp_0.cpp.obj
[ 28%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_Regular_18_2bpp_0.cpp.obj
[ 29%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_18_2bpp_0.cpp.obj
[ 30%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_18_2bpp_4.cpp.obj
[ 31%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_20_2bpp_0.cpp.obj
[ 31%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_25_2bpp_0.cpp.obj
[ 32%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_30_2bpp_0.cpp.obj
[ 33%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_35_2bpp_0.cpp.obj
[ 34%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_40_2bpp_0.cpp.obj
[ 35%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Font_Poppins_SemiBold_60_2bpp_0.cpp.obj
[ 36%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/GeneratedFont.cpp.obj
[ 37%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Italic_18_2bpp.cpp.obj
[ 37%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Italic_20_2bpp.cpp.obj
[ 38%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_LightItalic_18_2bpp.cpp.obj
[ 39%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Light_60_2bpp.cpp.obj
[ 40%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Medium_10_2bpp.cpp.obj
[ 41%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Medium_18_2bpp.cpp.obj
[ 42%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Medium_50_2bpp.cpp.obj
[ 42%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_Regular_18_2bpp.cpp.obj
[ 43%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_18_2bpp.cpp.obj
[ 44%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_20_2bpp.cpp.obj
[ 45%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_25_2bpp.cpp.obj
[ 46%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_30_2bpp.cpp.obj
[ 47%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_35_2bpp.cpp.obj
[ 47%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_40_2bpp.cpp.obj
[ 48%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Kerning_Poppins_SemiBold_60_2bpp.cpp.obj
[ 49%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Italic_18_2bpp.cpp.obj
[ 50%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Italic_20_2bpp.cpp.obj
[ 51%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_LightItalic_18_2bpp.cpp.obj
[ 52%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Light_60_2bpp.cpp.obj
[ 52%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Medium_10_2bpp.cpp.obj
[ 53%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Medium_18_2bpp.cpp.obj
[ 54%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Medium_50_2bpp.cpp.obj
[ 55%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_Regular_18_2bpp.cpp.obj
[ 56%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_18_2bpp.cpp.obj
[ 57%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_20_2bpp.cpp.obj
[ 58%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_25_2bpp.cpp.obj
[ 58%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_30_2bpp.cpp.obj
[ 59%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_35_2bpp.cpp.obj
[ 60%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_40_2bpp.cpp.obj
[ 61%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/Table_Poppins_SemiBold_60_2bpp.cpp.obj
[ 62%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/UnmappedDataFont.cpp.obj
[ 63%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/fonts/src/VectorFontRendererBuffers.cpp.obj
[ 63%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/gui_generated/src/common/FrontendApplicationBase.cpp.obj
[ 64%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/gui_generated/src/containers/ButtonsSetBase.cpp.obj
[ 65%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/3d628a36580307821a6a00b9871d2825/Software/Apps/TouchGFX-GUI/generated/gui_generated/src/main_screen/MainViewBase.cpp.obj
[ 66%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/BitmapDatabase.cpp.obj
[ 67%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/SVGDatabase.cpp.obj
[ 68%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_L1.cpp.obj
[ 68%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_L1A.cpp.obj
[ 69%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_L1R.cpp.obj
[ 70%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_L2.cpp.obj
[ 71%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_L2A.cpp.obj
[ 72%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_L2R_.cpp.obj
[ 73%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_R1.cpp.obj
[ 73%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_R1A.cpp.obj
[ 74%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_R1R.cpp.obj
[ 75%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_R2.cpp.obj
[ 76%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_R2A.cpp.obj
[ 77%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Button_R2R.cpp.obj
[ 78%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_Heart.cpp.obj
[ 79%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_MenuAssets_Cross.cpp.obj
[ 79%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_MenuAssets_CrossYellow.cpp.obj
[ 80%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/9e8b1f0454dae51d1529dac2c47dcb08/Buttons/Software/Apps/TouchGFX-GUI/generated/images/src/image_MenuAssets_Tick.cpp.obj
[ 81%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/texts/src/LanguageGb.cpp.obj
[ 82%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/texts/src/Texts.cpp.obj
[ 83%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/ff49e2950d17f26ffd1c2220befc6afd/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/generated/texts/src/TypedTextDatabase.cpp.obj
[ 84%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/c1f22cc05670b178c052f9be5e8d2c31/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/gui/src/common/FrontendApplication.cpp.obj
[ 84%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/gui/src/containers/ButtonsSet.cpp.obj
[ 85%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/gui/src/main_screen/MainPresenter.cpp.obj
[ 86%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/gui/src/main_screen/MainView.cpp.obj
[ 87%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Docs/Tutorials/Buttons/Software/Apps/TouchGFX-GUI/gui/src/model/Model.cpp.obj
[ 88%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/AtExitImpl.cpp.obj
[ 89%] Building ASM object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/startup_user_app.s.obj
[ 89%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/AppSystem/system.cpp.obj
[ 90%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Kernel/KernelBuilder.cpp.obj
[ 93%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/STM32TouchController.cpp.obj
[ 94%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/TouchGFXCommandProcessor.cpp.obj
[ 94%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/TouchGFXGPIO.cpp.obj
[ 95%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/TouchGFXHAL.cpp.obj
[ 96%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/generated/OSWrappers.cpp.obj
[ 97%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/generated/STM32DMA.cpp.obj
[ 98%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/generated/TouchGFXConfiguration.cpp.obj
[ 99%] Building CXX object CMakeFiles/ButtonsGUI.elf.dir/C_/Users/sd/Desktop/una-dev/una-sdk/Libs/Source/Port/TouchGFX/generated/TouchGFXGeneratedHAL.cpp.obj
[100%] Linking CXX executable ButtonsGUI.elf
Packing ButtonsGUI.elf
INFO:root:ELF-file    : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\ButtonsGUI.elf
INFO:root:Out         : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Tmp
INFO:root:Version     : 1.0
INFO:root:Output file : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Tmp\ButtonsGUI.gui
[100%] Built target ButtonsGUI.elf
[100%] Merging Buttons application
INFO:root:Merge complete
INFO:root:Service file   : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Tmp\ButtonsService.srv
INFO:root:GUI file       : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Tmp\ButtonsGUI.gui
INFO:root:Name           : Buttons
INFO:root:ID             : F1E2D3C448669782
INFO:root:App Version    : 0.1.1
INFO:root:LibC Version   : 0.0.3
INFO:root:Flags          : 0x00000020
INFO:root:Glance-capable : yes
INFO:root:CRC            : 0x4B064208
INFO:root:Image          : C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build\Buttons_0.1.1-22-bf09e2b.uapp (225256 bytes)        

[100%] Built target ButtonsApp
PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Software\Apps\Buttons-CMake\build> cd ../../../../
PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons> ls .\Output\


    Directory: C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons\Output


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2/17/2026   7:10 PM            165 .gitignore
-a----         2/18/2026   9:37 PM         802019 ButtonsGUI.elf.elf.map
-a----         2/18/2026   9:37 PM         321587 ButtonsService.elf.elf.map
-a----         2/18/2026   9:37 PM         225256 Buttons_0.1.1-22-bf09e2b.uapp


PS C:\Users\sd\Desktop\una-dev\una-sdk\Docs\Tutorials\Buttons>

Understanding Button Event Handling

The Buttons app demonstrates how to handle hardware button events in TouchGFX applications. Key concepts include:

Button Event Processing

  • Button presses are captured in the handleKeyEvent(uint8_t key) method

  • Each button has a unique identifier (L1, L2, R1, R2)

  • Events trigger immediate UI updates and state changes

Screen State Management

  • The app maintains current screen state through color and content changes

  • Transitions are handled synchronously in the event handler

  • The invalidate() call ensures the display refreshes after changes

Exit Handling

  • Double-press detection for the R2 button implements app exit

  • State tracking with lastKeyPressed prevents accidental exits

Common Patterns and Best Practices

Button Handling

  • Map button IDs to meaningful actions consistently

  • Use state variables to track multi-press sequences

  • Always call invalidate() after visual changes

UI Updates

  • Keep event handlers lightweight to maintain responsiveness

  • Use appropriate TouchGFX widgets for different content types

  • Consider user feedback for button presses (visual/audio)

Code Organization

  • Separate UI logic from business logic

  • Use clear naming for button actions and screen states

  • Document button mappings in comments

Performance Considerations

  • Minimize work in event handlers

  • Batch UI updates when possible

  • Avoid blocking operations that could delay response

Key Code Insights for New Developers

MainView.cpp Structure

  • handleKeyEvent() is the central point for user input

  • Color changes use touchgfx::Color::getColorFromRGB()

  • Screen refresh requires explicit invalidate() calls

Button Configuration

  • Buttons are configured in setupScreen() with initial states

  • The ButtonsSet widget manages hardware button integration

  • Button states can be NONE, PRESSED, or other states

State Tracking

  • Use member variables to maintain app state across events

  • Track sequences like double-presses for special actions

  • Reset state appropriately after actions complete

Next Steps

  1. Run the Buttons app - Build and test the navigation flow

  2. Modify button mappings - Experiment with different screen transitions

  3. Add new screens - Extend the app with additional colored screens

  4. Explore TouchGFX widgets - Add text, images, or other elements

  5. Study advanced examples - Look at apps with more complex navigation

Troubleshooting

Build Issues

  • Ensure TouchGFX Designer is properly installed

  • Check that all project files are generated correctly

  • Verify CMake configuration matches your environment

Runtime Issues

  • Confirm button mappings in the simulator match hardware

  • Check log output for event handling errors

  • Test on actual hardware for button responsiveness

Common Mistakes

  • Forgetting to call invalidate() after UI changes

  • Incorrect button ID constants

  • Not handling all button states appropriately

The Buttons app provides a solid foundation for understanding user interaction on the UNA platform. Mastering these patterns will enable you to create engaging, responsive applications.