7. Building a Graphical User Interface: Going all gooey

Head First TVN now produces game shows

It’s more than just sports at Head First TVN, as the station has entered the lucrative world of live game show broadcasting. Their flagship show, Who Wants to Win a Swivel Chair, is attracting viewing figures in the millions... not bad for a station that operates on a shoestring budget.

You’ve been approached by their stressed-out (but incredibly smooth) game show host to help with a program he needs. TVN was so impressed with your work last time that they are offering two free, front-row tickets to the Grand Final as payment for your work.

You’ve had a few conversations with the host and determined a list of program requirements:

1. The host wants to be prompted after a question has been asked to press either 1 for a correct answer or 2 for a wrong answer.

2. Based on the key pressed, an appropriate sound effect needs to play.

3. The program needs to remember how many answers were correct and how many were wrong.

4. The host will end the quiz by pressing 0. Then the program will display the number of right, wrong, and asked questions.

Let’s flesh out what’s required in pseudo-code.

Frank: I think sound is going to be a problem.

Jim: Sounds easy to me...

Joe & Frank: <groan>.

Jim: Sorry, couldn’t resist that one. Seriously, though, how hard can it be to play a sound from a program?

Joe: Playing a sound is not the problem; getting it to work on multiple platforms can be. For instance, what works on Windows might not work on Mac OS X or Linux.

Jim: That’s not a problem. I only use Windows, so I’ll be OK.

Frank: Good for you, but the rest of us want to play, too, and we don’t want to have to... um... eh... downgrade to Windows.

Jim: Typical: have a swipe at Windows when something doesn’t work on your non-Windows computer.

Joe: Cool it, guys. We need to stop bickering and come up with a solution that lets us play sounds and works on Windows, Mac OS X, and Linux. And it has to work with Python, too.

Jim: You mean Python doesn’t support sound as standard?!?

Frank: No, not really. In fact, very few programming languages support sound in a cross-platform way. This isn’t just a Python problem.

Jim: So... we’re outta luck then. Does that mean it’s time to go home?

Joe: Not so fast, Jim! I’m pretty sure pygame can help here.

Jim: So... I can’t go home early, but I can play games?

Frank: Seriously, Jim, I think Joe’s right. We can use pygame to play our sounds in Python.

Jim: And it’ll work on Windows, Mac OS X, and Linux?

Joe: Yes, I’m pretty sure it will. Granted, pygame’s a set of gaming libraries for Python, but all we need to use is the bit that handles playing sounds.

Jim: Sounds great. I can’t wait to see it in action.

Frank: Didn’t you mean “hear it in action”?

Jim & Joe: <groan>.

pygame is cross platform

Before continuing with the rest of this chapter, you need to take five to download and then install the pygame technology onto your computer. The pygame technology is an example of what’s known as a third-party library: that’s extra functionality that can be added into your Python environment, but which isn’t part of the standard library.

As installing pygame tends to be a very platform-specific thing, we’ve uploaded a set of instructions onto the Head First Programming website for you to follow.

STOP! Don’t proceed with the rest of this chapter until you’ve installed pygame for Python 3 on your computer.

Load this!

To run this program on your computer, you obviously need pygame installed and you need to download the sound files for this chapter from the Head First Programming website. Be sure to put the sound files in the same directory/folder as your program.

