PyQt5 Tutorial - Buttons and Events (Signals)

hey guys and welcome back to another PI QT tutorials so in today's video we'll be doing is covering buttons button presses and modifying elements that we've already put on to the window now we're gonna actually be changing this code up quite a bit and you guys will see why as we progress through this tutorial but let's get started with buttons now if we want to add a button to our window all we have to do is very similar to what we did with the label and that is simply say let maybe b1 is our variable name will be equal to Qt widgets dot in this case push-button I believe cube push button how could I forget and then same thing here what we're gonna do is put that that's gonna be Unwin and now we're gonna set the text of our button by just doing button dot set text so we go here and we set this to maybe click me or something like that then that's all we need to do to display a button so if I run the program you can see that now we get this button up in the top hand corner but obviously when we click it nothing is happening so what we need to do next is kind of map this button click to an event so something that happens when we click this button now what we need to do to do that is first of all create a function that we will trigger when that button is clicked so in this case I'm going to create a function I'm gonna call this I don't know let's say clicked like that and in here all we're going to do is simply print to the screen click just to make sure that everything is actually working now we want to map the button press to this clicked function what we do is very simple we say button dot clicked connect and in here we just type the name of the function without the brackets so this is simply connecting that button click event which is this here - this clicked function now there's some other events that we can look for as well there are actually called signals in PI cutie but right now we're just gonna deal with click so now if I run the program and I do click me you can see that clicked shows up in the console down there in the bottom left hand corner of my screen now that's great null but that's really not that useful to us just to print something out to the screen in fact something that we might want to do is maybe change the contents of this label but how do we actually go about doing that in the current way that we've written this code well we don't actually know how and the reason I say that is because this needs to be mapped to a function and this function has no access to this label that we've created here so there actually is a way to do this the way you've written it but it's kind of complicated so I'm gonna show you a way to rewrite the code that we have right now into a class which will mean that all of these kind of clicked methods and all that will have access to everything so to do this we're gonna start and we'll just leave this code down below and we'll kind of delete it as we go through we're gonna create a class and we can call whatever we want but in this case I'm gonna call it my window now we are going to actually inherit from cue main window now what this means is we're gonna take all of the properties that cue main window has and we're gonna use them in my window and we're gonna change them slightly and modify some things and add some things to that window so the first method we need to write for this is actually be an it method Tran du underscore underscore knits underscore underscore we're gonna put self as an attribute and then inside if you're gonna call super my window self dot underscore underscore knit I just raw underscore and then here we won't pass anything now let me quickly talk about what we actually just did so any of you that are familiar with object-oriented prop programming probably know what this is if you're not I have a tutorial series on my channel I'll leave a link to that or a card if you want to get more familiar with Python object-oriented programming but essentially what we've done is we've done a little bit of inheritance here we've created a knit method which will run whatever we create an instance of my window and then we need to make sure that we're calling what's known as the parent constructor of this you know my window thing here so cue main window so that everything gets set up properly so that's what this line is doing here now the next method we're gonna call our Creed is actually gonna be an its UI now this some people will choose to omit but I like to do it this way it's gonna take an argument self and inside of here is gonna be where we put all the stuff that we want in our window so L so inside of an it I'm gonna call an its UI by doing self dot a knit UI like that and this way we're just kind of cleaning up our code a little bit so that all the stuff that we're gonna be putting onto our window will go inside of this method here so what goes in our window well that's gonna be all the stuff like the label and the button that we've created here so I'm just gonna copy that and put it inside of a knit UI like that now we are gonna have to change a few things however the first thing that we're going to need to change is win here now this is actually Q with Q main window and we when we create an instance of my window what we're really doing is creating an instance of Q main window so just like here when I said win equals Q main window well what that is actually happening in here when we have these widgets is we're gonna be adding them to the object itself so what we need to do in here is actually write self now if that's confusing I don't really know what to say but essentially we're gonna be creating an instance of my window and that's gonna be holding like this my window thing so we can't just add it to like win or we can't create a new window inside of here we need to add the widget to ourself because we this object is the actual window all right so now we're gonna change those to be self and what we're gonna do is actually add self before all of these so in for self dot label or add self and same thing for B one now the reason I'm doing this is because I want to be able to access label and B one anywhere throughout my object or throughout my class so that when we you know click a button I can actually change this label text from inside of that function or that method because it's a part of the class so the next thing I'm gonna do is actually create a method called clicked so I'm gonna say define clicked it's gonna take self and inside of here this time what we're gonna do is actually change the text that the label shows so I'm gonna say self dot label and we're able to do that again because we're inside this object don't set texts and we're gonna say you pressed the button like that now the next thing we're gonna do is just change this here this connect to be self dot clicked because we need to reference this clicked not this clicked down here and we're gonna remove a few things from our window here and I'm going to show you how this works so we're gonna get rid of this label on this button because we don't need that anymore and we're gonna take this wind dot set geometry and wind up set window title I'm gonna bring that up here into our a knit method so now since what we were doing before is setting the window geometry and setting the window title and that was again an instance of Q main window all we need to do actually just put self here instead of wind and this will do the exact same thing because again this is our window so if we want to change properties of the window we don't reference wind we're gonna wrap from self because you know that is the window awesome so now that we have that what we need to do actually here is just change win which is down here to be an instance of my window rather than Q main window so to do that we're just gonna change this to be my window and now we can actually go ahead and run the application and we'll see our window so let's test this out quickly and we get the exact same window kinda as before except now if we click the button you can actually see that it changes our label to say you pressed the but now notice I didn't add that oh end there and that's because it's actually being cut off and this is where we come to our next issue when we modify some of the attributes that are inside of our window we need to change the size of them as well so right now what was happening is when we initially create a label which we do here all it says is my first label and it has a set width so as soon as you know when I click this button and this width is greater than the width that it has it cuts off it doesn't show the rest of the text so we need to add is a way to update the width of this text and it's pretty straightforward all we're gonna do is create a method called update in here and this will automatically be called anytime there is a change to the window which is really nice so inside of here what I'm gonna do is just do self dot in this he's gonna say the label dot just sighs like that now what this is gonna do is just automatically adjust the size of the label to hold whatever text it is that we've given it and this update method will be called again anytime anything changed all right so small apologies on my part there guys this update method is not actually automatically called I'm thinking of another one what we need to do is every time we click the button what we're gonna do is just call this update method which means that since we know something's changing well we'll update that property accordingly so in here we're gonna say self dot updates like that and now when I run the program and we do click me it says you press the button and adjust that size accordingly so that has kind of been it for this tutorial we've talked about buttons triggering events with those buttons and also how to set up our code in a nice cleaning class that's gonna be a lot easier to work with in the future so hopefully you guys enjoyed the video as always if you have any questions feel free to leave a comment or join my discord server and with that being said I will see you guys in another video

Channel: Tech With Tim

Views: 207,114

Rating: 4.9441228 out of 5

Keywords: tech with tim, pyqt5 tutorial, pyqt5 tutorial python 3, pyqt5 tutorial for beginners, pyqt5, pyqt5 gui tutorial, pyqt5 button click event, pyqt5 button, buttons in pyqt5, python pyqt5, python pyqt5 tutorial

Id: -2uyzAqefyE

Length: 9min 58sec (598 seconds)

Published: Fri Jul 05 2019