3.TouchGFX Framework
3.TouchGFX Framework
3.TouchGFX Framework
1 TouchGFX Background
2 TouchGFX Designer
3 TouchGFX Framework
4 TouchGFX Engine
2
3
TouchGFX background
Creation
• Invented by Mjølner Informatics A/S in 2009 and Integrated to Draupner
Graphics entity in 2014
• Provides a software solution for smartphone-like GUI creation outside a
smartphone platform : embedded platforms with constrained ressources
(CPU, memory and power consumption, no GPU)
• TouchGFX Designer editor in constant improvement and enhancement since
first official version v.2.1 in 2014
More and more features/widgets are now configurable within the editor
4
ST Acquisition
• Draupner Graphics was acquired by ST in July 2018
• New site location for ST : Aarhus, Denmark
• Need to reshape the Graphics integration in ST Ecosystem (CubeMX)
• Untide TouchGFX new version from a CubeMX release
• Support of all ST devkits, at least « graphic-enabled » ones
• Ensure internal/external support on TouchGFX (online tools migration)
• First X-CUBE-TOUCHGFX release in January 2020
5
STM32 Graphic Libraries
Legacy
7
TouchGFX Key Features
• TouchGFX is a full C++ framework
• Object oriented design, while minimizing RAM and Flash footprint, through
static memory allocations
• Model-View-Presenter design pattern approach, provides a clean split
between application state, user interface and hardware
• Interface-based flexible approach
• for STM32 hardware Graphic enablers when available, use default CPU-based approach
otherwise
• for identified elements required by the library (e.g. Use of RTOS not mandatory)
8
TouchGFX Key Features
• TouchGFX provides support for
• DPI (parallel RGB), DBI (FMC/SPI), and DSI display interfaces
• 1bpp, 2bpp, 4bpp, 16bpp and 24bpp color displays
• Support multiple frame buffer strategies
• Display framebuffer could be located in internal SRAM or in external SDRAM
• Simple, Double or Partial frame buffer (lower RAM memory usage)
• L8-RGB565 frame buffer format support
• Current 2D hardware acceleration uses ChromART IP for
• Color filling operations
• Bitmap blitting operations in RGB 16bit, 24bit, ARGB (32bit), A4 and A8 pixel formats
• Both with or without alpha-blending
9
TouchGFX Solution
Easy to Use
• WYSIWYG editor
TouchGFX Designer
Graphic development PC tool • Automatic C++ code generation
• Embedded PC-simulator
11
TouchGFX Designer
• TouchGFX Designer is a WYSIWYG GUI editor
• Generates all the C++ code of the built-up UI layout
• Handles the image and text conversions into C code
• Source code can be manually extended and customized (“generated” vs “gui” user code)
• Manages an Excel sheet (text.xlsx) for all text strings referenced by the application
• All-in-one standalone solution for ST development kits
• Supports (almost) all ST devkits (DK and EV boards) through Application Templates (AT)
• Embedded Makefile-based gcc compiler and flashing through CubeProgrammer
• Enables fast design iterations thanks to embedded PC simulator
12
TouchGFX Designer
• Features include multi-screen applications, a large palette of ready-to-use
• widgets,
• skins (themes),
• interactions (trigger/actions callbacks),
• Custom containers creation tool (code reuse),
• IAR IDE supported by all ATs (some also Keil, STM32CubeIDE)
• PC Simulator toolchain uses MinGW/GCC as well as Visual Studio project
• The command-line gcc toolchain environment can also be used for
development task automatization
13
Canvas (Editor) Screen
14
Widgets Panel
• Widgets available in the editor
15
Custom widgets
• Custom containers creation within the tool
• Use C++ inheritance to extend features
widgets source code provided
• More widgets examples available on GitHub
https://github.com/touchgfx/touchgfx-open-repository
16
Interactions
• Some interactions can be fully setup in the Designer
• Trigger (e.g. button clicked, other interaction)
• Action (e.g. act on widget, call C code)
• Can trigger another interaction
• Custom behavior is then edited outside the Designer using
preferred IDE.
17
Image Management Panel
• Set individual bitmap properties (format, location, orientation, etc.)
18
Text Management Panel
• Import True-Type Fonts
• Add languages
19
Project options
• Configure Project (e.g. default button actions, default image settings)
20
Questions break time
21
22
TouchGFX Framework
Model-View-Presenter
• Separate GUI logic and layout
System User
Change Event
23
TouchGFX Application (1/2) 24
Presenter2 View2
24
TouchGFX Application (2/2)
• Model
• Only one in an application
• Stores state of non-active screens
• Interface with the hardware, relaying events to and from it
• Has a pointer to the active presenter
• View
• Holds and configure the widgets of one screen
• Has a pointer to it associated presenter to communicate events
• Presenter
• Receives events from both associated View and Model
• Decides which action to take
25
TouchGFX Screens
26
TouchGFX Mixins
27
TouchGFX HAL
28
Application Implementation Overview 29
29
30
TouchGFX Engine
TouchGFX Engine
• Delivered as binary, integrates efficient algorithms for
• Frame rendering
• Occlusion culling
• Dirty region determination
• Frame buffer management (Partial frame buffer)
• Structured to make full use of STM32 HW accelerators when present
• ChromArt
• LTDC
• JPEG CoDec
• Floating Point Unit used when present
• Runs with or without RealTime Operating System
• Low footprint and deterministic dynamic memory allocation
31
Required Memory Resources
Internal/External RAM Internal/External FLASH
~10-20 KB
TGFX Framework 20 KB
(data structures, tasks stack) TGFX Framework
(Core Library)
~1-15 KB
Application 1-200 KB
(widgets) Application
(Screens definition, GUI Logic)
~500 KB
Frame Buffer(s) 1-20 MB
Application
(Bitmaps, glyphs)
e.g. WQVGA 16-bits color format
(480x272) Double-Buffer