Q:
Q: So pygame is a library created by some programmer other than the Python folks?
A:
A: Yes, it’s what’s called a third-party library. It wasn’t created by you or the people that bring you Python. Some other programmer(s), a third party, created pygame.
Q:
Q: And it’s just given away for free?
A:
A: Yes. Which is very nice of them, isn’t it?
Q:
Q: Are there other libraries like pygame that can be added into my Python environment?
A:
A: Yes, there are lots. To see the current list, follow the Package Index link from the main Python website. Python refers to third-party libraries as “packages” and, as you’ll see, there are packages available for every conceivable purpose, not just playing sounds or developing games (as is the case with pygame).
Q:
Q: The sounds I downloaded are WAV files. I know that WAV is one of the standards for encoding sound, but is it the best format to use?
A:
A: That depends on who you ask! We are using WAV files because they are used in lots of places and are well-supported on most operating systems. There are lots of file formats for sound and many of them claim to be “better” than WAV, but for what we are doing here, WAV is perfect.
Q:
Q: What’s the deal with the wait_finish() function in the Ready Bake Code? I just don’t get why it’s there.
A:
A: It’s a function that waits for the sound to finish playing before continuing with the rest of the program.
Q:
Q: What?! Surely the sound just plays?
A:
A: Playing with pygame in this way, although fun, masks a problem that can surface when working with sound (in any programming language). It turns out that, when asked to play a sound, the main chip inside your computer (the CPU) doesn’t even bother trying. Instead, there’s another, smaller chip in your computer that is specifically designed to play sounds and it is to this chip that your main chip hands the sound file to and says: “play this for me.” The main chip then goes back to running your code, sees another request to play a sound, doesn’t bother, hands the new sound file off to the sound chip, and repeats until your program ends. The sound chip—and this is the important part—is designed to operate in parallel with your main chip. While your main chip is doing something else, the sound chip is busy playing any sounds it has been asked to play. And—here’s the rub—if the sound chip has been asked to play more than one sound, it attempts to play each sound at the same time.
Q:
Q: So the wait_finish() function is like an artificial delay after each sound?
A:
A: No, not really a delay, more like a pause designed to let the sound effect play fully before trying to play anything else. The wait_finish() function forces your sound chip to finish with one sound before starting another. What happens is that when a sound is played, the play() method passes back the channel (or track) number that the sound is playing on. You can then use the channel number to ask pygame to wait for the channel to finish playing a sound before continuing, which is what the code in the Test Drive on the previous page does.
Q:
Q: And if I don’t use wait_finish(), what happens then?
A:
A: All the sounds attempt to play at the same time and it sounds like a jumble of sounds as opposed to one sound playing, then another, then another, and so on.

Now that you know how to generate a sound using pygame, it’s time to write the code for TVN’s program. Base your program on the pseudo-code you created earlier.

____________________________________________________________

This week’s interview: Is it fun being pygame?

Head First: Hello, pygame. Nice of you to join us.

pygame: Hello. Thank you so much for giving me this opportunity to discuss my situation with you.

Head First: What situation is that?

pygame: Well, you know, just because I’m used for gaming, everyone expects me to be fun all the time. Life and soul of the party... never stopping to smell the roses... always on the go. <sigh> It’s all too much fun, really.

Head First: Too much fun? Really?!?

pygame: Well... yes. Not a lot of people know this, but my life as pygame is hard. Not only do I have to help out regular folks with their programming problems, but there’s all those gamers, too. Some of those guys never sleep... it’s just play, play, play, play, play, play... I’m simply exhausted.

Head First: Oh, sorry to hear that. But, don’t you feel good that all those programmers out there in the Python community are using you?

pygame: I guess so.

Head First: You’ve made a lot of programmers’ lives easier. There’s lots of great code written that would not have been written if it weren’t for you.

pygame: Yeah, right. I do all the heavy lifting while everyone else is off doing other things.

Head First: Ah, come on, your life’s not that bad, is it?

pygame: <sighs>

Head First: Surely you know what people are saying about you?

pygame: Now they’re talking about me, too? How awful... <sobs>

Head First: Yeah, there’s lots of talk, but it’s all good. The Python programming community loves you, pygame.

pygame: They do? <sobs even more>

Head First: Yes. You are well-tested, well-written, and your documentation is first rate. Your support for all the major releases of Python is right on the money, too, and you work on Mac OS X, Windows, and Linux.

pygame: All I’ve ever tried to do is keep everyone happy.

Head First: And you do. We’ve heard so many great things about you that we are recommending you to all our friends.

pygame: Do they play games? I’m good at that, you know.

Head First: Yes, some of them do. But others just talk about the great things their applications can now do thanks to you, pygame.

pygame: I guess things aren’t quite so bad after all?

Head First: Not at all. We’re big fans!

pygame: Why, thanks. That’s awesome. Do you have time for a quick game? There’s this new Dungeons and Dragons that I’ve been dying to try...

0... 2... 1... 9... blast off!

Your program’s looking pretty dated.

The program works, but it’s not going to win a Visual Design Award any time soon. And its use of key presses makes it a little hard to use, too.

So, its looks could be improved and its usability could be better.

It sounds like you need a graphical user interface, or GUI.

Note

Most people pronounce GUI as “gooey.”

Frank: Since when have you been an expert on GUIs?

Jim: Isn’t every Windows user?

Joe: Well, of course, everyone knows how to use a GUI, but we are talking about creating a GUI in code.

Jim: Ah... oh... um... eh... now, where shall we start?

