 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 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, S1032QMX for the hardware configuration and S1032QMID. The hardware used is the S1032H7B Discovery Kit. The S1032H7B3 Discovery Kit is based on the S1032H7B 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. The display is a 480 x 272 pixels 24 bits with a capacitive touch panel. TouchFX used 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 the way to separate coding to the classes, making coding more effective in terms of use, 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 the screen too. For this, select a button with the 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 tool with TouchFX. At the bottom properties on the image section, change the presence and release images. Select from screen dark the 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 screen we are going to use for the presence and on presence 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 to screen two. As triggers, select button is clicker. 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 virtual 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-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 the booking. It is necessary to modify the code so we can use them. Add File TouchFX GPIO, Comment 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 Wii. At main.cfile, we start adding definitions a variable for the LEDs. The LEDs initialization state, the push-button interrupts a routine that will toggle the LED blue and the 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 red toggling function. At Model Tick, we'll 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 ModelListener HPPP. Save and close all the files. The step to follow is the presenter. Add the ScreenOnePresenterCPP file add a function user-button called from the model and we'll pass the push-button information to ScreenOneView. Also declare that function at the HPPP file. Save and close ScreenOnePresenter files. Now, for ScreenTwo, open ScreenTwoPresenterCPP 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 ScreenTwoPresenter files. Now is the turn to the view. With this, we will close the loop. Open ScreenOneViewCPP 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 ScreenOne and finally to the view ScreenOne. Declare that function at ScreenOneView HPPP. Save and close ViewOne files. Finally, open ScreenTwoView to write a function with name a TouchFX designer when the power button is clicked. The LED2 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 ScreenTwoView HPPP Declare that function. It was created by TouchFX we now overdrive it. Save and close ViewTwo files. Now we can compile. Click Add a Book icon that is a bug. A 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 MCUs programmed, it is possible to run the application. Here is the result of the example we had created. Thank you for watching this video.