Bar Graph - Programming Tutorial (TFT_eSPI library)

good morning in this video I will show you how to program this graph or dlram on your TFT display these graphs are useful when you need to show different datas or sensor readings to make it simple I decided to show only seven values right now values are generated randomly in this tutorial we will learn how to program this nice design we will not learn how to get sensors readings that parties on you my subscriber asked me very often what software are you using to make these nice user interfaces and the short answer is none I use pen and piece of paper to plan alignment this concept can be used on any display you can use it with an OLED display also you will only need to keep in mind that different screens and different development boards have a different resolution okay let's get started so here here I have empty Arduino sketch I already included TFT aspi Library we'll need this Constructor for TFT display and we will need one Sprite but first let's get the colors you can see that for this project I need three colors it is always a good idea to use only a few colors so we will use white this dark gray and you can choose this main color whatever you want I decided to use this so I will need color one color two colored three four colors I will use this free RGB 565 Color Picker you can find this link in description so color one will be I will choose something very close to White and I need to copy this value not this one this and this is my color one color two is my main color so I will choose try to do something different maybe red version dark red this will be color two and color 3 will be some dark now when we have our colors let's go planning our alignment as I already mentioned I will use simple piece of paper and pen resolution of my board is 320 by 170. so I already played with these values and this what I got a first I will feel whole screen with dark gray color which is color 3 then I will draw one fill one rectangle which is like thank you so coordinate of this is 10 40. so we have 40 pixels here and then here if I have 10 here and 10 here and this is the 320 that means that's that this line is 300. and if I have 40 here and then here this line size height of this rectangle will be 100. which is here is 20 20. I know that this is very messy drawing but I just wanted to show you how you can help yourself I hope you can understand me so if this is 2020 that means that this line 20 and 20 is 280. and this line we will put it 100 and okay we have our plans we have our colors let's write rest of code in setup we need to have DFT init function we need to rotate it in landscape and we need one Sprite I already have a Constructor for sprite name of sprite is Sprite Sprite creates right and my Sprite will be large will be same Dimension as screen so 320 by 170. in a loop I will make external function called drove graph and in Loop part of code I will call it if each each cycle each cycle I will I will fill my Sprite with color three and my last function in drawgraph will always be let's write push Sprite zero zero let's try to upload this I need to choose esp32 S3 development module and my port is right now 23 and you can see results here empty screen fill it with gray color let's draw these rectangles Sprite feel Earth thing so my first is location 10 40. size of is 300 by 120. so then 10 40 sizes 300 by 100 then 20. and now I will choose color one which is white and now I need this big round rectangle which is 2020 110 and 280. sorry to feel around correct on location 2020 and size is 280 by 100 and 10. around index I don't know let's try five and calories color too let's try to upload this here we can see results very nice and now we need and now we need those lines I will show only seven days so uh size of this line will be something which is for example 210 because 210 divided by 7 is 30. so every 30 pixel I will draw value here and this part is 100 and 110 I think so I will this will be 80. I will not draw lines because they are hard to see I will also draw white rectangles let's say we will move 16 pixels from here and 50 pixels from top height of our first line will be 80. now it will be two and width is 2 and height is 80. color one which is white white not fill Sprite feel wrecked let's try this this is not good we need to put it higher so let's try 30. upload now it's much better so we need another line correct rectangle so also 60 but now location is 30 plus 80 is 110. and size is also 210 because 200 10 is easy to divide by with 7 and height is 2 also color one and now we have two nice lines let's add numbers here so size of this line is 80. I will not for example every every 20 pixels we will draw some text but first we will choose text alignment Center Center function for this text alignment is this one usually the default text alignment is top top left corner and now we will align it Center Center because it is easier to work so uh for I don't know I is equal to um while I is less less than eight I plus plus no I is equal I Plus 2. and we will Sprite draw string I multiply by 10 because we want to see 10 40 16. location of let's try 15 because line is at 16. let's try 15 and here goes 100 and then minus I multiplied by 10. so we will start at the bottom bottom and each I we will go up at the bottom we our bottom line is moved down 110 pixels I hope you understand me sorry okay [Music] um that's it let's let's see how this looks like we have our numbers but I don't can you don't know do you see but numbers have black background so Sprite we need to choose foreground and background color set text color which will be color one will be foreground color and color to these background color now we need days here so I will declare array of data week week have seven days Monday Tuesday when they wanted okay so now I have another four Loop I can use I again zero while I uh less than 7 I plus plus Sprite draw string which will be uh uh week I at the position let's try 160 no sorry 160 from top and from left it will be um so we will draw each 30 pixel so first will be at 60 plus 30 is 90 Plus I multiply by 30. let's see what we have here okay we will put it a few pixels down 100 and 120. now we will need some values for example I will need another array integer also Seven Elements and at the beginning they will be zero I can use also these four Loop because I need set value values for seven elements and random from five to 80. and now let's draw rectangles so we will draw them on practically on the same dislocation will be middle of each rectangle so if we want a rectangle which is I don't know 60 16 pixels wide we will need Sprite we will need move eight pixels to the left and eight pixels to the right so we will have 15 16. sorry for my bedding which but you will see now Sprite feel uh correct location is 82 Plus so same like here I multiply by 30. uh and a starting position is we need to start from Top so 110 minus when you see so we need to start from top and end at the line with a 16 and height is value is let's see what we got now we have our values but they are changing too fast we'll slow it down right now and I can see that bottom line is not long enough we need to increase it for 8 pixels half of this 16. so to slow this program I will I will add delay every three seconds and I will now I will now let me see so this line will now be 200 and 180. let's try now and now I have very nice but I want this little dots here so here I want line so inside this I will add another four Loop and J is equal 0 and while J is less than 280. and we'll draw Dot every 5 pixels so J is equal J plus five Sprite draw pixel location is 60 Plus J because we align started at 60. and from Top we have same as this one color is color one let's try this yeah we have we have these lines these dots now it looks much better I hope you agree okay now we need to add some values also down there some of all values and average so int sum is zero and float average is also zero four summing we need each cycle we need start that sum is zero and sum is equal sum Plus values I inside this for loop with seven Cycles and under I can put that average is equal sum divide by seven now we need to draw these values down there but first I will return Sprite I will return my text alignment to default and I will set text color to uh let's draw with color 3 will be foreground and background will be white which is color one bright row string sum is equal plus string some location will be 20. and it's 136 and now I will use little larger larger font which is two and average will be I will copy this copy paste average 120 draw spring oh my God draw spring when my students have these kind of errors I'm a med and when I have function draw spring it's okay and string please leave a comment in uh down below the video If you if you watch it so far and now we have some an average and let's add some text here for example earnings again I will need to change my color of text which will be now color one color three and Sprite draw ing 20 uh I don't know four sizes also two and I forgot to draw a string yeah earnings how much we earn it that week for example and that's it this is our example I hope you like this tutorial I hope you learned something sorry we are losing connection and I hope this video will be useful for example you can add here also minimum maximum or something you can use this concept for your readings for temperature for I don't know it is not that hard but I think it looks great thank you for your time please leave comment if if you watch the whole video leave a comment uh I don't know leave a I watched the whole video comment please thank you I hope you learned something again and feel free to download my code but I always recommend it would be much better if you could try to write along the video if you could write Discord and play with it change something you will learn much easier I learned it that way thank you if your first time here please subscribe if you if this was very helpful to you you can buy me coffee link is in description have a nice day and I'm glad you watch it this part of video thank you goodbye

Channel: Volos Projects

Views: 26,238

Keywords:

Id: g4jlj_T-nRw

Length: 36min 24sec (2184 seconds)

Published: Sun Nov 06 2022