Frank: It turns out that writing code for a GUI application is... well... just like writing any other code. If you know how to program, you know how to create a GUI. It’s just a matter of selecting the correct GUI library, learning how to use it, then writing the code.

Joe: So we’ll head off to the Python Package Index and grab us some GUI libraries, eh?

Frank: Not so fast. Python comes with a GUI library as standard, called tkinter.

Jim: tk-what?

Frank: tkinter. The “tk” bit refers to the fact that Python’s standard GUI library is built on top of the very popular Tk technology. The “inter” bit is short for “interface.”

Jim: So we’re going to build a GUI interface in Python running on Tk using tkinter?

Frank: Yes, we are. That’s not too confusing, is it?

Joe & Jim: Well... not if you say so.

Frank: The big thing with creating GUIs is understanding the event loop.

Joe: Ah, that’s just looping code that reacts when certain things happen, isn’t it? It’s just like the while loop in the non-GUI version of TVN’s program. In that code, that loop is an event loop, isn’t it?

Frank: It sure is. Although the GUI event loop tends to be extra capable and can do lots more than the simple while loop.

Joe: That sounds complex. Is it?

Frank: No, not really. It just takes a little getting used to.

Jim: But, it’s all just code, isn’t it?

Frank: Yes, Python code using the tkinter library.

Joe: OK. Let’s get to it, since we already know how to program...

tkinter gives you the event loop for free

In order to process events efficiently, GUIs employ an event loop. Event loops watch and wait for events, calling a piece of code each time an event occurs. If you think about the current TVN Game Show program, it already has a very basic event loop that waits for the host to press 1, 2, or 0. The program then calls some code before waiting again for another key-press event from the host. To implement this in code, you used a while loop:

In tkinker, you don’t need to write a while loop like you did for your non-GUI program. In tkinter, call the mainloop() method instead:

To add a button to your application, use code like this, being sure to put these two lines of code before the call to mainloop():

tkinter is packed with options

The pack() method lets you position the button in the application window. If you provide a value for the side parameter to pack(), you can control where in the window the button appears. Here are the legal values for side:

pack(side = 'left')
Position the button on the left side of the window.
pack(side = 'right')
Position the button on the right side of the window.
pack(side = 'top')
Position the button at the top of the window.
pack(side = 'bottom')
Position the button at the bottom of the window.

It is also possible to add some padding around buttons (to make them look nicer in your window):

pack(padx = 10, pady = 10)
Position the button with 10 pixels padding on all four sides.

Based on what you now know about tkinter windows and buttons, write the code to display the GUI that you need for the TVN program:

____________________________________________________________

The GUI works, but doesn’t do anything

The graphical user interface might be ready, but the program is not complete.

Q:
Q: So all tkinter gives me is the ability to draw the GUI?
A:
A: Well, yes, but there’s quite a lot of functionality wrapped up in that small number of lines of tkinter code.
Q:
Q: That pack() method looks a little weird... how does it know where to put things?
A:
A: The pack() method adopts a best-guess approach when it comes to packing your GUI widgets within your GUI application window. This usually works out, and when it doesn’t, pack()’s parameters give you some control over the situation.
Q:
Q: That’s all that left, right, top, and bottom stuff, isn’t it?
A:
A: Yes, as well as the padx and pady parameters. They help with widget positioning, too, by putting additonal space (or padding) around your buttons.
Q:
Q: OK, I get that, but how come nothing happens when I click on my buttons?
A:
A: Ah, funny you should ask that...

Connect code to your button events

When you click on a button, the tkinter event loop captures the event and looks for something to do with it. The trouble is, as your program stands, you have not detailed what that something to do is. Your buttons have no code associated with them, so the events occur but go unnoticed. To connect code to buttons, put the code you want to run in its own function and then name the function in the button code by providing a command parameter:

The code from the nongraphical version of the TVN program is on this and the facing page. Take your pencil and mark the parts of the code that you would extract and turn into functions so that you can then connect the functions to the buttons in your GUI. Mark the other parts of this program that also need to be added to the GUI version.

Note: Don’t worry about prompting the host to ask a question in the GUI. But do worry about maintaining a count of the number of questions answered correctly and incorrectly. (The total count is not important, either.)

Note

The nature of the interface provided by the GUI means that some of the program’s requirements have changed.

How many functions do you think you need? Write their names here:

________________________________________________________________________

import pygame.mixer

