 Hello, my name is Gustavo Sosa, I'm going to put another video from Steam Microelectronics. This is a scrollish third video. In previous videos, we created screen one. In this video, we will create the user interface and add a code for the second screen interacting with the first one. Go to touch effects designer and as a first step, add a button with label, will be used to change to second screen. At the style, change it to square icon button. Place it at the bottom right corner and change the text to OK. With a plus sign at the top left, add a second screen. As background, we'll add an image. At the style, select main bg texture 480 by 272. Now we'll add an image and a text to show the items selected from the scroll list. First, add an image and we'll select image alert 48. Place it at the center of the screen. Now add a text, change its typography to large. Add a text wildcard, delete new text, and in the default wildcard text write new text again. At the scroll list container and at screen one, it's possible to use wildcards too. We want to show another method now. If you want to learn more about wildcards, watch the video we have. Text alignment, select center. On check auto size, change text width to 220. Text place around coordinates 130 and 35. Center again the image. Add a button with label, change text to back. Place it at the bottom right corner. So we can use the buttons to change between screens. We will add interactions. Go to interventions at the top right, click the plus to add an interaction. A trigger, select button is clicked. Attaction, change screen. Choose a screen one. Go back to screen one. Go to interventions at the top right, click the plus to add an interaction. A trigger, select button is clicked. Attaction, change screen. Choose screen two. Click at the scroll list to select it, and at least appearance, make it circular. Because we use Wildcard at the screen too, we need to set the characters for it. Go to text at the left side, then typographies. A typography large that was used at the Wildcard range will add the layers range. Finally, let's generate a code by the icon at the bottom left. Return to cube ID. At the Screen1ViewCPP file, at the end of the itemSelectedHandler function, add a line to send information of the item selected to the presenter so can reach the model and then screen too. Open Screen1PresenterCPP file. We'll add a function called at the view and that will send information to the model. Open Screen1ViewPresenterHeader file, placing the cursor on it and F3. Add a definition of the function, save both files with a save all icon at the top. Open ModelCPP file. Add a function that will store the item selected from the scroll list at Screen1. Then, add a function that will retrieve that item selected so can be get from our model screens like Screen2 in our case. Open ModelHeader file, placing the cursor on it and F3. At public, add the two functions definitions. At protected, declare the variable. Save both files with a save all icon at the top. Use F5 to update the project in case cube ID do not have updated it. Open Screen2PresenterCPP file. At Arctic function, add the code to the function at view that will set the image and text based on the item selected at the scroll list. Set the file with icon at the top. Open Screen2ViewCPP file. Add include files for the text and images. Add a function that will set the image and text at the screen enter depending on the item selected at the scroll list on Screen1. Open Screen2ViewHeader file, placing the cursor on it and F3. Declare the function. Finally, save all files and compile with the icon set at the top. After compilation is complete, change to TouchFX Designer and run the simulator with a button at the bottom. Here is what we had created. Each time an item in the scroll list is selected, it is displayed at the left side as acknowledged. We can change to Screen2 and use the item selected at the Screen1 scroll list. Now, let's see the user interface running at the board. In Screen32Q by D to download the code, we click at the book icon as for the book. When download ends, click the run icon. Here is the user interface running at the H735 board. Thank you for watching.