AI Virtual Keyboard using OpenCV | Computer Vision | CVZone

hey everyone welcome to my channel in this video we are going to create a virtual keyboard based on artificial intelligence we will write the code step by step so it is easy to follow we will also look at how we can run this program to operate applications like notepad if you would like to level up your computer vision skills then do check out our premium courses that are now available in pax the link will be in the description so without further ado let's get started so here we are in our pyjama project and we have created a new one called ai keyboard project and we only have a single file at this point so we can delete all of this and write everything here now we need to install the packages so we will go to settings and the project interpreter and we are going to add cv zone so cv zone will install the opencv package along with the numpy so you don't have to worry about those but it does not come with the media pipe installation media pipe which is the back end of our hand tracking and detection module so we need to install that as well and again this is provided by google so we will wait for them to finish installing and then we will start writing the code so now that the installations are done we are going to import cv2 which is our opencv library and we are going to create a video capture object so we will write cv2 dot video capture and we are going to give it id number zero so that's the webcam id now normally we keep it default in terms of size but this time around we are going to increase the size because we need more room for the keyboard keys we have lots of them so what we will do is we will write cap.sets and number three is uh the width the prop id number three is width and then the value for it we are going to give one to eight zero and then we will write cap dot sets and the value for height is 4 and the prop id is 4 and the value will be 720 so we are using hd resolution rather than vga okay once that is done we are going to write here while true and then we are going to write success and image is equals to cap dot read and we are going to write cv2 dot im show and image and img and cb2 dot weight key and we will give it a one millisecond delay so this is kind of a boiler plate for running webcams so we don't have to worry too much about this um let's let's test it before we move any further and there you go so you can see me here hi either and the webcam is working fine so we should be good to go so now the first thing we have to do is to track our hand so we will write here from cv zone from cv zone dot hand tracking module import hand detector so we are using the hand detector from the z cv zone package which relies on the media pipe library so what we will do is we will create a hand detector so we write here the detector is equals to hand detector and we will give in the detection confidence as 0.8 by default it's 0.5 but we want to be accurate because we don't want to randomly press any keys so we will give it a little bit higher uh probability okay so now what we can do is we can go to our loop and in the loop we are going to write two statements two lines the first one will be to find the hands and the second one will be to find the landmark points within those hands so we are going to write here image is equals to the the function will turn us an image so we will write here detector dot find hands and we are just going to send in the image and we also need the landmark so we will write here lm list uh is and we also have one parameter which is the bounding box i believe bounding box info detector dots find position so this will find the positions for us and we will write here image as well so that is all it needs so if we run this now it should be able to detect my hands and we should have all the landmark points that we can use later on to see whether we are clicking or we are pressing a key or not so there you go so these are the hand detection so you can see here we can detect so this is basically the idea and then once we have this we have the basis of how we are going to detect um what do you call the presses but we need to have buttons to actually find these locations and to know where to press and what key to generate or what key to simulate now there are two methods of doing this the first one is to just take an image and we manually find where are the x and y positions of each of these keys and we tell our program to check for those locations and see if our finger is around that location then you detect it as a click now the problem with this method is that if you try to scale the image or if you try to change the image completely then you will have to manually do all of the work again so you will have to find the x and y coordinates of each of these keys again and again which will be very a very hardcore method of doing this so what we will do instead is we are going to create our rectangles through the opencv function and we are going to put some text inside of it and we will create it uh as a button now you could use some other libraries to create these buttons but we are going to keep it simple we are going to use opencv as default so to create a button what we will do is we will simply write cv2.rectangle and within our rectangle we are going to given our image we are going to give in a starting point so i'm just randomly putting values there is no logic behind this at least at this point so we will write this and then we will write the color so i like to write down purple and then the thickness we want it filled so we will write here cb2 dot filth so that should give us one rectangle so and should we put yeah let's put some text on it as well cb2 dot put text and we'll put it on our image uh the the text let's say the first key which is q so you want to put that and then the origin because we are using 100 and 100 as the origin and 200 and 200 as the ending point we want it to be in the middle so let's let's say 140 and 140 something like that and then we will write what is the next thing the font cv2 dot font we will put a random font scale let's put it as 5 maybe then color we want it to be completely white so we can easily read so we will write 255 did i put extra brackets yes we need to remove those extra brackets and then we need i believe the scale no the thickness so let's put the thickness as five as one so we can bring this down so let's run this and hopefully it will give us our first button although it's just a drawing but we are going to we are going to program it as if it is a button so yeah so maybe it's not good enough uh 140 let's put it at 1 180 or 160 and this one was fine i believe 140 maybe 130. let's try that again so yeah it's it's better we need to bring it down a bit more so uh and a little bit towards the back as well so maybe 115 and then 180 let's try that okay so yeah that's much better we can push it a little bit further as well but i i believe you get the idea of what we are trying to do now this is all good but the thing is we need to replicate this several times so for example in our keyboard we are going to use 30 keys for the alphabets so we need to replicate that so what we need to do is we need to put this in a list now each of these buttons it has an attribute it doesn't have a attribute it has many attributes for example it has the name let's say the text it has the location and it has also the size so here you have the initial location and then you have the size so you can have different sizes as well so these attributes they will be a little bit hard to manage with lists so what we can do instead is we can create a class and from that class we can create these 30 buttons so that will make it very easy for us to replicate or the other way is doing with it lists but as i mentioned it is better to do it with the class so for the class it's it's not very difficult all we have to do is we have to write class class and we will write button and then we will have initialization method and inside that we want the user to input position text and size so the size we can give it by default like let's say 100 by 100 that we used earlier but the rest of the things they will vary quite a bit so we have to change so we will write here self dot position is equals to position if you're not familiar with object-oriented programming i highly recommend that you go and read about it a little bit before you try this because it will be confusing if you don't know what this means so we will write here size and size and self dot text is equals to text so each of these buttons will now have these three attributes and then what we can do is we can just take this whole part and we can put it in here or we can we can create a new method as well uh just for drawing so for example we can write here we can write here def draw and then we can we can call this method whenever we want to draw now i will tell you what is the advantage and disadvantage of doing each of using each of these methods so let's just first do this so now whenever i want to create a button all i have to do is i have to write here my button my button is equals to button and then i have to give in the parameters so the position the position parameter for example we we will put 100 by 100 but we are giving it as a list and then we have the text so let's say this is q and then we have the size we don't want to give that because it's already there so uh then what we have to do is we have to replace these values so right now they are static we need to make it dynamic so we will take this position we will write self position so we will put it here and then we will write self dot size we will put it here and then this is the location uh the initial so again we have to give in the position so we will write here self position but this time we need to give it some distance so we have to use the first element plus something so for example let's say plus 25 and then we have to given the second one which is again self dot position and this is will be the second element and we will say for example plus um i don't know 25 30 again so that's basically the idea seems to be that there is some error um yeah there's there's not supposed to be a bracket here okay so that is good do we need to change anything else yes this q this should be self dot text so if you don't understand why we are doing this and what's the reason behind it you will see that very very shortly so this is for one button now okay so if i do this if i call this function uh sorry if i create this object then it should draw it should put all the attributes and we should have it on our image let's see uh we don't have it on our image it says q uh why don't we have it on our image oh yeah because we are not inputting any image we need to output the image as well then we have to input so this is the problem with uh using it with initialization with initialization you should only give the initial attributes okay so this part here we should run only once because the attributes they are not changing uh if if the button position was let's say hundred hundred uh and the text was q then it will remain that for the entire program it will not change but the thing is with the drawing we have to keep drawing again and again because every time every iteration we are getting a new image so it is not the previous image it is a new image coming from the webcam and then we have to draw on that again and again if it was just an im read without any loop then we would not have to do it again and again even with the loop we will not have to draw again and again because the image is not changing we just imported it from a folder and it keeps constant but here because the webcam will have new images every iteration we need to draw it every iteration so here we need to put this in a different uh what do you call method so we will write here draw and for the draw we are going to ask for an image and then once we draw it we are going to return that image i hope that makes sense so we are doing this because this will run only one time before the loop so here for example i will write this my button is this i will initialize it but after that we need to remove the indentation okay and after that now i can call this method during my loop so i can write here my button my button why is it not showing up my button dots is it the indentation yes uh something is wrong here okay now it's fine uh mybutton.draw and i will send in the image and i will receive back the image so that is good so if i run this now it should do the exact same thing uh apart from the values i think we change the values a little bit so the position might be different okay it's not showing the rectangle for some reason we need to check why so maybe these values are not right position what is the position hundred and hundred hmm something is wrong here okay i think i know the problem the problem is that this size is not actually size let me try that if my theory is right there should be a weird line yeah there's the weird line okay so what is happening is that this is actually not we are thinking of it as the size but this is not actually taking the size this uh method or the function it actually wants the absolute value so this is x1y1 and this is x2 y2 it is not the width and height here we are giving it as width and height so what we need to do is we need to write something down here what we can do is we can write here x and y is equals to self dot's position and then we can write here that our width and height is equals to self dot size and now we can write it here easily we can put here that x plus our width and y plus our height so that is the issue so let's run that and there you go so now we have our image and the rectangle but again it's not in the right position so we need to push down the queue so i believe it's and this we can replace now with width and heights no with x and y so this should be x and this should be y so i think x was fine maybe and uh maybe the the height was not good the height let's put it um 75 let's say plus 75 and we can make it a little bit smaller because i think the rectangle is way too big right at this point oh yeah it's perfect uh the location is perfect at this point but i think the rectangle is a little bit big so let's make it 85 by 85 so let's try that but again we'll have to change these values let's just change them a little bit uh instead of 25 let's make it 20 and 75 let's make it 50. yeah um i think a little bit less in the x and a little bit more in the y so this is 20 so let's make it 15 maybe or 10 and this one is 50 let's let's keep it 75 or let's make it 65. perfect um but it is a little bit picky to be honest the text itself so instead of five why don't we put it as the scale as let's say two and the thickness let's say has three then we will have to change these again uh maybe 25 and maybe 60. let's try that okay so that is really small let's change it a little bit so let's put it at four and four so again we can keep playing with these parameters all day long but i think we have spent enough time on this we need to move on so if you want you can play around with these values a bit more okay ah it's a little bit annoying maybe a little bit back and a little bit down a little bit uh 20 and 65. okay i'm not going to change after this spend a lot of time already okay so let's just have a look at that and then we'll move on yeah i think now it's perfect it looks clear and loud so now the next thing is that now that we have this what we can do is we can create another one of these then another one and we can just keep changing the location of it so for example this one let's put it at 300 this one let's put it at 400 and we will call it my button 1 my button 2 this one should be w this one should be e so we are following the keyboard layout so we can do that and let's see how it looks like oh no we didn't draw my bad so we need to draw here so so we can do that so this will be button one then button two and there you go so now we have our uh buttons again we can play with the the dimensions and the distance but that's base the basic idea but the problem here is that we are sending in the image then we are uh we are sending in the image then we are receiving it back then we are sending again then we are receiving back so this is why i don't like to put it here so i don't like to put the draw function in the button what we can do is we can create another method another function not in the class outside that basically handles the drawing of all the buttons so we can do that and the other thing is that instead of writing it one by one what we should do is we should create a list so for example i will call this button list button list is equals to empty and then for each button i am going to put that in the list so i will write here button list dot append and then i will append it with this and i'm going to loop it now the loop will depend on how many buttons you need so for example i can write for x in range uh 0 to 10 or let's let's put 5 to be easier to test okay so once i have done that what i can do is i can change the location here so instead of a 100 i can write x x multiplied by hundred so it will keep going further and i can give a little bit of cap as well so i can say plus let's say 50. the height will be the same for each one of these and for now we will keep the name same for all of them so let's run that okay so we are getting an error which is my button.draw okay so because we remove that we need to comment this and what this will do is my button.append button it will create this button but it will not show us anything so what can we do uh let's just remove that we are going to create a draw function later on that will draw all of them together but for now let's just open this up and it will draw it during the initialization so that we can see what is happening so let's run it again but it will not do the okay come on it will not do it because it's not in the loop so let's just put it in the loop again we should not put this in the loop because uh the we have starting it information that does not need to be repeated again and again but just for the testing purpose we are going to put it in the loop because we want to draw it again and again on our image there you go so right now it is working because we are creating five of these within our loop and if i wanted more i would simply write here let's say 8 and it will produce 8 of these so this is how simple it is all we have to do is we have to get our class ready and now you can see we have eight of these uh in a row now the first thing we need to do is we need to make sure that all of these are different uh alphabets so how can we make sure of that to do this we are going to create a list and we are going to call it let's say the keys keys is equals to we will have let's say q then we will have w then we will have e and so on so i will write down all of these and then we will continue so i have written down all of these uh the idea is that each of these line is a different list so this is list number one then this is list number two this is list number three so now what we can do is we can simply say for x in range or we can simply say for key in keys at zero so we are talking about the first key uh the first list which is this so it will take each of these one by one and it will create a button out of this so let's see how that will work so we will write here key in keys all we have to do is we have to write here key and we also need the iteration number because we have to use the value of x so we will write here x and then we will enumerate it there you go so if we run this now now it should have all these different names all these different alphabets so there you go so we have q w e r t y u i o p i think there are two more or is this yeah this is ten so that this is what we need and now we need uh separate rows so we need to go to the row number two and the row number 3. so how can we do that we need to put another loop over here and we are going to say for let's say j or let's say i in keys we are going to uh loop this for i in keys we are going to loop it and instead of zero we are going to put the value of i so we can put here i and let's make this j just to keep with the convention there you go so now it should do for all of these and but the thing is we are not changing the height so we need to change the height every time so we will multiply this with our eye and again we will give it a little bit of height extra height in the beginning so let's say 50. so let's run that and this should give us our complete keyboard layout not complete but at least for the alphabets and that is what we are going to focus on today uh what happened must be integer or slices not list okay my bad so we don't need to give an i here we just need to give i that's it uh but then we will not have the number hmm okay let's do one thing we will keep it like this and we will say for i in range of length of keys i think that will be more appropriate for this instance let's run that there you go so now we have the complete layout q w e r t y it looks amazing so we have all these keys now uh and it is drawing as well but again we are doing all of this within the loop which is not a very good idea because uh this information is repeated again and again without any reason we understand that we have to draw again and again but we don't need to repeat this part again and again so to draw we are going to create a new function we will call it draw all and we want uh what do we want we want the image that we want to draw on and then we need the button list so once we have the button list we can loop through it and then we can draw each one of these so that's pretty much it and then this part here we will not have to do in the loop we can do it outside the loop there you go so now it's outside the loop and we don't have to repeat it again and again during this what we will repeat is the draw all so uh this is all good everything is fine here we don't need to change anything but instead of drawing here we are going to draw over here so now the question is where is the position where is the size and all of these parameters and we have to get it from the button list so we will write here for for button in button list we are going to do all of that and all we have to do is instead of self we will write button so the position of this button the position of this size another position of the size the size of the button okay and then we will put a button here and a button here so again all these in all this information is already stored in each of these buttons because it is a object based on this class so that should work by default so all we have to do now is write this within our loop and we will write here draw all and then where is the button list the button list is here so we already have that and do we need to return yes we need to return our image so we will write here return image so after drawing just return it and we are going to get it back over here and that will replace it and show it here so we can remove this part and let's run that there you go so the weird thing is nothing changed and that's a good thing because it means everything is working fine so that's good and uh yeah so this is basically the idea now what we need to do next is we need to check whether we are using our finger are we close to this what do you call any of these buttons or not so now is the interesting part so what we will do is first of all we are going to check whether we have a hand or not because if we don't have a hand we cannot do all this processing so we will check if lm list if there is something in the lm list then we are going to do all of this so we need to loop through all the buttons so we are going to write here for button in button list and then we are going to write here the x and y and the width and height because we need to know the location of each button and then we will check whether our finger is in that range or not so we will write here x y and that will be our button uh position dot position and then width and height that will be our button dot size so that's basically the idea and then now we can use this information to check whether our finger is in between or not but what is the finger our finger our tip of the finger is basically uh point number eight now you might say what exactly is point number eight uh that is a very weird thing to say that it is just point number eight so what we will do is we will go to media pipe and over there we are going to look at what are they showing so this is the media pipe website and if we go down this is our point number eight so this is the index finger and the landmark 8 is what we are going to track and later on to detect the click we are going to check landmark 12. so this is basically the idea so how can we get that we can get it by writing lm list at eight and what will we get we will get two things the x and the y position so we need the x so we will write zero so this is basically the value of the x of our fingertip so we need to check if the x is in between the x uh it's not the x is in between this point is in between our x and x plus width so if it's in between it means it is in the correct range okay so if that is the case uh what should we do we can change uh we can change the color of our button so let's just copy that and we are going to paste it here by the way i was thinking maybe we can we can make we can put draw all and this together because it is a loop again and it is pretty much the same thing instead of writing a function here but again we can we can think of different ways this might not be the best way to do it but again we can optimize it later on as well anyway so we can change the color of this we can make it green so if it is in that range we will make it green and we will keep the text white so we don't need to change anything because the button position it's already getting the x and y we already have so everything should work by default so there is uh our keys and then you can see here each of these turns on if the x is correct we didn't do anything of the y so the y is this position so whenever i go wherever i go you can see the x lights up so whether i'm here or here it doesn't matter right now it's only checking the x so now we need to add the y because then only it will make proper sense so we will write here and the y is in between the the value is in between y and y plus height so what is the value it is the lm list at eight and oh eight and one so this is basically the y so if we run this now now it should detect at the correct point okay so let's try it there you go b g h j k l it looks it feels good i don't know uh especially if you uh if you add some sound effects at the back that will be really really good so anyways so this is basically the idea now that we have the location and we know when we are on it we need to find if we clicked we don't want just to press the button if we are there we want it to click and how can we do that we can do it by checking the distance between number 8 and number 12. we will say that if the distance between these two points is very small then it means it is a click and if the distance is far apart then it means it's not a click so we have a very easy function for this and that function thankfully is in the cv zone package so all we have to do is we have to write detector dot find distance and you only need to give in the value of uh the index of the point not even the point itself you just have to give the index so i want to find the distance between point eight and point twelve and that's it and i wanted to draw it on our image and then we can get the length back there are other two parameters we are going to ignore those that's why we are writing it like this when you want to ignore something in python you can write it with an underscore why is it not fixing okay there you go so this l is basically the length so what we can do is we can print the length so it will only print when we are in that range so let's run that so looking at this print value we can determine when should we accept it as a click so there we have it so if i go in you can see now there's a weird drawing and you can see it is showing the distance there you go and if i go here it is showing the distance so what we need to do is we need to it's not scrolling properly we need to look at the value so right now it should not click at this point it should click so it is around 27 so again you need to fix the distance as well you cannot be too far uh close and too far apart it cannot be like that you have to fix a distance and i i'm not going to add it now but later on you can do that by checking the area of this bounding box so if the area is far apart don't accept it if the area is too big don't accept it in the middle you can accept so you can do that later by yourself so here i'm going to accept this this is the end of my table so this is my indication so i will keep this as lower than lower than 30 i believe yeah i'm going to say lower than 30. so where is it yeah so i'm going to write here if l is less than 30 then we are going to do something and in this case um i was thinking maybe we can change the color again so what we can do is for this one we can instead of green we can let's just copy the whole thing again we can do it in a better way of drawing as well i'm repeating the code again and again so there's definitely better ways to do this but this is quite easy and straightforward so here we are going to write um let's say 175 and 0 and 175 so it is a darker purple and here we are going to keep it green so when it clicks then it becomes green i think that will be better to see and i don't want to see those line the distance of the line so that's just weird so we will write draw is equals to false so if i run this now so let's test it out so right now it's dark and then it becomes green when i click it it becomes green so it is green dark green and if i move around with one finger it will just show it as dark and then if i click and there you go and it's working really nicely again you can improve it by changing some parameters here and there but this is the basic idea that you can move it around and you can do that okay so once it clicks what exactly do we want to do so what we will do is um we can use we can just put the text on the screen or we can send it to a program or we can actually simulate a real keyboard press i will i will show you all of these how we can do that so the first one let's just put a text so what we will do is we will put here a text let's copy both of these and where is it so we will align it with this if i think it might be wrong yeah it's fine okay so what we will do is we are going to give in a value of a rectangle let's say it starts at 50 50 and then it goes to 350 that's it and then it ends at let's say 700 and let's say 450. so this is like a placeholder or a strip to actually write our text and on that strip we are going to write some text so we will call it final text and we are going to declare it right at the top let's just declare it here and we will keep it empty for the beginning so we are going to always display this text even if it's empty and we need to give it a appropriate place so this is 50 we can make this 60 and then the height let's make it uh 400 425 okay so that should be fine let's make it a little bit bigger so we can see properly and uh yeah let's keep it white and let's change the color of this it is dark purple actually it might be good to keep dark purple so yeah so now this will give us the text always but the text right now is empty so whenever we click this is uh when not in when clicked okay so whenever it clicks then we are going to update final text we are going to add to it plus equals whatever the button dot text is so whatever the text of the button is we are going to add to it so that will automatically generate all these alphabets okay so that looks good so here it is b if i click it generates a lot of them but you see the point when we click it generates it's not very accurate at this point but yeah it gives us a lot of these now what we can do is we can use a timer to actually find out how many times we clicked uh is it single time or double time or the easiest way to do it just sleep let's say 0.1 or 0.15 and for sleep we can import it from here from time import sleep so you can say this is the lazy way of doing this but it works hopefully let's see so here we have it if i click on b there you go single single entry g h b b again v c there you go so it works it works good so that is yeah so we have the overall picture it might be a little bit higher it's really annoying to see it's a little bit higher maybe we can push it down the height the text height uh maybe 30. anyways so as i was saying this is the main idea of how you can do this now the next steps what we are going to do they are just for you can say adding cherry on the top they are not compulsory but they can make the project a little bit better we need to go closer there you go n b v okay b was twice you can add a little bit more delay if you see that it's repeating a lot but i don't see it a lot this is just maybe by mistake uh okay so this is good now now one thing that we can do is we can make this part transparent so uh instead of having completes uh what he called solid rectangles we can have it uh with transparency now it might be something that you're looking for it might be good it might be bad because for example if you make it transparent you cannot see what is at the back so at the back uh if it is white right now it is white you won't be able to see these characters it will be very hard the black side it will be fine but here on this side it will not be it will be tough to see what is happening but there is an option uh actually i didn't know how to do this and what i did was i went online and i checked for some code i was hoping that there is a easy method of doing this but as it turns out there is not so i found this answer on stack overflow and i read through the first one it wasn't that good um but it does the job but it's not that good the second one is really good so it uses rectangles and circles and then basically you are creating a mask and then you are using added weights function to put it together now this is not the most efficient way to do it but it works so what we can do is we can write it with this example and it can actually help us with the transparency as well so what i did was i wrote down this draw function again so if you want to use this keep using this but if you want to do it with the transparent background then let me show you how that is done so i wrote it on a separate page here and this is basically the draw all function uh it uses image and button list again but now it requires numpy and cv zone package as well so i added a little bit of what we call fanciness as well so so we will write here imports numpy as np and import cv zone so if we remove this draw all and then we keep this one that should give us the transparency so this is the code that i copied from stack overflow and then this part is what we are using over here but i added the cv zone corner rectangle which looks a little bit good and yeah that's that's pretty much it so you can go through this if you want let's see what happens the rest of it oh why is there an error uh all all okay my bad so it should be i think we should keep it lower lowercase here as well let's keep it lowercase there you go okay let's run it and see what happens and there you go so now you can see there's a transparency involved and whenever we go it makes it a little bit bigger and then if we click does it click properly there you go there you go so now it is with the transparency and as i mentioned you see the white part it doesn't look very nice if i go to the black part then yes it is good but with the whites not so much it's very hard to see so you can you can play with the transparency value as well here you have the alpha value you can play with that but in my experience it wasn't that good so you might want to use this you might not want to use this so for now let's just keep the old one so that we are able to draw with um without the transparency because it's really clear what is happening now one more thing that we can do is to really utilize it in the real world applications we need to simulate our keyboard okay so now it's good so we need to simulate the keyboard and not only on the opencv window we want to do it on some software on some website right so we need to simulate that so in order to run this we need to import a new library we need to go to our interpreter and here we are going to write what was the name pi and put yeah so pi input this is the library that helps us in detecting the or simulating the key press so what we have to do is we have to write here from pi inputs dot keyboard keyboard we are going to import key and controller uh we don't need a controller actually but we don't need the key controller only control so that's the idea and then we are going to write here that keyboard is equals to our controller and that is pretty much it so if we go down we will go to the place where we have to press it so where we click it and here we are simply going to write keyboard dot press and we are going to press in which button the button text that's it so normally you would write here a a or b or c whatever you want to press so instead of that we will just write button text and that should work so i'm going to open up notepad to test this out so let's make it really big yeah i think that's the maximum it can go so let's put this here and let's open it here so if i go here and do for the b there you go b but didn't do didn't right here okay we need to check here again okay so if i go up here to g there you go it writes g f d d command d uh it needs to be closed what is happening yeah there you go so you need to play around with these values to make it work properly again as i mentioned you might want to give it a range to make it work more efficiently and more easy and then you can add a space bar you can add a caps lock you can add what are the other keys command option uh for mac maybe so all these things you can do one step at a time don't rush into everything at the same time just do one bit at a time like for example if you started with the transparency it will be very hard to achieve because it is a little bit complicated and uh try to do the basic things first and then move on to the complicated part so this way you keep on track and then you keep adding more what you call features or more ideas you enhance them and make it a little bit better so yeah i think this is pretty much it we are good to go do we need to do anything else um i believe that is good enough yeah i'm going to keep this code here in case you want to use it and the rest of it is pretty good oh yeah there's one more thing you can use the corner rectangle here here as well so i i like to use this um let's see let's put it in the draw all and we are going to remove that let's go a little bit back and this will be image so hopefully the size will be fine instead of button position we already have that we can write x and y here and then width and heights but anyways yeah there you go so i like this part uh where it gives it an edge um it looks fancier to me yeah and yeah you can also do that it becomes a little bit bigger in size whenever you are hovering over it so that will give it a better look as well so yeah if you go here for the rectangle you can do it here this one so this is the rectangle so this is the starting position which is your x and y so you can reduce the x a little bit so x minus 10 then y minus 10 and then here plus 10 and then plus 10. so this will increase the size of it a little bit by 10 pixels on each side so let's see how that looks like yeah there you go so now when we go on top of it it becomes a little bit bigger it's a little too big to be honest uh maybe we can do five instead of 10 and maybe we should give it a value and integer so that we can we don't have to do it manually again and again but again uh all these things these are small small things that you can work on and you can enhance this program the the idea is that you understand the basic concepts so that you can go from there yeah there you go so this one this is much better becomes a little bit bigger and looks nice there you go so uh i hope uh you have learned something new and we are pretty much done with this session uh if you like the video give it a thumbs up don't forget to check out our courses on computer vision zone we have a lot of free content we have over 150 tutorials projects and even courses as well so do check those out and if you like this video give it a thumbs up share it with your friends create these exciting projects and share them on our facebook group and discord channel i would love to see what you come up with and this is it and also one more thing in the comments do share your suggestions of new projects i will be happy to build your ideas and see them coming to life okay so this is it for today i hope you have learned something new and i will see you in the next one

Channel: Murtaza's Workshop - Robotics and AI

Views: 134,805

Rating: 4.9572721 out of 5

Keywords:

Id: jzXZVFqEE2I

Length: 62min 30sec (3750 seconds)

Published: Thu Aug 19 2021