Building a Python GUI with PyQt Designer

  • A configuration file for custom user settings
  • Multiple windows within the program
  • Adding functions to buttons, input boxes, and other clickable items
  • Pictures and logos

Setting up the Python Environment

We will be using Python 3.6 in this tutorial and I will be creating this tutorial in a virtual environment using Windows 10. In this tutorial we will only need to install PyQt5 for the GUI and requests for our sample project. This will be done using pip. It is important to note that Designer does not come with the pip PyQt5 installation and has to be installed separately. The code block below shows the commands that you need to type:

pip install PyQt5
pip install PyQt5Designer
pip install requests
Output of the pip install process for PyQt5
Search for “Designer” and it should pop up

Currency Data

We can get free Forex data from ExchangeRate-API which conveniently has a API we can use. The API returns a JSON object with the currency information which can be navigated using a Python dictionary. The exchange rates are based on the master currency you specify.

import requestsurl = ''
response = requests.get(url)
data = response.json()
# The data variable will look like the dictionary below
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.

Creating the GUI

Now comes the fun part. Creating the GUI!

  • Labels
  • Push Button
  • Line Edit
  • Combo Box
Populate the widget by clicking the green addition button on the bottom left
objectName (highlighted in red) will be the variable name when we work with the Python code
My beautiful GUI

Qt Designer to Python

Save the UI file in your project folder as “mainDialog.ui”, I like to create a sub-folder called “ui” and then save it there so we can keep the project folder organized.

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o
  • Line 5: We are importing the file from inside the ui sub-folder. I use an alias “mainDialog” to make the naming easier.
  • Line 10: This class holds all the functions related to your mainDialog window which you just made. The first argument calls on the QDialog object which is the type of GUI we are using. The second argument is based on the alias we declared and it is the Ui_Dialog class inside Python file that was generated from the .ui file conversion
  • Line 12: The __init__ function is important because it is the code you want to run when the program starts up. So this is where the self.setupUi(self) comes in because you want the UI to run when you open the program. We will be putting stuff like loading configuration files and button functionality here because we want them to work as soon as we run the software.
  • Line 20: This is the code that executes and opens the GUI.

Adding Functions to the Buttons and Objects

Now we have our beautiful GUI. How do we make it do Forex? Let’s add the function to load the latest Forex rates which I showed in the beginning of this post. Then, let’s put in the code to connect the objects to the Python code.

Latest Forex rates when compared to 1 Philippine Peso

Adding a Configuration File

This part is a little tricky and is where your existing Python knowledge will be useful. In this section we will cover the following features:

  • Opening a new window within the program
  • Creating and using a configuration file
cd "your/ui/folder/here"
pyuic5 configDialog.ui -o
  • Line 6: We add the the config dialog window through this import statement
  • Line 10–11: New import statements that are relevant for having a nice config file workflow. pickle and os both come with your default Python environment and do not need additional installations.
  • Line 13–14: The location of the configuration file is used all throughout the script in all the classes so we declare it as a global and make it all-caps since it is a constant.
  • Line 17: This class holds all relevant information for the config window. If you want to call objects in the config UI file you made it is recommended that the call is made in this class, not the MainDialog class.
  • Line 23: We load the existing configuration file. We do this so that we can show what is the current setting to the user.
  • Line 26: Using the loaded configuration file, we set the combo box text to whatever the current setting is.
  • Line 33: When we save the config, we want to update the dictionary stored in self.config before writing the config file.
  • Line 39: This closes the config parameter window.
  • Line 48–54: This is the logic when loading the config file in the main dialog window. For whatever reason, the config file may go missing and then the program will not launch due to errors. If the config file is missing, create a config file with default parameters so that user can still launch the program and then modify the parameters later.
  • Line 56: We load the custom settings and set the Combo Box to the user’s preferred currency.
  • Line 62–63: This launches the config parameter window. This is based on the name of the config dialog class name. In this case, the class is named ConfigParameters.
  • Line 65–68: After the user is done configuring their settings and the window is closed. The program will update itself and load the config file again before updating the reference currency combo box.

Adding images

Now you have a fully functional program, let’s add the finishing touches: a logo. While there can be a PyQt resource file where you can store images, I prefer to just load images using labels and pixmaps. This is very quick.

Our final product
Final project folder structure

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. I spent countless hours googling these things and even paid tutorials on Udemy were a bit useless.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Panji Brotoisworo

Panji Brotoisworo

Researcher working on geospatial sciences and general programming