ESP32 OLED SSD1306 LVGL Embedded UI Design

OLED LCDs have been used with Arduino and development boards for years due to their easy driver interface and affordable price today in this tutorial we are going to take things to the next level integrating lvg library for nicely looking user interface design on monochrome OLED display we are going to run simple animations as startup introduction use Square line studio for user interface design design which is going to generate for us the necessary lvg Library functions to be integrated later on on esp32 microcontroller firmware as an application we will be running a timer on a display that can be controlled by two buttons all the displays won't be as you ever known before so without any further Ado let's Jump On In turn your dream project into reality with PCB way I've personally used their services to produce my own prototype for future iot projects ordering your own PCB has never been easier before with a lot of features they also have open source communities and electronics Sports and tools store the link in the description all right so here's the hardware that we are going to use along this tutorial so as you can see over here I have this olid screen it has a resolution of 128x 64 pixels so the oldid screen has uh SSD 1306 controller that's being uh interfaced over I squ C with the serial clock and serial data lines that are connected to my microcontroller over here uh esp32 C2 you can see the connections behind the hardware that I'm using uh and on my MCU I I have uh two push buttons and this is the serial programmer that I've designed before I'm using it only to power uh this Hardware the inro screen that we have seen is actually running by code it's not a GI file uh we'll have a look at that during discussing the firmware running of the sb32 C2 so you can see using the LV Library can generate quite nice looking animations So currently I'm running lvgl library on my MCU in order to be able to have nicely looking uh user interface design uh so I can show it on this uh LCD so it's going to be a nice example uh for monochrome uh lvga Library user interface design during this process I've also used square line studio uh and we'll also have a look at that during this tutorial so the firmware is designed in a way that uh when I press on this button the timer will start actually right now at least you can see 25 frames that are being print to this screen per second uh which actually quite nice value uh and I can pose the timer by clicking on the uh left button so now it's posed and then I can resume by clicking on the same button so as you can see the MCU is actually quite fast in printing frames uh on the screen and of course I can restart the timer by clicking on the right button again so the CER has been reset you may also have noticed that I don't have a pull up or pull down resistors on my Hardware because I already have uh the GPI open uh pullup resistor uh activated internally so I don't have to add it uh on my hardware and also I don't have uh parallel bypass capacitors for uh debouncing because I already have a debounce algorithm running on my firmware uh and uh these two buttons are connected to an external interrupt uh to the GPI opens of the MCU of course all the details that are related to the firmware will be discussed later on so uh keep watching until the end so this is actually a simple example uh for monochrome uh LCD user interface design with lvg labrary we are going to see everything thing on the code that's loaded to the esp32 uh and the square line studio and everything related to this project okay so first of all let me show you the settings of the project uh I viewed uh to make it compatible with the monocrome screen that I'm using right now the OLED screen so first you can see the dimensions uh of the screen 128 and 64 uh bit uh for the olded screen that I'm using the color depth uh is used as 8bit unfortunately Square line Studio does not have support for uh monochrome displays so I have to select 8bit color depth but this is not important because this is related to the color we only have two colors uh in our case we have only black and uh white or for my LCD it's uh blue so I have no rotation and here actually the board is not important because we are using some custom Hardware uh and this is the version of the square line and the LPG Library that's going to generate all right so here's the square line Studio that I've used for user interface design uh you will notice that the design is quite simple uh because the LED is quite small and has a low resolution so anyways let's jump into the components of our design so here you will see that we have uh two panels and inside these panels I have two texts that I can modify in the firmware but but here of course I've used a special font it is a seven segment font uh actually I've imported that uh externally so you can see that here I've downloaded this seven segment ttf file and then here in the font manager I can select the font that I want and then uh select its size uh and then when I generate it I can I can select that font when importing some text so let me show you an example how I've done that so let's add this text file for example level one uh first of all we need to make it uh black so we can see how things are going and here in the text font uh I need to select the font that I've have imported and it's s segment 52 this is the size now you can see that the added text is in the font that I've uh installed anyway so let's delete that okay so regarding the panels that I'm using they can be imported uh from this uh window and of course here you can change the size uh and the position of it or you can change it from this side so I can do it this way uh anyways let's delete that so regarding the panels that I'm using uh here in the background segment you can see that I've selected this radius so I can uh change the shape of the panel just like that and the color is white uh in order to see how the user interface is going to appear uh on the audit screen okay so that's all related to the uh Square line Studio of course at the end of the day we need to export uh all the files uh using this option uh and the necessary header and source file will be generated for us so we can import to our project so here are the generated files so here in the screens folder you will see all the necessary functions in order to implement the this user interface of course what I've done here is I've uh copied this uh functions to my uh project so I can uh implement the same uh view that you are seeing on Square line Studio other than that here you can see the font of course these all need to be imported uh to the esp32 project okay so now let's jump into esp32 firmare development and continue from there all right so it's the firmware running on the esp32 let me uh clear this windows so we can uh go step by step so we can here start from the main let me get this a bit larger all right so let's start from the main function so first of all we can see that the display is getting initialized of course this is related to the uh I squ C and the uh OLED driver selection and then passing that to the LV Library we'll discuss that and after that I'm initializing two input interrupts so I can monitor the state of the uh buttons that I have on my board and then here I'm adding two buttons uh with their callbacks so when a button is pressed a specific function will be called as a callback I have actually written a complete uh Library about button interface so it will feature of course uh button uh debounce and two button States and they are uh button released and long press so let's get back to the main and then here you can see that I have two t TKS and they are the interrupt Handler so here you can see uh this function will only run when a notification is received from button interrupt and we can see this in the interrupt layer so here uh whenever an interrupt occurs uh notification from ISR uh will be sent to this task so it can run and here actually depending on the received uh interrupt ID which is actually nothing but the GPO number that's causing the interrupt is passed to the B the bounce function uh so I can process that and then uh these callbacks uh that are the left and right buttons can be called uh from there so here inside the button call back functions uh we can see that uh the timer control functions are used so here if the right button is clicked and the timer is running uh it's reset uh otherwise it will be created from scratch and in the left button call back we can can see that if the timer is posed it will resume otherwise it will pose if it's running okay so that's what our firmer is doing so let's get back to the display initialization and lvj user interface side so of course first of all we'll see that the i squ c peripheral is being initialized and both the serial data and serial clock pins are specified and after that we see the uh OLED LCD specific data is passed to the uh IO Handler so we see here the i s c slave address command bits are passed to the Handler of course here we see that the bits per pixel so every pixel will correspond to one single bit we don't have reset pin so this is the minus one is passed and after that we start initializing the lvgl library so it can be compatible with our Hardware the monochrome display that we are using so we can see that the uh buffer size is determined display Dimensions monochrome uh display option is activated and the rotation is also determined and then of course after forming the display object this is passed to the lvgl user interface start function so here we can use this to form everything related to the user interface side we can see here all the functions that are generated by the square line Studio I've done nothing actually but copied these functions to this uh layer and you may notice that here I'm using set color functions as zero and uh IFS so because we don't have colors on our LCD uh this will actually turn on or off the pixel uh within uh the object so the things that we need to pay attention to is the uh tile views and they are the uh number of screens that we have on our user interface so in total we have two screens one of them is related to the animation and it's on the ti view one and the other one is related to the running timer so let's have a look at the Running Animation uh how it's going to be so first of all I'm creating here the arcs that rotating around the logo of the electronics and then here a software timer is created this is actually quite useful for running such animations so after that everything will uh take place is inside this timer callback so here in this segment we'll see that the arcs will rotate around the logo uh and after that the arcs will be deleted one by one then a small logo uh will start to disappear and after that uh the larger logo will start to appear timer is deleted and then we switch to the uh next tile view which is the timer so we can continue from there so after switching to the timer screen uh everything actually will be done be by the timer functions so uh this function will be called by the application layer and depending on the past timer State uh timer operation will be done so for example if we go to the timer create function uh here we see that we are passing this call back and here actually we see that depending on the value of the timer it's separated to uh two parts and then these uh numbers are passed to this function so they are uh printed to the left segment and right segment and everything related to this uh video is shared on my G propos you will find all the code and the user interface design uh all the square line outputs are shared here so you can uh modify it play with it or even develop it this brings me to the end of this tutorial if you have learned something new like this video share it among your friends and tell them about user Tronics stay tuned for the upcoming tutorials and bye-bye

Channel: Useful Electronics

Views: 22,056

Keywords: useful electronics, local wifi network, esp32, esp32 tutorial, esp-idf, esp32 programming, esp, esp32 iot, esp32 display, lvgl, esp32 lvgl, 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, esp32 tft, display, squareline, squareline studio, Embedded ui, ssd1306, esp32 oled display, esp32 i2c oled display, lvgl monochrome, esp32c2, esp32 ssd1306

Id: B1RGfUwY2Jo

Length: 14min 8sec (848 seconds)

Published: Sun Feb 25 2024