 So, in the first use case, you start from the touch.jfx designer application directly. And as you will see, we will not exit this application, it's possible not to exit it at all. So, the first, the startup screen of the application is this one. You have to select first the application name, okay, so I will put stn32h7, this query kit, use case A. And then we have to select the application template. The template is covering almost all the ST development kit, or will be in the future. At least all the graphics enabled one, so the one that has hardware acceleration dedicated to graphics are supported. And the one we are interested in in this session is this one, the H7B discovery kit. Regarding the user interface template, you can choose existing templates or start from an empty one that we will do during this session. So now we create the application. During this step, the content of the application template is downloaded from the Internet, so you need an Internet connection. And we have the startup screen of the application. So on the left side, you have all the available widgets that are proposed by the designer. So it starts from buttons, button with label, with icons. Also flex button that are more customizable buttons. You can directly scale it to the size you want, put any image you want in it, while those ones are more fixed in terms of look and feel. You can insert some image element, animated ones, customers, some progress indicators. So an entire set of widgets that are already available in the tool. Then you have the screen view. So this will list all the screens of your application. So a touch JFX application is a set of screens. We will have only one in this test. And in here, there are the list of custom containers that you can define. Custom containers are composed of widgets, of basic widgets. We can come from here or can come from C++ implemented directly. So let's start by adding a background box in the screen view. So a background box that will be just a background image. So as you can see for the moment on the external video I have, you can see that the board is already flashed with a demo, just to show you that it's done live. So let's choose this orange background and we add not this one, but one with a label. So the idea of the demo is to create an application with a button that once clicked will hide an image that I will add. So this button is called ID image. So on the right side of the designer, you can see all the attributes related to the selected elements. So here I have the name of the button, its location and a set of parameters that I can change. And then I will add an image. So the designer also already includes some set of images. So I can pick one in the, for example, clock background. This one is nice. I just need an image to hide it. So it doesn't matter as long as it fits the screen. So this is my basic layout and I will now add some interactions to that. So the tools also allow me to add interaction, basic ones. And if I want to have more complex one, I need to edit directly the C++ code. So the one I want to add are simple. So an interaction is based on a trigger and it triggers an action and it can also trigger another interaction. So we have three interactions. The first one is when I click the button, so button is clicked, there is only one button. I want to hide the image. So I want to hide the widget. You see I can also execute C++ code or change screen or other predefined actions. So I want to hide the widget. The widget I want to hide is the image one. And I also want this interaction, one is done, to be able to trigger another one. So I have to check this one. And I add another second interaction. This interaction two will be triggered by the end of the interaction one. So another interaction is done. Interaction is interaction one and the action is to wait for one second. So one second will be 1,000 milliseconds. And also this interaction will trigger another one, which will be interaction three. Here it comes. So this interaction three is triggered again by an interaction. This time it's interaction two. And the action will be to show the widget. And that's it. Show the widget. I have to choose the widget image one. So that's it for my application. Now I can generate the code associated to this application. Generate the code means transform these images into C++ code, into C tables, implement all the interaction here using the tergetics framework. And I can see the progress of this generation step right here. So it's done. And the first thing I can do is to run the simulator. So there is an embedded PC simulator. So this step will be fast forwarded because it may be longer. Here comes the simulator. So it's the exact screen I defined when I click the image, click the button. And I hide the image and then it comes back. So now what I want to do is to flash it on the target. And there is a button for that. So this clicking this button will trigger a GCC tool chain that will build the C code and C++ code for the format target. So this is all included in the application template. So the application template has the information of which memory are available on the target, their sizes and where to put the frame buffer, where to put the images, the external images and stuff like that. So all this is included in the application template. So this is the moment where the tool is actually flashing the board. It's not well seen on the log window, but it's used, yes, it is seen. It uses the STM32Q programmer tool. So this one has to be installed when using the GFX designer. And now you can see on the video that the demo is flashed. And if I click this button, it works exactly as expected first and also as in the PC simulator. So that's the end of the demo for the first use case. Let's just have a quick look at the files that have been created. So you can see here the core application. So this is where all the initialization of the MCU is done. And it's also the main entry port. You have here the main .c function, main.c file. The interesting other point is the driver folder. And especially this one, the BSP folder, which is the board specific package folder that contains the driver that are specific to this board. So all these files are specific to the discovery board. And also here there are not all these components. But in this list, there is the touch panel driver, for example, that is included. The component with that contains all the H7 DevKit components. So there are removed that link stage, be reassured. So then the HL driver, this is the HL of the SD framework. And you can see also the ERAM, MDK ARM, and MCM32Q by DEED, which are the three IDEs that are supported by this application template. Note that not all application templates support the three of them. They will actually support IR. So the ERAM folder will be always present in the future. The cube ID should also be always supported. And for KIL, it will be some of them. And you can also notice here the cube MX project file that is also supported in this application template. And in the future also, all the application templates will create this IOC file, will contain this IOC file. The main interest of this file is to open cube MX from it and be able to have all the required peripherals for the TGFX already configured. So the SDRAM, the LTDC, the DMA2D, all the peripherals that are modatory for TGFX. And you can then edit this file and add your own peripherals. Then you can generate the code and go back to the designer to edit your graphical user interface, generate the code again, and you have your project updated with both user interface and MCU peripherals. So that's it for this first use case. Let's go now to the second use case.