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

hello here we are again welcome to new programming tutorial we are still playing with tft ease aspi library in first video we learned how to use built-in fonts how to change colors and how to show simple text on screen in this video i will show you how to draw some graphics like lines circles rectangles and so on stay tuned i will go slow don't forget to pause video when i'm going too fast if you missed the first video you can find link in description in description you can find additional links and additional information and more okay we will start start will with empty arduino sketch first i will delete these comments and i will paste code we need we need to include these libraries this is constructor and in setup function i need to have dft dot init sorry in it and i will also fill screen tft black to delete everything on screen don't forget to set your board and set your port okay it's working when i see done uploading i know that is uploading is finish and i have nice black screen so let's draw something first we will draw pixel this is easiest function tft dot pixel i have three arguments uh first are coordinates so if i want uh for example red pixel in the middle of the screen i need to know coordinates this screen is 135 by 240 so for example middle screen first coordinate will be i don't know 75 or 77 and y coordinate middle of the screen will be 120 and now i need color dft red i want a red pixel it is little hard to see but you can see it here one red pixel for example i can make more pixels dft 80 and now dft green i think green is easier to notice on this display so you can see we have red pixel and green pixel next function is i very rarely use draw pixel because i don't know i don't need to draw so small objects on screen but i very often use draw line tft draw line function needs more arguments because we need two points so first two numbers are coordinates of first point for example zero zero so it will zero zero is here and next two numbers are coordinates of second point so for example i want to [Music] 100 100 and of course i will need color let's do the white so when drawing these graphicals primitives every function need to have color okay so we have one pixel two pixels green and this line let's do another line dft i don't know for example from 100 100 to 100 0 and tft blue so this line will go from that point which is 100 100 to 100 so here we'll we will have blue line now we need to learn how to draw a circle tft draw draw a circle and first two arguments are coordinates of center of the circle so for example i want to i don't know 50 140 so center will be in this point next argument is radius radius radius of circle so for example 30 and i will choose tft um i don't know yellow and here it is circle but there is also another function tft fill fill circle same arguments but circle will be filled with chosen color so for example i will choose i don't know 81 hundred and 220 dft yellow of course there was mistake or error how you want i'll try to set up my camera too so now you can see that draw circle will all only draw this line and fill a circle will fill whole circle with specific color you can see also that second circle is smaller because a radius which is this number is smaller here we have 30 and here is 20. let's do rectangles well i have space on this little screen i hope i will tft draw let's rectangle okay uh i will need coordinate of upper point upper left point of rectangle so for example i want 0 0 and i want rectangle which will be 30 pixels long and i don't know 10 pixels high and of course dft well white of course i will need color so here you can see this small rectangle it start in point zero zero coordinates it is 30 pixels long and 10 pixels high i can make it bigger for example if i change this number this 10 to i don't know [Music] 120 so it will be from here to here because 120 is middle of the screen i hope this is not too boring for you but we need to learn basics later we will do much interesting stuff and if you remember we had here draw circle and fill a circle so it is same with rectangles tft fill this is probably a function i used most i will tell you why very soon for example i will 5 and 1 30 and i will take 40 40 and dft orange i hope there is that color and here it is but i will change maybe we have pink or purple deep purple i love the purple bend not color black is my favorite color and white i'm simple black and white and boring and here we have purple purple rectangle very simple so this is it i hope these tutorials will help you this is still beginner stuff but we need to learn basics before more complex stuff in the next few day days i will make another tutorial in a third tutorial we will learn how to rotate screen how to draw images how to make custom fonts if you are here for the first time feel free to check my other videos and i love to see new subscribers on my channel if you want you can also buy me a coffee link is in description and please if you watched whole video let me know in comments i'm very happy and grateful when i see those comments thank you and have a nice day i will see you soon with new tutorial goodbye

Channel: Volos Projects

Views: 33,993

Keywords:

Id: AyumJUAFdZ0

Length: 14min 50sec (890 seconds)

Published: Sun Dec 05 2021