 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, 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 Wii and the hardware in TouchFX. For this, we'll be used TouchFX Designer to create the Wii, STM32 Cube MX for the hardware configuration and STM32 Cube ID. 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 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 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. Do LED off and LED on. Lastly, uncheck visible for LED image. Screen 1 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 a 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 presence and release images. Select from a screen dark 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 preset and on preset will be an image we had imported to simulate a power button. Change the image's 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 to screen 2. 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 pressed. Name it button led screen 2. Here, as action select call new button 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 SN32-QBMX5 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 Serving. Next, go to nested Interruptor Controller Preferal and enable the Interrupt for External Interrupt Line 15-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 the 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 rod 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 CCP file, add a function user-button called from the model and will pass the push-button information to the screen one view. Now declare the function at the HPPP file. Save and close the screen one presenter files. Now, for 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 the 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 the function and screen one view HPPP. Save and close view one files. Finally, open screen two view to write a function we named a TouchFX designer when the power button is clicked. LED two 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 TouchFX, 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 at 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 MCUs programmed, it is possible to run the application. Here is the result of the example we have created. Thank you for watching this video.