ST TouchGFX

Graphic library solution

STM32 TouchGFX Workshop 2020

 Agenda

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

Several solutions take full advantage of STM32 specificities

Legacy

Core Advanced Advanced

6
 TouchGFX Overview
• Advanced rendering features
• Draw basic shapes drawing (lines, circles, custom shapes)
• Apply scaling and 3D rotation to images at runtime keeping a minimal memory footprint
• Create custom controls by extending or modifying existing widgets or by combining existing
controls with custom container functionality.
• Advanced Rendering Algorithms
• Optimized visible surface determination algorithm
• Customized invalidation techniques minimize the number of drawn pixels
• Optimized for minimum CPU load and memory footprint
• Full environment development
UI Editor, PC simulator, Multi-IDE support

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

TouchGFX Engine Maximum Performance on STM32

Embedded graphic library • Efficient algorithms to minimize pixel
processing
• Makes full use of STM32 MCUs Graphic-
oriented IP and features
TouchGFX Generator
STM32CubeMX Plugin ST Ecosystem compatible
• Cube eXpansion Pack for CubeMX integration
• Support of STM32CubeIDE
10
TouchGFX Designer

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

• List of available widgets

• Content of each screen
• Custom container editor

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

• Limit character sets

• 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

• Communication with system/hardware

separated from logic and graphics

• Easy to develop/test independently Presenter

• Re-use of code Update Update

System User
Change Event

Main Application Model View

23
 TouchGFX Application (1/2) 24

• Composed of one or several SCREENS

• Group of widgets (VIEW)
• Their logic regarding user/system/widgets events (PRESENTER)
• Only one SCREEN is active at a time (for lower memory usage)
• In the MVP architecture:
• Events flow from Model and View to the presenter
• Presenter processes events and update accordingly Model and View
• Model is the only interface with the hardware and backend application

Backend GUI Current Active Screen

• OS tasks
• Hardware
Model Presenter1 View1

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

• Drawable is the basic UI element

• Basic attributes such as position, size, visibility, …
• Widgets inherit from drawables and can thus draw in the framebuffer
• This is only way to draw something on the screen
• Examples: Image, TextArea, Box, …
• Containers are collections of Widgets (and Containers)
• Containers are not drawn themselves - but the children are
• Containers will clip their children
• Children are positioned within the Container, and thus move with it

26
 TouchGFX Mixins

• Specific behaviors can associated to drawables

• ClickListener
• Turn a Drawable into a clickable element
• FadeAnimator
• Fades a Drawable in or out in several steps
• MoveAnimator
• Moves a Drawable in several steps
• Draggable
• Allows a Drawable to be dragged using the touch panel

27
 TouchGFX HAL

• High-level interfaces to connect the TouchGFX library to the system

• OSWrapper : semaphore and Vsync Synchronization routines
• HAL : functions specific to the hardware platform (e.g. send frame buffer to the
display)
• Framebuffer allocator : for partial frame buffer management
• Touch Controller : gives the library the view on touch panel interactions
• LCD Controller : various low-level drawing routines for drawing bitmaps
• Physical button Controller : gives the library the view on physical buttons
interactions

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

Highly application dependent 32

 Thank you

© STMicroelectronics - All rights reserved.

The STMicroelectronics corporate logo is a registered trademark of the STMicroelectronics
group of companies. All other names are the property of their respective owners.