 Alors, nous allons maintenant passer à la troisième partie de ce lab. La troisième partie va impliquer l'interaction avec les événements systèmes. Les événements systèmes seront les sensors de température, les sensors de température interne. Donc, l'objectif de ce lab est d'ajouter une nouvelle image progrès pour notre layout de la première ligne. Cette image progrès a une valeur interne qui permet de déployer une partie de l'image progrès. Donc, c'est la façon de déployer une température mais aussi d'un type de valeur, mais dans une manière graphique. Nous allons utiliser le Qubemix tool pour configurer l'IDC IP et lire la température d'interaction. Nous allons impliquer le modèle-vue présentateur dans l'approche de modèle-vue présentateur pour retirer cette valeur du système et déployer sur la ligne. Nous allons réviser tous les étapes qui sont utilisées par le modèle-vue présentateur qui a été décliné dans l'écran de cette graphique. Nous allons ensuite ajouter un nouveau widget pour notre première ligne. Nous pouvons réduire le logiciel et aller au widget list. Dans le widget list, nous avons plusieurs catégories. L'une des catégories est l'indicateur progrès. Nous allons utiliser l'image progrès. Comme vous pouvez le voir, je suis dans la première ligne. Je pense que tous les widgets ont un style défaut. Nous allons modifier les images customes que nous avons ajoutées. Toutes ces images sont utilisées par Mjolnir. Mjolnir a créé la GFX et est encore très active dans le domaine de la consultation. Ils ont pu créer un layout entier pour vous. Toutes les assets ont été créés par Mjolnir. Ils sont très conscients des mécaniques de la GFX. Ils ont pu décider de quoi le widget sera plus utile ou créer un widget custom. Ils sont toujours partenaires et importants pour ST en regardant la GFX. C'est là que l'application du widget est très importante. Nous allons ajouter l'application de l'application dans le code d'intersource. C'est la température. Comme toujours, la première ligne, et la lettre capital. Je ne vais pas parler de l'application pour le moment. Il y a un nom et une allocation dans tous les widgets, mais il y a aussi des attributs spécifiques comme l'image background et l'image progressive. L'image background sera toujours disparu. L'image progressive sera progressivement disparu selon les valeurs internes. C'est l'attribut au widget. Il contient ce widget class d'un fil intern qui contient la valeur de l'application du widget. Comme vous pouvez le voir par défaut, c'est intéressant parce qu'il ne faut pas prendre l'image de l'image que vous ajoutez, mais aussi des skins prédifiés. Vous avez un bunch d'images qui sont disponibles dans l'application de l'application de la GFX. C'est intéressant pour votre prototyping. Si vous n'avez pas le temps de créer des skins, il y a des skins disponibles. L'image background est cette image et l'image progressive est la couleur 1. Alors que c'est une température, vous pouvez voir que c'est de bleu à rouge. C'est une température haute et de bleu à rouge. Par défaut, la position de l'image progressive est faite parce que l'image background n'est pas à l'arrière de la place du widget. C'était le cas pour l'image default. Donc nous devons adapter sa position en utilisant cette position exacte de l'application de l'application. C'est 18, 27 244 et 18. L'image progressive est centrée dans mon widget. Si c'est centrée, le widget n'est pas exactement centrée. Non, mais on va le mettre un peu plus haut parce qu'on va mettre un peu de texte. Mais ce n'est pas correctement disparu parce que je veux la partie la plus basse pour être toujours visible. Donc je dois utiliser l'image progressive à 0. Et la valeur initiale c'est la valeur initiale de l'internel fil de la glace. Il sera seulement disparu quelques milliseconds. Ce n'est pas vraiment le cas. Parce que dès que l'application va commencer dans notre implementation la interface graphique va retirer la valeur interne et updates le widget d'image après quelques secondes. Donc on verra la valeur initiale quelques secondes. Donc on peut le mettre à 0. Donc c'est la température interne donc ce n'est pas la température ambiante donc ce sera entre 50 et 50 degrés entre 50 et 60 degrés. Et la direction est de droite donc l'image progressive de cette partie seulement de gauche à droite mais de la partie de droite. Et je pense que nous sommes bons maintenant. Donc les valeurs vont de 0 à 100. En fait, ça va de 10. Et donc, dans le site, c'est 0 mais on va mettre 10 ce sera plus précis. Et ensuite, on va mettre 20 ici. Donc ça va de 10 à 100 degrés. Et nous sommes prêts pour l'image progressive puis on va avoir un texte pour l'appliquer ce widget. Donc de retour widget list, à la very bottom of the widget list, we have some miscellaneous section containing the text area. So again, I will locate it quickly. We set the text to white or not to white to a specific blue. So let's put it to white. So you have 3 ways to set a color in the tool. We can either use the color picker to change a color. We first choose the main color and then I can adapt. Or you can select the amount of red and green and blue or set the value directly but you can also put directly the exact decimal value. That's what we will do to fit exactly what we define. So it's 6 value so I miss 2. Yes. And press center to validate. And we set the text to junction temperature. And now we can center it regarding the image progress. So that's it. Almost I guess yes it is it for the layout so we can regenerate the code. We see a blue dot indicates that the code is not up to date. So let's update it. And for the moment we have no interaction with the system. As I said, this is not handled directly by the tool JFX designer tool because it is part of the logic of the application and the designer only implement part of the logic. So through interactions for example or through the entire logic of each element. But at some point you have to go directly in the source code to implement what you really need to do. And especially when communicating with the system. So this is what we already did in the very first section. So what we have to do also which is not in this slide set is to unzip the prepared source code. So let's go back to the very beginning. So depending on the archive you will have you have two solutions. On one hand you can get these two zip files that I started from. It may be that you have a file only one zip file named like this underscore lab12. That means that in this zip file you will have the original one plus the modified files. So you have already all the source code included but not enabled. In our case the additional modification the disabled source code is in this smaller archive. So as you can see it contains a folder a name exactly as the one we un zipped from this archive. But it contains only updates of specific files. Specific files are domain.c on the part and on the .jfx part it contains the screen12 the logic that we will add in the three next steps of this lab. So all you have to do is unzip these two folders in this folder. It will overwrite the existing version. So I am overwriting I have the warning so that means I am doing the proper thing. So I am overwriting main.c model.hpp et other files from the graphical interface. We will cover exactly what this modification are. So you can click yes to all. And we will now launch the QBID the QBID project open the QBID project. As I told you the default IDE is STM32 QBID but you are free to change it to another one but it will have to be done in the IOC file. So the Qubemix project we will see that just after when enabling the IDEC So the QBID project can be either open double clicking on the .project file or opening a QBID and importing the project. In my case I have the latest version of QBID is the 1.3.0 I know that there is a more recent version and maybe when you will watch this video there will be an even more recent version so if you want to be sure to have no impact on normally it should work also on a more recent version but to be sure if you have for example we are using 1.3 here if the 2.5 has been released just open the 1.3 version and import this project so from this folder import the project in the correct version in my case I will just double click on it and it will open the QBID project in my other screen so this has the other message that you may have if you are first launching a QBID on your PC you have to choose the workspace once you check this checkbox it will not ask you again and you will have an information center window displayed that you can close in my case I already selected my workspace and checked this box the workspace is interesting if you have several projects open at the same time but not necessarily located at the same place in your hard drive there will be all in the same workspace so the information that are common to this project will be stored in this very specific folder but if they are on settings for specific configuration so let's have a quick tour so we find not exactly the same folder hierarchy as on the hard drive you can see on the hard drive that the folder hierarchy is not the same so on the hard drive the .jfx folder contains all the graphical interface the generated code so in a top folder called .jfx in the QBID project it's a little bit different the all is gathered in the application folder then you have the graphical interface folder containing all the screen and this is the basic the best classes so all the translated images into C table and also the base classes for these screens so what is done usually with Eclipse base is that Eclipse project is based on the actual folder hierarchy on the hard drive and retrieves all the C files automatically and build them here we use links and we use a specific project organization because some of the C code that is included in the project for windows so this is for the simulator of course and this must not be built when building the target that's why the QBID project has a specific organization but they are all pointing to files that are in this folder hierarchy so this is the folder structure project organization on the left here you have the editing pane so if I click on the main.c for example it will open the file so there are some tutorials already on QBID that describes how it is organized and there is even an application note on this what will be interesting also is the build analyzer that will be filled once we started to build the code and that's what we will do just now so let's start the build so you can either right click on the project and click on the build menu but you can also select the project so go left click on it and use the hammer here it's also quite usually in eclipse to have several ways to do the same command so I will fast forward this build because it's quite long the build is finished let's start now the debug session so we will flash the board what is important first of all it is described also in a slide set is to be sure that the debug configuration is properly set because the flashing will evolve programming the internal flash with the actual program but also the external flash and to program the external flash you need an external loader that will first initialize the internal flash with a bootloader and this bootloader will initialize the external flash and copy the input bitmats into the external flash so this is a specific program that has to be implemented this external loader when you have selected your external flash will have to be implemented on your run but starting for the example we provide so to set this external loader we have to go to the debug configuration so it's right clicking on the project and instead of launching directly the program you will go to the debug configuration in my case the settings are already set because I already launched several times this project so in your case what can happen so this configuration should exist with all the parameters set by default if it doesn't exist you just have to double click on this target and it will create this one automatically with the proper setting except for the external loader so let's see where it is it's in the debugger the debugger tab at the very end of it here you have a checkbox that you must select so in your case it could be like that you may open this configuration and see that and if you click on the external loader you cannot set anything before you hit the scan button the reason for this scan button is especially when you will add your own external loader you need to have a way to add it in the tool so the scan button will browse the existing the code programmer the external loader that I available and display them as a list so if I click on the scan button now the list is populated and I can choose in this list so maybe at some point there will be your custom external loader for your own external flash and I will select the proper one which is the H7B3i discovery board so some external flash are common to boards but usually we have different sizes so maybe you can see that on these two, the disco and the rival at the same memory so in our case it's H7B3 disco, so it's this one then we can apply and we can launch the bug session so I will display my board again so now what should we see we should see here the progress image in widget that we just added so the debugging is maybe can take a few seconds to launch I advise you not to click on anything to avoid any error so just wait you can see here that your programmer is used internally and in the meantime I can show you also where are located the external loaders so it's in the installation so the kube programmer is in program files stmicroclonics, stm32kube or anywhere you install it and in the binary folder you have here the list of all the STLDR so the external loaders that are available for all our boards and you see that there are four here four examples of a source code that allows to generate these loaders so we of course if you write to the online support saying that okay I want one that is not provided by default because this source code could be huge if you put all the source code of all the supported external memories we can provide you on demand without any problem and you can adapt it for your own memory so the debug has started but it stopped because it's a debug session so we stop at the first instruction and we can now so let's not hide so for the moment the board is not initialized at all it's just powered on and if I click on the go button now I can see my new widgets with the junction temperature level I put just in it and of course I can pause, break the execution and restart so put some break points anywhere I want so now we need to go further in this lab so to enable the ADC because what we want in the end the progress image widgets displays every time at 20 degrees we want it to be to adapt given the junction temperature for that we need to first enable the ADC so we leave QBID open as I left the 3rd JFX open also just to show you how the development phase works in fact edit all the graphical interface from the designer the layout of it not all the logic the logic is edited from the QBID project and the IP the internal MCU configuration is edited from the QBMIX and all these tools supports the fact being modified externally if you modify a file from the QBMIX because you enable the ADC as we will do the QBID project will be updated automatically you do not have to close the tool to edit the configuration with another one that's quite convenient in fact so let's open the QBMIX project so back in our active project so the IOC file is the QBMIX project so it is provided when you create your application from an application template of the 3rd JFX designer so it opens of course on my other screen so it contains all the peripherals that are enabled to run the demo as it is now so the LCTC the frequency the internal PLL the clock tree is configured properly so if you regenerate the code as is you will not lose anything it corresponds exactly to the actual configuration so I will not go in detail into the QBMIX the QBMIX layout because it's also covered in another another video I just want to focus on two things first on the project manager section as I told you that you can choose whatever ID you want among the one we support so we can see EWarm, NDKarm and STM32CubeID that will replace in fact both system or benches and TrueStudio that were also Eclipse based ID it's integrated environment development environment I forgot to say that so ID it's the short way so it's a tool chain but also a tool to edit and browse the code by right clicking on the types it's just it is not just a text editor that you could use also when you use Mac files you use text editor to editor file vision ID it's all integrated so that's what we what is called integrated development environment so if I change the EWarm here so I switch to IR then I will have to regenerate the code go back to the regenerate the code from the QBMIX it will save this information in the IOC file and when I will regenerate the code from the ToJFX maybe after adding another extra screen or new files the corresponding IR project will be updated instead of the QBID project so all these tools the three tools in fact especially QBMIX and ToJFX are linked through the IOC IOC file so that's important to mention and the other point is that in the in this QBMIX 5.5 5.6 even version we have the support of the ToJFX which is the purpose of this entire graphic workshop is to present this plugin and this is available since the version 5.5 of QBMIX we are using now the 5.6 and the version of the XCube which is not linked to the version of QBMIX if you it was the same version at the 4.13 on the 5.5 version of QBMIX and it will maybe change will be switch in a few days because I think in June there is a new release it will switch to 4.14 but it will still works on 5.5 version of QBMIX and 5.6 version of QBMIX of integrating ToJFX as a plugin of QBMIX rather than as an internal configuration of it as it was before so in this plugin you can find all the information the mandatory information needed by the ToJFX library to address the display so it starts from the screen definition the frame buffer strategy is it 1 frame buffer or 2 frame buffer strategy how it is allocated by allocation means that when generating the code the ToJFX plugin will declare an array a specific array of 32 bits integers of the right size to contains 1 or 2 frame buffer you can also to a specific location in your memory it can be sometimes preferable to put direct address in our case we put by allocation we also define the interface here which will be LTDC this is available because LTDC is enabled so there is also some guidelines especially in the ToJFX documentation on the web that describes how to display this plugin we will not go into details we are really focusing here on the interaction and using a prepared project that is properly configured and that's why also normally when you first create your project from scratch from your custom board using QBMix you will get some warnings at the beginning in this section you will have some pink lines appearing above the display section all the display definition does not correspond to the LTDC internal layer dimensions and it will be or for example that the CRC is not enabled while the CRC is needed by the ToJFX library so this plugin helps you guides you through the enabling of all the internal components of the MCU that will be needed for the library to work but to some extent because what you this is also described in the documentation let me show you this documentation just a quick step aside so in this documentation so this is the address of the documentation it is mentioned in the slide set also what is mentioned here is that so I think it's in the basic concept so it describes what you need to be sure of before even starting to initialize the ToJFX library what is mandatory is to be able to display a single color on your screen if you are not able to do that the ToJFX library will not help you the ToJFX library does not really care about how you connect your display to the board is there a touch panel and how it is connected if it presents you have to mention it but how it is connected is not really concerned you have to be sure that your memory is accessible the memory where you will store your frame buffer so usually external memory external RAM you have to ensure yourself that your settings are properly set so that this memory is available and the same for the display so please have a look at this documentation because it has been released after the first release of the XCube ToJFX but in fact it's really very important to understand how the tool works and what what is ToJFX library concern and what is not what is more your concern and there are things that cannot be handled by a tool and I am talking about the low level drivers of the display controller for example these cannot be guessed and these are not supported by the Qubemix configuration tool the Qubemix is really here to configure the IP of a given MCU not the what is connected to this IP so you can configure the FMC to connect a memory but the memory itself we have to be to be configured by yourself so back on our track so this is the ToJFX plugin and this information will be stored in the dot part file that we saw earlier when first creating the project and will be used by the designer to set the proper size of this canvas for example and also to set as we saw in the configuration in the default image configuration the frame buffer display color format is reflected in this default image configuration when you will add an image it will be by default of the format of the frame buffer but you can change it if you want but it will be the default value so let's now enable the ADC so the ADC we will use the ADC2 so this is described also in the slide set it's in this part so these values are specific to this board and can be found in the datasheet of the MCU so in the ADC2 we have a temperature sensor channel that we must enable and once enable we have some configuration that will appear so the first thing is to set the clock prescalar to divided by 8 the resolution must be set to 16 bits which is already the case and then we have to unfold the rank section and put here 32.5 cycles sampling time so let's go back to QID to show you another important thing when you generate your code if you are familiar to QBMIC you can fast forward if you are not be aware that QBMIC generates the code and notably the main.c file but you can see in the main.c file that there are specific sections like this and there are several of those in the code if I put something in this section when the code will be regenerated all the parts that are beside this section will be reset if I put something here it will be overwritten by the generation if I put something some instruction in these specific sections so user code user code begin and user code end this code will not move so that's really important because especially in our case because if you look back at the bottom of this file you have here in user code begin and user code end the specific code that we will enable in a few seconds that we add for this lab so we will regenerate the code from the QBMICs this part will not move I will go here so here we have the main so it's the main function the main function we have the main peripheral enabling and once I will hit the generate code button we will see that ADC will appear ADC init will appear in this list so let's generate the code normally this window should blink also because the .jfx will detect that something has changed in the .part file which in fact it's not relevant because the .part file didn't change at all since we didn't modify you see it's blinking here and the reason is yes the .part file has been changed but in fact it's just because the .part file has been regenerated again for nothing but it is regenerated each time so maybe there will be a fix in the future version of the Xcube so that this file is not generated if nothing has been changed on the .jfx plugin part so I will I can say yes here to reload the project it may not change anything in my project and minimize it so sometimes this generation can take some time because it means it's a bunch of FTL scripts that will generate code or start from an existing C code and extending with the specific configuration for example the main.c file has a specific template and it's extended with the init function of each peripherals so that's really a file manipulation that can be quite long especially in Java so the code is successfully generated since my project is already open in QID I will just close the desire window and go back to the QID so you see that the main.c just been updated and let's go back to the main function so you can see here that now I have the mxadc2 init function that has been added of course the corresponding instance of the ADC which was not present before but the source code I showed you just before is still present has not been modified so this user could begin and end section are really important when you are starting implementing of your application so the next step is to enable this because now the ADC is initialized but we still do not do anything to take the value into account so we need to enable this flag so I will search all the project for this specific define so that you can see one important point is that you see that this flag so there is for the moment disable code in C code so may not see but also in C++ code and for that reason we have to enable this code we need to add this compilation flag to both compilers both C compiler and C++ compiler that is what we will do so I will keep this window open to see to be sure that I type the right flag so to modify so this is also of course described in the slide set we will enable the flag and then see exactly what is going on on the model view presenter design pattern so to enable this flag I go in the properties of the project so again either this way or select in the project and go to properties and in C++ build section then settings and in settings we have a tool settings tab and this is where we can find the include pass for assembler for C compiler and for C++ compiler libraries that we use yes this one can be removed by the way because you can see that this is other previews pass for external libraries but now the proper one is set by default so we can remove them and also the preprocessor for C compiler and C++ so to this compilation flags we will add step 1 enable and same for the C++ compilation so I will click on this one type control C the shortcut for the 2copy to the clipboard and go to the preprocessor click on the last one and control plus V so now I can apply and close and this part was disabled is now enabled so I can re-launch the build but first we will go to the different step that will be impacted by this modification so as we said in the model view presenter approach let's go back to the slide maybe what will happen in this case we want the view to be updated with the system information we know that in the model view presenter the view does not have access directly to the main application that's the approach of the concept so what will happen is that the model will retrieve at every frame rendering through a tick function so the tick function of the model is a function that is called at the end of each frame rendering when the touch ethics library renders a frame at the end it calls the model tick function and so if you want to do some periodical processing you can use a dysfunction to achieve it or you can of course use a specific interrupt to do it but the model you know that the model this model function the tick function will be called on each frame rendering so the modification we we add we added in the source code and enabled with the combination flag we retrieve we call in this tick function a function directly from the main application which is called tempSensorGetValue this tempSensorGetValue is implemented we will see in the second inDomain.c file and we retrieve actually lADC call we retrieve the junction temperature from the hardware IP from the sensor and then the model with this value will signal the presenter that something has happened at system level that some information is available at system level and it will be then up to the presenter to decide what to do and the decision to signal the view that something has happened regarding the junction temperature and the consequence of that is that the view will update will update the image progress value, internal value and then at the next rendering of the library the image progress will be updated with its new value and so its new appearance also so this is what we what we will see just right now so let's start from the model so the left one step one enable so we can see here that we are in the model tick function so it's not exactly at every frame rendering but at every 20 frames rendering because there is an internal counter so every 20 frames we will call this function this function is defined just below is defined here so the get time value it is a separate function because we have to render the simulator case also otherwise we will have directly called system value here in the simulator this function is not defined so that's why we use an intermediate function and here we can use some define, specific define so when this one is not defined it means that the code is not for the simulator otherwise the simulator processor instruction is defined and the proper code is used instead so in case of simulator we return 35 every time in term of the target we call this temp sensor get value and this one is defined in the main.c that's the one we enabled when defining the combination flag and we will have here the actual retrieval of the DC value and then conversion into a a temperature, an actual temperature value so every 20 frames to 3 frame rendering the model we call this temp value and use this a new junction temp value to signal to the model listener that something has happened so that's a specific mechanism that is not described in detail in this video in fact what we saw in the theoretical presentation is that the model is the only part of the model view presenter that is a single tone instantiated at all time during the application and there is only one instance of it and on the other part the presenter and view are a pair there is a pair of presenter and view for each screen you can have one screen but also 10 or 100 screens and only one pair of presenter and view are instantiated at a time so when the corresponding screen is displayed so to avoid the model to have all the instance, the list of possible screens internally the approach is to use the model listener interface that allows in fact when a screen is entered a corresponding presenter and view classes are instantiated and registered to the current model to the only model in fact and the model does not have to care which screen is available it just calls the function that needs to be called and if the corresponding the corresponding screen that should receive this information is instantiated then it will use the information otherwise it will do nothing but the model is just there to signal whichever screens it active that something happen at system level so that is how it is done so this function is implemented in the presenter class it's implemented here so new junction new junction 10 value so again this part this code has just been enabled by our complication flag definition and then the screen presenter is responsible of deciding what to do and the decision is to call the corresponding view so there is only one view for one presenter so it has an instance of it which is called view and you can call the corresponding function directly and in the view we can see that if the current value the current temperature value is different of the new one so it is passed as argument then we update the temperature bar and this is why the naming was so important for this one in the TGFX designer when defining the layout because it is hard coded here so we set the new value and we tell the library that this widget needs to be refreshed in fact that the area of the screen that contains this widget is not more valid is dirty and has to be refreshed and so internally the library will update and send new pixels to the screen for this screen area so this is how it works the model view approach in fact you must see it as a tool not as a constraint the main interest in this approach is to really separate the logical of the graphical interface what is seen by the user from what is done on the system part and even on a very large project the power of this approach is to really have two separated teams working in parallel but on a predefined interface between from the presenter in fact from the presenter side so they can work completely in parallel and do some tests and progress really in parallel thanks to this design pattern approach so that's it so let's now see how it works on our board and to do that we will use an alternate way of flashing the board using the Q programmer directly so let's rebuild first the project and instead of launching launching the application launching a debug session we will program the generated binary file to the target directly using the Q programmer so in the meantime let's go back to my webcam so for the moment we are still stuck in 20 degrees and normally after flashing this application we should see this image progress moving around between 50 et 60 so let's also launch in parallel the Q programmer so here is the Q programmer interface so I can already connect to the board it will display the current internal flash content while it's still compiling I can set the external loader so by default you have the complete list if you want to filter you can just type H7B3 and then select among the one that remains so it's the H7B3 IDISCO and then we will go to the download the horizon programming section and we will select it's not yet available but maybe by the time we go there it will be so the binary is created in the STM32QID folder in the debug folder and this should be the previous one yes this is still the previous one so let's wait until the compilation is done so it's done the time is correct so I can program I take the X file open it and I can start programming so this X file contains both internal flash and external flash data the internal flash will be filled with the is known by the Q programmer and the external flash will be flashed using the external loader that we specified so that's now over so thanks to STM32QIDV3 the speed is quite fast so we can see now that here the temperature sensor the image progress we get is moving every 20 frames 20 frames rendering given the internal junction temperature so that's it for the lap 3 so again all the steps are described especially here in the slide set you have the way to set up properly the preprocessor the compilation flags you have also the list of source files that are impacted by this flag and the description of each part of code depending on the where we are and the model view presenter design pattern so this is all available and including for the STM32Q programmer setup and programming