 Welcome to this ST-Microelectronics video. I'm Gustavo Sosa and I'm a Field Application Engineer. In this video, we will start with an introduction. We'll follow an explanation on the TouchFX model. After this, we'll show how to create a TouchFX project, screen creation, how to change between the screens and finally, we'll implement how the hardware and graphic usage interface interact. We will create and navigate within two screens and will be shown the interaction between the GUI and the hardware in TouchFX. For this, we'll be used TouchFX Designer to create the GUI, ST-M32-QMX for the hardware configuration and ST-M32-QMID. The hardware used is the ST-M32-H7B Discovery Kit. The ST-M32-H7B3 Discovery Kit is based on the ST-M32-H7B family with two megabytes of flash and 1.4 megabytes of RAM, capable to fit the graphics buffer within it. The LTDC peripheral is a DPI interface that displays a 480 x 272 pixels, 24 bits with a capacitive touch panel. TouchFX uses a well-known software design pattern, Model View Percenter. This is the modern way of doing user interface development, just like iOS or Android. It is structured a way to separate coding to the classes, making coding more effective in terms of reuse, maintenance, and code quality. Model is interface to your system. View is the visual appearance of the user interface and presenter is the logic for the user interface. In the Model View Percenter used by TouchFX, the events flow from the model and the view to the presenter. It is only one model and is interface with a hardware. It is a presenter and a view per screen. The model could handle multiple screens, but only one screen is active at a time to lower memory usage. Let's open TouchFX. Name and select the path for the new project. Remember, the name and the path should not have spaces. Select the application template for your board and create the project. Now, we are going to create the screens. First, at the screen one, we will add the background. It could be an image, but in this example, we are going to use a box. Resize it to fit the screen and change it to your desired color. Here will be a dark blue. Next, add a button to change to screen 2. For this, select a button with a level widget. Change its default name and level it 2 to screen 2. Place it at the convenience part of the screen, like at the center bottom. It is possible to add images. A way to add them is by adding an image widget. At the widget properties, click at the plus to import the images into the project. Select the image you want to add to the project. Now we have the images in TouchFX. We are going to add a logo image and the image for the virtual LED. LED on and LED off. In this case, the image order is important. First place LED off and top of it LED on. Let images names are important too, as will be used in the code. This virtual LED will be turned on and off by the hardware push button at the board. Change the default name for LED images. The LED off and LED on. Lastly, uncheck visible for LED image. Screen one is ready. To create the screen 2, click on the plus at the screen section. As in screen 1, a box as background and a button with level to change to screen 1 will be added. It is possible to just copy them from screen 1 and change the color of the box and the name and level for the button. For this button, its appearance will be changed to another included to with TouchFX. At the bottom properties, on the image section, change the present and release images. Select from a screen dart that round the small button. In screen 2, we are going to use a bulb. As in screen 1, we will use one image for bulb on and another for bulb off. Again, the name will be changed as the name will be used at the code too. Remember in this case, images order is important. Finally, a button will be added to turn on and off the bulb and a real LED at the hardware. For this button, the skin we are going to use for the present and on present will be an image we had imported to simulate a power button. Change the images name to bulb on and bulb off. Uncheck visible for bulb on image. Rename the power button to button LED screen 2. To change between screens, it is needed to add what is called interactions in TouchFX. Interactions are contained at each screen. Interactions are at the right side. The interactions to change between screens will be linked to the buttons in this example. At screen 1, an interaction will be added so can change the screen too. As triggers, select button is clicker. Use button to screen 2. At action, choose change screen and select screen 2. Move to screen 2. Add the first interaction as in screen 1, but now to change to screen 1. Here select button to screen 1 and change to screen 1. A second interaction will be added when the power button is present. Name it button led screen 2. Here as actions select call new built on function and give the name to the function that will be called by the code. Later in the code, this function will be written. To finish, generate the code. Open the project folder after TouchFX generates the code and open the SN32QMX5 by double click on the ICO file. Bored leds red and blue are already configured. It is only needed to configure the push button as interrupt. Set PC13 as GPIO External Interrupt 13. Next, go to nested Interruptor Controller Preferal and enable the Interrupt or External Interrupt line 15 to 10. Generate the code. After the code generation ends, you can select to open the project or the project folder location. Today we are going to open the folder. I am copying the QBID project path to open the project from QBID using the option Open Project from File System. Just for sanity check, let's compile the project. TouchFX template uses the leds for debugging. It is necessary to modify that code so we can use them. Add File TouchFX GPIO, Comment Lines 52, 56, 76 and 80 so we can drive the leds. Following the model used by TouchFX, we will start writing in the application the code to do the link with the Wii. At main.c file, we start adding definitions of variables for the leds. The leds in a civilization state, the push button interrupts a routine that will toggle the led blue and a variable taken by the Wii. Finally, the function to toggle led red that will be called from the Wii. Next step, we will be tooling the model section to the application. It is needed to modify the file related to the model. Let's start opening model ccp file. Add a declaration for the push button variable and the led route toggling function. At model tick, we will check if the push button was present and propagated to the presenter interview. Model tick is a place suggested to do the link to the application. We add a function that will call the led toggle from the application. Now, open model hppp to declare the led red toggle function. We need to declare to the function that will pass that the push button was present at model listener hppp. Save and close all the files. The step to follow is the presenter. At the screen one presenter cpp file, add a function user button called from the model and will pass the push button information to screen one view. Also declare that function at the hppp file. Save and close screen one presenter files. Now, for screen two, open screen two presenter cpp file. Add a function that will call from the view the function that calls the toggle led red function at the model. Declare that function at this hppp file. Save and close screen two presenter files. Now is the turn to the view. With this, we will close the loop. Open screen one view cppp and add a function to make visible or not the virtual led image depending on the push button state. Pass it from the application to the model to the presenter screen one and finally to the view screen one. Declare the function and screen one view hppp. Save and close view one files. Finally, open screen two view to write a function with name at touch effect designer when the power button is clicked. Led to function will make visible or not full on image and will trigger so the led red can toggle going from the view to the presenter to the model and ending at the application. At the screen two view hppp declare the function. It was created by touch effect. We now overdrive it. Save and close view two files. Now we can compile. Click at the debug icon that is above. At the debug configuration will be opened only the first time the project is debugged. Go to the debugger tab. We need to add an external loader so qid can program the external flash memory. Enable the external loader. Click the scan and look for the stm32 h7b3 disk loader. To finish, hit OK. Debug session will be launched. You may be asked to update the stlink. If please do it and after it is updated, launch the debug again. After empty use programmed it is possible to run the application. Here is the result of the example we have created. Thank you for watching this video.