 Le premier secteur de l'INPUT-File est le layout de la base QI de l'interface user. C'est ce qu'on implementera, donc une image background avec une image basse, une image basse aussi, et une image animée. Dans cette photo, vous n'aurez que de l'un de l'autre, mais c'est un logo ST. Avant de commencer avec la première partie de cette lampe, nous devons extracter les files d'INPUT que nous avons nécessaires et l'INPUT, le projet préparé que nous avons créé pour cette vidéo. Normalement, avec cette vidéo, vous devriez avoir la suivante structure, donc un folder contenant l'un des cartes graphiques, incluant un, nous sommes en train de brosser ceci, le numéro 5. Et vous avez aussi 3 files d'INPUT-File. La première contains les démarches originales, et l'une qui est flashée sur le bord de l'outre-de-box. Vous pouvez facilement réfléchir, en utilisant le file de base qui est ici, dans le folder binaire. Vous vous enzipez tout le contenu, et vous cliquez doublement sur ce file. Vous vous enzipez aussi sur le bord. Et vous vous enzipez automatiquement la démarche original, qui ressemble à ceci, donc c'est un set de toutes les démarches pour chaque libraire graphique. Donc il y a un STM-Win, il y a un JFX et un Embedded Wizard. Les autres files d'INPUT-File sont les deux files pour l'ensemble de notre lab. La première, on enzipe cette file. Si nous suivons le slide, c'est la première étape. Vous devez enziper ce projet de préparation. Ce projet de préparation n'est pas vraiment préparé, dans le sens où vous pouvez l'enlever de l'autogéphique. Mais nous l'avons préparé parce qu'il y a, comme vous pouvez le voir, un setting de quad SPI, ce n'est pas un setting octo SPI, ce n'est pas fonctionnel sur toutes les portes. C'est comme si nous étions dans l'application de l'application, donc quand je parle de l'application de l'application, je veux dire que les exemples qui sont offerts par le tool de l'autogéphique, pour toutes les portes de l'application de l'autogéphique. Donc quand vous ouvrez l'autogéphique de l'autogéphique, vous verrez en quelques minutes, le premier écran est l'application de l'application de l'autogéphique. Et pour l'enlever, vous devez choisir le bord sur lequel vous voulez travailler. Et quand vous choisissez le bord et créez le projet, il sera downloadé. Donc ceci est de l'internet, vous n'aurez pas tous les exemples installés quand vous installez l'autogéphique de l'autogéphique. Donc il downloadera les propres files sur votre computer et il sera presque exactement le contenu de ce file d'exemple pour un peu d'applications que nous devons étudier pour ce workshop. Dans le sens que nous avons eu plusieurs attentes à chaque session et nous voulions tous pouvoir travailler. Donc avec les défauts, certaines portes étaient either freezing or having a black screen. Donc si vous voyez ce genre of issues on your board, it means that maybe you did not apply or maybe the settings of the Octo-SPI are wrong and we will see where it is exactly in the code for you to update. It's in the slide set, it's described also. So we will extract first these two folders in this folder 2020 STGFX workshop and the other zip file is the modified files. So we modified, we already implemented all the five steps of the lab into the source code but within a specific defines. So the code is disabled and we will enable it by defining step by step each compilation flags. So for the moment we will not use this file. We will only start using it at step 3. So what did we unzip? We unzip to two folder. So this one is the one that is normally created by the STGFX designer but this one is modified regarding the Octo-SPI settings and we unzip also the assets so all the images, the input images that we will use during this demo and starting by this animation, animated logo. So you can see in fact animated logo means several steps of animation of the logo. And then we can also see the background image and all the buttons that we will use in either pressed state or release state. We will see that during the lab. And then we can open the STGFX project. So the STGFX project if we go back at the root of the folder so the root folder will always be the 2020 STGFX WS. And in this folder we go into our project and in this project let's describe it. So what is inside? First you have the old initialization code of the border. This is the regular code that is outputted by the Cubemix tool. It contains the made.c so it's the entry point of the application and the initialization of all the peripherals that have been defined in the Cubemix tool or by yourself if you do not use the Cubemix tool. Then you have the driver folder that contains the high level abstraction layer drivers. These are high level interfaces that have been defined for specific features of our IPs. And especially the BSP folder that contains all the drivers the low level drivers that are needed to interact with the devices that are connected to the MCUs. You can see that in this folder there are many many many components. This includes touch panel These are for external flash memories. For example these are display controller drivers. We will not use of course all these components but these are the components that are included in the H7 1.7 Cube firmware for the all these are all the components that are included in all the H7 discovery or evaluation kits we will see in the QBD that only three of them are used. In fact two of them are used it's the touch panel driver and external flash driver and these are the specific drivers for the H7 B3i. It's not really drivers it's more set of defines for each component to initialize them quickly. Since we are providing these devices with our state development kit we also provide a way to initialize them quickly. And these are can be of course some starting point for developing your own driver when you choose another display or another external ROM or another touch panel for example. Then you have the ID's folder containing the project of each ID's. This one is for IR, the MDK ARM is for KIL and the STM32 Cube ID for the Cube ID. They are present through the three of them, maybe in the future only one will be present the STM32 Cube ID because you have to understand that the ID you choose is defined in the CubeMix project you use. So by default it's set to Cube ID, you can change it and in this case normally the corresponding project should be created. So by default here we have selected the Cube ID project that is defined in this file so the IOC file is the CubeMix project. So in this file we have the information that STM32 Cube ID should be used and MDK ARM and E-Warm should not be there. They are there for the moment, it's the first version of the plugin it wouldn't be surprised if in the next release of the application template only one folder remains but you are free of course to define another ID in the CubeMix project and then the corresponding ID project folder will be created. The GCC is the MEC file MEC file bails the GCC toolchain that is used to build the target binary from the Togetic Designer so you can see here that you have also a scatter file and a startup assembly code so this this MEC file will you can use it if you want you can modify it even but normally it is used transparently we will see in the designer when you press the RAM target button it will first build the code using this MEC file then the middleware contains the external external or internal middleware libraries such as the Friartos library and the Togetic fix from work library and finally the Togetic fix folder that contains the file that will be open in a second Togetic fix project file and all the file that corresponds to this Togetic fix project this one is a specific file that may also disappear once this one exists it is the file that is created when you start from scratch your application on your custom board from Cubemix so you use Cubemix you create you create a project using Cubemix selecting the correct MCU then you set up your configuration in terms of IPs you enable the Togetic fix plugin in the Cubemix tool and generate the code and the first in terms of designer the first file that will be created this dotpart file and this dotpart file contains mandatory information needed by the Togetic fix designer tool to create a project with the correct screen definition the correct color format definition so once you double click on this file the Togetic fix dot Togetic fix file will be created and this is this will be the project file for your Togetic fix designer so before opening it let's have a look at the folder hierarchy of this Togetic fix project these are internal input internal entry point for the Togetic fix application the most important to look at are in fact the Asset folder the Asset folder contains all the assets of the application by assets we mean the input the true type fonts that you will use in your application but also the input images so you can see the images not yet because the project is empty for the moment the input images that we will add in our project will be located in this folder in a PNG file or other format but in a raw input format and it will also contain the update this Excel file containing all the translation and all the textual values of your graphic user interface the build folder will contain the object created when building the target using the GCCMEC file the build folder will contain the output of the build launched from the Togetic fix designer for the moment it's empty and the generated folder will contain all the files corresponding to what you defined in the Togetic designer all these files in the generated folder are read only and should not be modified directly by yourself normally it can happen but not that if you modify them and regenerate the code from the Togetic designer you are written so the usual way to do that is to generate your basic user interface in the Togetic designer and then use the sub classes that use these base classes so for example in the GRI generated it will contain the basic for example screen 1 so this is the one screen that is defined already and this screen 1 view base will be the base class containing all the initialization that have been made in the Togetic designer so if you add a widget from the designer or if you add a background image it will be the initialization that will be done in this class and if you want to add a custom widget that is not available that you define yourself then you will use subclass of this class which is automatically defined here so the screen 1 view class inherits from the screen 1 view base class and so it can either extend what is done in the screen 1 view base class or overread what is done so to make your custom behavior in your application not also that you have a simulator here so the simulator means that you can either launch the simulator from the Togetic designer it will use another make file based tool chain to build the code for the PC platform for the Windows platform but you can also use what is provided here it's the visual studio it's not created yet because we did not generate the code from the tool yet we will see just after it propose a visual studio solution that can be used to debug also the simulator if you want only to work on your graphical interface logic not the interaction with the system because you will only work on run it on Windows you can debug your logic using the visual studio while when you run only the simulator from the designer you are not able to do some debugging some step by step execution for example so with this visual studio project you will be able to do that and the most important point is the interface with the system so this target folder contains the generated file so these are generated by the kubemix not by the designer when you set up the Togetic plugin in the kubemix we will come to that during the lab to see what is done exactly so let's now open the Togetic Designer project which is located in the Togetic fix folder so double clicking on it should normally open directly the Togetic Designer because the JFX and dot part files are associated with the program and we open it on an empty layout not really empty because we can see that there is one screen, one default screen that is defined