Let's make Number Dial (Programming Tutorial)

hello after a long time we have a programming lesson in this video I will show you how to create this number dial I believe that uh many will find this useful I'm using the display S3 Pro but you can you can use any development board with a tach display the principle is the same a few weeks ago I showed you this D display Pro and I know many have already buy this excellent board and if you haven't watched my first video you can find the link in this in the description I decided to create this tutorial because many of you wanted to see how I create my interfaces I know that this video will not have many views but I believe it will help many of you and if you want to help me you can do it in several ways you can check out my channel and maybe watch a few more videos you can subscribe if you haven't already or you can buy me a coffee the link is in the video description this video will be long so let's get to work we will start with this sketch you can find this sketch in description of the video so here we have all the things we need for this example TFI library library for our touch few variables here we'll later we will put some colors here uh we also have this function set brightness which I will hide it because we will set brightness in setup part of the screen we will use brightness four we will init our screen we will init our touch and here we have only two functions which is draw that function will draw our Sprite in this case it is only drawing this n variable and in Loop function we are incrementing n variable and we are drawing that number on screen and if lower part of screen is touched if Y is higher than 240 and we'll reset to zero you can see how this looks like on our board and now we need to um to plan our layout for buttons our screen is 480 by 222 pixels we need four row of three buttons If we divide 222 by 3 we have we will get 74 so each button will have Dimension 74 74 but we will need four of them and 74 ultip by 4 is 20 96 and 480 minus 296 is 184 so first point first button or box will have coordinate 0 184 and rest will increment by 74 okay let's finally write some code so I will put this X and Y position in two arrays expose so we have three of them so we will need only three elements so it easy first is zero then we have 74 and 74 + 74 148 we have four of them here and first is 184 184 + 74 is 258 I'm using calculator plus + 74 is 332 and last one is 332 + 74 I could do this on my hand in my head but okay let's try to draw it in draw function we will not need this n variable anymore I will delete it and I will delete it from here in draw function we will need four Loop four let's call it y y While y is less than four and we will have same not same with three elements which will be called XX Les and three x++ and now we can dra wct so X position XX y position and WID and height so uh I want this space between my buttons or boxes so I will start to draw two pixels from this Dot and my box will be 70 not 74 only 70 pixels so we will have here space of two and here two actually here will be four because this space plus this I hope this makes sense so we'll start plus two and here we have 70 70 and color let's let's use red for now and I think we are ready for our first upload and of course we have error and here are results here instead of draw wck we will F wrecked and also we will make fill around wct and we will [Music] add here number five so this number number indicate how much it will be round next we will need some letters for our buttons so we'll need four by three two dimensional array one two three delete zero back space so our buttons will look like this I will set here set text color for beginning TFT white white and background is red TFT red and we will set that uh text is centered so text will be drawn in center of the but we need no coordinate of this Center which is 0 + 74 divide on two is 3 7 0 + 37 and 84 + 37 and I forgot to put name buttons string buttons and size of text will be let's upload and now we have nice round rectangles with text in it I'll also show you how to choose some other color so usually I'm using this site for RGB 565 color and I will choose some kind of Arduino color and I will copy this and here I will Define color one as this and I can also Define TFT blats black I will need that later but color of our buttons is color one and I will replace this TFT red with color one and now we have green buttons round with white text I decided I will need a little darker color so I will just replace my color here okay now we need to deal with touch we need to know when our our button is pressed I will add another variable which will be text or maybe better high and in draw [Music] function before color go to our color I will set color to white then and black remember I named black BL c k to be faster I will draw string [Music] um sorry I will still need to copy this here on position this divide on two is 11 one and we can go to 100 down I can upload down and now we have darker buttons and here it says high and now we need to deal with touch but first we will need to make this text larger to make it larger I will just add here four okay if screen is touched and now we need to check each of these buttons and I will just copy and paste this so copy here so if position of touch is here if x is larger larger [Music] of and x0 is less than plus XX + 74 so if position is for example in this range from here to here and from here to here computer will know that we clicked this button if position is X from here to here and Y from here to here we will know that this button is clicked and I can copy this because it is same for y I will just replace X's with Y we'll double check it because this is a nice line of code to have errors in it so if this happens we will [Music] add letter to our text T txt which is right now it's high I will add specific text from this so txt is equal txt plus Buton buttons and let's write now so we have large of text and when I click five I will add five to our text but you can notice that that when I click many letters is ADD so we need the bones the boning some kind sorry for my English so I will add here the bounce which is zero and this is my St standard code for the bouncing so I will open these brackets here and also close it here and I will need to add another if if the bones is equal zero then the bounce is equal one and else if nothing is touched we will return the bones to zero at first this look like complicate but it is not let's try now 5 8 8 8 so it's working I'm getting only one letter now let's try to if I press delete it will also add me that that text here and also now we need to do when I press delete that whole string is deleted and when I press this only last letter is deleted like backspace so let's do it if if buttons on XX sorry y y XX equal delete then txt will be deleted else if is equal backspace then dxt will be dxt substring from zero to dxt length minus 1 one so if button is delete text string text will be empty if button is backspace will will from dxt will will only took substring from first letter to last minus one and else if anything others happen it will add our buttons to text let's try to compile and upload this let's try if I add some numbers it will work if I press delete it will delete and 5 to5 if I press backspace it will only delete my the last number and that's it for the first part this video is all already too long don't forget to check links in description I will put finish sketch and start sketch there and if your first time here don't forget to subscribe and if you want if this was really helpful if you learn something you can help me and buy me a coffee it helps a lot lately thank you have a nice day I will see you soon with I hope next part we will add these fonts and nice design and then we will maybe add part where we can draw when we where we can write text with old style SMS method I will see I will see how this video will will went will great my English is still in the mess have a nice day bye

Channel: Volos Projects

Views: 8,851

Keywords:

Id: Cp95AyyLmx4

Length: 28min 24sec (1704 seconds)

Published: Tue Jan 09 2024