Getting Started Using TouchGFX to Develop STM32 Interface Applications (Part 1) - Software Installation and Hello World

okhxyyo

Getting Started Using TouchGFX to Develop STM32 Interface Applications (Part 1) - Software Installation and Hello World [Copy link]

Using TouchGFX to Develop STM32 Interface Applications: Getting Started (Part 1) - Software Installation and Hello World In the fall of 2018, STM32 officially acquired TouchGFX, a leading developer of embedded GUI interface middleware software. Friends who have used TouchGFX know that the interface of TouchGFX running on the MCU system is very cool, comparable to the APP interface of a mobile phone. This time, STM32 acquired it, and the majority of developers no longer have to use the trial version of TtouchGFX, and can use the official version openly! In general, there are two ways to use TouchGFX to develop STM32 interfaces: one is to use the TouchGFX Designer software, which supports dragging and dropping of images and controls, and can quickly generate project projects that can be opened in IDEs such as KEIL or IAR; the other method is that the STM32CUBEMX 5.0 version adds support for TouchGFX, and CubeMX can be used to develop TouchGFX applications (detailed in subsequent articles). This article first introduces the use of TouchGFX Designer. Download address of TouchGFX Designer: TouchGFX Designer download address. You need to register a user name on the st official website first, then log in. The download link is at the bottom of the download page. Figure 1 After downloading, you will get the installation package TouchGFX-4.10.0.msi. It is recommended to use the default path for the installation directory, or install it to the root directory of the D drive. Note: Do not include spaces in the path! Start TouchGFX Designer, and the initial screen is as follows: Figure 2 The function area is mainly divided into two parts: MY APPLICATION, to create your own interface application; ONLINE APPLICATION, which should be the project file preset by GFX. Currently, there is only one DEMO about washing machines, which will not be described in this article. The following takes the STM32F769I-DISCO official development board as an example to specifically demonstrate the first graphical interface routine. First, select the development board we want to use in APPLICATION TEMPLATE. Move the mouse to the Simulator screen, and a CHANGE button will automatically appear: Figure 3 Click this button with the mouse: Figure 4 Select STM32F769I Discovery Kit, modify the project file storage path (for example: D:TouchGFXProjects), and name the routine: MyTest, as shown in the figure: Figure 5 Click CREATE, Figure 6 The software automatically downloads the GUI and template codes needed for this project from the Internet (sometimes the download is very slow; if a red prompt indicates failure, try create again until it succeeds), and the software design screen appears: Figure 7 In order to design the interface of this example, you need to do some preparation first: prepare the picture to be displayed (png format) and place it in the file directory of the project. This example only needs one picture: Figure 8 This is a pre-drawn picture (you can use drawing tools such as brushes to generate png format pictures). The screen resolution of the STM32F769I-DISCO development board is 800x480, so the picture should also be of this size. The project file automatically generated by TouchGFX Designer contains a subdirectory called images. We put the prepared images into this directory: Figure 9 Return to TouchGFX Designer and click on the "Image Resources" tab in the middle left corner: Figure 10 You can see that the system automatically adds the image file we just prepared: Figure 11 Click on the image stm32logo.png: Figure 12 The above operation is equivalent to adding an IMAGE control and setting the main "Image" property of the control to stm32logo.png (terms such as controls and properties will be introduced in subsequent articles), so the above picture is presented. Click Run Simulator in the upper right corner, and the system will generate a simulation screen that can be run on the PC: Figure 13 Wait for a while, and the simulation interface will appear on the computer screen: Figure 14 This simulation interface is very powerful and can also print debugging information on the PC. The simulator will be introduced in detail later. After the simulation interface is successful, you can generate code and burn it to the target to see the actual running results! Click Generate Code in the upper right corner: Figure 15 At this time, confirm that the STM32F769I-DISCO development board has been connected to the PC via a USB cable, and then click Run Target: Figure 16 The prompt message is displayed in the lower left corner: Compiling target code (this takes a long time, please wait patiently): After Figure 17, the prompt message changes to: Flashing target code, and the ST-LINK indicator on the board flashes (the code is being burned!): Figure 18 After dozens of seconds, the burning is completed, and the STM32 logo image is correctly displayed on the board. This is the GUI mode hello, world! The picture is still very beautiful: Figure 19 As you can see, there is no need to type a line of code during the entire operation of displaying the picture! This TouchGFX Designer is special, right? ! Summary: System configuration and version: 1) Host: Windows 10 2) TouchGFX Designer version 4.10 3) Target board: STM32F769I-DISCO development board, the main chip is STM32F769NIH6U 4) ST-LINK-V2.1 driver is essential 5) It is best to pre-install Visual Studio 2013 (or other versions of VS). In the following advanced articles on TouchGFX Designer, VS will be used to add and modify code. VS is the necessary IDE development environment for TouchGFX Designer development. I installed the VS community version, which can be downloaded and used for free: Figure 20 This lecture ends here. The next lecture will introduce the implementation of human-computer interaction functions, starting a new routine from the "button" on the interface! Enter the second lecture: Using TouchGFX to develop STM32 interface applications: Getting Started (II) - Button and Message Response Routine. Author: Haidongqing Electronics Source: Jianshu

ddllxxrr

Very detailed write-up, thumbs up