Build A Modern Python GUI Project | Step by Step Tutorial

hey there my gorgeous friends on the internet in today's episode we are gonna be messing around with python just for fun it's so fun to actually go out and try out other programming languages and see kind of the fun little projects that you can put together so if you don't have any Python and you want to just have some fun and come up with something quick here is an awesome modern GUI that we're gonna create and that has the ability to download YouTube videos for you so I hope you're excited and before we get going I want to thank today's sponsor brilliant I always been preaching this on my channel but the best way to learn something is interactively whether that's you following Along on a python project that I'm making on YouTube or through today's sponsor brilliant brilliant offers you these amazing interactive courses in math science computer science and more instead of just memorizing something brilliant takes you step by step through each problem helping you train your critical thinking and create the problem solving skills every problem comes with a step-by-step solution that helps you understand the reasoning for each step I'm currently doing a computer science course that can be very beneficial from different areas in web development if you want to learn more about data structures maybe programming with python they also have stuff that gets you into AI so if you're interested in neural networks even cryptocurrency there's loads of courses out there for you so check it out join the millions that are already learning on brilliant and I have a special offer for you down in the description below so head over to brilliant.org developed by Ed to get started and the first 300 listeners will get 20 off the annual membership so check it out and let's get going well hello so let's go isn't this exciting we're doing something with python a bit different let's get out of that web development world first I'm gonna have some fun so we're gonna use Python if you don't know anything about pipeline pipod pipe but then don't worry because we're gonna do everything from scratch so make sure you install it download the free Windows or Mac or whichever version have it installed and yeah that should be it that's kind of like node.js so you don't need to do too much about it but there's other great websites where you can I think it was called Rebel where you can just easily go it's like an IDE and then you can create here yeah let's see create and then you can do a python project and hit create Rebel and you can mess around with it here as well if you want to um anyway let's get going so what we're going to do is build a GUI that's going to be able to download my YouTube videos so the first thing we're going to do is just make a new file called main.pi you can call it whatever you like and next up what we're going to do is install a couple of things here so you're gonna say pip install not npm we're using pip because we're on Python and we're going to do tokinter like that that's one of them mine is already installed but that lets you do GUI and python but we also have another one called custom tokinter so install this as well and this just makes it look not like Windows XP because the Kinder UI is quite ugly so this adds another layer on top of it and finally we're going to do pip install Pi tube alright and this is gonna let us download YouTube videos and that's it so we're gonna import them up here and the way you do it is you say import to kinter and we're going to say import custom the Canter and then import let's do from PI tube import YouTube all right we get this big object here all right so that's everything that we need now what we're going to do is design the UI so we're just going to do some system settings if you want to do comments in Python you can do it with a hash like that and we're going to say system settings so we're going to see custom tokinter set appearance mode and we're gonna say system like that all right so that's going to get the dark mode light mode whichever uh we're using and this is not spelled correctly so let me spell that correctly for you like that cool so that's one next up we can set a color scheme as well so we can say set default color theme I'm not sure why it's not recognizing it for me now like the actual intellisense doesn't seem to be working uh but it should be fine all right so that just sets up some of the defaults and then what we need to Define is our app frame so like what's the size of it what's the title of it etc etc so we're just going to make a variable and we're going to call this app and we're going to say custom tokinter.ct K like that that's gonna initialize it for us all right and then we can specify a geometry like that and here is where we basically give this screen size so the resolution I'm going to say 720 by 480 like that so technically now if we run this and we say python main.pi uh okay so we are having an error that's why it's not working so let's see what's up here Pi tube import okay so I think we have some sort of importing errors because I have two versions of uh python installed so what we can do is go here and do python select interpreter and we're gonna I'm gonna switch it over to 3.10 all right in case you got the error look at that that solved it and I think the intellisense work works as well so I can do app Dot uh title yeah see and now it's being recognized and then I can do let's do YouTube downloader here all right so let's try to run this program we're gonna say python main the pie and it's still not working so there is something still wrong with this import it says uh cannot import named YouTube so let's see oh it's an uppercase t here all right so make sure you specify that and then run it again and it just closes so what we need to do at the end is actually run this as kind of like run it as a loop so we're gonna say run app it's kind of like um you know when you make an Express server in node.js and you run listen to Port 3000 it's something similar to that so we're going to say app main Loop like that and now if we run look at that we got a 720 by 480 window with a YouTube downloader title there perfect people are taking the garbage away outside so I apologize if it's a bit loud um all right so we have our frame set up now we actually need um some UI elements in there right so let's specify adding UI elements we're going to keep this nice and simple so we're going to say title is equal to custom the counter like that dot ctk label all right we're going to use a label and this is just going to be a text that says insert a YouTube link all right so every time you want to create the UI element you use custom to enter and then you add a DOT on it and then you have labels titles buttons and whatnot now the first argument here specifies where you want to put this UI element in our case we want to put it at our app frame right so we are going to say app and then we can add a text as well and say insert a YouTube link like that and finally what you need to do is take this title and say pack like that and here you can also specify like some padding so if I want to do padding X10 I'm padding y then we can do that here all right let's just inserts it into it I'm not going to go into too crazy detail about styling this uh but we're just gonna run it like that we're gonna keep it in the center which is fine cool so it shows up so that's pretty cool so that's one let's try to add the link input all right we're gonna have a link input down here uh we're gonna say link equal to same story we're gonna see custom decanter dot ctk entry so that's that's kind of the input they use ctk entry and again we specify where we want to put it in the app we can also specify a width a z300 50 and a height of 40 like that and then link the pack right cool we're not going to specify any padding or anything there we go that's pretty good okay now one thing about this is I need to get that input somehow right so if I'm typing typing typing I I want to get this and maybe be able to send it to a function or something so the way you can do that is with the kinter not custom tick enter again this is just kind of like making the UI nicer on top of the Canter but in the Canter you have several methods and functions that you can use to help you get certain information uh from your UI so in this case what I want to do is add a variable to this that I can get so let's call this text just text variable okay and what we can do is say let's do a URL variable up here and we can call this the Canter dot stringvar like that and now what I can do is pass this URL bar in here like that all right and what this essentially is going to let me do is just use this URL bar so when we start inputting text I'm going to have the latest uh info about what's in the input so I can just get this info from here and then use it anywhere in my code all right so let's see cool um let's let's make something else what else do we need we need the download button as well so let's do download button we're gonna say download equals to custom tokinter we can use a ctk button here we go and here we're gonna say app the text is gonna say download and then here we can also run a command now what's the command basically you can run a function here alright so I can say start download like that and now every time you click on the button it's going to run the start download function now we don't have it yet which is fine so let's just go up here at the top and make a new function so let's do it yeah just straight here at the top it's fine so we can say def download that's how you create a function in Python you say def download and then you do the colons at the end there and now it's important here the brackets see you want to make sure it's one tab in like that and here basically we want to try to get the link and download the video and then if it doesn't work then we're gonna throw an error all right so the first thing we want to do is say YouTube link and that's equal to now how do we actually get the data from from here oh I should call the story download as well my apologies so let's rename it start download so when we click on the button it actually runs this and remember we created this URL VAR here um so we can get the info from this link now so the way you do that is say link dot get and that's it that's going to give you whatever is in this input okay next up we're going to say is YouTube we're gonna call this well let's call this YouTube object okay and we're going to set this equal to YouTube this thing that we imported from PI tube like that and this takes in a couple of parameters for now we're gonna say we're just gonna pass in the YouTube link all right whatever they put in the input field make sure this is uppercase again because otherwise it's going to error out so there we go make sure you camel case it there's a camel case no Pascal case um perfect and that should be it and now from here we can extract a bunch of information uh such as let's say YouTube I can see YouTube object Dot and take a look at this you can get captions you can get the channel URL you can get the title of the video if you want see and there's loads of information that you can pull out but for now what we want to do is go into streams like that and here you can get audio only if you want to do something like an mp4 sorry mp3 for now let's just do get highest resolution okay but again if you want to extract more stuff uh you can expand on this quite easily the docs are quite nice as well okay so we just get the highest resolution video that's that's perfect um let's call this uh video right is equal to YouTube object streams the highest resolution perfect okay so we got that which is perfect and what else we're gonna do is try to download it so the way you do that is say video dot download and that's it that's pretty much it and then here we can say accept so if we have an error um then we can say print I'll just output it to the screen here and this is kind of like console log right I can say their YouTube link is invalid we're going to add it to the UI in just a second and here right after this block if everything goes well then we can say print download complete all right and that should essentially be it for the basic functionality we're gonna add a bit more to it but I just wanted to have this so you can just kind of enjoy having a downloader in a very quick way okay let's run the program I don't have the button debit okay so do download.pack otherwise it's not gonna show up on the screen let's run that again and there we go yeah that definitely needs some padding doesn't it um Okay cool so let's do um pad x equals 10. pad y equals 10. okay cool let's run that again there we go it's not stuck up there okay so we can also watch the terminal which is really cool and let's try to download uh one of my videos here we go so paste it in here let's go back to the console and hit download and let's see and it says download complete and look at that we have our video right there Friday that I'm cool isn't it that's pretty cool um here we go look at that full quality no problem perfect okay so now let's just add a bit more functionality to this Now functionality it might make it look a bit nicer first off when we download I want this to update to the title here of the video um I also want to have a Wii progress bar here so we can actually see when the video is downloading and like a percentage of it this is extra if you don't want to do it don't do it but I think it's going to be quite cool so follow along Okay so isn't python fun everyone I love it I absolutely love it okay link input let's go below the link input and we're gonna say finished downloading all right we're gonna have that here um it's just the text that's gonna pop up so I'm gonna say finish label is a custom to canter c t k label now what you can do is actually just have the text empty here and once it finishes downloading we can just add the text back so I'm just gonna pack it like that without any text and as you can see if I close this up and I reopen it you're not going to see anything which is perfect uh actually it is there but it's you cannot see it which is fine cool so now we can go up here when we run our little function right and I want to basically just update this finished label right without any text in it so rather than saying print download complete we can say finish label we can say configure and we can configure the text to say downloaded all right let's run that again and see download and look at that download it cool so that works perfectly fine let me delete that and what I want to do is also do the same for if they don't post a valid uh link here so I can use the same finished label so I'm going to say finish label dot configure and we're gonna say for the text set that equal to download error like that cool now let's do another thing here um what do we have okay so it says insert your YouTube link after it downloads wouldn't it be cool if it actually displays the title of the video so let's try to do that [Music] um oh and here we can also specify let's do a different text color for this set this equal to red right when an error is out that's pretty cool um okay I'm quite happy with that for now and up here let's try to do something else right before it downloads the video let's go here and just say title dot configure and let's do the text equal to YouTube object all right we're gonna get a YouTube object from up here and just output the title of it and that's it and I also want to make sure that text color is going to go back to White just in case it turns red here with an error actually that's that's on the label so it should be fine anyway okay but what I want to do is actually reset uh the finished label so finish label dot configure and we're going to set it back to its original nothing like that Okay cool so let's give that a shot so let's run this and if the link is not valid right if I put something in like that oh it says downloaded that's not good here okay so um we definitely don't want that let's post the correct link in here look at that so that gets the title which is really cool react full stack course but this is showing up in red and it says downloaded which is not good especially since it errored out so so let's take a look at this what's wrong with this oh so what's the problem is that we're running this regardless so it's it's turning the text red but after that it's still running downloaded so let's just put it here in the try right after it finishes downloading if I have an error then we have download error there we go that makes sense and when it finally gets it then it downloads the actual video and then it should display the message so that works perfectly fine next up this is optional this this caused me loads of stress but if you want to add a progress bar and let's do that as well so let's do let's go down here I'm gonna have a progress number and then a progress bar as well so let's display like a progress percentage all right so progress I'll just say P percentage okay just to shorten it up we're gonna say and we're just gonna make a label here ctk label app and the text is gonna say zero percent all right just like that and then we're gonna see P percentage dot pack all right so that's one and then we're gonna have a progress bar as well custom to canter Dot ctk progress bar they have a specific progress bar here and we're gonna just add a with the 400 to it and this progress bar basically goes from I'll show you we're gonna set it to zero it goes from zero to one all right so if it's 0.5 then the progress bar is gonna have be halfway through it so I'm going to show you that in just a sec we're going to see pad X10 pad y10 just to give it a bit of space but if I run that see it's halfway true so let's set it initially to zero how the hell are we gonna get the progress of that well the pie tube Library comes with a specific callback function that you can use on the downloader now the code's a bit funny but just follow along so here on the YouTube object it takes an additional parameter called on progress callback and we can give it the function name anything we want so let's just call it all progress cool now down here I'm going to specify this function on progress like that cool so that should recognize it which is perfectly fine and here we have access to a couple of things again this is coming from the YouTube uh class that we're importing from PI tube so we have stream we have chunk a chunky boy and bytes remaining so we're gonna do some math which is fantastic and that's why you should check out brilliant as well we're gonna say total size how do we get the total size well we can access that from stream file size so that's perfect that's easy how many bytes do we have downloaded bytes download that so let's make a variable and we can do total size minus bytes remaining all right we get this info from our parameter now to actually get the percentage of completion let's set that equal to we can do bytes downloaded divided by total size times a hundred that's going to give us a zero to 100 percent fantastic and now what we can do is say well let's let's print this out right percentage of completion there we go let's run this and see what we get so if I post in a YouTube link here let's see this one cool paste and run this and there we go 25 52 79 and done download it cool so it works it works we got these large numbers here which we can just easily get rid of if we say I'm gonna cover this per we're gonna say string and percentage of completion all right so what's this going to do well first of all end it's gonna get rid of any floating points right so all the decimals are gonna get rid of and we're converting it to a string here at the beginning as well so we can add it to the UI because our progress are P percentage label if we configure it it takes in a string all right so text equals to per and I'm going to add a percentage sign as well here and interpolate it like that and now for this to actually work we're gonna need to say p percentage the update all right it's going to update on every iteration like that all right cool so that's pretty cool let's see if that works run this and paste the link in and run 26 52 yes amazing well done it works let's delete it again and now to actually get the progress bar as well to update update progress bar we can say progress bar set and I'm gonna turn this into back into a float or we can actually I think we can keep it an end no we needed to float because it's between zero and one so let's say float percentage of completion divided by a hundred so if you do that that's going to give you a value between 0 and 1. all right I think that's it guys let's see close enough that's pretty good that works lovely and from here on if you want to update anything else in the finished downloading if you want to do something like make the progress of bark blue make a thread blah blah blah feel free to do that uh if you want more info and discuss them to kinter head over to custom tokinter on GitHub and you can check out their documentation down here um yeah they have frames and everything and they have examples that you can add to your application or if you want to move things around and style them and everything can be done through here but that's really fun isn't it I absolutely love love working with python to be honest and let me know if you guys want to see more of this uh let me know what you do with it if you add more functionality to it and maybe a way to select the the video quality let me give you a hint for that you can find it on YouTube object dot streams this is going to give you back all the video resolutions so maybe create a variable or something an input box where you can click select 720p 1080P and have it update check out YouTube streams perfect alright guys thank you so much for watching check out the courses down below check out brilliant as well thank you for sponsoring this video and I'll see you guys in the next one

Channel: developedbyed

Views: 198,267

Keywords: python, python project, python tutorial, modern python, python gui, python gui tutorial, pytube tutorial, dev ed, developedbyed, python for beginners, python project for beginners

Id: NI9LXzo0UY0

Length: 29min 18sec (1758 seconds)

Published: Fri Jan 13 2023