STM32 + LCD TFT = Display Any Data

Summary

In this video by Nick Electronics, viewers are introduced to the TFT display interfaced with an STM32 microcontroller. The video provides a step-by-step guide on how to program and connect this display module to show various data outputs including numbers, text, images, and animations. It covers the hardware setup, necessary software tools, and library dependencies needed for effective communication between the microcontroller and the display. The demonstration ensures even beginners can successfully implement custom images and animations onto the display, revealing the versatility and capabilities of the module.

Highlights

• TFT displays are adaptable and can be used to showcase various visual data outputs including interactive gauges. 📊
• The display operates using a significant number of subpixels, controlled through a systematic matrix and SPI data transfer. 💻
• Nick Electronics provides accessible instructions, encouraging even those new to programming microcontrollers to experiment. 🛠️
• Programming is simplified through tools like STM Cube IDE and additional libraries that facilitate communication protocols. 💾
• The video thoroughly explains converting images and gifs to arrays that the display can interpret, making creative displays straightforward. 📷

Key Takeaways

• Using a TFT LCD display with STM32 enables showcasing diverse data types like text, images, and animations. 🎨
• The display uses a matrix of rows and columns, with the knowledge of SPI communication crucial for successful operation. 🔄
• The usage of libraries simplifies interaction with the display, replacing the need to manually create complex communication signals. 📚
• Adapting images onto the LCD requires resizing and converting them into a compatible data array. 🖼️
• Animations can be created by displaying image frames sequentially with optimized delay settings. 🎞️

Overview

The video kicks off with an introduction to the TFT LCD's capabilities and its potential integrations with an STM32 microcontroller. Users are guided on setting up the display to show various forms of data, making it versatile for different projects. The practicality of this display is demonstrated through a series of easy-to-follow steps, ensuring comprehension even for newcomers.

Viewers are then shown how to prepare the necessary software environment, including libraries and IDE setups essential for programming the display. The underlying technology of TFT displays, including its matrix setup and SPI communications, is also broken down to help users understand the display mechanism better.

Finally, the technical instructions turn creative, showing how to display varied graphics, from static images to animations. This section emphasizes customization, encouraging users to display their own designs and gifs, highlighting the dynamic range of what can be achieved with these setups. This serves as motivation for further exploration and experimentation within the field of electronics and display technologies.

Chapters

