 Hello and welcome to this presentation. My name is Badr Dean and in this video we will see how to customize the TouchGFX template based on STM32H7B discovery board. In this first part we will cover the steps to change the TouchGFX template to use a different display resolution of 640x480. We will begin by a short introduction followed by an overview of the STM32H7B discovery board. Then we will see how to extract the display timings of the 5.7 inches 640x480 display from its datasheet, which we will use to set up the LTDC configuration in STM32QBMAX. After that we will need to set up the graphics configurations and the XQ TouchFX to match the LTDC ones always using the STM32QBMAX. At the end we will finish by a live demo. To customize the TouchGFX template based on the STM32H7B discovery board to use a different display panel we will use the following tools. TouchGFX designer which is a GUI builder that lets you build the visual appearance of your graphics application. Then we will use STM32QBMAX which is a graphical tool that allows a very easy configuration of the STM32 peripherals. Then we will use STM32QBDE to build, load and debug our graphics project. From hardware standpoint we will use STM32H7B discovery board and the display panel of 640x480 from Empire. In this video we will use the STM32H7B discovery board. Its main features are STM32H7B3 ARM Cortex M7 based STM32 with two megabytes of flash memory and 1.4 megabytes of SRAM including 1 megabytes contiguous SRAM that can be used as video buffer for graphics applications. Then the discovery board comes with a 4.3 inches display model, 512 megabit octa-spy flash memory that can be used for graphics assets and 16 megabytes SGRAM that can be used as well as video buffer in case the internal SRAM is not enough. As the first step we need to unplug the 480x272 display from it from the main board of the discovery board and then connect the 640x480 display. Here please note that you need an adapter or custom board to connect the display to the main board of the STM32H7B discovery board. When we look at the display panel data sheet we extract the active width 640 and the active height 480. Then one of the most important parameters is the pixel clock. The pixel clock is the speed at which pixels are transmitted. It is specified in MHz and for this display panel it is 25.175 MHz. The second set of parameters are the horizontal timings. The horizontal synchronization width which is 30. Then the horizontal back porch which is 114. This display data sheet doesn't explicitly specify the horizontal front porch but we can calculate it using the formula. Total width minus active width minus horizontal back porch minus horizontal synchronization and this gives us 16 for the horizontal front porch or HFP. The third set of timing parameters are the vertical timings. The vertical synchronization width is 3. The vertical back porch is 35 and the vertical front porch can be calculated as follows. Total height minus active height minus vertical back porch minus vertical synchronization and this gives us 7. Using STM32 Cubamax it's very easy to customize the display timings in a graphical way. Within STM32 Cubamax you can navigate to the clock configuration tab and see that STM32 H7B devices have a dedicated fractional PLL to generate the pixel clock. Per the display data sheet we need to set up the LTDC clock or pixel clock to 25.175 MHz. In order to configure the display timing we go to the pinout and configuration tab and then to the LTDC peripheral. In the LTDC mode we need to set it up to RGB565 then in the parameter settings tab we need to fill in both horizontal and vertical timing values extracted from the display data sheet. Then we need to configure the LTDC layer settings according to the display resolution and the color depth. We start by the window position. The horizontal stop needs to be 640 which is the display width and the vertical stop needs to be 480 which is the display height. The pixel format needs to match the display type which is RGB565. Finally this frame buffer the frame buffer line length needs to match the display width which is 640 and the number of lines needs to match the display height which is 480. After the LTDC configuration we navigate to the X-Cube, PetGFX and our software packs and set the pixel format to RGB565. The width and height values are taken from the LTDC configuration. We set the frame buffer strategy to single buffer with 640 by 480 and the color depth of 16 we get frame buffer size equal to 614 kilobytes. Then we set the buffer location to by location to let the linker place the buffer in the internal SRAM. Now we will see together how to use the software tools TatGFX Designer, STM32 CubeMX and STM32 CubeID to customize the TatGFX template based on the STM32H7B discovery board. Here I have a TatGFX Designer, STM32 CubeMX and STM32 CubeID installed on my machine. I will start by TatGFX Designer, now click on it give a name to my application STM32H7B640 by 480. Then I will pick the application template for my application do search on STM32H7B. This is my template. Here the default template uses a display resolution of 480 by 272 and the color depth of 24 bits. So we'll see later how to change the display resolution and the color depth using CubeMX. Click on create. Here the TatGFX Designer is downloading the package from the internet so make sure you are connected to the internet to be able to have the template locally. Here I have my canvas. I will add a box here for my background. Just cover the canvas view and then generate code. If I click here I see all the log messages. Okay now it's done. I will browse to STM32 CubeMX IUC file. I have to hit browse code here and then go up by one level and then I will double click on STM32H7B3 dash discovery kit IUC file. STM32 CubeMX starts up. I have my STM32 CubeMX project open. I have the pinout and configuration tab, clock configuration tab, project manager tab, tools tab. I will start by the clock configuration tab. I see here PLL3 the dedicated PLL for graphics for the LTDC peripheral. Here the PLL output goes to the LTDC. So here we need to set up the LTDC clock to 25.175. So we'll start by this divider. I will set it to 2. This multiplier to 31. This divider to 15. And then the fractional to 38.40. And here we get the clock equal to 25.175 MHz and that's what the display data sheet requires. Next I go to the pinout configuration and multimedia. Then to the LTDC peripheral. Up here display type I will use RGB565 16 bits. Then I will start by the parameter settings. The horizontal synchronization width needs to be 30. Horizontal back porch 114. Active width 640. Horizontal front porch 16. Then the vertical synchronization height 3. Then the vertical back porch 35. Active height 480. Vertical front porch 7. Then we go to the layer settings. The horizontal stop needs to be 640. The vertical stop 480. The pixel format of the layer has to be RGB565 to match the display type. The buffer line length 640 and the buffer number of lines which is the image height has to be 480. Next we go to the software packs here and then to the execute.gfx. Here we start by the frame buffer pixel format. It has to match the LTDC pixel format which is RGB565. The width and the height are taken from the LTDC configuration. Frame buffer strategy will use single buffer because using the internal SRAM of 1 megabytes we can only do single buffer with a display of 640 by 480 and the color depth of 16. Buffer location by allocation to let the linker place the buffer into the internal SRAM. Then I get a project manager here and a toolchain IDE. Make sure that I'm using the STM32Q by D. I can use eWarm. I can use MDK arm. For this video I will use STM32Q by D. Then I will click generate code. Here QSTM32Q MX just finished the code generation. I can open the folder or open the project. I will open the project. Q by D pop up. I will select workspace and launch. I have Q by D open. Before I do anything with Q by D go back to TADGFX designer and I see that the TADGFX designer did just detected that the display resolution and color depth were updated. I will hit ES and I see here the canvas. What is modified? I will align or cover the canvas here and then I will add an image. Okay add the image. I have a PNG file of 640 by 480 in my hard drive and then here okay. So now I have my image of 640 by 480 and hit generate code. Okay now the TADGFX designer just finished the code generation. I go back to the STM32Q by D. I will close the information center, expand my project, go to application, user, TADGFX, target and then STM32 touch controller. Because my display panel uses a different touch controller I will comment out the touch function. Simple touch. I will force the return value to true here and comment this out. Now I'm ready to build the project. Click build. Now I have the build finished. I see here the different output files. Next step is to load the binary. Go to debug and STM32 Cortex M application. Okay I get the edit configuration. I go to debugger and then I need to enable the external loader. And the reason for that is to allow the tool to load the images on the assets of the external OctaSpy. So enable the external loader, do scan and then this is the list of all the external loaders supported by STM32Q by D. The OctaSpy flash memory that we have is Mx25L, scroll down, down, Mx25L STM32H7B3 discovery board. So this one. Select the external loader, do apply and then now before I click okay I make sure that the board is connected and then click okay. Here the debug session starts. Here we see that the debugger established the connection. Yes, switch. We can follow here debug messages, connection and there is a flash internal flash memory external flash memory verifying download verified successfully and then we're ready to execute the code by clicking on resume or F8 on the keyboard. Here I have my STM32H7B discovery board with the 480 by 272 display. I have the board connected to my laptop using the USB cable. I will unplug the USB cable, change the jumper position JP1 jumper position from ST link to charger. The reason for that is because ST link is limited to 500 milliamp and with the big display I need more than that. Next step I will unplug the display panel. Okay. Here I have my 640 by 480 display panel. I will plug it into the STM32H7B. Okay. Then I will plug the USB cable into the power bank. Okay. And then here I have my image displayed on the display. Of course I could have used USB power adapter. Thank you for joining me in today's presentation and we hope that you enjoyed learning how to customize a TADGFX template.