If you’re new to TouchGFX and want an overview of what it’s all about, you’ve come to the right place.
We’ll go ahead and build a real world application and as we are doing this we will get to know all the important building blocks constituting TouchGFX.
As we proceed you will find videos, text and code. Choose the pieces you like the best and follow along at your own pace.
TouchGFX.msi and installing TouchGFX you will get
- TouchGFX Designer - our brand new graphical tool that helps you create TouchGFX applications. You can create screens and widgets, drag, drop, and adjust them and bring your application to life by adding interactions that react to certain events and activate others. The Designer outputs a TouchGFX application, that is well structured C++ code that you can continue refining in your favourite IDE. Note: Intentionally not all TouchGFX applications can be built using the Designer. In some cases you need to write source code your self. But do not worry, the generated code is divided in such a way as to make it possible to work continuously in the Designer and in the source code without conflicts.
- TouchGFX Framework - the embedded C++ framework that is the very core of TouchGFX. The framework is clearly structured and very flexible, enabling you to build anything you may please. The framework is designed for microcontrollers implying that the highest focus is on maximizing the graphical effects possible, while minimizing the MCU utilization and memory footprint. The framework abstracts away the HW and OS making it possible to run basically anywhere.
- TouchGFX Environment - the tools and surroundings that help us compile and run applications. Everything needed to compile a TouchGFX application, either for running on the PC or on your preferred board, this includes GCC cross compiler, GNU Make, Ruby, a Keil and IAR project file updater and a few other tools.
Let’s build a simple application. Let’s build one that monitors and controls the temperature of our nice new swimming pool.
It consists of three screens.
- Splash screen - showing our logo and doing a few animations
- Main screen - monitoring the temperature of our pool, as well as the outside temperature
- Settings screen - adjusting the desired temperature of our pool
We will make sure to add a few nice effects and transitions to make the UI work and look nice.
Even though most of us won’t have direct access to control the temperature of a real pool, we will do our best to make the application as lifelike as possible. We will read and adjust temperatures by communicating with our simulated HW via interprocess communication. This will make it fairly easy to modify the application to communicate with your real HW whatever that might be.
Designing the UI
Let’s start the Designer and create our screens.
When the designer is not enough
The Designer will try its best to help you do your application, but when doing a real world application there will be times when you will need to write code yourself. In addition, not all the standard widgets that comes with TouchGFX are available in the Designer yet.
Let’s go ahead and refine our temperature control by adding an unsupported widget, and write some code to tie things together.
A working system
We now have a complete UI running on the target board. If we were creating an actual temperature control, we need of course to communicate events from the UI to some kind of temperature control mechanism on the target hardware, and vice versa to populate the UI with real temperature readout values.
The Designer is not capable of modelling a hardware interface directly, so to achieve this you will need to write some code, in the exact same manner as you would in earlier TouchGFX versions before the Designer was introduced.
A video illustrating this will be coming shortly. In the meantime we will recommend reading this article which explains how to achieve this. The article also applies to projects created using the Designer.