• 00:00 - 00:30: Introduction to TFT Display and Project Overview In this introduction to the TFT display, the project overview focuses on utilizing a microcontroller to display data through a 1.44 inch module. This display can show numbers, text, pictures, and animations, making it interactive. A practical example provided is displaying the position of a potentiometer graphically. The video tutorial will guide on connecting the display to an STM32 and setting it up.
• 00:30 - 01:00: Programming Environment Setup and Display Pixel Details This chapter focuses on setting up the programming environment necessary for controlling a TFT LCD display. It explains the structure of the display, which consists of 16,384 pixels. Each pixel is further divided into three sub-pixels representing the colors red, green, and blue, allowing for the display of various colors. The chapter also emphasizes the complexity of managing over 49,000 individual LED elements within the display, highlighting the intricate control required for animations and display outputs.
• 01:00 - 01:30: STM32 Controller and Display Driver Connection This chapter focuses on the connection between an STM32 controller and a display driver. It starts by discussing the limitation of STM32 controllers, which only have 64 pins, posing a challenge for controlling displays directly. To address this, the chapter introduces the ST7735R display driver, which can manage 49,000 LEDs with just 6 MCU pins. It explains that these LEDs are controlled in a matrix configuration, which includes 128 rows and 384 columns, thus achieving more efficient control of the display using fewer pins.
• 01:30 - 02:00: Display Driver and SPI Interface Explanation The chapter discusses the complexities of a TFT display controller, which manages the pixel arrangement in rows and columns through integrated source and gate TFT drivers. The narrator briefly touches on the intimidating nature of the diagrams associated with the controller, which boasts an elaborate design with 759 pins. Due to its complexity, it is advised to avoid interacting with the controller unless essential.
• 02:00 - 02:30: Connecting the TFT Display to the STM32 Board This chapter focuses on connecting a TFT display to an STM32 board using the SPI interface. The TFT display's controller manages most of the pins, so the main task is transmitting display data from the MCU to the display via the SPI. SPI, standing for Serial Peripheral Interface, facilitates high-speed serial data transmission, enabling data from the STM32 to be processed by the TFT controller.
• 02:30 - 03:00: Programming the MCU and Development Board The chapter discusses programming for the MCU and development board, focusing on the TFT controller. It highlights how to connect the display, which has 11 pins, to the MCU using only six of them. Details about the functionality of each pin are shared, along with the admission that hookup wires, though not professional, are used for simplicity to test the setup. The connection scheme for the display is described as straightforward and uncomplicated. For newcomers, the text addresses potential curiosity about why the display integrates with the nuclear board.
• 03:00 - 03:30: Setting Up STM32 Project in STM Cube IDE The chapter titled 'Setting Up STM32 Project in STM Cube IDE' explains the significance of understanding the specific functions of each pin on an STM32 board. It emphasizes that not all pins are capable of performing functions such as SPI data transmission or acting as a clock signal for SPI. The chapter advises identifying the exact pins suitable for specific functions and connecting wires accordingly. It recommends searching on Google or following a provided link for detailed information regarding the functionality of each pin.
• 03:30 - 04:00: MCU Configuration and Code Generation in Cube IDE The chapter discusses the process of configuring the MCU and generating code using the Cube IDE. It mentions the importance of understanding the theory and having all necessary connections ready before programming the MCU. The chapter also introduces different options for programming the MCU, with a personal preference for using an external programmer called the SD link V2, particularly when the MCU is not embedded in a development board.
• 04:00 - 04:30: Debugging and Programming the Board The chapter titled 'Debugging and Programming the Board' discusses how to program a development board using a USB connection to a PC. It highlights the convenience of having an onboard programmer. For coding, it recommends using STM Cube IDE, a free programming environment. Additionally, the chapter advises downloading the TFT controller Library to display information on the board, noting that without this library, one would have to manually interpret the data sheet.
• 04:30 - 05:00: Installing and Configuring the TFT Display Library The chapter focuses on installing and configuring the TFT Display Library. It begins by highlighting the complexity involved in manually creating communication signals according to the protocol, suggesting this is a time-consuming task. Instead, it advises downloading the necessary library from the provided link to streamline the process. Once the library is installed, the chapter guides readers to initiate programming by creating a new project. It details the steps for setting up a new STM32 project, including navigating to the board selector tab and choosing the appropriate board, such as the Nucleo L152RE in the provided example.
• 05:00 - 05:30: TFT Display Library Functions The chapter titled 'TFT Display Library Functions' guides the reader through the process of setting up a project for TFT displays. It begins with instructions on initializing the project, which includes giving it a name and setting all peripherals to their default modes. It is noted that the first initialization might take longer as it involves downloading necessary libraries and files. Additionally, details about the MCU on the development board, including its pins and connections, are provided, with gray indicating unused pins.
• 05:30 - 06:00: Drawing Images and Characters on the Display In this chapter, the focus is on simplifying the configuration of Microcontroller Units (MCUs) using a user-friendly interface. The interface uses color coding, such as green and yellow, to indicate usage or modification of certain components. Features like MCU timers, communication interfaces, chip frequency, and pin functionality can be configured with just a few clicks. Upon finalizing the configuration, by pressing the build button in Cube ID, the necessary code setup is generated automatically, making the process efficient and accessible.
• 06:00 - 06:30: Understanding Image Data Array and Color Representation The chapter discusses the process of generating program code that simplifies the handling of image data arrays and color representation. It highlights how modern tools automatically create necessary files such as C files, headers, and additional files, which eliminates the need for manual coding and extensive reading of data sheets. The guidance is to save the current progress by pressing 'Control + S' to generate these files with a default set, allowing the user to avoid making manual changes.
• 06:30 - 07:00: Displaying Custom Images The chapter focuses on checking and debugging connectivity before programming. It begins with instructions to ensure everything is functioning correctly by verifying the debugger connection. The steps include building the project and configuring the bug (debugger) settings by selecting a new Lounge configuration, followed by moving to the debug window and selecting the STD link for direct connection with the nuclear board.
• 07:00 - 07:30: Displaying GIFs and Animation on the Display The chapter explains the process of connecting and programming a board using a USB cable or an external programmer for displaying GIFs and animations. After ensuring a successful connection, indicated by a serial number appearing, the 'Run' button is used to program the board. If issues are faced during this stage, a troubleshooting video is recommended.
• 07:30 - 08:00: Adjusting Display Speed and Comparison with OLED Display The chapter discusses the installation of a TFT display library. It instructs downloading the library using a provided link, and dragging files from the downloaded folder into the appropriate CRC and ink folders. After copying, the next step is to build the project to check for errors in the newly added files. The chapter also acknowledges common occurrences of errors during this process and hints at ways to identify them.

STM32 + LCD TFT = Display Any Data Transcription

• 00:00 - 00:30 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
• 00:30 - 01:00 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
• 01:00 - 01:30 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
• 01:30 - 02:00 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
• 02:00 - 02:30 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
• 02:30 - 03:00 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
• 03:00 - 03:30 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
• 03:30 - 04:00 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
• 04:00 - 04:30 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
• 04:30 - 05:00 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
• 05:00 - 05:30 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
• 05:30 - 06:00 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
• 06:00 - 06:30 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
• 06:30 - 07:00 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
• 07:00 - 07:30 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
• 07:30 - 08:00 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
• 08:00 - 08:30 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
• 08:30 - 09:00 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
• 09:00 - 09:30 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
• 09:30 - 10:00 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
• 10:00 - 10:30 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
• 10:30 - 11:00 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
• 11:00 - 11:30 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
• 11:30 - 12:00 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
• 12:00 - 12:30 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
• 12:30 - 13:00 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
• 13:00 - 13:30 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
• 13:30 - 14:00 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
• 14:00 - 14:30 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
• 14:30 - 15:00 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
• 15:00 - 15:30 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
• 15:30 - 16:00 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
• 16:00 - 16:30 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
• 16:30 - 17:00 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
• 17:00 - 17:30 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