Lesson video

Hello and welcome to your next unit of programming, which is programming unit five and mostly we're going to be concentrating on strings and lists.

We're also going to be looking at things called GUI's, so GUI's which is actually the topic of this lesson.

Now I'm really excited to be able to teach you about GUI's because it's really fun to be able to make things appear on screen that you can actually click on and the user can interact with, okay? I'm Ben, your computing teacher for this lesson.

So all you'll need for this lesson is your computer and a web browser, you'll also need access to your Repl.

it account.

Now if you've not got one, please ask your parents and carers to create one for you, okay? Other than that, if you can clear away any distractions that you might have.

So if you've got a nice quiet place to work, that'd be great, maybe turn your mobile phone off and when you're ready, let's get started.

Okay, so in this lesson, you will be able to define the term, GUI or GUI.

You're going to be able to import third party libraries and understand a little bit more around that.

We're also going to be able to use a library or module called guizero to create an event driven programme that uses a GUI, okay? Now I try and use the term GUI, but I might interchangeably use GUI, so if I say GUI, I'm actually talking about GUI, it's the same term for the same thing, okay? So first of all we've got a thinking exercise for you today and your first thinking exercise is to answer these three questions.

So you might be familiar with these blocks of codes, so you might recognise those.

Now if you do, it's because they're from the Scratch programming language, okay? So my three questions are, first of all, does it matter which order the space or the up arrow are pressed? What happens if you press the space or up arrow twice? And then third question is, how is this different to how your code will execute in Python? Okay, so you might want to just pause the video for a moment and just formulate your thoughts on that, or if you've got a pen and paper, you can write down your answers if you want and then we'll go to the answers in just a moment, okay? So pause the video and when you have answers, unpause the video and we'll go through the answers.

Okay, so I'm taking it you're unpausing 'cause you've got some great answers.

So let's see if you were right.

So, the first question, does it matter which order the space or the up arrow are pressed, okay? Maybe a leading question but it's a 50/50 chance of you getting it right, so, there's a yes or no, what do you think? It was no, it doesn't matter.

It doesn't matter because in this, in our Scratch programme environment here, okay, the space or the up arrow can be pressed in any order, there's no sequence to the command as such, okay? So for example, if that bottom blocks there with the up arrows pressed, in our Scratch environment, if we place those two blocks of code above where the space bar is pressed, it wouldn't really matter what happens, okay? It wouldn't matter what order, sorry, because actually what's happening is we're waiting for something to happen, okay? So that's going to move us onto the next question, what happens if you press space or up arrow twice? Okay, well the answer is, the space and the up arrow can be pressed as many times as the user wishes.

So the block will wait for the event to happen and then execute the code in that block.

So if you press the space bar, only at that point will that next line of code be executed.

So change score by one, okay? So that lays dormant, as such, not doing anything, until the space bar's pressed, but every time we press the space bar, that block of code will be executed and the same with the up arrow.

So every time I press up arrow, it will say, say hello for two seconds and then if I press it again, it would execute that line of code.

So my final question for you is, how is this different to how your code is executed in Python? Well the answer is, the flow of control within our Python programmes is executed in the order in which they are written.

Okay, so this is slightly different to what you're looking at here.

Yes, we've created sub routines and that does change the flow of how our code works, but either way, we call this sub routine in a specified order in our programme, okay? Whereas that's not the case here.

What we're looking at here is just a code over the place, but it can wait for the user to do something before triggering that block of code, okay? So these Scratch blocks are driven by events, okay? And you can see those events, the events are, when the space bar is pressed, that's an event and when the up arrow is pressed, that's also an event.

So what is a GUI, okay, or a GUI? So GUI stands for Graphical User Interface and it gives the user a variety of ways to interact with the programme.

So GUI's are event driven programmes and many of the programmes that you use on your computer use a GUI.

In fact a lot of what you're using right now looking at the screen uses a GUI.

So, adding a GUI to a procedural programme.

So when you add a GUI to a procedural programme, you're altering the flow of control.

So once a GUI has been initialised, the order in which the code is executed is determined by events, which are triggered by the user.

So if you look at that screen on the right hand side, what kind of events do you think might happen? Maybe if we wanted to open that file that says, Doctor Carlos, okay? Wonder what that file's about? But if I was to do something, how would I open that file? I'd open that file by clicking with my mouse and that would be an event.

So that would trigger the process to happen to actually open the file and display it to me.

So just like Scratch, the programme will wait for an event to be triggered before executing a block of code.

And the events can typically be triggered in any order.

So the tkinter Python interface.

The standard GUI interface for Python is called tkinter, okay, and is pre installed with the latest version of Python so if you've got Python on your computer and you've went to the Python website and clicked instal and downloaded it, there are some third party modules and libraries that are already built in that you can use and tkinter is one of those, okay? Now unfortunately, the code for tkinter can be quite complex and I don't necessarily mean that in terms of it's difficult to understand, but it can be a lot of syntax, a lot of syntax.

