How to use TFT_eSPI library and ESP32 (PROGRAMING TUTORIAL PART 1.)

hello this is my first programming tutorial in this tutorial we will use this ttgo display board but you can use any esp32 board and any tft display i will show you how to use tft espi library how to make these good looking interfaces and much more dealing with fonts colors and of course we will also use programming fundamentals like conditions loops areas of data and more we will use arduino ide and the first thing you need to do is to install tft hpi library if you have ttgo t display you can check my video how to set up ttgo in arduino ide link is in description okay let's start here i have empty arduino sketch first i will delete these nasty comments we don't need that and next i will add i will include libraries that are needed dft underline a s b i dot h and clued spi dot h i will also need constructor line tft spi usually i copy and paste this but in this case i will write it here i forgot to put this underline okay and now i only need to put in a setup function tft dot init so initialization line if i'm going too fast feel free to use pause feel free to pause video and sorry for my clumsy english so to upload this simple code which will do nothing we need to select board we need to choose ttgo lora oled v1 board and we need to select port i will save it and now we can only wait and after compiling and uploading we can see that nothing is happening so let's learn our first function simplest function tft fill screen this simple function will fill entire screen with specif specific color for example i can use dft underline red and after compiling and uploading we can see that our screen is now red there is 24 predefined uh colors in tft aspi library we can check them so we need to find the library folder it is very easy uh in my documents folder there is arduino folder and here you can find folder libraries and here is tft aspi library here we can find tftspi.h we can open that file and somewhere here let me find it okay here there are so these are default color definitions you can easily use in your project and in most of project these 24 colors are enough but sometimes you will need your special custom color and i will show you how to do that i'm using this site for custom colors this site i will post link in description so i let me zoom it a little i just need to click here i will need to select i don't know some color i love for example this no i like this color and now i need to copy this hex number this hex number represent this color in rgb 565 format so i will just copy hex number i will go back to my code and paste it here and now we can we have this custom color uh i i'm using this uh function to also to delete everything on screen and most most of my projects have a black background so i will use black okay so now we learned learned to use colors let's draw some text there is a few ways to draw text on display but i think this is easiest one tft sorry the string first argument is string or text we want to draw the it is of course hello world second argument is x coordinate so i will for example pick 10 and next argument is a y-coordinate so for example 120. so this this this display have resolution of 135 by 240 so this hello world text will be drawn some somewhere in the middle of the screen text will start 10 pixels from left because that is x axis and 120 pixels from top so it will be somewhere somewhere in the middle and now we have our first string which is hello world but it is so tiny question is how to write bigger text there is also few predefined fonts in this library so we can check them also i will go to i will go to library folder and in this user setup dot h file you can open these files also mean notepad but i'm using this atom we can find let me see oh here they are these are font fonts we can use on easy way there are also custom fonts but we will learn to use them in next video so um hello world line is uh rotted with default font which is eight pixels high we can use font two which is 16 pixels high we can use one four which is 26 pixels high and keep in mind that these large phones phone 6 7 and 8 are these are much larger phones but they are used to only for numbers so for normal text we can use only these three so let's try it for example i want to hello world i will put it up on the top of the screen according to s1010 so i want another line with bigger font this is font two and to change font to set font to this line i just need to add another argument so here i will put two yeah i don't know accordingly 24. and also i can try font four you see how it's easy to change these predefined fonts from four i don't know 40. okay here we can see tiny hello world with default font second line this is font two is a little bigger and phone four is biggest uh i can maybe this one put a little down and uh let me go back here my favorite font to draw numbers is font seven because this is font that font looks like seven segment display it is this font is only for numbers so let's try it tft draw string i don't know i will draw draw number five uh some somewhere 30 and i don't know 100 and i want font seven seven second display and here it is phone 0 1 2 phone 4 and phone 7. let's make it more interesting we will make counter i will take this line and i will put it here i will need integer variable number which is 0 at the beginning i will increment it every second so i need delay 1000 milliseconds and this these functions is this function is for drawing strings and we have number which is integer so i need to convert it to strings which is very easy okay now i will upload and and voila we have little counter okay but how to set color of the text it is very easy for example i want this line to be red this line to be green this line to be blue and i want this line to i don't know have a and i want this line to have a yellow text and blue background so first line needs to be read before first line i will add this line tft set text solar color and tft android or underline red oh my god i hope i will learn that english some someday okay i will copy that this and be before this line i will add so green and last line need to be blue and this line i want text color to be yellow and a background color to be blue it is same function just with two arguments first argument is foreground color which is tft [Music] oh my god i don't know how to write yellow where is yellow dft yellow and background color will be tft blue okay i choose wrong colors but you can see that first line is red second is green blue and and this is yellow and blue i can find more dark dark blue for example [Music] no i will make it with my i will make custom dark blue dark blue dark blue here it is and as i showed you i just need to copy this code here and paste it i think now it will be much better i'm not a graphic designer but i love to play with colors and sometimes i'm spending most of my time to make project look good okay now it's a little better so this was first video in my programming series this was basic functions i know that [Music] that many of you know how to do this but in next videos i will try to do to cover more advanced features and functions and problems like images graphic i don't know flickering updating only one part of the screen and eventually we will be able to make some game i will hope we will try to we will learn to program these push buttons to the bones them and to make simple games so i hope that you'll learn something i know that this is basic stuff in this video but i hope that you learned something feel free to tell me in comments what you think if you are here for the first time please subscribe and hit that notification bell button oh if if those videos are really helpful to you you can also buy me a coffee a link is in description so have a nice day and i will see you soon with new programming tutorial thank you and goodbye

Channel: Volos Projects

Views: 88,326

Keywords:

Id: WFVjsxFMbSM

Length: 18min 39sec (1119 seconds)

Published: Fri Dec 03 2021