quickly python tutorial – Working with GUI

- - Python, Tutorials

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

quickly

Lets get started

creating_app

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.

 

Cd rockpaper

 

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

 

quickly design

rockpaper03

 

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.

rockpaper_04

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

cd rockpaper

 

quickly run

rockpaper_05

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.

rockpaper_9

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:

cd rockpaper

quickly run

rockpaper000

Done with the designing stuff. In the terminal window type in the following command:

cd rockpaper

quickly edit

 

Now this opens a multiple tab window. For your ease remove all the tabs except the one reading rockpaperwindow.py

 

import random

def computer_choice():

computer_choice=random.random()

if computer_choice<=0.33:

computer_choice=”rock”

elif computer_choice<=0.66:

computer_choice=”paper”

else:

computer_choice=”scissors”

return computer_choice

 

def game_decision(userchoice,computer_choice):

if userchoice==computer_choice:

return “it’s a tie”

elif userchoice==”rock”:

if computer_choice==”paper”:

return “you lose”

else:

return “you win”

elif userchoice==”paper”:

if computer_choice==”scissors”:

return “you lose”

else:

return “you win”

elif userchoice==”scissors”:

if computer_choice==”rock”:

return “you lose”

else:

return “you win”

else:

return “invalid”

 

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

rockpaper001

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”)

rockpaper002

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.

 

def on_rock_clicked(self,widget):

userchoice = “rock”

print game_decision(userchoice,computer_choice())

 

 

 

def on_paper_clicked(self,widget):

userchoice = “paper”

print game_decision(userchoice,computer_choice())

 

 

def on_scissors_clicked(self,widget):

userchoice = “scissors”

print game_decision(userchoice,computer_choice())

rockpaper002

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:

cd rockpaper

quickly run

rockpapermade

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 🙂

Bhishan Bhandari [22] Brewing contents directly from the Himalayas of Nepal. I am a hobbyist programmer and enjoy writing scripts for automation. If you'd like a process to be automated through programming, I also sell my services at Fiverr . Lately, I like to refresh my Quora feeds. Shoot me messages at bbhishan@gmail.com  

There Are 3 Comments On This Article.

  1. It would be clear if you had indented the block of codes. Liked the way you worked with functions reducing global declarations. Neat practice 🙂

  2. You really make it seem so easy with your presentation however I
    find this topic to be actually one thing that I believe I would never understand.

    It sort of feels too complicated and extremely extensive for me.
    I am having a look forward for your subsequent publish, I’ll attempt to get the hang of
    it!

  3. I’m currently trying to decide between learning python and something like JS+html+CSS (Electron) for some personal, hobby programming. Would love to create a few GUI-based programs in time and python seemed so far out in this realm. These types of tutorials (with real programming examples) are extremely helpful – moreso than you might realize.

    Also, I’d much rather stick with python given that it’s built to be more useful for terminal programs too. Thanks for an easy to follow sample. Hopefully “Quickly” is still being maintained. Seems like a great working framework.

Leave a Reply

Your email address will not be published. Required fields are marked *