So a lot of lines of code to be able to do a small amount of things, okay? So there is a thing called guizero.

Now guizero's a package of third party modules that could be imported to Python that makes it easier to make GUI's.

And the modules interact with tkinter but the code is much easier to use.

Let me show you an example of that.

So we've got a very similar programme going on here.

So tkinter, you can see the number of lines required to make that programme and then the guizero, look how many fewer lines are needed to be able to create the same programme, okay? Now I've mentioned a thing called third party modules.

Now programmers create new third party modules regularly.

And this helps programmers share code and avoids the need for the same blocks of code to be written again and again.

So you might come across a problem that constantly you're having to write lots of lines of code to be able to solve a problem.

Well it may well be that you think, well actually, you know what I can do? I can write a module and other people can use this and make it a lot easier for you to be able to write that code and in a lot less lines.

Now there are other third party module's, in fact there are tonnes of them, but just to give you an example of some of them is there's one called gpiozero, okay? And this is used to interact with the GPIO pins on a Raspberry Pi computer, if you can see that those are the GPIO pins.

Now they're not just the necessarily ones related to Raspberry Pi either, there's loads of them like I mentioned and another common one is pygame.

Now pygame is a third party module which is used to create graphical games with Python code.

So it does deal with graphics, but also it handles game engine maths that you might need to be able to make again, okay? Now GUI programme contains widgets and these are components that the user can interact with, okay? So these might be buttons, sliders, text boxes, radio buttons, check boxes and drop down lists to name a few of them, right? So the ones that we can see on the screen here, I'm not sure if you can see my mouse or not, but we can see here, so we've got the cat, dog and turtle.

Those are called radio buttons, okay? And a radio button only allow me to select one at a time.

So if I was to click on dog, then cat would be deselected and then dog would be selected.

So it only let me select one of those options.

The next one you can see are check boxes, some little tick boxes there then there's check boxes and the one you can see on the right hand side there, that's a drop down list.

So, widgets.

In guizero there are many widget options available to you and the guizero documentation lists all of them and details how to use them.

So you won't necessarily need to use that for this lesson, however you might want to look at these widgets, okay, and a quick Google search for guizero will find this, but I've also got a short link on the screen there.

So if you really, really enjoy today and I really hope that you do, and you want to develop these skills a bit further, then you'll find this reference library really helpful for you to create the interface exactly how you'd like it.

But hopefully the tasks from this lesson will really help you with that anyway.

Now the event loop.

So to begin a GUI programme, you need to add some code to create a window which will contain all of your widgets.

So when the GUI programme starts up, it starts running event listeners.

So this means that it continually listens out for things to happen.

So clearly the event listener listens out for any event that's going to happen and then it knows what event to trigger.

So the GUI will perform an action in response to each event it receives and the instruction that is executed is determined by you, the programmer.

So, what we're going to do now is I'm just going to give you a demonstration, but it's really helpful early on, before we get into these tasks, that you make sure you know that guizero is working, okay? Now, if you're using the default Python that came installed with your computer, you will need to instal the library for guizero, okay? There's instructions on how to do that on that guizero page, okay? But if you've got MU or MU installed on your computer, it comes packaged with that, but if you're using the recommended way for this unit, which is using Repl.

it, then it's easy enough to do and I'm going to show you how to do that 'cause it does it all for ya, okay? So I'm going to demonstrate how to do that now.

Okay, so I've headed over to Repl.

it now so you can see how I'm going to set up my first programme using guizero, okay? So I'm just going to create new Repl.

it there, okay? Select Python, now you can select it with to have it already installed, but you don't need to, just Python is absolutely fine, okay? I'm going to give it a sensible name, so I'm just going to call it GUIDemo, okay? Now obviously you won't call yours demo, but you might call, My First GUI or something like that.

So I'm just going to click create.

Now the code that you had on the previous screen, so when I've demonstrated this you can pause it so you can see my code if you want to as well, or you can just pause it when I'm on the slide.

So what I going to do is I'm just going to copy and paste the code in there, okay? So you can see I'm importing GUI's here.

Now I'm going to explain that in a little bit more detail a little bit later on, okay, but let's just run this programme, see what happens.

I'm just going to move myself down to the bottom here, in fact, I'll move myself over here so you can see a little bit better exactly what's happening.

So, going to run this code now.

Now when I run it, you can see it's installing the library for you, which is really good.

So you don't need to worry about having it installed on your computer so you can run it this way and it will just instal it here.

And we'll get it started.

