Okay, let's program our first graphical user interface on our Raspberry Pi 3 Model B. 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 have 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. So 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 to look 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 imports and I'm going to import from TKinter, I'm going to import asterisks that syntax just allows us to access the functions from TKinter without having to say so TKinter.something we can address them by their sub-function name. I'm also going to import TKinter.font 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 GPIO 0 we're just going to import the led function. So GPIO 0 is similar to RPI.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 RPI.GPIO, so we'll do that now and that's for its cleanup method, just a way that TKinter works when we close the GUI we're just going to need RPI GPIO for its cleanup method, we're going to say RPI.GPIO.setmode(RPI.GPIO.BCM, now okay that's all our imports done and this is going to allow us to build GUIs, flash an 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 Pin 14 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 win and we're going to say that's equal to TK, so this creates a TKinter instance this creates an object that we can build a GUI in, and we're going to give it a title - why not we can say win.title and we can say LED toggles. So the title is what appears across the top of the window here. Let's create font - to pack into into our GUI, so our buttons are going to have text in them, 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 Helvetica font and we can choose the size and the weight we can set to bold as well. Okay so that is the GUI definitions complete, we can now refer to win as our GUI and we can apply the 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 TKinter, 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 event 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 myfont 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 GUIs we can color code certain areas to describe their functionality so I'm going to set the background equal to BG is for the background color and I'm going to set that equal to bisque2- 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 GUIs 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 name, 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 Button.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 functions 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 0 provides really really useful built-in for this kind of stuff so we can say if LED dot is 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