 Nous allons maintenant commencer la première partie de cette session de la lab. Je vais arrêter cette webcam. Dans cette première lab, nous allons interrompre avec le bouton physique sur la boîte. C'est un bouton de l'usage, c'est un bouton de l'esprit très petit. Et nous avons aussi une de les deux lèvres qui sont disponibles à la boîte de l'usage, qui sont connectées à l'intérieur. La idée sera d'utiliser les deux boutons de l'esprit, et les deux C'est le red que nous allons utiliser. Donc, cela donnera une bonne vue, en fait, de la façon dont nous interactuons dans les deux manières, de l'arrière à l'interface de l'usine et de l'interface de l'arrière à l'arrière. Donc, nous allons retourner au layout. Nous allons l'updater dans la seconde ligne. C'est la première ligne. Nous allons aller à la vue de la seconde ligne. Nous allons ajouter tous les boutons que nous avons besoin et aussi l'image que nous avons besoin. Nous allons ajouter le premier bouton flex. Le nom est très important ici. C'est le bouton Hardware Lead. Donc, le bouton Software, le logiciel, nous allons entrer avec le toggle Hardware Lead. La location n'est pas importante pour le moment. Et ensuite, nous allons utiliser le bouton Round Style que nous avons ajouté. Donc, j'ai ajouté un nouveau style avant de retirer le bouton Default. Et je peux le installer. Ce sont ces boutons, ces boutons Round. Donc, le bouton Press State est celui-là. Peut-être que c'est l'autre façon. Le bouton Real State est celui-là. Et le bouton Press State. D'ailleurs, je peux aussi changer le... On peut voir que c'est une transparence en termes de compilation. Vous pouvez voir que ici j'ai ajouté le Press State plutôt que le Real State pour cette image, pour ce bouton et aussi pour l'autre bouton. Donc, c'est l'autre bouton Round. Ce bouton est réglé et ce bouton est pressé. Ce n'est pas important, mais c'est bien. Et sur le second bouton, le même bouton. C'est le bouton Flex. J'ai mixé les deux. Ok. Puis, dans celui-là, je dois cliquer le bouton Checkbox qui lock le bouton Flex à l'image. Et je vais installer le texte. C'est le next step. Donc, ajouter un nouveau style, un texte. Et le texte sera Hardware. On va positionner le texte correctement. Comme ça. Et mettre la couleur pour le Different State. Donc, on va mettre en white quand il est réglé. Et en black quand il est pressé. Peut-être un peu trop haut. Ok. Et le même pour le bouton Software. Donc, je vais faire un copy-paste. Contrôle C, Contrôle V. Nous ne verrons pas le deuxième, parce que c'est sur le top. Donc, je peux bouger celui-là. Je l'alignes. Pas exactement, mais c'est bien. Rénamez-le. C'est le bouton Software. Mais le bouton Software. Donc, SW, Lead. J'enlève les caractères. Et mettre le texte au Software. Ok. Le next step, c'est de mettre le label pour chaque bouton. Donc, le texte, le nom en ce cas ne sera pas important. C'est pas critique, je dirais. Donc, j'ai le premier. Le color est aussi installé dans le site. Il sera 00C8F. Et le nom est Toggle Physical Lead. Donc, je utilise ici la typographie défautique, qui est Verdana, comme on l'a vu, et 20 pixels. Je pouvais utiliser la petite. En fait, non, je vais utiliser la petite. Et comme je l'ai dit dans la section précédente, maintenant je devrais avoir une différence dans mon texte. Vous pouvez voir que ici, au début, c'était 0000. Et maintenant, j'ai 5 végettes, 5 éléments qui utilisent cette typographie. Et 1 élément, et 2 en quelques secondes, qui utilisent les 10 végettes de Verdana. Non, non, je vais utiliser cette. Donc, à la fin de mon application, je vais pouvoir retirer cette typographie, qui est une partie défautique, pour sauver un peu de flash. Et je vais mettre ici le nom aussi, même si ce n'est pas critique pour le label. Peut-être que c'est. Ok, donc je suis terminé avec le 1er label. Le 2e label, c'est celui-là. Donc, encore, ajoutons le texte. Le texte prend le default, le font, la typographie défautique. La dernière, la dernière. La dernière que vous utilisez par défaut. Donc, c8ff. Ok, c8ff. Donc, maintenant, on est ok, c'est presque ok pour le layout. Nous avons nos 2 boutons, celui-là, qui tournera le label physique sur le bord, et celui-là qui tournera le label logique. Que nous devons définir juste ici. Donc, pour définir le label logique, nous allons utiliser 2 images en fait. 2 images, c'est une façon d'imprimer. Nous pouvons aussi utiliser un image de toggle. Une image de toggle avec jet. C'est une image de 2 states. Mais c'est plus compliqué que ce qu'on a besoin. Tout ce qu'on a besoin, c'est de dégager l'une ou l'autre. Donc, l'image de la l'autre ou l'image de l'autre. Donc, nous choisirons juste à 2 images et de dégager l'une à l'autre. Donc, la première image. Donc, cette fois-ci, nous devons être très précis sur la location, parce que nous ne devons pas voir l'une sur le haut de l'autre. Et surtout, c'est pas que nous ne devons pas voir l'une sur le haut de l'autre, mais nous ne voulons pas voir le label ou le jet bouger quand on tourne l'une ou l'autre. Donc, si il y a l'exact espace, l'exact label, la même location, il sera parfait. Donc, le nom de l'autre est celui-ci et le nom de l'autre est celui-ci. Donc, le nom de l'autre, je vais le mettre à la location spécifique dans le site. Donc, sans surprise. Et de nouveau, le nom doit être le correct, qui est SW-LED-OFF. Parce que ce sera aussi le nom de l'image dans le code source et nous allons utiliser ce nom dans notre code. Alors, depuis que c'est déjà implémenté, nous devons établir le correct nom et le même pour le LEDON, mais cette fois-ci, nous allons réjeter le nom de l'autre. Nous allons vérifier ce nom de l'autre, si je le vérifie, ce n'est pas plus visible. Donc, c'est ce que nous allons faire pour le nom. En default, le nom de l'autre sera OFF. Donc, le même location, c'est exactement le même que le version OFF. Et ensuite, nous avons établi le proper image et nous allons vérifier le nom de l'autre. Alors, le nom de l'autre est SW-LED-ON. Ok. Donc, maintenant, nous allons établir la première interaction qui consiste dans le nom de l'autre. Mais nous ne pouvons pas implémenter directement dans le design. Nous allons implémenter dans le code source. Alors, première, je dois changer le nom ici. C'est faux. C'est logique. Nous allons l'appeler software-toggle-software-LED. Donc, cette fois, il n'y a pas vraiment d'importance sur le nom de l'interaction par les précautions. Donc, cette interaction est établi par le bouton cliqué. Donc, quand nous cliquons le bouton software-toggle-software-LED, donc c'est celui-là, nous voulons exécuter un code C++. Et le code C++ sera pour appeler une fonction de présentation directement. Donc, de l'aussi, nous signons le présentateur que le bouton software-toggle-software-LED a été appuyé. On a des spécifiques, le bouton software-toggle-software-LED, celui-là qui traite le bouton software-toggle-software-LED. Donc, le présentateur, c'est vraiment un code C++. Je veux dire, type as many lines as you want. Maybe not as many. But you can type several lines. It must just be a C++ formatted code and it will be a copy-paste directly in the execution function of this interaction. We do not need the specific include. And that's it for this interaction. The second interaction is for the hardware button. So we can reduce this one and add another interaction. That will be called now software-toggle-hardware-LED. The trigger of this time will be still a button clicked, but the software button hardware-led. And the action still execute C++ code. But this time, we will call another function still from the presenter. It will be software-button hardware-led-toggle. So anyway, any mismatch of the function name will be automatically seen by the compiler. So you cannot go into dark places because you missed a name. It will be explicitly mentioned in the compilation window. And that's it for the layout part. So we generate the code to update all these buttons and images settings. It's done. And we can go back to the QAD. So the QAD has been refreshed automatically. You can see that if you go in Screen One View. So Screen One View has been in user, in generated. And here we should find Screen Two View Base. And here we can see there should be our new buttons automatically implemented. So this file should not be modified. On the other side as we said before, we can go again in the Screen Two View. We can see that it calls we can toggle we can toggle the source and include files and see that the Screen Two View inherits from the Screen Two View Base. So all the functions that are enabled in the Screen Two View Base will also be available in the Screen Two View. Ok, so back to the QBMX we need to enable and interrupt. The interrupt will correspond to a rising age of the pin that is connected to the button. So when the button will be pressed it will trigger a signal to a specific pin that is available in the schematics of the board. So it's connected to a specific pin so that when we press it it toggles this pin. It's added to a rising age so too high. And we can trigger an interrupt based on that so that on can then trigger something on the user interface so first on the model then on the presenter and then finally on the user interface and the view class. So that's what we will do now we will configure the button so in the system view the system view is just next to the pinout. Normally so it's PC 13 is there so it's already configured as a user button, a GPIO GPIO X1 so we do not have to modify it so in the system view we go to first the GPIO and take the PC13 to enable the external interrupt with rising age trigger detection so this will raise interrupt when the button will be pressed we set the pull down resistor so that it turns back to low when it has been set to raise too high and we change the user button ok so this one is already set in my project it should be also in yours but it's just in case it will not be we are defining here how to set it and then we have to go to the vector interrupt ok so and we have to enable the XTI interrupt which is also already enabled set to the same priority of the others so this one is also set so let's generate the code but normally it should not change anything regarding the the board initialization so again we implemented already all everything we will just enable a next another computation flag so the JVT is still complaining we will enable a computation flag that will define a computation flag that will enable this code for us that is already present so we have several cases first the user press the physical button in this case this GPIO callback will be called so this is one part of what is on the computation flag this callback will call the model to tell the model because the only application can only communicate with the model to tell the model that the user button has been pressed and the model will notify its model listener so it will be the screen to presenter then the user button has been pressed if the screen 1 is displayed nothing will happen if the screen 2 is displayed then the user button pressed is implemented and will update the screen 2 view accordingly by changing the image of the virtual LED we have on the screen so it will toggle between the off image and on image so that's the first interaction another interaction is when in the screen view the software button will be pressed in this case the presenter will be signaled that the software button has been pressed and decide what to do and what to do we will be to again toggle the software LED so it can be quite curious the view ask to refresh itself but it's not up to the view to decide what to do the view only reports to the presenter what happened from the interface point of view and then the presenter if the software button has been pressed will tell the view to update the image of the LED on the screen if the hardware button is pressed that's different in this case the presenter will signal the model to toggle the hardware LED and the model will toggle the hardware LED using the dedicated BSP function that is available for the LED so let's see what it means so we can close this dialog window let's see what it means in the source code so this flag now is interesting for us so we search again as we did on the first flag to list all the files that are impacted by this flag so in the main function we should have the callback of the interrupt so this is the callback that will be called when the pin connected to the button will be at high level automatically this function will be called and will not be to call the model but to change a volatile variable volatile because it is updated from an interrupt so we have to be careful about that so we have to define this user button as a volatile variable and this variable will be monitored by the model still in the tick function this code is not yet enabled we will in a minute in a second even so this button is monitored still in the tick function so this time is at every frame rendering not every 20 frames rendering we will check the value of this variable and if it is one then we will call the model listener and signal it so it will be the presenter too user of interest to call the user button pressed in the presenter the user button pressed will call the toggle software LED and you can see that it's the same function that is called when the screen view will call the software button software LED toggle function so let's finish this one it will call the software button software LED and in the view this image so the LED on so if the LED on is visible then we set it non visible and we set the off visible and we set the inverse processing otherwise and then we refresh both areas in fact we could only do one of the two because they are at the exact same location and with the same size so that was the first the first interaction the other interaction is when the software button is pressed we set an interaction so it is not this time in the screen view because it has been implemented in the touch effect designer so that's interesting also to show here you do not see the interaction that we set when the software button is pressed this code will be in the base class so in this screen view screen 2 view base you can see here the source code the C++ code we put in the interaction so here we call the presenter software say this one software LED toggle and so back in the screen 2 presenter so do not hesitate to break the video because maybe I am going a little bit fast so in the screen 2 view presenter so this function will be called if it is the software LED then we tell the view to do the same as if the user button was pressed and if it is the hardware LED then we will call this new function from the model directly model hardware LED so the presenter has a direct access to the model it's not a model listener on this case because there is only one model so every presenter as soon as it is shown on the screen as it corresponds to the current screen has access to the model and can get then call the corresponding hardware LED toggle from the model this will call the toggle LED the function exactly as a form for the temperature sensor it will call a function that is defined in main.c and in the main.c you can see that we call the HAL this is a function that set the LED 3 so the red one to a high level or low level depending on its current state so this is what we will enable just now and see the result on the bottom exactly as for the previous lab we will just add the compilation flag so here I am in a C++ compiler so I am adding this lab step 2 enable compilation flag and in the C compiler I am adding the lab step 2 enable flag also and close and we will see that the code is now enabled and we can rebuild or just build because both HPP and CPP files have been modified even only only CPP files so the program will detect them so it will take a few minutes a few minutes no a few seconds so again all is described all the slidesets all the steps are covered what files are modified and how they are modified so this is exactly what I just covered and this is what we should observe on the bottom the build is over so we can launch the debug session so I am stopped at the first instruction let's go and I can go to the next screen you can see my both my two buttons so fortunately yes we can see that there are two LED here one is blue one is red on the display on the screen on your screen it's maybe not abuse it will become when I will press the hardware button so you can see here that this button toggles an LED on the board it's the red one and if I press the software button I control the LED on the board and if I press the blue button user button here I also control the logic and led so that's it for this part can now switch to the last part of the lab which will be on the utility language support