def wait_finish(channel):
    while channel.get_busy():
        pass

sounds = pygame.mixer
sounds.init()

correct_s = sounds.Sound("correct.wav")
wrong_s   = sounds.Sound("wrong.wav")
prompt = "Press 1 for Correct, 2 for Wrong, or 0 to Quit: "

number_asked   = 0
number_correct = 0
number_wrong   = 0

choice = input(prompt)
while choice != '0':
    if choice == '1':
        number_asked = number_asked + 1
        number_correct = number_correct + 1
        wait_finish(correct_s.play())
    if choice == '2':
        number_asked = number_asked + 1
        number_wrong = number_wrong + 1
        wait_finish(wrong_s.play())
    choice = input(prompt)

print("You asked " + str(number_asked) + " questions.")
print(str(number_correct) + " were correctly answered.")
print(str(number_wrong) + " were answered incorrectly.")

With the code you need identified, take the time to update your GUI application with the new functions and whatever other code you’ve extracted from the non-GUI program.

Produce a new program that is a combination of your existing GUI code and the extracted code from this program.

You were to take your pencil and mark the parts of the code on the previous (and facing) page to identify the code you would extract and turn into functions so that you can then connect the functions to the buttons in your GUI. You were also to mark the other parts of this program that also need to be added to the GUI version:

You were to think about how many functions you might need. You were to write their names here:

With the code you need identified, you were to take the time to update your GUI application with the new functions and whatever other code you’ve extracted from the non-GUI program.

You were asked to produce a new program that is a combination of your existing GUI code and the extracted code from this program.

Note

Turn the page for the updated code solution...

The GUI program’s now ready for a screentest

Here’s what your GUI program should look like now:

Q:
Q: So “event handlers” in tkinter are just functions?
A:
A: Yes, as we said earlier in this chapter: it’s all just code. And by putting the code you want to run in a function, it’s easy to reference it using the command parameter associated with each button. Your user clicks the button to run the code in your function.
Q:
Q: This actually isn’t too hard. I always thought building a GUI was only for advanced programmers?
A:
A: Well... that certainly used to be the case, but things have changed (for the better). Technologies like tkinter allow every programmer to build great-looking GUIs without too much fuss. It’s a case of tkinter concentrating on the GUI, while you concentrate on your code.
Q:
Q: And is it the case that, if I want to add other things to my GUI program, it’s done in a similar way?
A:
A: Yes, all you have to do is write the code.
Q:
Q: And I connect my code up to my other things using something like the command parameter that works with buttons?
A:
A: Yes, that’s all there is to it. The mechanism for the other interface elements (or widgets, for short) might be a little different, but the concept is the same. Once you can work with one, the rest are a lot easier to get your head around.

But TVN is still not happy

The results appeared in the Python Shell, not in the GUI, so the host missed seeing them. When you point this out to him, he’s less than impressed and makes it clear that he expects the results to appear in the GUI.

You need some way to display messages in the GUI.

Label it

When it comes to adding a label to your GUI, use the tkinter Label widget. You create it in code not unlike the way you create a button. Here’s the code to add a label to an existing GUI application. The label simply displays a string:

Another variation replaces the text parameter with textvariable. If you assign a special tkinter variable to this parameter, the label will change whenever the value of the variable changes, automatically:

Based on what you now know about adding a label to a GUI, rework your GUI code so that it uses two labels. One should display the number of correct answers and the other should display the number of wrong answers. We’ve left plenty of room for you to write in all the code that your program now needs.

____________________________________________________________

Your Programming Toolbox

You’ve got Chapter 7 under your belt. Let’s look back at what you’ve learned in this chapter:

Programming Tools

* Using a third-party programming library

* Playing with a sound library

* Event loops - respond to events when they occur

* Event handler - code that executes when a certain event occurs

* GUI - a graphical user interface (looks nice, doesn’t it?)

* Widget - a GUI interface element

Python Tools

* pygame - a professional-level set of gaming libraries that support sound

* pass - a piece of code that does nothing

* tkinter - a standard library for creating GUIs

* Tk() - a blank GUI app

* Button() - a tkinter button widget

* Label() - a tkinter label widget

* IntVar() - a tkinter integer variable that can update the GUI “as if by magic”

Table of Contents for
7. Building a Graphical User Interface: Going all gooey

Chapter 7. Building a Graphical User Interface: Going all gooey

Head First TVN now produces game shows