ESP32S3 Interfacing 8bit Display Using LVGL and ESP IDF

handling a tft display by a microcontroller requires a big round footprint memory management a lot of coding and a proper user interface design which is nothing but a pain in the app but with this versatile open source display graphic library you can literally take your tft display to the next level today in this video i'm using 1.9 inch 8-bit tft display with esp32 s3 development board from really go to integrate lvgl library to esp idf and use it to design my own interface so we can see what this development port is capable of with the brand new esp32 s3 microcontroller we've got a lot to display today so without any further ado let's jump on in [Music] this video is sponsored by pcbway pcbway is not only a professional and high quality printed circuit board manufacturer but they also have cnc cutting 3d printing metal sheet fabrication and injection molding services so it's the right choice where you can get all your project components from one single place and they are now having discount on four layer and six layer pcb manufacturing so that mr chance all right so here we are with the asp-32 s3 t-display development board from liligo it has 1.9 inch 8-bit lcd and that means the mcu is connected over parallel interface to the lcd so here is the development board we have here we have here the here we can see the asp 32 microcontroller as you can see the board does not have a frame buffer this means the cpu mcu is connected directly to the to this display 8 bit display that means we can show 256 colors different colors so it has usb type c so when we connect it to a power supply it has quite decent display as you can see now it's scanning for wi-fi network it's scanning for this network which does not exist it's from the manufacturer so we need to change this so now our development kit was not able to join uh the wi-fi network and it's asking uh to do provisioning using esp touch app from mobile phone so we can enter the wi-fi credential so let's do that and see what this development kit is capable of all right so here i've downloaded esp touch app from the apple store so let's have a look at it we get to esp touch and as you can see the application detects this id i'm connected to so now let me enter my password all right so i've just confirmed so as you can see now the our development board has managed to enter my wi-fi network and i suppose that it's getting the time from the internet right now but as you may have noticed there is different in the time zone i suppose this is the time zone of china i'm in a different time zone so if we press on this button we can see some demo yeah the display looks quite decent actually and here we can see the chipset esp32 s3 with psram 8 kilobytes i suppose that is internal ps ram and we have flash of 8 kilobytes and it's continuously measuring the supply voltage using analog another digital converter all right so as you can see the transaction between pages is quite smooth and the resolution of the display is quite good actually yes so now it's time to jump into code and write our own application so we can display custom stuff and make this board more useful with user electronics all right so now i've flashed my own firmware on this lilligo display development kit in order to show the animations that i've worked on so i have two pages one is a major showing random values you can see the movement is quite smooth and the transaction between pages is also good so here i have my channel a logo with a continuously rolling text i've used lvgl library which makes everything easy to handle and allows the user which is us to do more complex stuff in a short amount of time uh it needs a bit of time to get used to it actually so today we are going to have a look at it and go through the code that i've used in order to display these animations so let's jump into our code and discuss things in more detail all right so here we are with the esp32 code i'm using esp-idf if you are in arduino development framework you can transfer this into your code after understanding it as you can see i'm using espresso ide it's actually nothing but a copy from eclipse so there is nothing new to deal with so let's move on but first let me change the font size so you guys can see clearly the code all right so now i think this is better alright so first let's start with the main first we can see the g by o configuration these pins are going to control the lcd backlight and power and so on after that we can see the lcd pin configuration over here and these pins are going to be the lcd data pins we have two pins for blue three pins for red and three pins for green so we have eight pins for lcd per interface and here we can see the bus width eight bits and the other important parameters that i want to mention here are the lcd clock rate and we have it here it's around 6.5 megahertz which is quite low compared to spi interface because here we have the advantage of power interface and the other thing is the bits per pixel you can notice that it's 16 not eight because we are taking into consideration the alpha parameter which determines how transparent a pixel is within an image i'm going to explain this part in more details when it comes to image display parts and here we can see the lcd controller part and the rest of the main function is related to lvgl library configuration lvgl stands for light and versatile graphics library everything related to this library is explained in details in this website i'm going to put a link to it in the video description so you can have a look at it this library allows embedded developers to build a nicely looking user interface for rgb lcds in a short amount of time so let's get back to our code and see how i used it to build my application alright so everything related to the display lvgl user interface is inside these header and source files but of course to let lvgl library work properly it needs a tick timer and i've done this by initializing this task which does nothing but handles the lvgl timer every 10 milliseconds and as you can see this task is handled by a cpu one so i may add wi-fi connection capability in the future and let the cpu zero handle rf related tasks so yeah let's get back to the lvgl library and see how to implement the user interface parts so first of all inside my application i will be having three tile views these styles will be represented by the pages that you can see over here and of course the display object is nothing but a pointer to the display that carries the related information and it's used to form everything that's going to be shown on the display so with the concept of the style views imagine that i have three displays and i can switch between them whenever i want so let's take this as an example on the first page i'm creating an image and put and placing it on the center of the display so now let's see what i have on the other page on the next page i have a meter created placed at the center of the display and then its size is determined and here we have the scale related parameters so as you can see i have one image at one page and meter at the second page there are other important parameters like styles which are used to change the characteristics of an object just like we can see here i'm changing the color and the font of a text using this style and here i'm changing the color of the background to make it black again i'm using background style the text that i'm talking about are created inside the timer and we can see them here see we can see one of them just over here used for electronics text and the other one is the continuously rolling part which is this one and we can see the style added to the object in these functions so an overall having an image and two texts will form to us this page so yes this was inside the lpgl timer lvgl timers are nothing but software timers they can be created so just like this one animation timer where the arc animation is done let me show you that part so here in the software timer callback function a account value is passed over the callback function and here we see the arcs angles and rotations changes depending on the past count value which will give us such an animation at the startup time because this time our callback will be executed every 20 milliseconds just like we have set it over here and when the animation period is done the animation timer is deleted and a new timer is created in order to change the background and browse the tile views that we have created before every 10 seconds and we see this over here so whenever this callback is executed and you tell view will be shown and yeah that was the overall application that i have built using lvgl library i'm still of course at the early stages of being expert in this library but i wanted to share my experiment using it with you guys so you may implement even something more creative and better and of course i'm planning to use this library in my future projects so i can build things that are more advanced and share it with you guys as open source so this brings me to the end of this video if you have learned something new please like share and subscribe and tell your friends about user electronics stay tuned and bye bye

Channel: Useful Electronics

Views: 58,087

Keywords: useful electronics, wifi, wifi module, flask iot, shorts, local wifi network, sql, sqlalchemy, flask database, iot application, esp32, esp32s3, esp32 tutorial, esp-idf, esp32 programming, esp, esp32 iot, esp32 display, lvgl, esp32 lvgl, esp32 lyligo display, esp32 TTGO, esp32 display lcd, esp32 display project, esp32 arduino, esp32 lvgl tutorial, lvgl example, esp32 lvgl esp-idf, t display, esp32 t display, esp32 display image, esp32 smart watch, iot project, esp32 tft, display

Id: 88MwR-4Dy0Q

Length: 12min 37sec (757 seconds)

Published: Sat Aug 27 2022