In this post I will try to touch upon fundamentals of GUI while developing a traditional rock paper scissors game. This one solely goes for the ubuntu system users. Some prior experience with python or any programming language would be helpful. I will be using quickly, an ubuntu app development command line tool for this. If you have not got one, get it from the ubuntu software center. Strike “quickly” on your typing machine while the cursor blinks on the search bar of the ubuntu software center to get it. Get it installed.
You’ ll need one additonal gui builder for this. Glade
Type in the following command onto the terminal to install glade:
sudo apt-get install glade
Lets get started
Open the terminal(Ctrl+Alt+T) and type in the following command
quickly create ubuntu-application rockpaper
As soon as you pressure the enter button you will see a window appear with the header “rockpaper” and some dummy text and an image. This is simply the UI window for the game we are about to create. As I mentioned before quickly is a command line application development tool. The command quickly create ubuntu-application rockpaper creates a separate directory named rockpaper with all necessary files inside it.
Moving on to the another step, close the window we just created and type the following command onto the fresh terminal.
This command leads you to the directory rockpaper that was just created. It is possible to access our application only from the directory where it exists and can make necessary changes.
Now type in the following command while inside the directory rockpaper
The above command opens a powerful tool named glade which we will be using to make physical changes to the game. You can remove all the windows except the one that reads “RockpaperWindow.ui” . The dummy text and the image makes no sense to our application therefore you can remove those items. To do so click the respective field and press delete from your keyboard.
On the left corner of the glade interface under the “Control and Display” option choose “button” (probably the first one) and place it on the upper portion of the window below the file,edit,view,etc menu. When done assure the button is click-able. Now click on the button field and on the right hand side you must see properties tab. Go to general and rename it to rock. Scroll down to find label with optional image. Now inside it in the label erase it so that nothing appears in the click-able button. In the image widget below label option click the … present at the right end and check mark whatever appears in the new window and press ok. After doing so right click the button created and press the edit separately option. In general section you may find edit image option and inside it check the box saying file name from where you can now import image of your choice that’s present in the ui folder inside data folder of directory rockpaper. Before you do this make sure you have image inside the ui folder thats present inside the data folder of rockpaper directory. You may randomly get image of rock, paper and scissors from google and make sure you have these images inside the above mentioned folder.
When done press (crrl+s) to save the file. Lets test whether this works or not.
Go to the terminal and type in the following command but make sure you are inside the rockpaper directory if not type in this command
Check to see whether it is click-able or not. If it works fine then close the window and get back to the designer window(glade) to complete the game. Ready to go? Lets start off then 🙂
Adding another click-able image to the glade window is no different then what we did in the first attempt while adding click-able image of rock.
Pick the button present in the control and display section and place it on the area below the image of rock. Now rename it to paper in the general properties tab on the right hand side. Under the label with optional image section erase the label and click the image widget and in the new window press new. Now we’re going to add image of paper. For this right click on the button and select edit separately and in general section choose file option to find your image.
Adding click-able image of the scissors
By this time you may have noticed that there are no empty boxes available. Where on the earth shall we put our next button. For this on the right top click on the vbox. In the general tab of the properties increse number of items by 1. Now repeat the previous step to add button and image.
Go to the terminal and type in the following command:
Done with the designing stuff. In the terminal window type in the following command:
Now this opens a multiple tab window. For your ease remove all the tabs except the one reading rockpaperwindow.py
return “it’s a tie”
return “you lose”
return “you win”
return “you lose”
return “you win”
return “you lose”
return “you win”
This is the code for the rock paper scissors game which we need to embeed into the quickly edit rockpaper window.
Add the above code above the class definition as shown in the image below
Now final step to deal with. Making use of the function.
Now under the comment codes for other initialization action should be added here, place the following code. You may see the image below for making sure you added the code correctly. This code defines the objects created inside the window.
self.rock = self.builder.get_object(“rock”)
self.paper = self.builder.get_object(“paper”)
self.scissors = self.builder.get_object(“scissors”)
Make sure the naming of the buttons are rock, paper and scissors respectively. These are the class objects. We need a function to run when these buttons are pressed. Therefore we need to define the function to handle the class objects inside the window class.
Almost done, a couple of codes to add and we’re done.
userchoice = “rock”
userchoice = “paper”
userchoice = “scissors”
These are the function that triggers when the rock, paper or scissors button is pressed. The game_decision(userchoice,computer_choice) function is called and its return value is printed to the console. For each button different function handeles it. But make sure the indentation is valid. Watch the screenshot above to make sure you have made it. Ctrl+S and its done. Close the edit window and in the fresh terminal type in the following command:
Rock, paper or scissors? By this time you must have realized working with GUI is not much of a big deal. The code here is without indentation, please refer to the screenshots for indentation and note that indentation is important in python. Quickly ubuntu application development tool is a powerful stuff worth your time. Explore yourself. Good luck 🙂