Okay and there we go and we've got our first window there that says, you can see it says, Graphic User Interface, I've got a window working there and it says Hello World at the top, okay? Which is brilliant, okay? Excellent, now if you wanted to see that in, you can also by the way, you can copy this and then you can run this in a browser tab and you should be able to see it that way as well, okay? So that's how you do that, so I'm just going to head back over to the slides.

Okay, so now we've demonstrated that, let's have a look exactly what that code actually does line by line.

So let's look at this line.

So this, the first line, from guizero import App Text.

So let's go to the guizero folder and import the app and the text modules because these are the ones that are required for this programme, okay? So guizero comes with lots of different part modules to it, okay, but we're only using App and Text in this one so those are the only ones that we're going to import, okay? So the next line then, oh there you go, so that just explains what I just said.

So if you use a different widget, then you'll need to add it to the list as well.

So you might want to add another one such as picture, if you're going to use that one, okay? So next line, the code line two it says app equals App.

Now the syntax for this is really important here, okay? So it is case sensitive.

So my variable name, you can name that whatever you like, but I've called mine app, okay? And remember our structure of doing this should be that our variable name should be lower case, okay? But when we do equals App, the A for app with the brackets after it does need to be a capital A, okay? So what this does, it creates the app and this is the window that all the widgets will sit on.

The next one, text.

So my variable text equals Text, again, capital T, okay, open brackets, we're using the app and we want to display the text equals hello world.

So this places a text widget on the app and sets the text to being hello world, okay? And then you can probably guess what the next one does, okay, so that uses app again.

So app.

display, okay? So this displays the app and runs the event loop so it continually checks for the events.

So any line of code written after this will be ignored by the programme.

So that should indicate to us that that needs to be the last line of code that we write.

Okay, so this is because it sets up the event loop and displays the app based on the instructions that you have given prior to this instruction, all right? Okay, so your challenge today are have a go at this and create your own programme.

So what I'd like you to do is head over to activity one now on your worksheet to complete the mini project where you will create an app that adds two numbers together.

So there's a set of instructions with a few challenges mixed in there as well, okay? So have fun with that, good luck in creating your first Graphical User Interface and then I'll be here when you've finished that.

Okay, so how did you get on with that? So what I thought I'd do is quickly just go over my solution to it so you can make sure that yours matched.

Okay, now remember the first line of code's really important that we imported guizero, but we also imported the particular modules that we're going to use.

So for this programme it was App, Text, Textbox and Push Button.

Okay, then basically what I needed is my functions here, my sub routines, sorry, that added, multiplied, divided and subtracted, okay? So let's just have a quick look at the add and then other ones follow the same pattern, only the difference being the operator that I'm using.

So I've got num1 equals enter num.

value, so that's going to get the value from enter num.

So if we just scroll down and see what that is.

Remember what's really great about Repl.

it is what we can do is when we highlight a bit of code here, it actually shows us where else that is being used and so we had this underneath here, so my textbox app, okay, was enter num1.

So what's happening here is getting the value from whatever's being placed inside there.

got under the variable num1, okay? Then we got num2, my variable there and that's going to collect what is in the textbox num2, okay, then what we'll do is work out the answer.

So we're taking the value, making sure it's and adding them together and then what we're doing is we're using display answer.

value so if you look here, display answer, okay.

Display answer here is the textbox, sorry not textbox, it's where we can place text, okay, so it's a label essentially, so yeah.

So what we do is then use that and give it the value answer so we're adding the value to it, okay? So that's the same for all of these, only the difference like I say, if you operate us and multiply after you multiply, divide divides and subtract minuses, okay? So, then what we do is we create our app.

So the App with a capital letter A, so if that went wrong you need to make sure that was a capital letter there and we gave it a title add two numbers and you can see that on the top here, so the title is that string that appears across the top here, okay? Then what we do is we got instructions.

So that's there, so enter a number, okay? So that's my text label there, enter a number.

I've got my textbox and then I got another set of instructions, another textbox and then I've got another label here, okay, which just says answer until I overwrite that.

So when I first run this, that should just say answer until I click one of the buttons.

Now the buttons here, we got display, sorry we've got, yeah display number, which is the add.

So display number is a push button and that's going to use an app, it's going to use a command app which is going to look for this sub routine app, okay? So it's going to run that.

Notice we don't need the brackets there as well, so that was really important.

So if you added brackets there it wouldn't have worked and then we do have the text, which is add.

So that's going to give that button there some text on top of it.

You can see add there.

So when I run that, that should add the numbers together and to prove that, I'm just going to put 120 and six and that'll do so I'll add that together, we've got 126 there, not sure how well you can see that, but it says 126.

We got a multiply so let's multiply and that adds again 720, we divide it, it's 20, we subtract it, it's 114, okay? So those are all of those ones and they're calling the sub routines at the right time and then we've got this thing here, app.

display.

