{"id":2125,"date":"2023-11-23T05:58:25","date_gmt":"2023-11-23T05:58:25","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=2125"},"modified":"2023-11-23T05:58:29","modified_gmt":"2023-11-23T05:58:29","slug":"stm32-advanced-peripherals-ltdc-part-2-initialization-and-draw-pixels","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=2125","title":{"rendered":"STM32 Advanced Peripherals : LTDC Part 2: Initialization and draw pixels"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-1024x486.png\" alt=\"\" class=\"wp-image-2126\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-1024x486.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-300x142.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-768x364.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-1536x729.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-2048x972.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-1150x546.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-750x356.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-400x190.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-19-at-7.32.43\u202fAM-1-250x119.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the previous guide (<a rel=\"noreferrer noopener\" href=\"https:\/\/blog.embeddedexpert.io\/?p=2118\" data-type=\"URL\" data-id=\"https:\/\/blog.embeddedexpert.io\/?p=2118\" target=\"_blank\">here<\/a>), we took a loot at what LTDC, different embedded graphics etc. <\/p>\n\n\n\n<p>In this guide, we shall initialize the LTDC, layer and fill the screen with colors pixel by pixel.<\/p>\n\n\n\n<p>In this guide, we shall cover the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>SAI Configuration.<\/li><li>GPIO initialization.<\/li><li>LTDC Initialization.<\/li><li>Layer initialization.<\/li><li>Color header file<\/li><li>Main.c code.<\/li><li>Results.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. SAI Configuration:<\/h2>\n\n\n\n<p>We start off by adding the following to the sys_init.c source file.<\/p>\n\n\n\n<p>After the enabling cell compensation:<\/p>\n\n\n\n<p>Enable over drive to reach the maximum 180MHz with stable operation.<\/p>\n\n\n\n<p>To enable over driver, the following steps are required:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Enable over drive.<\/li><li>Wait for over drive to be enabled.<\/li><li>Enable over-drive switching.<\/li><li>Wait for the over-drive switching to be enabled.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"447\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-1024x447.png\" alt=\"\" class=\"wp-image-2127\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-1024x447.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-300x131.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-768x335.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-1536x671.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-1150x502.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-750x327.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-400x175.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM-250x109.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.31.50\u202fAM.png 2034w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"447\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-1024x447.png\" alt=\"\" class=\"wp-image-2128\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-1024x447.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-300x131.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-768x335.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-1536x671.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-1150x502.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-750x327.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-400x175.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM-250x109.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.33.55\u202fAM.png 2034w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t  \/*Enable over drive*\/\n\n\t  PWR-&gt;CR|=PWR_CR_ODEN;\n\n\t  while((PWR-&gt;CSR &amp; PWR_CSR_ODRDY) ==PWR_CSR_ODRDY);\n\n\t  PWR-&gt;CR|=PWR_CR_ODSWEN;\n\n\t  while((PWR-&gt;CSR &amp; PWR_CSR_ODSWRDY) ==PWR_CSR_ODSWRDY);<\/pre><\/div>\n\n\n\n<p>After the enabling the over-drive, we need to configure the SAI clock generation as following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>PLLSAI-&gt;N to be 50.<\/li><li>PLLSA-&gt;R to be 3.<\/li><li>PLLCDCLK over 2.<\/li><\/ul>\n\n\n\n<p>At full speed, you will get LCD frequency of 16.6MHz<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"275\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-1024x275.png\" alt=\"\" class=\"wp-image-2129\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-1024x275.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-300x81.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-768x206.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-1150x309.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-750x201.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-400x107.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM-250x67.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.45.11\u202fAM.png 1498w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t  \n\t  \/*SAI clock configuration *\/\n\t  RCC-&gt;PLLSAICFGR|=(0x02U&lt;&lt;RCC_PLLSAICFGR_PLLSAIR_Pos);\n\n\t  RCC-&gt;PLLSAICFGR|=(50&lt;&lt;RCC_PLLSAICFGR_PLLSAIN_Pos);\n\n\t  RCC-&gt;DCKCFGR|=(0x03&lt;&lt;RCC_DCKCFGR_PLLSAIDIVR_Pos);\n\n\t  RCC-&gt;CR|=RCC_CR_PLLSAION;\n\t  while(!(RCC-&gt;CR &amp; RCC_CR_PLLSAION));\n<\/pre><\/div>\n\n\n\n<p>Thats all for the clock configuration.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. GPIO Initialization:<\/h2>\n\n\n\n<p>Before we initialize the GPIOs. we need to find which pins are connected to LCD.<\/p>\n\n\n\n<p>We can find the pins from the schematic file of STM32F429-discovery board and they are the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"830\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM.png\" alt=\"\" class=\"wp-image-2130\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM.png 1014w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM-300x246.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM-768x629.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM-750x614.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM-400x327.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.45\u202fAM-250x205.png 250w\" sizes=\"(max-width: 1014px) 100vw, 1014px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-1024x508.png\" alt=\"\" class=\"wp-image-2131\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-1024x508.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-300x149.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-768x381.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-1536x762.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-1150x570.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-750x372.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-400x198.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM-250x124.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.48.13\u202fAM.png 1674w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Create new source file with name of LTDC.h and header file with name of LTDC.h.<\/p>\n\n\n\n<p>Within the source file, include the following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#include &quot;stm32f4xx.h&quot;\n#include &quot;LTDC.h&quot;<\/pre><\/div>\n\n\n\n<p>Now declare the following function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">void LTDC_Pins_Init()<\/pre><\/div>\n\n\n\n<p>This function will initialize the pins according to the schematic.<\/p>\n\n\n\n<p>Hence, the initialization of GPIO as following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t#define LTDC_AF 14U\n\t\/*Refer to bsp_lcd.h for the pins required by the LCD*\/\n\t\/\/enable the peripheral clock for GPIO ports involved in LTDC interface\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIOAEN;\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIOBEN;\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIOCEN;\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIODEN;\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIOGEN;\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIOFEN;\n\n\t\/*\n\t * Configure GPIOA pins related to LTDC\n\t * PA4, PA3, PA6, PA11, PA12 *\/\n\t\/*Set the GPIOs to Alternate function*\/\n\tGPIOA-&gt;MODER|=GPIO_MODER_MODE3_1|GPIO_MODER_MODE4_1|GPIO_MODER_MODE6_1|\n\t\t\tGPIO_MODER_MODE11_1|GPIO_MODER_MODE12_1;\n\n\tGPIOA-&gt;MODER&amp;=~(GPIO_MODER_MODE3_0|GPIO_MODER_MODE4_0|GPIO_MODER_MODE6_0|\n\t\t\t\tGPIO_MODER_MODE11_0|GPIO_MODER_MODE12_0);\n\n\t\/*Set the output speed to max*\/\n\tGPIOA-&gt;OSPEEDR|=GPIO_OSPEEDR_OSPEED3|GPIO_OSPEEDR_OSPEED4|GPIO_OSPEEDR_OSPEED6|\n\t\t\tGPIO_OSPEEDR_OSPEED11|GPIO_OSPEEDR_OSPEED12;\n\n\t\/*Select which alternate function to use *\/\n\tGPIOA-&gt;AFR[0]|=(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL3_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL4_Pos)|\n\t\t\t(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL6_Pos);\n\n\tGPIOA-&gt;AFR[1]|=(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL11_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL12_Pos);\n\n\t\/*\n\t\t * Configure GPIOB pins related to LTDC\n\t\t * PB8, PB9, PB10, PB11, PB0, PB1*\/\n\n\tGPIOB-&gt;MODER|=GPIO_MODER_MODE0_1|GPIO_MODER_MODE1_1|GPIO_MODER_MODE8_1|GPIO_MODER_MODE9_1|\n\t\t\tGPIO_MODER_MODE10_1|GPIO_MODER_MODE11_1;\n\n\tGPIOB-&gt;MODER&amp;=~(GPIO_MODER_MODE0_0|GPIO_MODER_MODE1_0|GPIO_MODER_MODE8_0|GPIO_MODER_MODE9_0|\n\t\t\t\tGPIO_MODER_MODE10_0|GPIO_MODER_MODE11_0);\n\n\tGPIOB-&gt;OSPEEDR|=GPIO_OSPEEDER_OSPEEDR0|GPIO_OSPEEDER_OSPEEDR1|GPIO_OSPEEDER_OSPEEDR8|\n\t\t\tGPIO_OSPEEDER_OSPEEDR9|GPIO_OSPEEDER_OSPEEDR10|GPIO_OSPEEDER_OSPEEDR11;\n\n\tGPIOB-&gt;AFR[0]|=(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL0_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL1_Pos);\n\tGPIOB-&gt;AFR[1]|=(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL8_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL9_Pos)|\n\t\t\t(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL10_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL11_Pos);\n\n\n\t\/*\n\t\t * Configure GPIOC pins related to LTDC\n\t\t * PC6, PC7, PC10*\/\n\n\tGPIOC-&gt;MODER|=GPIO_MODER_MODE6_1|GPIO_MODER_MODE7_1|GPIO_MODER_MODE10_1;\n\tGPIOC-&gt;MODER&amp;=~(GPIO_MODER_MODE6_0|GPIO_MODER_MODE7_0|GPIO_MODER_MODE10_0);\n\n\tGPIOC-&gt;OSPEEDR|=GPIO_OSPEEDR_OSPEED6|GPIO_OSPEEDR_OSPEED7|GPIO_OSPEEDR_OSPEED10;\n\n\tGPIOC-&gt;AFR[0]|=(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL6_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL7_Pos);\n\tGPIOC-&gt;AFR[1]|=(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL10_Pos);\n\n\t\t\/*\n\t\t * Configure GPIOD pins related to LTDC\n\t\t * PD6, PD3*\/\n\n\tGPIOD-&gt;MODER|=GPIO_MODER_MODE6_1|GPIO_MODER_MODE3_1;\n\tGPIOD-&gt;MODER&amp;=~(GPIO_MODER_MODE6_0|GPIO_MODER_MODE3_0);\n\n\tGPIOD-&gt;OSPEEDR|=GPIO_OSPEEDER_OSPEEDR3|GPIO_OSPEEDER_OSPEEDR6;\n\n\tGPIOD-&gt;AFR[0]|=(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL6_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL3_Pos);\n\n\n\t\/*\n\t * Configure GPIOG pins related to LTDC\n\t * PG7, PG11, PG12, PG10, PG6*\/\n\n\tGPIOG-&gt;MODER|=GPIO_MODER_MODE6_1|GPIO_MODER_MODE7_1|GPIO_MODER_MODE10_1|\n\t\t\tGPIO_MODER_MODE11_1|GPIO_MODER_MODE12_1;\n\n\tGPIOG-&gt;MODER&amp;=~(GPIO_MODER_MODE6_0|GPIO_MODER_MODE7_0|GPIO_MODER_MODE10_0|\n\t\t\tGPIO_MODER_MODE11_0|GPIO_MODER_MODE12_0);\n\n\tGPIOG-&gt;OSPEEDR|=GPIO_OSPEEDER_OSPEEDR6|GPIO_OSPEEDER_OSPEEDR7|GPIO_OSPEEDER_OSPEEDR10|\n\t\t\tGPIO_OSPEEDER_OSPEEDR11|GPIO_OSPEEDER_OSPEEDR12;\n\n\tGPIOG-&gt;AFR[0]|=(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL6_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRL_AFSEL7_Pos);\n\tGPIOG-&gt;AFR[1]|=(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL11_Pos)|(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL12_Pos)|\n\t\t\t(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL10_Pos);\n\n\t\/*\n\t * Configure GPIOF pin related to LTDC\n\t * PF10*\/\n\n\tGPIOF-&gt;MODER|=GPIO_MODER_MODE10_1;\n\tGPIOF-&gt;MODER&amp;=~GPIO_MODER_MODE10_0;\n\tGPIOF-&gt;OSPEEDR|=GPIO_OSPEEDR_OSPEED10;\n\n\tGPIOF-&gt;AFR[1]|=(LTDC_AF&lt;&lt;GPIO_AFRH_AFSEL10_Pos);\n\n}\n<\/pre><\/div>\n\n\n\n<p>Thats all for the GPIO Initialization.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. LTDC initialization:<\/h2>\n\n\n\n<p>Now, we shall initialize the LTDC.<\/p>\n\n\n\n<p>We start with the header.<\/p>\n\n\n\n<p>Within the header file, include the header guard:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#ifndef LTDC_H_\n#define LTDC_H_\n\n#endif \/* LTDC_H_ *\/<\/pre><\/div>\n\n\n\n<p>Within the guard, include the following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#include &quot;stdint.h&quot;<\/pre><\/div>\n\n\n\n<p>declare the dimensions of the LCD:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#define BSP_LCD_WIDTH  \t\t\t\t\t240\n#define BSP_LCD_HEIGHT \t\t\t\t\t320<\/pre><\/div>\n\n\n\n<p>Declare active height and width:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#define  LCD_ACTIVE_WIDTH \t\t\tLCD_WIDTH\n#define  LCD_ACTIVE_HEIGHT  \t\tLCD_HEIGHT<\/pre><\/div>\n\n\n\n<p>Layer width and hight to take full screen:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#define LTDC_LAYER_WIDTH\t\t\tLCD_WIDTH\n#define LTDC_LAYER_HEIGHT\t\t\tLCD_HEIGHT\n#define LTDC_LAYER_H_START\t\t\t0\n#define LTDC_LAYER_H_STOP\t\t\tLCD_ACTIVE_WIDTH\n#define LTDC_LAYER_V_START\t\t\t0\n#define LTDC_LAYER_V_STOP\t\t\tLCD_ACTIVE_HEIGHT<\/pre><\/div>\n\n\n\n<p>Since the LCD is RGB565, it will take 2byte (16-bit) for each pixel for color values.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#define LCD_PIXEL_FMT \t\t\t\t2<\/pre><\/div>\n\n\n\n<p>Declare the LCD specification:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"403\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-1024x403.png\" alt=\"\" class=\"wp-image-2132\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-1024x403.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-300x118.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-768x302.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-1150x452.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-750x295.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-400x157.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM-250x98.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-7.21.56\u202fAM.png 1480w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#define LCD_HSW \t\t\t\t\t10\n#define LCD_HBP\t\t\t\t\t\t20\n#define LCD_HFP\t\t\t\t\t\t10\n#define LCD_VSW\t\t\t\t\t\t2\n#define LCD_VBP\t\t\t\t\t\t2\n#define LCD_VFP\t\t\t\t\t\t4\n\n#define FB_WIDTH\t\t\t\t\tLTDC_LAYER_WIDTH\n#define FB_HEIGHT\t\t\t\t\tLTDC_LAYER_HEIGHT<\/pre><\/div>\n\n\n\n<p>Declare the following functions:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">void LTDC_Pins_Init();\nvoid LTDC_Init();\nvoid Layer_Init(LTDC_Layer_TypeDef *Layer);\nvoid LCD_DrawPixel(uint16_t Xpos, uint16_t Ypos, uint16_t RGB_Code);\n\nuint32_t lcd_get_fb_address(void);<\/pre><\/div>\n\n\n\n<p>Hence, the header file as following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#ifndef LTDC_H_\n#define LTDC_H_\n#include &quot;stdint.h&quot;\n\n\n#define LCD_WIDTH  \t\t\t\t\t240\n#define LCD_HEIGHT \t\t\t\t\t320\n\n\n\n\n#define  LCD_ACTIVE_WIDTH \t\t\tLCD_WIDTH\n#define  LCD_ACTIVE_HEIGHT  \t\tLCD_HEIGHT\n\n\/*Set layer width and height *\/\n#define LTDC_LAYER_WIDTH\t\t\tLCD_WIDTH\n#define LTDC_LAYER_HEIGHT\t\t\tLCD_HEIGHT\n#define LTDC_LAYER_H_START\t\t\t0\n#define LTDC_LAYER_H_STOP\t\t\tLCD_ACTIVE_WIDTH\n#define LTDC_LAYER_V_START\t\t\t0\n#define LTDC_LAYER_V_STOP\t\t\tLCD_ACTIVE_HEIGHT\n\n\n\/*Select pixel format *\/\n\n#define LCD_PIXEL_FMT \t\t\t\t2\n\n\n#define LCD_HSW \t\t\t\t\t10\n#define LCD_HBP\t\t\t\t\t\t20\n#define LCD_HFP\t\t\t\t\t\t10\n#define LCD_VSW\t\t\t\t\t\t2\n#define LCD_VBP\t\t\t\t\t\t2\n#define LCD_VFP\t\t\t\t\t\t4\n\n#define FB_WIDTH\t\t\t\t\tLTDC_LAYER_WIDTH\n#define FB_HEIGHT\t\t\t\t\tLTDC_LAYER_HEIGHT\n\n\/*Functions*\/\n\nvoid LTDC_Pins_Init();\nvoid LTDC_Init();\nvoid Layer_Init(LTDC_Layer_TypeDef *Layer);\nvoid LCD_DrawPixel(uint16_t Xpos, uint16_t Ypos, uint16_t RGB_Code);\n\nuint32_t lcd_get_fb_address(void);\n\n#endif \/* LTDC_H_ *\/<\/pre><\/div>\n\n\n\n<p>Now, move the source file.<\/p>\n\n\n\n<p>Declare the following function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">void LTDC_Init()<\/pre><\/div>\n\n\n\n<p>This will configure the LTDC and start sending clocks RGB data to the LCD automatically using the hardware level.<\/p>\n\n\n\n<p>First, enable clock access to LTDC:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">RCC-&gt;APB2ENR|=RCC_APB2ENR_LTDCEN;<\/pre><\/div>\n\n\n\n<p>Configure the horizontal width to be LCD_HSW-1:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-1024x527.png\" alt=\"\" class=\"wp-image-2133\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-1024x527.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-300x154.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-768x395.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-1536x791.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-1150x592.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-750x386.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-400x206.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM-250x129.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.19.15\u202fAM.png 2004w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">LTDC-&gt;SSCR|=((LCD_HSW-1)&lt;&lt;LTDC_SSCR_HSW_Pos);<\/pre><\/div>\n\n\n\n<p>Configure the back porch to be LCD_HSW+LCD_HBP-1 :<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">LTDC-&gt;BPCR|=((LCD_HSW+LCD_HBP-1)&lt;&lt;LTDC_BPCR_AHBP_Pos);<\/pre><\/div>\n\n\n\n<p>Configure active width to be LCD_HSW+LCD_HBP+LCD_ACTIVE_WIDTH-1<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-1024x527.png\" alt=\"\" class=\"wp-image-2134\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-1024x527.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-300x154.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-768x395.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-1536x791.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-1150x592.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-750x386.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-400x206.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM-250x129.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.21.35\u202fAM.png 2004w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">LTDC-&gt;AWCR|=((LCD_HSW+LCD_HBP+LCD_ACTIVE_WIDTH-1)&lt;&lt;LTDC_AWCR_AAW_Pos);<\/pre><\/div>\n\n\n\n<p>Configure total width to be total_width = LCD_HSW+LCD_HBP+LCD_ACTIVE_WIDTH+LCD_HFP-1:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-1024x527.png\" alt=\"\" class=\"wp-image-2135\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-1024x527.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-300x154.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-768x395.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-1536x791.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-1150x592.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-750x386.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-400x206.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM-250x129.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.24.17\u202fAM.png 2004w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\tuint32_t total_width = LCD_HSW+LCD_HBP+LCD_ACTIVE_WIDTH+LCD_HFP-1;\n\n\tLTDC-&gt;TWCR|=(total_width&lt;&lt;LTDC_TWCR_TOTALW_Pos);<\/pre><\/div>\n\n\n\n<p>Configure the VSYNC is similar to HSYNC as following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\tLTDC-&gt;SSCR|=((LCD_VSW-1)&lt;&lt;LTDC_SSCR_VSH_Pos);\n\n\tLTDC-&gt;BPCR|=((LCD_VSW+LCD_VBP-1)&lt;&lt;LTDC_BPCR_AVBP_Pos);\n\n\tLTDC-&gt;AWCR|=((LCD_VSW+LCD_VBP+LCD_ACTIVE_HEIGHT-1)&lt;&lt;LTDC_AWCR_AAH_Pos);\n\n\tuint32_t total_height = LCD_VSW+LCD_VBP+LCD_ACTIVE_HEIGHT+LCD_VFP-1;\n\n\tLTDC-&gt;TWCR|=(total_height&lt;&lt;LTDC_TWCR_TOTALH_Pos);<\/pre><\/div>\n\n\n\n<p>Now, configure the shadow register with enabling the vertical banking reload:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"791\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-1024x791.png\" alt=\"\" class=\"wp-image-2136\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-1024x791.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-300x232.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-768x593.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-1536x1186.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-2048x1581.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-1150x888.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-750x579.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-400x309.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.29.13\u202fAM-250x193.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t\/*Configure the shadow register*\/\n\t\/*Enable vertical banking reload*\/\n\tLTDC-&gt;SRCR|=LTDC_SRCR_VBR;<\/pre><\/div>\n\n\n\n<p>Finally enable the LTDC:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-1024x409.png\" alt=\"\" class=\"wp-image-2137\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-1024x409.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-300x120.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-768x307.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-1536x613.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-2048x818.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-1150x459.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-750x299.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-400x160.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.30.25\u202fAM-250x100.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">LTDC-&gt;GCR|=LTDC_GCR_LTDCEN;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Layer Initialization:<\/h2>\n\n\n\n<p>We start off by the function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">void Layer_Init(LTDC_Layer_TypeDef *Layer)<\/pre><\/div>\n\n\n\n<p>It takes pointer to LTDC_Layer_TypeDef since we have two layers.<\/p>\n\n\n\n<p>Disable the layer:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"365\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-1024x365.png\" alt=\"\" class=\"wp-image-2138\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-1024x365.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-300x107.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-768x274.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-1536x547.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-2048x730.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-1150x410.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-750x267.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-400x143.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.33.46\u202fAM-250x89.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">Layer-&gt;CR&amp;=~LTDC_LxCR_LEN;<\/pre><\/div>\n\n\n\n<p>declare local variable:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">uint32_t tmp;<\/pre><\/div>\n\n\n\n<p>Set color formate to be RGB565:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">Layer-&gt;PFCR|=(0x02&lt;&lt;LTDC_LxPFCR_PF_Pos);<\/pre><\/div>\n\n\n\n<p>Configure alpha to be constant:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t\/\/2. configure the constant alpha and blending factors\n\tLayer-&gt;CACR&amp;=~(0xFFU&lt;&lt;LTDC_LxCACR_CONSTA_Pos);\n\tLayer-&gt;CACR=(0xFFU&lt;&lt;LTDC_LxCACR_CONSTA_Pos);<\/pre><\/div>\n\n\n\n<p>Set blending factor 1 to be 1-alpha and blending factor 2 to constant alpha:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-1024x637.png\" alt=\"\" class=\"wp-image-2139\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-1024x637.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-300x187.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-768x478.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-1536x956.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-2048x1274.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-1150x716.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-750x467.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-400x249.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2023\/11\/Screenshot-2023-11-23-at-8.37.49\u202fAM-250x156.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\ttmp = 0;\n\ttmp|=(0x4U&lt;&lt;LTDC_LxBFCR_BF1_Pos)|(0x5U&lt;&lt;LTDC_LxBFCR_BF2_Pos);\n\n\tLayer-&gt;BFCR=tmp;<\/pre><\/div>\n\n\n\n<p>Configure the layer position:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\tuint32_t AHBP=(LTDC-&gt;BPCR &gt;&gt;LTDC_BPCR_AHBP_Pos)&amp;0xFFFU;\n\n\tuint32_t WHSTART = AHBP+LTDC_LAYER_H_START +1;\n\ttmp=0;\n\ttmp|=WHSTART&lt;&lt;LTDC_LxWHPCR_WHSTPOS_Pos;\n\n\tuint32_t WHSTOP = AHBP+LTDC_LAYER_H_START+LTDC_LAYER_WIDTH+1;\n\tuint32_t AAW =   (LTDC-&gt;AWCR&gt;&gt;LTDC_AWCR_AAW_Pos)&amp;0xFFFU;\n\tWHSTOP = (WHSTOP &gt; AAW)?AAW:WHSTOP;\n\ttmp&amp;=~(0xFFFU&lt;&lt;LTDC_LxWHPCR_WHSPPOS_Pos);\n\ttmp|=WHSTOP&lt;&lt;LTDC_LxWHPCR_WHSPPOS_Pos;\n\n\tLayer-&gt;WHPCR=tmp;\n\n\ttmp = 0;\n\tuint32_t AVBP = (LTDC-&gt;BPCR&gt;&gt;LTDC_BPCR_AVBP_Pos)&amp;0x7FFU;\n\tuint32_t WVSTART = AVBP+LTDC_LAYER_V_START+1;\n\ttmp|=WVSTART&lt;&lt;LTDC_LxWVPCR_WVSTPOS_Pos;\n\n\tuint32_t AAH = (LTDC-&gt;AWCR&gt;&gt;LTDC_AWCR_AAH_Pos)&amp;0x7FFU;\n\tuint32_t WVSTOP = AVBP+LTDC_LAYER_V_START+LTDC_LAYER_HEIGHT+1;\n\tWVSTOP = (WVSTOP &gt; AAH)?AAH:WVSTOP;\n\ttmp&amp;=~(0x7FFU&lt;&lt;LTDC_LxWVPCR_WVSPPOS_Pos);\n\ttmp|=WVSTOP&lt;&lt;LTDC_LxWVPCR_WVSPPOS_Pos;\n\n\tLayer-&gt;WVPCR=tmp;<\/pre><\/div>\n\n\n\n<p>Configure the frame buffer address:<\/p>\n\n\n\n<p>Set a global variable as following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#define FB_SIZE (FB_WIDTH * FB_HEIGHT)\nuint16_t  Frame_buffer[FB_SIZE];<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t\/\/4. Configure Frame buffer address\n\tLayer-&gt;CFBAR=(uint32_t)lcd_get_fb_address();<\/pre><\/div>\n\n\n\n<p>Configure the pitch, line length and total buffer length:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\ttmp = 0;\n\n\tuint32_t pitch =  LTDC_LAYER_WIDTH * 2;\n\n\tuint32_t line_len = pitch + 3;\n\n\ttmp|=pitch&lt;&lt;LTDC_LxCFBLR_CFBP_Pos;\n\n\ttmp&amp;=~(0x1FFFU&lt;&lt;LTDC_LxCFBLR_CFBLL_Pos);\n\n\ttmp|=line_len&lt;&lt;LTDC_LxCFBLR_CFBLL_Pos;\n\n\tLayer-&gt;CFBLR|=tmp;\n\n\tLayer-&gt;CFBLNR&amp;=~(LTDC_LxCFBLNR_CFBLNBR_Msk&lt;&lt;LTDC_LxCFBLNR_CFBLNBR_Pos);\n\n\tLayer-&gt;CFBLNR|=LTDC_LAYER_HEIGHT&lt;&lt;LTDC_LxCFBLNR_CFBLNBR_Pos;<\/pre><\/div>\n\n\n\n<p>Enable the layer:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">\t\/\/8. Enable the layer\n\tLayer-&gt;CR|=LTDC_LxCR_LEN;<\/pre><\/div>\n\n\n\n<p>Finally the draw pixel function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">void LCD_DrawPixel(uint16_t Xpos, uint16_t Ypos, uint16_t RGB_Code)\n{\n\n\t*(__IO uint16_t*) ( lcd_get_fb_address()+ 2*((Ypos*LTDC_LAYER_WIDTH + Xpos))) = (uint16_t)RGB_Code;\n\n}<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>That all for the layer.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Color header file:<\/h2>\n\n\n\n<p>Create new header file with name of colors.h.<\/p>\n\n\n\n<p>The content of the header file:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#ifndef COLORS_H_\n#define COLORS_H_\n#include &quot;stdint.h&quot;\n\n\n#define VIOLET   \t0x901A\n#define INDIGO   \t0x4810\n#define BLUE   \t\t0x001F\n#define GREEN   \t0x07E0\n#define YELLOW   \t0xFFE0\n#define ORANGE   \t0xFBE0\n#define RED   \t\t0xF800\n#define WHITE   \t0xFFFF\n#define BLACK\t\t0xFFFF\n\n\n#endif \/* COLORS_H_ *\/<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">6. Main.c:<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#include &quot;LCD_Pins.h&quot;\n#include &quot;ILI9341.h&quot;\n#include &quot;LTDC.h&quot;\n#include &quot;colors.h&quot;\n\nuint16_t color_table[3]={VIOLET,GREEN,ORANGE};\n\nint main()\n{\n\tdelay_init(180000000);\n  \tLCD_Pin_Init();\n\tLCD_SPI_Init();\n\tLTDC_Pins_Init();\n\n    ILI9341_Init();\n    LTDC_Init();\n    Layer_Init(LTDC_Layer1);\n  while(1)\n\t{\n\n\t\tfor (int k=0;k&lt;3;k++)\n\t\t{\n\t\t\tfor (int i=0;i&lt;240;i++)\n\t\t\t{\n\t\t\t\tfor (int j=0;j&lt;320;j++)\n\t\t\t\t{\n\t\t\t\t\tLCD_DrawPixel(i,j,color_table[k]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tdelay(1000);\n\t\t}\n  \n}<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Results:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"LTDC on STM32F429-DISCO\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/KOG87bOsqD8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Happy coding \ud83d\ude42 <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the previous guide (here), we took a loot at what LTDC, different embedded graphics etc. In this guide, we shall initialize the LTDC, layer and fill the screen with colors pixel by pixel. In this guide, we shall cover the following: SAI Configuration. GPIO initialization. LTDC Initialization. Layer initialization. Color header file Main.c code. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,19,11,12],"tags":[],"class_list":["post-2125","post","type-post","status-publish","format-standard","hentry","category-embedded-systems","category-lcd","category-peripheral-drivers","category-stm32"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2125"}],"collection":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2125"}],"version-history":[{"count":1,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2125\/revisions"}],"predecessor-version":[{"id":2140,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2125\/revisions\/2140"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}