TouchGFX User’s Manual
(C)opyright Draupner Graphics A/S 2014
www.draupnergraphics.com
www.touchgfx.com
Contents
1 TouchGFX Manual 1
2 The TouchGFX Distribution 5
2.1 Updating your TouchGFX installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Distribution types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Main Component Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Supported Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.5 TouchGFX File Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.5.1 Applications (app/) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.5.2 Documentation (doc/) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5.3 TouchGFX (touchgfx/) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5.3.1 Board Packages (touchgfx/board/) . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5.3.2 Framework (touchgfx/framework/) . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5.3.3 Precompiled libraries (touchgfx/lib/) . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5.3.4 RT Operating System (touchgfx/os/) . . . . . . . . . . . . . . . . . . . . . . . . 9
3 Development Environment 11
4 Build and Execute 13
4.1 Quickstart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2 Make . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.3 PC Simulator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3.1 MinGW / GCC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3.2 Visual Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.4 Target Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.4.1 Building and downloading applications with IAR . . . . . . . . . . . . . . . . . . . . . . . 16
4.4.2 Building and downloading applications with Keil uVision4 . . . . . . . . . . . . . . . . . . 16
4.4.2.1 Downloading Applications for ST ST3249xI eval board (4.3" and 5.7" display) with
Keil uVision4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.4.3 GCC Building applications with GNU GCC compiler for ARM . . . . . . . . . . . . . . . . 18
4.4.4 Programming TouchGFX demo board 4.3" LPC4350 when Compiled with GCC . . . . . . 19
4.4.5 Programming TouchGFX demo board 4.3"/7.0" LPC4353 when Compiled with GCC . . . . 24
4.4.6 Programming ST Boards when Compiled with GCC . . . . . . . . . . . . . . . . . . . . . 26
iv CONTENTS
5 Application Development 31
5.1 Application File Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.1.1 Application assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.1.1.1 Font assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.1.1.2 Image assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.1.1.3 Text assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.1.2 Application configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.3 Graphical User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.4 Platform Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.5 PC Simulator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.6 Target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.2 Creating a New Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.2.1 Visual Studio Project Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.2.1.1 Starting from scratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.3 Project Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.3.1 GCC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.3.2 Microsoft Visual Studio 2010/2012 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.3.3 Screen Orientation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.3.4 Image Output Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.3.5 Text Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.4 Assets and Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.4.1 Font Converter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.4.1.1 Kerning support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.4.2 Image Converter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.4.3 Text Converter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.4.3.1 Text Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.5 Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.5.1 Model-View-Presenter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.5.1.1 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.5.1.2 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.5.1.3 Presenter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.5.1.4 FrontendApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.5.1.5 Switching Screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.5.1.6 Class Diagram, TouchGFX MVP . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.5.2 Drawables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.5.2.1 Adding Drawables to a View . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.5.2.2 Coordinate Systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.5.2.3 Size and Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.5.2.4 Limitations on the number of drawables . . . . . . . . . . . . . . . . . . . . . . 46
5.5.3 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
TouchGFX (C)opyright Draupner Graphics A/S 2014
CONTENTS v
5.5.3.1 Input Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.5.3.2 Drag Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.5.3.3 Gesture Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.5.3.4 Other Input Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5.3.5 Timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5.3.6 External Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5.4 Memory Allocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5.5 Custom Widgets and Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.5.5.1 Tweaking Existing Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.5.5.2 Custom Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.5.5.3 Custom Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.5.6 Canvas Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.5.6.1 Using Canvas Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.5.6.2 Memory allocation and usage . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.5.6.3 The Coordinate System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.5.6.4 Custom Canvas Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
5.5.6.5 Painters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.5.7 Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.5.8 Using Text and Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.5.8.1 Using Texts in Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.5.8.2 Wildcards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5.8.3 Switching Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5.8.4 Conversion Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5.9 Using Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5.9.1 Using Images in Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5.9.2 The Conversion Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5.5.10 Using Callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5.6 Widgets, Containers, Mixins, Canvas Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.6.1 Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.6.2 Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.6.3 Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.6.4 Canvas Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.6.5 Painters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.7 Miscellaneous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.7.1 Screenshots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
6 Examples 63
6.1 Animation Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6.1.1 Framework Elements Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6.1.2 Example Location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
TouchGFX (C)opyright Draupner Graphics A/S 2014