It's on my event list for there, which is going to, we put at the end, it starts the event loop and remember that needed to be the last line of code, okay? So hopefully you enjoyed that and hopefully you enjoyed making your first ever GUI, so well done if you managed to do that, okay.

So now you've done that, I've actually got another task for you to do.

So I'm just going to head back over to the slides to talk to you about that.

Okay, so now it's time for you to develop those skills even further and I'm going to ask you to create another GUI, but this time it's going to be to make a joke machine, okay? So I'm going to take the stabilisers off a little bit here and see how much of this you can do by yourself.

But there are things definitely to help you along the way on your worksheet.

So if you head on over to activity two on your worksheet, then that'll give you all the instructions you need to be able to do this, okay? So have fun with this and when you've done, I'll be here when you get back.

Okay, so hopefully you've unpaused the video because you have finished your joke machine.

So again, I'm going to go through my joke machine solution and see how similar it was to yours, okay? So if you got stuck at any point, you an just look at the code that I've done here.

So yet again we start off with that line.

So from guizero, we're going to import app, but this time we're also importing the button group, okay? So button group, text and push button.

Now the button group was these radio buttons that we have down here, you see my mouse highlighting them here? So, what we had is we had my sub routine here, which was called jokes, okay? So if the sub routine says, if joke choice was value was stick then display the joke, what is brown and sticky, a stick, okay? So let's just explore that concept before we look at the rest of the selection statements.

So, we start off with that App, remember capital letter A for App there and then what we had was our instructions which was the text there, which you can see at the top there, choose a joke from the list below, okay? So text App choose which is choose a joke from the list below.

Then what we had was the button group.

So I've got this as a variable called joke_choice and as a button group that had the options, so we display it in the app window, had the options and we put this in square brackets, so stick, fluff, chicken, frog, okay? And then select, stick, that just means by default, can you see the way when I ran this programme without clicking anything, the default is stick there, okay? And you could change that to another option.

So, by default there is one already selected, okay? Then what we have is we have the joke button.

So it says show joke and we can see that there, okay, but what that's going to do when it's pushed, so it's going to display it in the app window, but when it is pushed then we're going to run the command, jokes, which is running a sub routine here, okay? Then we also have this thing called display joke and that's a text label there which is displayed in the app window and it's going to have the text waiting for joke and you can see that there.

But what we're going to do now, so when you click the show joke, what we're essentially doing is, we're collecting the value on my button group, the current value of my button group and then we're running it through my selection statement.

So you can see there, stick is currently selected, but if I changed that to chicken, okay, what that does, it changes the value of joke choice to chicken, okay? So what we do is we get the, when we push a button, okay, what it does, it runs this and then it gets the value of the variable, okay? So it's going to say, if the variable value is stick then display that joke, if it's fluff, display that joke, if it's chicken, display that and if it's frog, display that.

Well it's currently chicken, so in theory it should do, why did the chicken cross the road? To buy some toilet paper, okay? So let's show joke, and there you go, it does it that way.

So if I was to select frog then what it does, it grabs the value of joke choice which will be frog when I press the button, okay, and then that's going to say, what happens when a frog's car breaks down? It gets toad away.

Brilliant, okay, I'm sure you can think of some better jokes than that as well, okay? So that's how you did it, so if you got stuck on that, you might want to just pause the video, go back to your programme and see if you can correct some of the mistakes or problems that you came across, okay? So let's head back over to the slides now.

Okay, so the last part of this lesson is to have a look at the difference between procedural and event driven programming, okay? So what I'd like you to do is head over to activity three on your worksheet and sort the statements into either procedural programming or events driven programming, okay? So pause it again, head over to task three, read all the statements and just pop them in the right box, okay, so pause it and I'll be here when you get back.

Okay, so how did you get on with that? So let's go through the answers, see if you got them right.

So, procedural programme, these are the statements that should have belonged in there.

So, the flow of control is executed in the order it is written, so that's procedural.

And also, it is commonly used when the order of execution is known.

Okay, so that's procedural.

Now, event driven programming is the flow of the programme is determined by the users actions, such as button clicks and it is commonly used when creating graphical user interfaces.

And finally, the programme waits for user action before executing a block of statements, okay? So hopefully you got those and if you've done that and you've achieved all of the activities for today's lesson then give yourself a big pat on the back, okay? So I would really like to see your interfaces that you've made, those GUI's that you made, show me then please and also, in particular, if you've been really inspired by that and want to explore GUI's even further, so you've made more things using guizero, maybe you've even explored pygame, please do share them with me.

I would absolutely love to see those, okay? And if you would like to share them with me, then please ask your parent or carer to share your work on Instagram, Facebook or Twitter tagging @OakNational and using the hashtag LearnwithOak.

Okay, so I hope you enjoyed that and I look forward to seeing you next lesson.