Interface LVGL with STM32 Low Memory Controllers || Parallel Display

[Music] hello everyone welcome to controllers tech a lot of you guys requested a video on the lvgl so today we will see how to make it work i am going to use a parallel display for today's tutorial and if you remember i have already covered a video on these displays i would advise that you first watch that video and make sure your display works as in this video i will focus only on the lvgl part i will be using the same library here also along with the lvgl of course if you are using any spi based display make sure you already have the working display drivers this video does not shows how to make the display work but rather it's about the lvgl integration on a working display also one more important thing before i start the video this library does not support the touch interface as i have not implemented it yet but i am planning to do it soon and i will update the code on the github itself so let's start the video now first of all we need to download the library files so search for the lvgl github here download the entire project now extract the zip file and also open the official website on the website go to the developers section here you can see there is a guide for porting so open it open the first step in it here is the extracted folder we don't need everything in it like demos is not needed along with that zephyr folder i will keep it though since i am not going to include them anyway rename this folder to lvgl let's keep that aside open the cube ide and create a new project i am using f446re controller give some name to the project and click finish first set up the clock i am running the system at maximum possible clock here these are the files from the previous video where we interfaced some parallel displays user setting contains the definitions for the pins and i am going to keep them same if you want to use different pins i would suggest you to watch the previous video as i have explained it there my advice would be that you keep the pins same as they are shown here here the rd pin is the input pin and the rest are all the output pins let's set the p-a-0 as input and change its name to r-d similarly define other pins as output and name them as per the file now go to the gpio select all the pins and change their maximum output speed to very high or whatever you have maximum that's it for the cube mx configuration click save to generate the project so our project has been generated now we will add the lvgl open the project folder and copy the lvgl into the root of the folder we also need to add the display library files into the project so copy the source files into the source directory and header files into the include directory now go inside the lvgl and copy this configuration template file paste it in the main project folder and remove the template from the name now refresh the project so that the new files can show up here open the lvgl configuration file and change this 0 to 1. this will enable the configuration this configuration file can be used to enable or disable the functions that you want in the library for example the color depth is set to 16 for the rgb 565 display the one i am using you can read about the configuration file here and change the options accordingly if your controller have less ram and flash sizes you need to disable a lot of options so read about them and change them as per your requirement i am leaving everything to default for now next we need to include the lvgl folder in the source path open the project properties go to c c plus plus general path and symbols source location click add folder and select lvgl folder click apply to save the changes let's build the code once we have 32 warnings but it's all right let's start writing the main file first of all we need to include the lvgl related files these 2 dots and a slash means that we are going up a level right now we are in the main file so one of these means we will reach the core folder and another will take us to the root of the project folder now in the root folder we will go inside the lvgl and then include the lvgl header file similarly we are also including the lv examples header file you can change these based on your project structure also include the lcd lvgl header file this file basically connects the display drivers to the lvgl library which we will see in a while let's build the code once everything seems good there are no errors so far let's see the lcd lvgl source file now here in this file we have the display frame buffer because of the less memory available in the microcontroller i cannot create a buffer large enough to store all the pixels for the display this is why i am going to flush one row at a time and this frame buffer have a size equal to the width or height whatever is bigger next important thing is the display in it function before we see this let's take a look at the guide again here are the steps given for the initialization of the lvgl first we need to call the lv init function which we will do later in the main file itself then we have to initialize the drivers here we need to initialize the lv display driver along with the lcd display driver also next we need to register the display and input drivers since there is no input driver for now i am only registering the lv display driver finally the steps 4 and 5 we will see them later this part you might remember from the tft video here we will set some rotation to the display and here we are intimating the lvgl that the display has been rotated the rotation is a parameter of the function so we will input it in the main file itself the next function is the tft flush function this will basically set the pixels according to the data saved in the frame buffer first it checks for the screen area and if everything is all right we go next as i mentioned earlier because of the low memory available i am going to flush one row at a time so for every one row we store the column data into the frame buffer i tried flushing a single pixel at a time but as expected the entire process was very slow if you have enough memory you can store all the data into the frame buffer itself we can even use the dma 2d feature of the st which is available in some microcontrollers i will put all these different methods on the github soon but for now let's just go with flushing one row at a time after saving the row data into the frame buffer i am calling the function fill frame buffer this function will set the pixels as per the data in the frame buffer the implementation of this function is very simple actually i took the function fill rectangle and modified it a little so instead of flushing the entire rectangle it flushes one row only once we have finished flushing all the rows we will call the function lv display flush ready of course the flashing is a bit more complicated than this and it involves flush callback and other things but this here is the simplest implementation if you guys want another video of showing lvgl on a more sophisticated controller like h series mcu which will show the use of dma also and how we can use the different ways of flushing the frame buffer to the display let me know in the comments or if you have low memory available on the controller go ahead with this one next we need to include a timer for the lvgl and therefore we will make some modifications in the interrupt file here in the systick handler call the function lv tick ink and pass the value 1 to indicate 1 millisecond this is it for the setup now let's write the main code inside the main function call the lv init function now initialize the display i am setting the rotation to 3. give some delay so that everything is initialized properly now for the demonstration purpose i will use one of the examples provided in the library itself let's use the animated example i am using this animation 2 example call it once in the main function now inside the while loop call the function lv task handler and also use some small delay let's build it everything seems ok so far also check the ram and flash usage using animated example takes more memory of course let's run the project now you can see the animation playing on the display this example is provided by the lvgl by default and it works perfectly now i will show one more thing where i will print a counter on the display we can look for the examples in the text area widget section let's try this one simple text area we don't need to add the button event handler copy this part and we will modify this later first we are creating the text area then setting the text area to display in one line only this is the alignment of the text area let's change it to center remove the event callback delete this also as we don't need this part i am removing all the button related code too let's check some other functions available for text area add text is used to add the text where the cursor is pointing set text can be used to set the text in the text area it replaces everything and put the text from the beginning let's use this set text function the object name is t-a and the text we want to display is hello world uncomment this and call the function we just created seems like this function is already defined in the examples let's rename this and try again everything seems good so far so flash the code to the board you can see the lcd displaying the hello world in a text box now i will implement the counter create a variable which can increment let's add another function to update the text on the display we need to utilize the object so the object must have been defined globally define one buffer which can hold the string format for the counter now we will use the s printf to convert the number to the string and store the string into the buffer we created increment the index variable and finally use the settext function to set the text in the object we will call this update text function in the while loop so that the new counter value can update on the display all right let's build and flash the code to the board you can see the counter is updating so everything is working pretty fine you can use other examples test them and modify them according to your requirement i will try to update the touch interface to this library and update the code on github also let me know in the comments if you want to see the lvgl integration in more advanced controllers like h7 series which can use dma or the entire frame buffer in one flush this is it for the video you can download the code from the link in the description keep an eye on the github for the update regarding the touch interface that's all for now keep watching and have a nice day ahead [Music] you

Channel: ControllersTech

Views: 23,767

Keywords: stm32, stm32f4, f103, discovery, nucleo, low, memory, lvgl, tft, lcd, text, area, animation, port, example

Id: X8aEXnSmPUI

Length: 21min 4sec (1264 seconds)

Published: Sat Jan 22 2022