 Nous allons maintenant ajouter des interactions dans notre layout. Nous allons voir ce que nous allons faire. Tout d'abord, c'est le target que nous voulons acheter. Nous voulons avoir pas une scrine, mais deux scrines. Chaque scrine va avoir son propre bouton pour changer à l'autre. La première, nous avons un deuxième bouton qui va changer à la deuxième. Et la deuxième, nous avons un bouton prévu qui va changer à la première. Nous allons utiliser pas l'effet de la slide, je vais expliquer pourquoi. Ce sera l'effet de couverture, qui est similaire, mais n'a pas besoin d'un buffer extra pour travailler. L'effet de slide, en fait, a besoin d'une configuration spécifique de l'initialisation de TGFX pour spécifier l'initialisation d'un buffer extra. Un buffer extra est disponible juste au-delà de l'un qui est défini pour l'application. Et en utilisant cet extra buffer, la TGFX librairie va impliquer cet effecteur de slide, la transition de l'initialisation entre les scrines, par randrer l'intérêt de la prochaine scrine pour être dédiée. Et pour pouvoir slider entre la première et la deuxième. L'effet de couverture est une transition similaire, mais n'a pas besoin d'un buffer extra. Nous allons utiliser cet extra buffer, parce que dans 24 bits par pixel, ajouter un buffer extra à l'extra-memory à l'extra-memory ne sera pas supporté par l'application. Donc, on va continuer à couvertir l'effet, en fait, avec l'effet de slide. Nous allons ensuite ajouter un flex-button. Nous avons plusieurs boutons de type, des boutons de type dans le design. Certains ont une appearance prédefined. Et le flex-button permet beaucoup de flexibilité. Comme je le disais, par définir vos propres images ou de presser et relier les états, incluant textes ou pas, ou en utilisant des images prédefinedes. Donc, le côté de ce bouton est complètement configuré. Ce n'est pas le cas pour les principaux boutons. Nous allons donc configurer ce specific bouton avec les images importées pour le démon. Et ajouter un nouveau écran. Nous allons cliquer sur ce plus-button dans le panel. Et nous verrons que nous pouvons couper et tester un set de rejet de l'un à l'autre. Donc, ça s'éteint la configuration de rejet. Dans notre cas, ce n'est pas un grand délire parce que ce n'était pas juste une image de bas-grond mais, pour un layout plus complexe, ce n'est pas intéressant de couper et tester un rejet de l'un à l'autre. Et nous allons cliquer sur le second bouton dans le second bouton. La dernière étape est de définir l'interaction dans le bouton. Donc, le bouton permet de définir un set limité des interactions. Pour d'autres interactions plus advancedes, nous devons impliquer directement dans le code. Mais l'interaction toujours permet de définir des définitions d'interaction. Donc, l'interaction sera définie par un trigger. Nous verrons que ce genre de triggers sont supportés dans le bouton. Donc, si nous choisissons un bouton, nous pouvons choisir aucun bouton qui est defini dans le current et un action. Donc, un trigger et un action. Et l'action sera, dans notre cas, de changer le bouton. Il peut aussi être, nous verrons, que l'interaction est une partie de l'ab pour exécuter un code spécifique ou pour augmenter le budget. Par exemple, aussi. Donc, il y a un certain nombre d'interactions basées qui sont complètement configurées par le designer. Cela signifie que vous n'aurez pas à pratiquement impliquer le code C plus. Ce code C plus. Cela sera fait pour vous. Alors, commençons d'abord. La première étape est d'ajouter notre première bouton qui nous permettra de changer à la prochaine étape. Donc, nous allons cliquer, single-click, sur le bouton flex. Donc, c'est l'apparence du bouton flex. C'est juste une boîte avec une boîte. Donc, sur la droite, vous pouvez voir, let's me enlarger vous pouvez voir le style default. Il s'appelle style in the tool. So, the default style is a box with border and release is this blue. The pressed state is a lighter blue. We cannot remove this style. We will not use it, but we cannot remove it until a new style is defined. So, we have to add a style and our style will be an image. So, we want to define an image button and then we can remove this border style. For the moment, we have no image defined. So, we have to enlarge unfold this category. And we will set the position to this position. Again, it's not mandatory to use exact position. I will use the guides that are provided with the tool. And then, we can set the image that corresponds to the press and release state of this button. So, the release state will be the dark blue and the pressed state will be the light one. And we can lock the flex button to the image size. So, you can see here that you may be surprised that the box that fits the image is larger than the has a higher height than the actual button. In fact, it's because there is some shadow on the button. That's why it's bigger. So, we have to rename this button correctly and forgot to do it. So, the button will be button transition. Again, I don't think this one is mandatory for this lab. So, in slide 33 we are done. So, we can add now a new style that will come along with the image one. So, we can fold this image style and add a new one that will be some text. Because we want to put some text on this button. So, the text you can see now is not centered in the button. So, we can modify or can adapt the position of the text using these attributes and we want to put it around the center of it. But we have to put the right the correct text to be sure that it is properly centered and the correct text will be next. And we will also change the color. So, the color of the text will be deep the black color for the pressed state and put to white when it is released. So, it appears clearly on this dark blue. So, we are done with this first button. Let's now add the new screen. So, we are in the screen panel. We can press on the plus button and a new screen appear. This is when we will use the copy paste feature. So, we can select to select you have to go to the screen and use the edit function and select all. So, here I selected all the widgets. But for the selection we can also use the control key. So, you click on a widget and press the control key keep it pressed and click on another widget. Then, you will have a selection of several widgets and I can also click on the top bar and on the background also. That's another way to select the widget. Several widgets, then I can copy go to screen 2 and use the menu edit and paste. So, now I have two screens with the exact same content. I will remove from the second screen the animated which I made the logo. And in my second screen the next button will not be next but previous. So, I have to modify the style and put previous instead. So, back to the slide set. So, again the position is not so important in my case. We now add the interactions for each of the screen. So, if we remember the use case the first screen when pressing this button we want to switch to the second screen. So, the interaction panel is next to the attribute panel on the right side. Just note that here we have a blue dot on the generated code that I missed previously. So, that means that the code for this button for example on the second screen has not been yet generated. So, I will add an interaction. We have a name, a specific name to put on it. Yes, go to next screen. Go to screen 2. It's not that important for this interaction but again keeping in mind that we should stick to the names that are defined in the slide set it's a good idea because some of them are important for the next step. So, rename this interaction into screen 2. The trigger of this interaction and this interaction will be to when the button is pressed. So, we have animation is done. So, for example, we could this one is available because we have an animated logo in the screen otherwise it will not appear. So, we could define that without looping a logo. It will only appear if the animation is finished. We have also hardware button is clicked. This one will be a wrapper in fact. It will not be completely implemented because the touch efficiency designer does not know yet how to handle hardware button. So, it will create some placeholder functions to implement your own code and another interaction is the screen is entered. So, that means that here it is the start of screen. So, as soon as the application starts we are entering the screen but we could define an interaction in the second screen for example to display a logo on the second screen when it is entered. So, it is when we switch from the first one to the second one, then the second one is entered. That could be an interaction or an event. So, in our case, it will be button clicked. The list of the button is automatically updated here. If I add another button maybe three of them and go to the interaction I will have here all the buttons that are available in my layout. So, back interaction so, the button transition will trigger the interaction and the interaction will be to go to change the screen. So, we can also execute some C code we will do that in the next part and also add some include files because the function that we will call here can be defined in a specific include file. This can also be handled by the designer. We could fade a widget hide a widget, move a widget also wait for some delay in the interface to add some automatic interaction. So, in our case, we change screen and select the screen in screen 2. So, as I said, the transition we will select the cover transition the select transition is requiring different initialization and for the moment it is not raising any warning. So, if you select the transition, it will not crash at all but discovering that there is no extra buffer because there is a specific boolean when a specific value parameter to set in the initialization of the library to say there is an animation buffer available. By default, it will not be set it will be set to false and in this case the library even if there is a transition will not implement it so it will not crash but it will not do the sliding effect either. In the PC simulator, it's different because the part that refresh the screen is specific to Windows so in this case, it will work in the simulator. So, the cover transition will work in both simulator and target and we can set the direction of the transition so we will go to east and west for the other one. So, that's it for the first interaction. Let's now go to the second screen and define the second interaction which will be very similar the trigger will be the button is clicked the button transition will be the source of this trigger and the action will be to change the screen one this time. We can use the slide effect for this second effect just to show you the difference and you will see it in the simulator in fact but not on the target as I said and you can see that we can also trigger another interaction so this is a checkbox and when checking this box if you had another interaction the trigger will then be also another interaction is done this can be used for automatic animation of a user interface if you add some an interaction that is to wait for 3ms for example and you want something to happen when these 3ms are over you can define an interaction that waits for 3ms and check this checkbox so that at the end of this wait another interaction can be triggered also I will remove this second interaction to go to screen 1 so now we can generate the code so the code generation will be faster because the longer is the image second generation and build here we only update a few files notably the screen 2 that has been added and we will launch the simulator just to see the difference between sliding and covering so again on the final target the when sliding back to the first screen you will just change directly to the first screen it will not crash but it requires some more some more editing of the code that will certainly be the dedicated in a practically shown I mean in a dedicated short short video that will describe how to do it because there are several steps in our case since the internal memory cannot contain both buffers cannot contain an extra buffer for the animation we have to switch to the 16 bits color format and enable the feature so here is the simulator window it opens always on my second screen we can also cover to the first to the second screen and slide to the first one so you can see that the difference is that when covering in fact the second screen is written line by line to cover the first one while in the sliding effect the second screen is created entirely internally is created next to the memory next to the first one because remember that all this is somewhere in a frame buffer so in memory so we create the second screen and then slide the pointer of the frame buffer to the second one which creates this effect which is quite similar to cover but requires a lot more memory and we can flash the target I guess for this step we use the Q programmer but I'm not sure no it's still so it's it's still in the designer tool using the run target button we didn't run the very first lab on the target that's why I still have the very first out of the box demo on my target in the state if I left it just before so this one will take a while because we are creating the entire binary file so I will put it aside it will be then the end of this second part of the lab this is a short explanation in fact of what I told you regarding the animation buffer so you are free to look at it afterwards so this is the start from buffer address so it's not exactly the initialization step of the library, it's an extra initialization at this stage the library is already initialized but we are setting the frame buffer address the size and also a boolean here that is by default 0 when it is set to 1 it tells the library that the animation buffer is available and in order to be available we have of course to raise the frame buffer a raise by 1 so we have by default 2 frame buffers because we are in double buffer we have to set it to 3 but for that we have to modify the color format from 24 to 16 bit and then we will switch to the next part so I will speed up the compiling phase so now the start the flashing of the board will actually start and this will be done using the cube programmer that is installed the prerequisite of this lab so there is a hard coded file pass for this cube programmer that can be modified it's in the make file that I showed you previously if you put it in a specific folder maybe with the version of the cube programmer you can modify of course the binary executable that is used for this binary execution so you can see here cube programmer that is called in command line and you can see already my board display has become white not exactly white but it's not addressed anymore during the flash and here is the demo with first it's directly the first screen there is no sliding effect which is expected again so that's it for the second part of this lab we will go now to the third one