AI for Everyone LESSON 11: Creating and Using Trackbars in OpenCV

hello guys this is paul mcquarter with top tech boy.com and we're here today with episode number 11. in our incredible new tutorial series where you're going to learn artificial intelligence or you're going to die trying what i'm going to need you to do is pour yourself a most excellent cup of iced coffee that is straight up black coffee poured over ice no sugar no sweeteners none needed and as you're pouring your coffee as always i want to give a shout out to you guys who are helping me out over at patreon it is your encouragement and your support that keeps this great content coming you guys that are not helping out yet look down in the description there is a link over my patreon account think about hopping on over there and hooking a brother up but enough of this shameless self-promotion let's jump in and let's talk about what i am going to teach you today what we learned in the last couple of lessons was how to interact with your opencv video window and interact with the user through the use of the mouse so we learned how to detect and process mouse clicks so that those mouse clicks could affect what is going on and what is happening in our video window and in opencv so one very convenient way to interact with opencv is through mouse clicks what i'm going to show you today is a second way to interact with your program and that is through track bars and those are the little slider bars that you can move back and forth and as you move them back and forth some parameter in your program changes and this actually allows you to do even more than just mouse clicks alone but the real power comes if you start combining mouse clicks and track bars and then you can sort of get the program to do all types of things based on very convenient and intuitive user input okay but enough of this inter introductory banner let's jump in and let me show you what we are going to do today so i will switch over here to my desktop view i will get my big head out of your way and then what we need to do is fire up the most excellent visual studio code all right here we are and i'm going to click on the file explorer view and then i am going to uh click down here and then i will select the little page icon with the plus and i believe we are on opens open cv i think it's 13 is it 13 already yes opencv dash 13 dot p y and the dot p y is sort of important click enter and boom a fresh new python program just waiting for you to write it now we don't want to write it from scratch because we want to sort of start with our core program that fires up our webcam because we don't want to just have to write that week after week you guys that are taking this class you probably already have it handy but those of you who don't you can come over to the most excellent www.toptechboy.com you can come over to the happy little search bar and you can search for the lesson which we call faster launch of webcam so just if you type in faster launch of webcam you should come to this lesson you can see the code here if you click on the two little page icons it will highlight the code all right mouse click and a copy will get that code to you and then you come back to the most excellent visual studio code i'm going to do a control v to paste that in and just to make sure that we haven't broken anything let's just go ahead and run this and make sure that we are able to launch the webcam boom there it is working just like we would expect it to so i will quit out of that and now we will get ready to learn how to make track bars okay we will get ready to learn how to make track bars and it is actually pretty easy what you just need to do is you create the track bar once so you don't want to create the track bar in the loop because then it would keep creating more and more track bars so you just want to create the track bar once so you do it somewhere convenient before the start of the while loop and so the way we are going to do this is just cv2 dot create and you can see already it's trying to guess create track bar so yeah i want to create a track bar and then what i'm going to have to do is i'm going to have to give it the name of the track bar and so i think i will just call it my uh let's see i think i'll call it x x position just like we want to get an x position from the track bar so i'm going to call the track bar x position and then i need to put it in a window right because these track bars have to go into a window and so i think i will call the window that it's going to go into my track bars and now i've got to give it some parameters and so the first parameter that i need to give it is i need to give it like kind of what value we want the track bars to go to so it's always going to start at 0 but do i want the track bar to take values from 0 to 10 or 0 to 100 or 0 to 234 whatever that might be and so i think that i will just go from 0 to 1920 okay let's see yeah 0 to 1920 would be good and then i'm trying to think if there's anything else that i need to do yes i do i need to give it a call back function so when something happens to a track bar you need to go to a function and then you need to process that that action on the track bar inside the function so i think i'll just call it my callback okay i will call it my callback and that will be the function that's called when somebody monkeys with the track bar okay so that looks pretty good now what pro problem do i have now i'm telling it to put the track bar the track bar named x position in the window my track bars but the problem is there is no window my track bars because the windows you kind of generate down here in the while loop and so this would probably crash if i just ran it now well it would certainly crash right now for several reasons but what i need to do is i need to create that window so i'm just going to say cv2 named named window n-a-m-e-d uppercase w for window and now i need to give my window a name well i want it to be called what you should know this my track bars okay then by calling it my track bars that next command will have a place to put the track bars now also i need to give this window i'd like to give this well first of all i'm just going to create the window like that now i'm going to resize it because if you don't explicitly set a size kind of like random things can happen so i'm going to go ahead and i'm going to i'm going to resize resize window so i'm going to resize that window and i am going to resize which window i'm going to resize my track bars like that and then what size do i want it well this is going to be a width comma height and so i think that i am going to make this let's just say 400 wide and 100 high that's kind of a convenient size for your little track bar window to be to get several track bars fitting in there so now i have created the track bar now i don't want it to be behind my main window i want to move that track bar window over so i'm going to do a cv2 dot window uh let's see a cv2 dot move a window and then which window do i want to move my track bars is that right that looks pretty good my track bars and then where do i want to move it well i don't want it to be behind my original window so i want to move it over by the width of the window and you remember up here in the program i set the width of the window so i think that if i just move it over by width and then move it down zero that should give it to me okay now i've taken care of the little window to put the track bars in but now we've got this call back function where we actually process we actually process that event that that track bar event that somebody has monkeyed with the track bar and then it's going to call this my callback function so i need to up here at the top somewhere near the top i'm just going to say define and what am i going to define i am going to define uh my call back and let me make sure yeah my callback that looks good and now this this this track bar object anytime somebody monkeys with it it's going to call my callback and it's going to pass it a value and that is the value that is selected on the track bar so i'll just call that value because that's got a catch that has to catch that incoming it has to catch that incoming value to the function and so that's something that's kind of done automatically transparent to you when you create the track bar anytime you mess with the track bar it calls it the program calls my callback and it passes it whatever the setting is on the track bar okay so now we will need to put a colon here and then what do we do well let's just do the simplest thing possible let's just say print and what am i going to print i'm going to print value and so this should just print this is just seeing can we get a number from the track bar into the program okay that i think is pretty good let's come up here and let's run it and let's see what happens okay so far so good and we've got a great big window and boom what do we have track bar we got a track bar okay now to subtract bar work let me pause and just tell you if you look here let me get even further out of your way okay if you look here you can see i have an error and it says using a value pointer is unsafe and deprecated use null and value pointer this is just a bug in this version 4.5.3 of opencv it doesn't hurt anything it works perfectly ignore ignore the error ignore the warning and in a future version the next version of opencv i am sure they will fix this okay but now the real money question is the real question is what happens when i move this okay look at that boom when i move it it takes the value it reads it and then it prints it out so that callback function is in fact getting that callback function is in fact getting the number from the track bar so now i have the number that the tr that's on the track bar and i've got it in the main program so now i can do cool things with it okay i need to explain this track bar create track bar a little bit better that this 1920 is the maximum value of the track bar so let's just try this again just to see that so i said go up to 1920. so it starts at zero and if i pull it all the way over you can see that i go to 1920 so that is kind of what we were expecting but now what you've got to see is this zero is not the start value you cannot affect the start value of the track bar the track bar goes from zero to whatever value that you set here this zero is telling the track bar what value to start at it's telling it's telling the track bar what value to set to start at so let's say what would half of 1920 b 860 if i can do math quickly in my head so now the initial value of the track bar is going to be in the middle it's not going to be over there at zero if i did this right okay that looks good you can see that the initial x value is 860 like we wanted but the thing that people get goofed up with is you see from a number to a number and you assume this first number is where you want the track bar the low value you don't get to do low value and high value on the track bar you start at zero and you go to high value and then this first number is what is the initial value the initial value i hope that makes sense okay well let's see we could make another track bar because we're having so much fun making track bars let's do another track bar and let's call this one if we have x position we might also want y position okay now where do we want the y position track bar to go we want it to go in that same window right we don't want a different window for every track part so we're going to put this track bar y pass we're going to put it in the window my track bars because that is already set up in this one let's go let's go to 1080 okay let's make this one go up to 1080 and let's set an initial value of 540 like that and then now you see you don't want to call you don't want those two track bars going to the same function because you want one track bar to do one thing the other track bar to do something else so we'll just we'll call the first function my callback 1 and then we'll make this my callback 2 if that makes sense now the easiest thing would be to just get this my callback copy it come down below paste it and now we'll call this top one my callback one and we'll call this second one my callback 2. and it's okay to use the same variable because these are local variables but what i'm going to do now is i'm going to just make it more explicit and i'm going to print i'm going to print i'm going to print x position is equal to val and then this one down here i'm going to print and i'm going to say y position you know that was crazy not equal to vowel like that okay and y position so this should anytime something changes it should print it now notice it doesn't sit and just continuously print it only prints when there is a track bar event when you do something with the track bar it runs into the function it grabs the value and then it prints it but while it's just sitting there it's not going to be printing and if i'm messing with the x val it's going to change the x val it's going to show me the x val if i mess with the y value it's going to show me that but you only end up in these functions when you do something with a particular track bar so let's see if it's behaving like what we think and we do need a comma in there and we do need a comma there okay do you guys see that all right okay all right so i think that will work so now let's look running the program okay and you can see that uh for some reason we did get an initial print out there so i'm kind of surprised it did run into that second uh it did run into that second command but now i'm going to come up to the x position and i'm going to adjust it and you see that when i adjusted x position it printed it out and it seems like it prints it it actually is printing it as i move it okay and as i move it it prints it now i want you to see you can also just mouse over without clicking and when you're over it what you can do is you can use the wheel if you have the wheel on your mouse and it will adjust it and as it adjusts it then x position changes all right so that's kind of neat or i can come down here and now it's going to be changing y position okay so i can change x position or i can change y position and when i mess with the y position track bar it goes to that callback callback 2 and if i max mess with x position it goes to the first callback and so that is working as we expect so i'm getting two numbers into opencv from the track bar i'm getting x position and i am getting y position so that is pretty neat but now the thing is if i wanted to do something with it i really probably most of the time don't want to do it in this function because like if i did something like let's say i wanted to create a circle at x position y position if i wanted to do that if i tried to do it up here in the functions it would be there for one frame and then it would disappear and so it would disappear so fast that you would never see it so where do i want to create the circle well i want to create the circle down here and so before the i am show i am going to add a circle to my video and that circle is going to be at the position x position y position so i'm going to do a cv2 dot circle okay and then where do i want to put circle i want to put it on frame because that's the image that i'm grabbing from the camera and then where is the center well this needs to be a tuple so it's got to be inside parentheses and i'm going to put it at x position comma y position all right because that's the numbers i'm going to get from the track bar and then let's just make it a radius of 25 let's make it blue and remember in opencv the order of the colors are blue green red and so if we want it blue that would be the first one 255 comma zero comma zero okay and then we want a thickness of let's just say two now if i ran this now it is going to crash because before you interact with the track bar the program doesn't yet know what x position and y position is so i've got to come up here and i've got to just kind of seed those values up here so i'm going to say x x position is equal to what did we say let's kind of make it to that value that we had set it to of 860 okay 860 and then the other value we set it to was 540 and so the x position is 860 the y position is equal to 540 i believe we said and then also it's just kind of neat that we could come down here and then we could sort of set it at x x position and y position two good things now we're using variables instead of constants and also we're sort of syncing up the track bars with these initial values of the track part kind of getting the whole thing set up to run properly okay now i've got an x position in y position so when i get down here the program is not going to crash because it knows what x position and y position is but i still have a little bit of a problem and that is i never actually tell it what x position is i sort of call it x position here but i don't actually get x position from this function and so what i need to do here is i can say x position is equal to value all right now i still have a problem because this my callback one is a what it's a function and in python the variables that are inside of a function are local they are local variables which means the only part of this program that knows what x position is is the part that is inside this my callback one if i came down here and tried to print my i try to print x position the program will crash because this part of the program doesn't know what x position is so what do we need to do we need to inside of this function make x position a what global we need to make a global variable x position and that means that just hey take this exposition and let everybody else know what it is not just inside this and similarly here what we need to do is we need to make global what y position and then we've also got to give y position the value so now y y position is going to be equal to value now what is going to happen when we come down here it's going to make a circle and it's going to put the circle here at x comma comma y plus right it's going to put it at x position y position and that's going to be kind of neat well what happens the first time before we've messed or monkeyed with the track parts well that's okay because we seeded that with these two values which we'll use until you actually call those functions and get the values you want from the track bar so let's try to run this and see what happens okay boom look at this it's kind of neat we have a uh we have a circle here okay but you see the circle i kind of made are in an arbitrary position i actually want now the circle in the middle of my window well how would i do that i set the width and height of the window and then that i set the width and the height of the frame and then i pass that to the camera right i set the camera to that width and i set the camera to that height and so what i could do here is i could make this width divided by 2 and that would be in the middle and then width divided by 2. now you guys that are taking the class tell me what's wrong with what i just did what is wrong is if width is an odd number width divided by 2 is not going to be an integer and then the program's going to crash because down here you're sending a floating point number to a function that wants a what an integer so i'm going to go ahead and force that math to be an integer and i'm going to force this to be an integer and now that should put that little circle my little circle where right in the middle of the frame and if i change the size of the frame then the circle will always be in the middle this is kind of thinking like an engineer this is doing things with parameters so let's run this now okay so x position and y position that is not good i hope you guys saw that that y position should have been height like that divided by 2. all right let's try this boom dead center okay now let's come up here to our x position and look at that you see i can move it and i can move it all the way over to the edge and then i can come back this way [Music] okay i can come back this way and move it or i can move it up or i could move it down so do you see how i can set the position i can smoothly set the position of that circle using the track bars okay and that is kind of neat and that is kind of useful okay what's something else that maybe i could do if i wanted to add another track bar hey you know what i could do i could set the radius of the circle okay and if i'm going to do that i better introduce the variable radius and really radius i'm afraid to use that might be a reserved word so i'm going to say my rad for my radius and i'm going to set it equal to 25 and then down here where i create the circle where i create the circle i'm going to make this my radius like that and now i need to create a new track bar so i'm going to get track bar 2 or okay and now i'm going to make a new track bar and i'm going to call that one radius now this is just a string here so i don't care if i call it radius it's going to go in that same window my track bar and then where do i want to start i want to start at my radius and then uh i want to go up to how big of a radius would i want i'm trying to think it would i it height divided by two okay because you wouldn't want it to be bigger than your frame and your height is shorter than your width and so i want it where the whole circle will be on there so the maximum that you're going to be able to go to is the height divided by 2 even though it is not going to start out there and then we need to make this a new callback function callback 3 and then we're going to come back up here and we'll grab this function just because we can we'll paste it and now we will say okay this is going to be my callback 3 and globals is going to be my radius my rad and then this one we can still print we'll just print radius okay and then here we're going to set my red my red is going to be value okay could it really be that easy i wonder how many things i forgot here but let's come up here and run it okay so far so good let's make sure we can still move it okay i still have motion control of it in x i have motion control and y and now let's see whoa boom big o circle let's see if i can get in the circle hi okay i think that is pretty neat now what do we oh what do we not like let's come back and look at what we don't like okay when i have three track bars here what you can see is this window needs to be a little bit bigger right and so that would be where we created the size of the window let's go ahead and make it it was 400 across and then 100 deep let's make it 150 and that should fit these three track bars okay there it is look at that and so now let's try moving the radius and then let's go all the way out and just what we wanted you see when we go all the way out we completely fill the frame okay because we think like engineers and so that is pretty neat there that is pretty neat i'm trying to think if there's anything else that we might want to do is there anything else we might want to do i guess we could set let's just do one more just to see that we could do it we're going to get this this track bar and then we're going to come here and then this one we are going to make thickness of the line my track bars we'll call this my thickness and then uh the initial value we're just going to make of one okay the initial value will be one and then this is going to be my callback 4. so this is going to set the line thickness of the circle that we are making so we better come up here and we did i change that to 4 yes ok so now we're going to get this control we're going to come down and we are going to make this my callback 4 and then this is going to be my thick i have a terrible problem not remembering what okay my thick i'm gonna use the bumpy font okay like that my thick and then up here where was i we called it my thick and then my thick is equal to value and then how far up did we go on my thick oh i'm sorry uh my thick we need to make this like let's say that what if we went to seven because you don't have like a whole lot of different thicknesses before it starts looking goofy and then did we set my thick i don't think so we'll set my thick equal to one to begin with and then here my thick will be one and then here we can change it in my callback four with value which now is a global variable okay so then we would need to down here go ahead and make this my thick like that okay i did a lot of fast programming there let's see okay well it seems like okay it seems pretty good now let's come up here and let's see okay that went to a 2 a 1 2 three four five six seven okay so you see we can control that we can control the radius we can control the y position and we can control the x position is that pretty neat i think that that is pretty darn good so you could see that you could do all types of different you could do all types of different things i'm trying to think if we wanted the circle to be solid we would need it to be minus one and so let's see actually i think you know what i'm going to do you see how it doesn't really see any difference between a 1 and a 0 because 1 is the smallest so i think what i would come here is i would just put an if statement i say if my thick equal equals 0 if my thick is equal equal 0 make my thick quad equal minus 1 and then it'll become solid if i'm thinking about this right and guys i always love to use parentheses even though it's not needed there parentheses are the key to forcing order of operations and a lot of mistakes like the number one mistake i see math students make in high school is improper use of of parentheses and orders of operation and so explicitly using parentheses even when they're not needed it sort of forces you to consider order of operations if that makes sense i kind of got distracted there went down a kind of a strange path okay so now let's come up okay look at that that is looking good come all the way up now what happens when we go to zero solid blue dot okay let's make that smaller okay there it is now let's move it okay you see now we got a little dot there so you can kind of put the dot right over my eye like that that looks kind of creepy doesn't it okay i don't like that okay so that is pretty good you see to summarize what we learned today is we learned to create track bars then we learned how to process the track bar event using these callback functions and then we learned how to get the the parameter from the callback function back into the main program by making the variable global a global variable all right so as you probably can anticipate you're going to get a homework assignment okay and your homework assignment is to create a track bar where the track bar is going to define how big your image is okay how big your image is i'll give you a hint uh you need to use that 16 by nine ratio and so don't try to do in and i'm going to suggest you could do it with a window resize but i'm going to suggest that you do it with this cam set here remember how we did a cam set and we set the cam to a width and a height using cam set well you can change cam set in the middle of the program right you can set it to something different so what i want you to do is i want you to get the cam set values from the track bars so what what's that going to do as you move the track bar it's going to get bigger or smaller okay so you're going to have a track bar that defines how big your frame is right when i read this frame in how big does it read in well it reads it the value that you set in cam set okay so i want that to be set with the track bar and then i want another track bar that will move your whole window your whole whatever your im show is down here this move window this this this my webcam or whatever you named your window it's going to move it from the left to the right of your screen or up and down so that with track bars you're going to control not just how big your frame is but where your frame is on your screen okay and by doing that you'll get kind of you know you'll you'll sort of start showing that you really understand you really understand track bars now is this artificial intelligence yet no it's not but but for you to really go in and write your own programs when we get to the artificial intelligence part you got to understand these fundamentals you have to have a way you have to have a way to interact with the user or you have to have a way for you the user to interact with your program and you do that through mouse clicks and processing mouse events and you do that through track bars and so i'm kind of giving you the fundamental skills that will allow you to be successful so next week we are going to uh next week or in the next lesson i will show you my solution to the homework and then the next teaching lesson what i'm going to do is we're going to start thinking about starting to dip our toe into artificial intelligence by seeing if we can track something start getting ready to track something in a picture and what we want to do is the simplest thing possible is is that we could track on color and so we're going to start moving in the direction of being able to lock on to an object in our image and then track it and we'll start by tracking on color because that is the easiest and then you sort of start doing your first little artificial intelligence function but it's something that you'll really understand okay does that make sense i really hope that makes sense and i hope you guys are having as much fun taking these lessons as i am making them if you enjoy this lesson be sure to give us a thumbs up make sure to leave a comment down below how many of you were able to do this homework assignment if you were able to do it leave the comment i am legend if you were not able to do it leave the comment i folded up like a cheap walmart lawn chair or just leave a comment that says hello every comment that you leave every thumbs up gives me youtube juice and that means more and more people will be exposed to these most excellent lessons that we're putting together and really i'm putting these lessons together to impact people the more people that watch these lessons the more people i impact the more motivated i am to make new lessons okay guys appreciate you sticking with me paul mcquarter with toptechboy.com i will talk to you guys later uh

Channel: Paul McWhorter

Views: 2,615

Keywords:

Id: Qn6WDgz5us8

Length: 39min 30sec (2370 seconds)

Published: Tue Sep 14 2021