STM32 + LCD TFT = Display Any Data

this is a TFT display we are going to make it show any data we want using a microcontroller and some wires in reality with this 144 in module which can be easily integrated into any your project you can display numbers text pictures animations and we make it interactive for example here it can display the potentiometer position in the form of a simple gouch so in this video you will see how to connect this display to an stm32 set up the programming environment and finally display anything you want ending with some animations enjoy this exact TFT LCD display has 16,384 pixels each has three sub pixels red green and blue which allows for different colors to be displayed this results in a total number of leads inside the one display of more than 49,000 that should be individually controlled however as you can see this stm32 controller here has only 64 bins so there is an issue in this equation clearly there should be something that allows us to multiply the number of pins to control the display and there is this functionality is provided by the display driver st77 35r enabling the control of all 49,000 leads using only 6 MCU pins in two words leads are controlled as a metrix with 128 eight rows and 384 columns three columns per pixel rows and columns are managed separately by source and gate TFT drivers that are integrated into the display driver I won't delve too deep into the working principle of this TFT controller because it is quite complex and can be quite boring just a quick look at these diagrams give me a headache but just to give you an idea this exact controller has 759 pins and I do not recommend playing with them unless it's absolutely necessary fortunately we don't have to as the controller manages all those pins by itself the only thing we need to do from our side is to transfer the information that needs to be displayed via the SPI interface from the MCU to the display SPI stands for serial peripheral interface which allows for high-speed serial data transmission in our case from the stm32 to the TFT controller essentially the serial data sent by the controller via SPI is then processed by the TFT controller and out in a parallel manner as you can see the display has 11 pins but we will only need six of them to connect it to the MCU you can see the functionality of each pin on the screen and to connect everything together I will use hookup wires which may not be the most professional approach but it allows to check the idea the connection scheme for the display looks straightforward and not overly complicated for those of you who may not be familiar with the nuclear board you might wonder why the display is connected to those specific board pins I should briefly explain this so each pin of this board has predefined functions it can perform for example not every pin can be used for SPI data transmission or serve as a clock signal for the SPI therefore we must identify the exact pins capable of these functions and connect wires to them so to find the functionality of each pin on the board you can easily search for it on Google or follow the link in the description obviously that in the program code later on we will refer to these pins by their names to control them as needed now when we understand the theory behind and have everything connected we are ready to program the MCU and display our first data set so to program the MCU there are several options available personally I use an external programmer called the SD link V2 usually it is used when you have a MCU on its own not embedded in a development board however if you have a development board similar to this one you can simply connect it to your PC via a USB cable and program this device because this part of the board acts as a programmer already next to write our beautiful piece of code we also need STM Cube IDE which is a programming environment it is absolutely free Additionally you will need to download the TFT controller Library which allows us to display anything we want obviously that without the library you would have to go through the entire data sheet and manually create those communication signals according to the protocol that's a lot of work and life is too short for that trust me so just download the library using the link provided in the description and finally we are ready to start programming first of all we need to create a new project to do this press file new stm32 project in the window that appears click on the board selector Tab and choose the board you are using in my case it's a nucleo l152 re so I select it next give your project a name and don't make any other changes here initialize all peripherals with their default modes yes please for the first time this might take some time because it's downloading all the necessary libraries and files to create the new project here you can see the MCU that my development board has along with all these pins and their connections gray color of the PIN means that no function is assigned to them and they are free to use green and yellow means that they are used for something so overall this interface is just userfriendly interface that significantly simplifies MCU configuration you can simply click on the things you want to change and the corresponding code with the required setup will be generated you can configure MCU timers communication interfaces chip frequency and pin functionality and after the configuration and pressing the project build button Cube ID will automatically generate program code that corresponds to the functionality that has been set up here obviously it just simplifies everything because writing everything manually would take an eternity and days of reading the data sheet so it's fortunate that we don't have to do that and the ID creates C files headers and all additional necessary files automatically so for now don't make any changes here and simply press contrl plus s which will generate files with a default set up we will make changes a little bit later after we install the library so now we need to check if everything works correctly we should check the debugger connection because without the debugger connected we wouldn't be able to program the world for that you just need to press project build all then click on the bug icon the bug configuration and choose new Lounge configuration next go to the debug window choose STD link if you have connected the nuclear board directly through the USB cable and Press scan if a serial number appears my congratulations you have connected everything correctly in my case I use an external programmer so I have a Serial of wire debuger connection so if everything works fine from this point to program the board it is enough to press the Run button every time we need to and if something doesn't work if you have encountered any issues at this stage check out this video in which I demonstrate how to fix some errors that might appear now we need to install the TFT display Library simply download it using the link in the description and simply drag the files from the folder into the corresponding CRC and ink folders here after you have your files copied just press build project or build all to check if the newly added files have any errors and of course there are there are always errors you can identify the Errors By checking which line they appear in in my case the library includes a non-existing file that is because the name of the MCU in the display library is different from the one that my board uses so I just need to change stm32 fl1 to stm32 L1 in your case it should be the name of your controller which you can find in the files here now the second error which is related to the SPI communication remember I mentioned that the display communicates via the SPI interface and we need to Define which pins of the MCU should be used for that now it is time to do that so go to the ioc file and choose SPI 2 in the mode section in the mode section select half duplex master and make no other changes you can also see the pins assigned for the SPI here and check their locations on the nuclear board here here after that just press crl + S and the ID will generate the necessary code to set up SPI Communication in my case I still have an error because the library uses spi1 for the communication but we have configured SPI 2 so I just need to change spi1 to SPI 2 and press build all again after that as you can see the error has disappeared after all that all we needed to do to make the library work now let's take a quick look at what this Library actually can do so the main file we are looking for is a library C file this display has different functions that can be used to display everything for example draw pixel allows you to light up any pixel of any color anywhere you want on the display as an argument there are X and Y coordinates and pixel color you can do much with it but if you need to draw something small that is a perfect tool another function is a right string it has same parameters but it also includes a background color and character font you can find font options in the font. C file which Library also has F rectangle draws an array of pixels that form a rectangular shape you can change it starting position wids height and color it is already a very powerful tool that allows you to draw different shapes and create some interesting and stuff and even animations by changing the rectangle shape and coordinates it might also be useful for some simple graphical do representation fill screen function fills the whole screen with a specific color you can use it as an eraser and finally the coolest one draw image basically you can draw any picture with a display resolution and even animated it I will show you how to do it in a second just after showing where those functions should be written so we should write those functions in the main. C file so open it at the top write several includes include st7735 Doh test image. H and fonts. H it is necessary to use all draw functions inside the main file for example let's draw a simple text write its coordinates font you want to use color and background color and here we go the same goes for other graphical Primitives but again the most interesting thing is images for example let's display one image from the test image. H file to do that write draw image starting points which in our case are 0 0 picture resolution and its name you can find the name in the header file let's just have a quick look how picture is stored in the memory so as you can see the picture is stored in the form of an array with 16,384 Elements which basically corresponds to display pixels and each element or pixel of the array is represented by 16 bits so basically these 16 bits represent color intensity of each sub pixel five for red sub pixel six for green sub pixel and five for blue that makes the total number of colors that can be displayed by one pixel to more than 65,000 which is 2 to the power of 16 so as you can see there is a lot of bits and for one picture the number of bits is over 262,000 and that's really a lot and only for one image at this point I think you have a complete understanding of how image display works and why it's control requires several layers with TFT controller and libraries because every single diet is controlled separately by the individual set of Beats that the controller is sending to it and it creates really really complicated structure but for us because we use several obstruction layers it is really really really simp simplifi it so coming back to the test image to display it first feel the screen in black color and then draw the picture which turns out to be a parrot it was really easy to do right but what if we want to display a custom image not this parot for example we want to display a cat as we already know for that we will need to get a data array somehow and for that we will need an another application called called LCD image converter which allows converting an image into a data array that can be written in the MCU memory and displayed and again it is a free software so to display any image first step is to find this image for example I want to display a cat image with a resolution of 128 by 128 pixels let's say I like this one it somehow represents me since it has a slightly higher resolution that we need we have to resize it first for that I will use Photoshop I will also remove the white areas on the left and right sides and save the resized file somewhere now we have to convert it into a data array just upload the picture by pressing file open then go to file again and select convert the program will generate an H file with the data set needed to draw that image also you have to make sure that you have the following color preset in here eror 5 G6 B5 otherwise you will have problems with the color representation next I will open the H file with notepad and you can basically use any program you want because it doesn't matter we just have to copy the file content into the main. C file so just copy and paste the following data array into the test image. H file by the way don't forget to copy the array initialization from the test image and rename the array I will name it cat that's it go back to the main. C file and write draw image use 0 0 as the initial coordinates put the display WIS and height and finally the name of the array press build project and run and finally we have our polite cats staring at us as you have guessed any picture can be displayed like that even a gif I will continue with a cat theme and we'll find something dramatic let's say I like this one now what we need to do is to adjust it to the display resolution for that I will use an external website the link also is in the description next you have to split it into frames this particular give has only three frames which is quite convenient for us now with these frames we have to follow the same procedure as with a regular image convert them through the LCD image converter into H files open them with a text editor like notepad and copy the content to the test image im. H file now the only one thing left is to write only three functions and three delays between each frame oh yeah C is a case sensitive language so I I should write H in capitals and the D in delay as well as you can see with a 50 milliseconds delay it is a bit slow so just let's reduce it and let's reduce it even more So eventually I tested it with different delays and removed the delays all together overall so in this case when we have no delays the time between each frame is defined by the time required to transfer each individual frame from the MCU memory to the display I cannot really reduce it farther and maybe for your GI you need to have higher speed and the only option to reduce the delay in such case is to increase the transfer speed by increasing the SPI frequency you can find these parameters inoc file I also display the nanat GI just for fun like in the previous video with an OLED display you should definitely go and check that video as well in that video I use a OLED display which has a little bit lower resolution but also it uses another communication interface and other Library so in your project if you don't have to use a color display maybe OLED is better option for you also it is a little bit cheaper thank you for watching have a great day and see you in the next video bye

Channel: Nick Electronics

Views: 11,184

Keywords: stm32 display, STM32 LCD display, stm32 lcd, stm32 tft, st7735 stm, st7735 stm32, stm32 tutorial, stm32, stm32 display example, stm32 display tutorial, display any data, LCD TFT, 128x128 lcd, 128x128 display, st7735 color display, st7735 1.44 color tft display, stm32 color display, stm32 display project, stm32cubeide tutorial, stm32 tutorial for beginners, stm32 oled, stm32 programming, how to use LCD display, stm32 display data, how to display data with display

Id: y5O8JRKy1tI

Length: 17min 28sec (1048 seconds)

Published: Thu Oct 19 2023