PyQt5 Tutorial - Signals and Slots

hello there python fans welcome back to another episode of dumbass code this is our pi qt5 tutorial series i am your instructor chris franklin all right today what we're going to dig into is the topic of signals and slots inside of pi qt5 so what are we talking about when we say a signal or a slot in high level terms what we're talking about are events and the handlers that actually know what to do with those events so they have a very special name in the qt world but what it really comes to under the hood is if i click on a button that generates an event and there is a handler somewhere that knows how to take that event and do something with it so that's what we're talking about when we say signals and slots all right now i've already created a a pycharm project here uh to actually create our project to create our our applications in we're going to create two applications today to kind of demonstrate the powers of signals and slots within pi qt and we're going to start with the basic buttons and event handlers there so let's pip install pi qt5 that's the very first thing we need to do uh now i've already been running pyqt5 on my system so it's just going to use the cached version bring everything down and that's a pretty quick install okay now let's create a new file we're going to create a python file and we're just going to call this our main.pi and inside of here we're going to go ahead and import everything we need right at the top okay so pi q t5 we're going to import from pi qt5 the qt widgets package and we're going to import a couple of things that we need so q application is the main overarching wrapper application it's what actually manages all of our windows for us q widget is a high-level generic way to show windows and the widgets that are contained within them we'll need a cue push button since we're going to be showing how to hook events into button presses and we need a way to show what is being pressed so let's set a label so we'll set the text of a label whenever the button is being pressed okay so um what we're going to do here is i'll go ahead and create a run method and inside of this we're just going to pass for now and we'll set up our dunder name equals dunder maine and inside of this we'll just call run okay so basic shell of a python application right um if you don't remember what dunder name is i've got a lovely tutorial video on that it'll walk you through why you want to use this to wrap all of your code here okay so let's set up a q application let's go ahead and do that we can pass in if we imported sys we could pass in sys.rgv here instead of an empty array and that would pass all the command line options that get passed in when the application has started up but for now we're just going to pass in an empty array we don't want to we don't want to pass anything in here and app.exec underscore now it they add the underscore here in in pi qt because exec itself is a reserved word a keyword inside of python we don't want to interfere with it so we use exact underscore as our executable here okay pretty straightforward so far standard pi qt project now we're going to create a custom widget and we're going to have this extend the q widget okay this is the way that we're going to be able to take and create our window and add widgets to the window so that we can see them okay so we're going to start with the dunder init we're going to call super now there's another way you don't have to use q widget here you can use q main window and if you do that you'll have to pass in your class into the super of main window but i don't like i like to have a lot more control over the windows that i display so that's why i use q widget but you'll sometimes see in tutorials that they'll use q main window instead of q widget first for actually creating the main window all right and the other thing we're going to do is we're going to initialize the ui okay so this is going to be a function that we create or a method that we create inside of this class and we're going to say init ui and in here is where we're going to set up our windows and everything so let's set the geometry first let's put this at 100 100 this will put it right about here on the screen um and then let's set the size to something like 300 by 300 okay doesn't matter for now we're just we're playing around with things at this point so we're going to set this the window title and this is showing off buttons and events okay now uh the last piece to get everything to show here is to say self.show and then inside of our run application we have to say our custom widget is initialized okay so if we run everything at this point so we can click the green uh the green arrow here in the gutter we click go and what this will do is this will start up this main window and of course it launches it on my other screen every time i want it to show up over here but here you can see it's a blank window with nothing inside of it just buttons and events and nothing attached yet so let's go ahead and attach some widgets and some controls okay first thing we're going to do is we're going to set up a label and we're going to attach it on self here because we want to be able to access this on the instance of the custom widget and we want to be able to change that label later on so we're going to set up a cue label and there's two ways we can do this here we can either pass in a a label string and self or we can set it manually here i'm going to do it manually because we're going to use this again later set text and let's say something simple like hello okay so we're setting this up and then let's set the location here so we're going to move this widget uh let's move it to 1010. how about that all right xy1010 on the screen so at this point let's run it again let's see what it looks like okay now bring this window into view here and you can see we say hello here at 10 10 on the window remember the top left is 0 0 so we count left 10 pixels and down 10 pixels all right now let's add a button to actually have an event self dot cell dot btn um i like to use btn as my button to start my button names and since there's only one i'm just gonna do btn and we're gonna call this cue push button and we're gonna attach it to self right remember these are the parent uh widgets that we're attaching our push button and our label to and we want to attach our parent to the main window okay we can also use layouts i might actually show that on the next part of this tutorial we're going to do another view here in just a second and i'll use a layout in that case just so you can see how to use it instead of manually setting here okay so we're going to say push here and then here's where things are going to get interesting so we'll go ahead and set this up at 10.50 this will put the button down below our same x position and down below our our label and then we're going to hook into the um the slot here so this is uh this is how we're this is how we're going to actually respond to the event so the event itself the signal is called clicked and then we're going to connect inside the slot a method called button clicked okay and you notice we're passing in self dot button clicked so that means that we're going to have to come down here and create a new method that is going to be called button clicked and it's going to take self and then inside of here we can perform an action so we're going to say label dot set text and we're gonna say um thanks for pressing the button hooray now i'm gonna run this now this is not gonna work how we expect it to but i want you to see how it fails okay so i'm gonna set this in here i'm gonna go ahead and hit run i'm gonna have to move this into view again so you can see it but here we have hello and then if i push here notice that the text gets cut off now why that's because we've already set the size of the label we set the size based off of the text that gets set into it whenever we first draw it so this is where we first draw and after we respond to this event we don't redraw the label so we actually need to call an additional step here we need to say self dot label dot adjust size this will automatically readjust the label size based off of the text that's currently set in there so let's run this now and see what it looks like okay so if i come over here oops i hit the button twice and i hit push you'll see now we can see the entire text okay this is all pretty straightforward and easy when we're talking buttons but how do we respond to other kinds of events now we're going to do something a little bit more complicated but also at the same time a little bit easier okay so it's going to take less code and it'll be kind of a fun little experiment so let's go ahead and create a new python file we're just going to call this one signal slot okay and what we're going to do in signal slot is we're going to first import from qt core uh now this is going to be important because we're we're going to do layouts here so we need access to the main qt to determine what layout we want to we want to actually set so we're going to do pi qt5 qt widgets and we're going to do q application again q widget again q lcd number cue slider and for layouts let's do a v box layout okay that's a vertical box layout uh extremely simple to get started with so let's just go ahead and jump straight into the class itself and then we'll display it in a second so we're gonna do let's call this one my widget and we'll do uh based off the q widget define dunder and net super call supers dunder init and then self.init ui and then when we define init ui what we'll do here is we'll set up an lcd display of qlcd number and we'll attach it to self then we'll set up a slider and we're going to set up cue slider and in this this is where we actually use the layout here we're going to do a horizontal layout for our slider and then we're going to define a vertical box qv box layout and we don't need to attach this to anything yet we're going to say vbox dot add widget and we're going to add lcd and then we're going to do vbox.add widget and we're going to attach the slider that's how easy it is to attach multiple widgets into a vertical or horizontal layout you just add the widgets in the order you want them to appear well don't worry we'll we'll do an entire tutorial video on layouts but this is just to uh show you what kind of power this this will actually provide for you so at this point now what we need to do is we need to set the layout that we're going to use in our main window and we're going to set it to the virtu the vertical box that we've already defined okay and then we're going to hook into the signal of value changed on the slider and we're going to connect in and set the lcd display function as what is responding to the change in value so what this means is that when the value changes it will pass as you can see here as i hover it'll pass self and an integer value to whatever the handler is okay so the value changed we're going to connect that into display and we're going to pass into the display the value that gets handed in that event so we'll just be passing a raw integer value into the display so we'll be able to see what the integer value is of the slider as we change it and slide it around okay let's go ahead and set the geometry we're going to do 100 by 100 and at 100 100 again not that it matters because it's going to show up on my other window but let's set the size to something different let's go 250 by 150. uh let's set the window title let's see signal and slot example and then we're going to show this okay now this isn't going to run because we haven't set up our run function so let's set up run this should all look super familiar at this point so we're going to set up a basic queue application we're going to set up our my widget so that it gets defined we'll do app.exec and then we'll call if dunder name equals dunder main okay and we'll call run so at this point we have everything we need um let's make this look pretty there we go get rid of the squiggles and then save this and run it let's see what it looks like oh yeah i guess it helps i just ran the main function since we're running multiple things here let's click the play signal here in the gutter and now you can see now we have a vertical layout we have a digital display and we have our slider here if i click and drag the slider you'll notice the value changes that's it that's some of the power that you can do with signals and slots so just understand the slot is the name of is the method itself that responds to the event and the signal is the event itself okay signals are events slots are the methods to handle the event changes the the value from those events okay that's it that's everything there is to know about signals and slots there's a lot we can do with this there's a lot of different types of signals that you can respond to in the qt library dig through the documentation look at all the different signals that your uh your different controls can actually handle you can do all kinds of powerful things now so thank you so much for listening i really look forward to seeing you in the next tutorial thanks a lot

Channel: Dumb As Code

Views: 3,026

Keywords:

Id: yS_4PSRyovk

Length: 16min 46sec (1006 seconds)

Published: Thu Nov 26 2020