This article will give you an introduction to creating applications with TouchGFX.
We will build a real world application and as we are doing this we will get to know all the important building blocks constituting TouchGFX.
A prerequisite for this article is an installation of TouchGFX.
TouchGFX.msi and installing TouchGFX you will get
- TouchGFX Designer - our graphical tool that helps you create TouchGFX applications. You can create screens and containers, 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 continually refine in your favourite IDE, e.g. by adding logic and integration with other software modules.
- 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.
We will build a simple application that monitors and controls the temperature of a swimming pool.
It consists of three screens.
- Splash screen - showing the TouchGFX 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 works 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. The architecture of the UI part of this application will thus resemble the architecture of a real-world application.
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 you will need to write code yourself. In addition, not all the standard widgets that comes with TouchGFX are available in the Designer.
Let’s go ahead and refine our temperature control by adding an analog clock without using the Designer, and write some code to tie every thing 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.
We recommend reading this article which explains how to connect your UI to the rest of the your system. The article also applies to projects created using the Designer.