The TouchGFX Designer gives you a graphical way of building TouchGFX applications. The Designer is intended for developers, designers and anyone else who is interested in building applications for embedded targets.
TouchGFX Designer is an add-on to the existing TouchGFX framework. You can continue using TouchGFX the way you have always done by writing your own containers, views, presenters or you can let TouchGFX Designer help and generate these for you. Or you can mix and match, use TouchGFX Designer to create some of your views and hand code the others.
When you install TouchGFX Designer you will get 3 things:
- TouchGFX Designer - the editor for designing your applications
- TouchGFX Environment - the TouchGFX environment supporting compilation of TouchGFX C++ applications
- TouchGFX 4.6.0 - the TouchGFX framework, evaluation version
This enables you to start building, compiling and running TouchGFX applications from TouchGFX Designer immediately.
- In the current beta version of TouchGFX Designer, the framework is installed in C:/touchgfx-env/touchgfx-release-4.6.0-eval.
- Change `MyApplication/config/gcc/app.mk` if you want to change the framework version used
TouchGFX Designer is designed to be as unobtrusive as possible, meaning that it should never interfere with any of the code you write.
- Check the article on code generation for more info on the way code is divided.
An overview of the graphical editor is given below.
You can check out a getting started video of TouchGFX Designer here.
Preview and Generate
At the top you have three main action buttons.
- Preview Simulator is for previewing your designed application on the PC.
This will generate code for your application at a temporary location, compile this using Make and GCC and spin up an executable simulator
- Preview Target is for previewing the application on your chosen embedded target.
This will generate code, cross compile it for your target and try to flash the compiled code to the chosen board. Remember to connect your target beforehand.
- Generate Code will generate TouchGFX C++ code for your application.
You can go and inspect, alter and compile the generated code at your chosen application path.
Support for custom embedded targets will be added in the near future.
The Canvas at the center stage is the place where you assemble your screen and position all your widgets. You can drag and drop boxes, images, text areas, … to any x,y position.
Widgets that can be resized, like boxes, text areas, scalable images, … can be resized by dragging their corner adorners.
Guidelines will appear automatically when you are aligning elements. This helps you make sure that elements are positioned nicely as desired.
At the top left is an overview of the structure of the application. Here you can see your different screens and see what widgets they consist of. You can use the Application Structure view to reorder elements, move an element in front of or behind another. You can drag and drop elements into containers to establish a parent-child relationship.
At the bottom left is the available widgets. Here you choose the widget you want and click or drag this to the canvas.
More widgets will be available here in the near future. Support for custom widgets and containers will be introduced.
The right side is where you adjust each widget. You can adjust all properties for any selected widget. Properties like name, position and size of elements are generally available across all widgets. More specific properties, like the pressed and released images of a button, can be adjusted as well.
TouchGFX Designer tries hard to make things work as intuitively and as smoothly as possible.
The tool has been and is constantly being developed in close collaboration with the users.
Feedback is the one thing we appreciate the most and the tool benefits the most from.
A few noteworthy examples of general features that hopefully makes life more delightful:
- Compilation is done intelligently and continuously - this means that only a few seconds will pass before your preview is running
- Undo / Redo - All operations can be undone and redone, giving you an easy way out if something is not as intended.
- Selection - You can select and move, copy, paste and delete multiple elements making it very efficient to create your UI.
- Alignment - Making sure everything is aligned properly is easy. Guidelines will appear when moving elements, enabling an easy way of aligning elements.
- Keyboard shortcuts - CTRL-C, CTRL-V, CTRL-A, DEL, … - they are all there, giving you a wellknown and fluent way of adjusting your design.
TouchGFX Designer is still in an early phase of its life. More features will come before we reach version 1.0.
Some of the features we plan on including are
A way of making things happen when things happen - as an example making a transition to another screen when a button is pressed, another could be fading in all buttons when a screen is entered
A nicer way of handling texts, fonts, wildcards, ...
- Custom Containers
TouchGFX has a nice way of creating reusable components. TouchGFX Designer should also have a nice way of creating such components.
- Custom Targets
Support for compiling and flashing code to your own board
- Other ideas
There is a very active community at trello, here a lot of ideas are discussed and many of these are making their way into TouchGFX Designer