This is the second part of a tutorial on a Hangman game written in Python using PyQt5.
In the first part of this tutorial, we created a Hangman class that handles the application logic for creating a Hangman game in Python. In this part, we will write a GUI client that uses the Hangman class.
PyQt
Qt is a cross platform application framework that includes a GUI toolkit. Python ships with tkinter as it’s standard GUI API, but I am actually more comfortable using Qt. Qt is a an object orietated framework that provides us with classes that represent controls on the screen (known as widgets).
Using Python’s OOP features, we can develop a GUI in small increments and then put them together into a single application window. That’s what we are going to do in this tutorial.
Here is the complete GUI code for hangman.
import sys
from PyQt5.QtCore import QCoreApplication
from PyQt5.QtGui import QPixmap
from PyQt5.QtWidgets import (QWidget, QPushButton, QGridLayout, QApplication, QLabel, QHBoxLayout, QVBoxLayout,
QMainWindow, QInputDialog)
from hangman import Hangman
class HangmanPanel(QWidget):
def __init__(self, hangman, frames):
super().__init__()
self.hangman = hangman
self.frame_index = 0
self.frames = self.create_frames(frames)
self.label = QLabel(self)
self.layout = QHBoxLayout(self)
self.layout.addWidget(self.label)
self.advance_frame()
def create_frames(self, frames):
frm = []
for f in frames:
frm.append(QPixmap(f))
return tuple(frm)
def advance_frame(self):
self.label.setPixmap(self.frames[self.frame_index])
self.frame_index += 1
if self.frame_index >= len(self.frames):
self.frame_index = 0
def reset_hangman(self):
self.frame_index = 0
self.advance_frame()
class LetterPanel(QWidget):
def __init__(self, hangman):
super().__init__()
self.hangman = hangman
self.create_buttons()
self.grid = QGridLayout(self)
self.position_buttons()
def create_buttons(self):
letters = ('A', 'B', 'C', 'D', 'E',
'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O',
'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z')
buttons = []
for l in letters:
buttons.append(QPushButton(l, self))
self.buttons = tuple(buttons)
def position_buttons(self):
positions = [(i, j) for i in range(7) for j in range(4)]
buttons = list(self.buttons)
buttons.reverse()
for pos in positions:
if buttons:
self.grid.addWidget(buttons.pop(), *pos)
def activate_all(self):
for button in self.buttons:
button.setEnabled(True)
class WinsPanel(QWidget):
def __init__(self, hangman):
super().__init__()
self.hangman = hangman
self.label = QLabel(self)
self.label.setText('Wins')
self.win_label = QLabel(self)
self.win_label.setText('0')
self.layout = QHBoxLayout(self)
self.layout.addWidget(self.label)
self.layout.addWidget(self.win_label)
def update_wins(self):
self.win_label.setText(str(hangman.wins))
class DisplayPanel(QWidget):
def __init__(self, hangman):
super().__init__()
self.hangman = hangman
self.label = QLabel(self)
self.word_label = QLabel(self)
self.layout = QVBoxLayout(self)
self.layout.addWidget(self.label)
self.layout.addWidget(self.word_label)
class WordPanel(DisplayPanel):
def __init__(self, hangman):
super().__init__(hangman)
self.label.setText('Current Word')
self.update_word()
def update_word(self):
self.word_label.setText(' '.join(self.hangman.display_letters))
class GuessedLetterPanel(DisplayPanel):
def __init__(self, hangman):
super().__init__(hangman)
self.label.setText("Letters Already Guessed")
self.update_letters()
def update_letters(self):
self.word_label.setText(', '.join(self.hangman.guessed_letters))
class HangmanWindow(QMainWindow):
def __init__(self, hangman):
super().__init__()
self.hangman = hangman
self.wins_panel = WinsPanel(hangman)
self.hangman_panel = HangmanPanel(hangman, ['hangman_0.png',
'hangman_1.png',
'hangman_2.png',
'hangman_3.png',
'hangman_4.png',
'hangman_5.png',
'hangman_6.png',
'hangman_7.png'])
self.word_panel = WordPanel(hangman)
self.guessed_letter_panel = GuessedLetterPanel(hangman)
self.letter_panel = LetterPanel(hangman)
central_widget = QWidget()
central_layout = QHBoxLayout(central_widget)
left_widget = QWidget()
left_layout = QVBoxLayout(left_widget)
left_layout.addWidget(self.wins_panel)
left_layout.addWidget(self.hangman_panel)
left_layout.addWidget(self.word_panel)
left_layout.addWidget(self.guessed_letter_panel)
right_widget = QWidget()
right_layout = QHBoxLayout(right_widget)
right_layout.addWidget(self.letter_panel)
central_layout.addWidget(left_widget)
central_layout.addWidget(right_widget)
self.connect_listeners()
self.setCentralWidget(central_widget)
self.setWindowTitle('Hangman')
self.show()
def connect_listeners(self):
for button in self.letter_panel.buttons:
button.clicked.connect(self.on_letter_button_click)
def on_letter_button_click(self):
sender = self.sender()
letter = sender.text()
sender.setEnabled(False)
current_guess = hangman.guesses
self.hangman.guess_letter(letter)
self.guessed_letter_panel.update_letters()
self.word_panel.update_word()
if current_guess < hangman.guesses:
self.hangman_panel.advance_frame()
if hangman.check_win():
self.wins_panel.update_wins()
self.show_win()
elif hangman.check_lose():
self.show_lose()
def show_win(self):
items = ('Yes', 'No')
item, ok = QInputDialog.getItem(self, 'You Win! Play again?', 'Choice:', items, 0, False)
if ok and item == 'Yes':
self.reset_game()
else:
QCoreApplication.instance().quit()
def show_lose(self):
items = ('Yes', 'No')
item, ok = QInputDialog.getItem(self, 'You Lost! Play again?', 'Choice:', items, 0, False)
if ok and item == 'Yes':
self.reset_game()
else:
QCoreApplication.instance().quit()
def reset_game(self):
hangman.start_game()
self.wins_panel.update_wins()
self.hangman_panel.reset_hangman()
self.word_panel.update_word()
self.guessed_letter_panel.update_letters()
self.letter_panel.activate_all()
if __name__ == '__main__':
app = QApplication(sys.argv)
hangman = Hangman('words.txt', 6)
win = HangmanWindow(hangman)
sys.exit(app.exec_())
When run, this code will produce a window that looks like this screen shot.
HangmanPanel
The first thing we need is a panel that shows the man getting hanged in the window as the user plays the games. We begin by using 8 images for each of the frames.
Now let’s look at the code.
class HangmanPanel(QWidget):
def __init__(self, hangman, frames):
super().__init__()
self.hangman = hangman
self.frame_index = 0
self.frames = self.create_frames(frames)
self.label = QLabel(self)
self.layout = QHBoxLayout(self)
self.layout.addWidget(self.label)
self.advance_frame()
def create_frames(self, frames):
frm = []
for f in frames:
frm.append(QPixmap(f))
return tuple(frm)
def advance_frame(self):
self.label.setPixmap(self.frames[self.frame_index])
self.frame_index += 1
if self.frame_index >= len(self.frames):
self.frame_index = 0
def reset_hangman(self):
self.frame_index = 0
self.advance_frame()
This class extends the QWidget class. QWidget is the super class for objects that are displayed by Qt. By inheriting from QWidget, we can uses instances of this class as a GUI component as either a nested component in a window, or as a standalone window.
The ability to display QWidgets in their own window is a huge feature of PyQt. For example, we can test that this window is working properly by adding the following lines of code to our script.
if __name__ == '__main__':
app = QApplication(sys.argv)
win = HangmanPanel(None, ['hangman_0.png'])
win.show()
sys.exit(app.exec_())
When run, we get our window.
By using the technique described above, we can test each component of our GUI in isolation to make sure it’s working properly before we continue. Now let’s move onto a description of this class.
__init__
Python uses an __init__ function to create an object.
def __init__(self, hangman, frames):
super().__init__()
self.hangman = hangman
self.frame_index = 0
self.frames = self.create_frames(frames)
self.label = QLabel(self)
self.layout = QHBoxLayout(self)
self.layout.addWidget(self.label)
self.advance_frame()
The first line is critical. We have to call QWidget’s __init__ method before we do anything else with this component. If we forget to do so, PyQt will throw an exception and let you know about the error.
The next line of code is our Hangman object. This is an instance of the Hangman class that we made in part 1 of the tutorial. The next variable is to track what frame we are currently on. Every time the user guesses wrong, we are going to increment frame_index by one. The frame_index variable is used to show which frame of the hangman game we are going to show.
The self.frames variable is a list of all of the possible frames that we are going to show. It uses the self.create_frames function to read each file supplied in the frames variable. That function will return QPixmap objects that represent each picture that we supplied to the program.
self.label is a QLabel control. The QLabel is a widget that is capable of displaying a picture (among other things). We are going to pass QPixmap objects to this QLabel object and display our hanging man as the game progresses.
Next we need a layout manager. This is an object that is used by Qt to position controls on the screen. QHBoxLayout is used to display components from left to right in a horizontal row. The next line self.layout.addWidget(self.label) adds the QLabel object to this screen. Finally, we want to show our starting hangman from by calling self.advance_frame() described below.
create_frames
The create_frames function is used to load our picture files from the file system and wrap them into QPixmap objects. Here is the code for this function.
def create_frames(self, frames):
frm = []
for f in frames:
frm.append(QPixmap(f))
return tuple(frm)
This begins by creating an empty frm list object. Then we iterate through each item in frames. We create a new QPixmap object, which accepts the location of the frame file on the file system. The QPixmap object is added the frm list. Since we do not want to change the frames in any way after loading them, we convert frm into a tuple (think of it as a read-only list) and return it to the caller.
advance_frame
The advance_frame function does the job of moving the program to the next frame of hangman.
def advance_frame(self):
self.label.setPixmap(self.frames[self.frame_index])
self.frame_index += 1
if self.frame_index >= len(self.frames):
self.frame_index = 0
We created a QLabel object in the __init__ function and stored it in self.label. We also created our frames as a tuple of QPixmaps in create_frames. We can change the frame that is displayed by using QLabel.setPixmap() and passing a QPixmap to it.
So what this code is doing on line one is looking up a QPixmap located at the current frame_index. On the second line, we increment self.frame_index by one. Our next section of code does bounds checking on the self.frames tuple. If we at the end of the frames, we just reset self.frame_index to zero so that we don’t try and go past the number of frames that we have.
reset_hangman
The final method of the HangmanPanel class gets used to reset the game.
def reset_hangman(self):
self.frame_index = 0
self.advance_frame()
You will notice that this code repeats some of what is done in the constructor. It resets the frame_index to 0 and then calls advance_frame to display the first frame in the sequence.
Conclusion
This part of the tutorial discusses the first GUI component of our Hangman GUI. PyQt5 applications are easy to develop because we can work on each component in isolation and make sure things are working properly before continuing. In this post, we worked on the portion of the GUI that displays our man getting hanged as the user guesses wrong.
Stone Soup Programming 
4 thoughts on “Hangman—PyQt5 (Part 2)”