Raspberry Pi Workshop - Chapter 4 - Your First GUI with TkInter and Python

okay let's program our first graphical user interface so our first interface is going to be very simple it's going to have a button to toggle an LED and a button below that to close the application so on the breadboard I has a single led wired up to GPIO 14 and over on the desktop I already have an empty Python script in my chapter 4 directory I'm going to open that and this will be the only code along example that we'll do in this chapter because programming GUI it gets quite repetitive and all of the code starts with the same so after doing this one example we'll just walk through a few others and this will be a useful example just to show you how things are built from the ground up so first of all we need to do our import and I'm going to import from TK inter I'm going to import asterisks that syntax just allows us to access the D functions from TK enter without having to say so TK into dot something we can address them by their bed sub function name I'm also going to import TK in search of fonts and we're going to use a different GPIO library this time around it might be a little more convenient we're going to import from GG P is 0 we're just going to import the led function so GPIO 0 is similar to our PI GPIO except it comes with functions that are made for specific roles like LEDs for instance you might find this a little easier to use I will still need to import GPR our Pi GPIO so we'll do that now and that's for its cleanup method just a way that TK into let me close the GUI we're just going to need our PI GPIO for its cleanup method we going to say our car GPIO set mode hi GV I got deep sea now okay that's all our imports done and this is going to allow us to build gooeys flashin LED and clean up when we close the GUI so let's define the hardware we'll be calling this LED and will access the GPIO zero function LED and we're using 1014 for this example now we need to create the GUI itself so this is what creates the major main window so we're going to call that GUI definitions and we're going to call the window width and we're going to say that's equal to CK so this creates a TK internet instance this creates a an object that we can build a GUI in and we're going to give it a title - why not we can say window title and we can say LED foie gras so the title is what appears across the top of the window here let's create font - to pack into i doing so our buttons are going to have texting and that text we can change the font so we can change its properties like making it bold for instance just so our videos you to read so I'm going to create a font object and this is where we specify what type of font it is with the family so I'm going to choose the color Mexico font and we can choose the size and the light we can set the bowl as well okay so that is the GUI definitions complete we can now refer to win as our GUI and we can apply font to certain objects like buttons okay the next thing we want to do I guess is create the widgets themselves so the way we do this I'll just make it out of section for widgets so of course we're going to have two buttons so I'm going to first create the LED toggle button I'll call it LED button and to create a button with TK enter we invoke the function button with a capital B so now that we are creating this button we need to tell it where to go how to place it we need to attach it to some advanced function so this is where all of those definitions take place within the constructor function so I'm going to place it in win which remember is our main window I can give us some text to start off with so we can say turn LED on and we can apply fonts to that text we can say fonts equals my fonts now we need to attach some commands to it so when this button is pressed it triggers some some command some function I don't have one yet but we'll just fill it in as a placeholder we'll say command equals and the function will create and be called LED toggle that's easy enough we can even color this button so as we start to build more complicated do is we can color code certain areas to describe their functionality so I'm going to set the background equal to not G B D G is for the background color and I'm going to set that equal to disc - which is like a kind of creamy gray shade of white and we can set the height equal to one and I'll set the width I'll make it nice and big so it's the dominating button on the interface I'll set the width equal to 24 so that is a that is a big line because remember when we when we create GUI is we have to explicitly define every property to create that that graphical object so we have to select exactly how big it is its color on what it attaches to you can see that it takes a lot of text on the screen to create a reasonably simple interface now we've created this LED button but we haven't actually activated it we haven't placed it anywhere within the the graphical user interface so we can do this in a couple of ways and in this video I'm going to place the button using the grid structure so true to its main you can think of the graphical user interface as being arranged as a grid and we can place things within that grid with coordinates or row and column numbers so I'm going to place the button with LEDs Clutton grid and I'm going to place it in a row 0 that is the top and column 0 as well let's go to column 1 just to demonstrate something okay so that's the LED button now that's going to trigger some command called LED toggle so we actually need to define that function now and I'm going to put that up here in event function section so we can define LED toggle and that's going to take no arguments and this is where we can toggle our LED and GPIO s0 provides really really useful built-in for this kind of stuff so we can say if LED dot gives lit so that's just going to check if our LED is on and of course if it's on and we're toggling it we want to say LED off and just to show you something neat we can also change the text of that LED button to change to reflect what being next action is going to be so we can say LED button and we can access just this text part of the object by using the square bracket and quote notation so we can say text and then we can set that equal to something and LED on yes okay so we can change the button text and in fact for any widget we can change an individual property using this notation if you want to change multiple properties at the same time I'll show you a trick for that later so that is that is the case if it's lit what we can then say is else and led on to turn the LED on and then say LED button text I'm just going to grab this and copy it this is quite syntax heavy and I'm just going to say 10 LED off so now we have completed the LED total function every time this button is pressed it will toggle the LED let's have a look maybe maybe this will be able to run straight out of the box okay there's our LED toddler window and if I click the button over on the breadboard the LED turns on and we can see that the text has changed in the button itself so if I hover over it you can see the color change to indicate that it's being Hamid over that's a nice touch that's just default behavior for a button I click it again the text changes and the LED turns off so the text is reflecting what the next action will do and that's quite neat so of course we don't have a complete we don't have a complete script yet because if I close the GUI we can see the LED is still on so we need to do that GPIO cleanup trick from the Python chapter a couple of chapters ago so to do that I'm going to create a exit button and that exit button will trigger the closing of the interface and also cleaning up the GPIO so I can very quickly grab all this because it is very similar and I'm going to say that this is exit button and exit button okay let's let's modify the properties now so I'm just going to just call the text exit I will give it the same fonts we'll give it a different command which will be let's call it closed and now let's give it something that really stands out we'll give it a just a very solid red background now over for the dimensions will make it quite a bit smaller I don't know let's let's make it six for instance and this will make it a much more minor element on the interface so that we don't you know accidentally close it and then we'll put it in row 1 so starting from the top we have the LED button in row 0 and then in row 1 which is below it will have this exit button so that is the widget created and placed now of course we have to create that close function for there close event so we can define clothes and this is where we can just invoke our PI GP IO dot cleanup so that means that we can close the program at any time and if our LED is lit it will be unlit again of course and the GPIO pin will be reset back to its reset state now we can also invoke a special TK inter command fear which is wind dot destroying not the story destroy yes okay so that means that when we click this exit button it'll not only clean up the GPIO it will actually close the window so we can give that a run and there we have it so let's got our window we've got our title our LED button which still toggles the LED but then we also have this exit button which we can use to exit the program now there's one one last thing that we haven't quite captured and that is this if I run the LED toddler and turn the LED on for the LED is on that if I close the window with this option once if I close the option with this little X close option here we can see that the LED is remain remaining on and this is a problem because we want to be able to close the window intuitively using that built-in close button so we need to capture another event and that is something built into TK inter which we can which we can pull out so just under here we can say we can say winds dots protocol so using the using the protocol suffix of the object that allows us to access more behind-the-scenes events likely clicking about close button and that is the that is the name WM delete window so we can grab that event that it occurs when the X is when the X is clicked and we can just attach it to our close function so we can attach it to close and that will exit cleanly when we hit that button now there's one other thing that I forgot to include but it seems to have worked regardless and that is that after we have created all of these definitions as our project grows we're going to need to include a win dot main loop and that is going to loop forever but that's what's going to essentially be the driver for our GUI in this case which just had events triggering these functions but this this is what's going to essentially keep the GUI running so if we run this now and save it we can see that we can toggle the LED with no problem and I'll leave it on we know that exiting with the red button worked but if I click the X here we can see the LED turns off which means that the GUI has exited cleanly and cleaned up the GPIO so now we know how to create a really really simple GUI that just has a couple of buttons in the next video I'll walk you through using some of the other features

Channel: Core Electronics

Views: 153,479

Keywords: raspberry pi, raspberry pi how to use tkinter, how to create gui with tkinter, how to create form with tkinter, tkinter tutorial

Id: ap-ABFNCBoE

Length: 16min 14sec (974 seconds)

Published: Sun Mar 26 2017