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

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

import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
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

  • 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

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py
  • Line 5: We are importing the mainDialog.py 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

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...))                                                                                                                                                                                                 
Latest Forex rates when compared to 1 Philippine Peso

Adding a Configuration File

  • Opening a new window within the program
  • Creating and using a configuration file
cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py
  • 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

Our final product
Final project folder structure

Final Thoughts

--

--

--

Researcher working on geospatial sciences and general programming

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Four Steps of Compilation using gcc

The Ember CPU — Initial Design Part 6: Jumps and Conditional Branches

Branches in a tree

Removing SQL from your Spring Boot code

Flutter Thursday 11: Successful purchase detail page with Modal Bottom Sheet.

How to scrape ANY website with python and beautiful soup

python beautiful soup tutorial for scraping hackathons

Google Season of Docs: CHAOSS Project under The Linux Foundation — Week 12

aXpire Launches Bilr 2.0, A SaaS Legal Billing Software

AsynTaskLoaders in Android

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

More from Medium

Choosing names with Python

Convert your text file into CSV using Python

Set up python environment (with TensorFlow) on M1 Mac

Python Basics: 09 bitwise operators