Creating your own application
In this tutorial you will learn how to create an application from scratch. We will create an application similar to the Button Example provided with TouchGFX. Throughout this tutorial you will be presented for several of the important parts of TouchGFX and how to use the TouchGFX Designer. You will also learn how to write code to complement the design you create in the TouchGFX Designer.
In this first step you will see how to insert a PNG image as a background.
Starting a new project
Start a new project in TouchGFX Designer. We will call the project MyApplication1. The project is based on the "STM32F746G Discovery Kit" Application Template and the "Blank UI" UI template.
Do not worry if you do not have a STM32F746 Discovery board, you can still run the Windows simulator. If you select another Application Template with a different resolution, the graphics will not fit the screen, but you should be able to complete the tutorial anyway.
A TouchGFX application consists of a number of Screens. The Screens contains a number of Widgets that make up the user interface. A Screen covers the whole display, so only one Screen is shown to the user at a time.
The first thing to do is to change the name of the initial Screen to Main as illustrated below:
Inserting a background
It is normally a good thing to cover the complete background of a Screen with one or more widgets. This can be e.g. a Box or an Image. In this application we will use an Image.
Before we can use an image in the TouchGFX Designer we need to import the file. TouchGFX supports BMP and PNG images. PNG files are preferred over BMP files as they are smaller and supports transparent pixels.
The images we will use in this tutorial can be downloaded from this link. Unzip the file to a directory on your disk.
We want to use the file named "background.png" as our background. To import that file, select the Images tab and click the blue plus icon. Navigate to the unzipped folder and select the "background.png" file. Press open to import it.
We are now ready to use the image in our application. To do that we need an Image widget. Select the Widgets tab next to the Images tab, find the Image Widget in the list of widgets, click it to insert an Image in the Screen. It is a good principle to change the name to something meaningful, like backgroundImage.
After inserting a Widget we normally need to configure some of its properties like position or color. The properties of the selected Widget are shown to the right in the TouchGFX Designer. In this case we are satisfied with the position in 0,0, but we want to change the Image property to select the "background.png" file previously imported. Select the "background.png" in the Image drop-down list.
We have now created a simple application with one Screen consisting of only a background image covering the whole user interface.
In the next step, we will insert two buttons. Move on to the next step when ready.