 Welcome to this Estimike Electronics video, I'm Gustavo Sosa and Phil 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, screens 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 we'll be shown the interaction between the Wii and the hardware in TouchFX. For this, we'll be used TouchFX Designer to create the Wii, STM32-QMX for the hardware configuration, and STM32-QID. The hardware used is the STM32-H7B Discovery Kit. The STM32-H7B3 Discovery Kit is based on the STM32-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 the 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 the screen too. For this, select a button with a level widget. Change its default name and level it too to screen too. 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 too, click on the plus at the screen section. As in screen one, a box has background and a button with level to change to screen one will be added. It is possible to just copy them from screen one 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 presence and release images. Select from a screen dart that round the small button. In screen two, we are going to use a bulb. As in screen one, 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 preset and on preset 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 two. 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 one, an interaction will be added so can change the screen too. As triggers, select button is clicked. Use button to screen two. At action, choose change screen and select screen two. Move to screen two. Add the first interaction as in screen one, but now to change to screen one. Here select button to screen one and change to screen one. A second interaction will be added when the power button is pressed. Name it button led screen two. 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 Preferral 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, command lines 52, 56, 76 and 80 so we can write the leds. Following the model used by TouchFX, we will start writing in the application the code to do the link with the GUI. At main.c file, we start adding definitions of variables for the leds. The leds in the civilization state, the push-button interrupts a routine that will toggle the led blue and a variable taken by the GUI. Finally, the function to toggle led red that will be called from the GUI. 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'll check if the push-button was present and propagated to the presenter in the view. 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. Add the screen one presenter CCP file, add a function user-button called from the model, and we'll pass the push-button information to the screen one view. Also declare that function at the HPPP file. Save and close the screen one presenter files. Now, for a screen two, open the screen two presenter CCP 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 the 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 that function at the screen one view HPPP. Save and close view one files. Finally, open the screen two view to write a function we named a TouchFX 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. Add the screen two view HPPP. Declare that function. It was created by TouchFX, we now overdrive it. Save and close view two files. Now we can compile. Click at the debug icon that is a bug. 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 disco loader. To finish, hit OK. Debug session will be launched. You may be asked to update the ST-Link. If please do it and after it is updated, launch the debug again. After enter 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.