A common way of making Graphical User Interfaces (GUIs) in Python is to use Tk via the Tkinter package. However, designing the GUI is done purely in code which means that a simple dialog window may consist of ~500 lines of code and is tedious to move or resize elements. Wouldn’t it be nice if we had a visual tool for making GUIs? A GUI for making GUIs? Enter Qt Designer (see featured image at start of post).
Qt Designer allows you to design your GUIs visually and save them in a *.ui file (which is just an XML file listing every component in your GUI and defining each component’s properties). Then, the *.ui file can be converted automatically into a Python class ready to be imported into your Python program.
This post is inspired by the tutorial by Alex Fedosov, called “Tutorial: Creating GUI Applications in Python with QT“, which uses Python 2.x, PyQt 3.x, and QT Designer 3.x and demonstrates the steps on a Linux operating system (Fedora or RedHat). I am writing this post to show what steps I took in order to use Windows 8.1 64-bit with the latest versions of Python and Qt: Python 3.4 and PyQt 5.
I am using Python 3.4, and I’m going to assume that you already have it installed. Note: I tried using Python 3.5 but it did not work with Qt – perhaps there’s a workaround but I did not explore this. I am using 64-bit Python on Windows. Qt in Python is done via a package called PyQt. PyQt contains everything you need to start building GUIs in Qt Designer for use in Python. You do not need to install Qt itself – PyQt contains the Qt Designer executable and all necessary Python packages (at least on Windows it does). I am using PyQt5 from the PyQt Downloads page, more specifically I used the 64-bit Windows installer: PyQt5-5.4.1-gpl-Py3.4-Qt5.4.1-x64.exe
Windows users may also choose to install WinPython, which is a container that contains Python, many 3rd party Python packages, PyQt, Qt Designer, a coding IDE called Spyder, and IPython. WinPython is portable, making it a great choice if you want to run multiple versions of Python or if you want an installation that won’t mess with anything else you have installed already. I highly recommend it. If you want an installation like I used in this tutorial, you can use the 64-bit Python 3.4 WinPython package.
Go ahead and download the package(s) of your choice and complete the installation (details of installation are outside the scope of this tutorial).
Verify PyQt5 Packages Installed
Once installed, you should have a directory called PyQt5 inside Python’s site-packages directory. On my system it is located in: C:\Program Files\Python34\Lib\site-packages\PyQt5. Within this directory there are library files for Python, and executables and scripts (we will use designer.exe and pyuic5.bat later).
Next, lets make sure Python has access to the PyQt5 package. Open up your favorite command line or terminal – I’m using Windows, so open Start Menu > Command Prompt (or cmd.exe), and run Python:
If that doesn’t work, try specifying the complete path to Python:
> "C:\Program Files\Python34\python.exe"
If you want to be able to simply type “python” on the command line, you should add the directory containing python.exe to your PATH.
Then, at Python’s prompt (there should be a set of “>>>” and a blinking cursor waiting for your input), type:
from PyQt5 import QtCore, QtGui, QtWidgets
If successful, you will receive no errors and be returned to Python’s “>>>” prompt, as shown below:
If you receive an error saying “No module named ‘whatever'” then probably PyQt5 was not installed properly or the site-packages directory containing PyQt5 is not in your PATH.
If you receive an error saying “ImportError: DLL load failed: The specified procedure could not be found.”, it could be that you installed a version of PyQt that is not compatible with your version of Python; For example: installing 32-bit PyQt and 64-bit python, or installing Python 3.5 and the version of PyQt made for Python 3.4. Note: the PyQt installer names what it supports in the filename, for instance “PyQt5-5.4.1-gpl-Py3.4-Qt5.4.1-x64.exe” is for Python 3.4 64-bit. Other possible solutions to the DLL error can be found here.
All set? Lets move on to making our first GUI.
Loading and Running a GUI in Python via PyQt
Most PyQt tutorials will have you create a GUI first then load it into Python. I’m going to build up the steps in reverse order: first I’ll give you an already made GUI, ensure that you can run it in Python, then have you create your own and run it in Python.
To begin, I have already designed a GUI and saved it as firstgui.ui, which you can download from: link here. Place the file in a new directory somewhere, for example “C:\myFirstQtProject\firstgui.ui” would do fine. firstgui.ui looks like the following screenshot:
Next we will convert firstgui.ui to Python code. In your favorite command prompt or terminal (cmd.exe etc), navigate to the directory where you downloaded the .ui file. For example:
> pushd "C:\myFirstQtProject\"
> pyuic5 -x firstgui.ui -o firstgui.py
or specify the complete path to pyuic5, for example:
> "C:\Program Files\Python34\Lib\site-packages\PyQt5\pyuic5.bat" -x firstgui.ui -o firstgui.py
pyuic will have generated a Python file that looks something like the following (no need to read through it, but later if you want to manually write code to make Qt widgets you may want to inspect this file):
At this point you can directly run the Python script as follows:
> python firstgui.py
which should launch a window just like the GUI screenshot above.
The following ad helps support the author of this post:
Attaching Custom Functions to GUI Events
We have a nice pretty interface, but how do we make it do useful things? This is the business logic part of building software, or at least the part bridging the GUI to the business logic.
Notice that in firstgui there is an input field in the top left, and a button labelled “add”. Lets allow a user to type something in the input field, click “add”, and have their inputted text added to the listbox. For example, it may look like this after a user has inserted three items:
To do this, create a new Python script, lets call it prog.py, as follows:
from PyQt5 import QtCore, QtGui, QtWidgets
from firstgui import Ui_myfirstgui
def __init__(self, dialog):
# Connect "add" button with a custom function (addInputTextToListbox)
txt = self.myTextInput.text()
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
dialog = QtWidgets.QDialog()
prog = MyFirstGuiProgram(dialog)
Creating your own GUI in Qt Designer
Great, now that you understand the workflow to move between .ui files and Python, we can move on to creating your own GUI. Open up Qt Designer. On my system its path is:
Adding Buttons and Other Widgets
On the left hand side of Qt Designer is a pane called the Widget Box. Simply drag any widgets you want onto your blank window. Continuing the example above, lets recreate “firstgui.ui” from scratch.
Drag the following 3 widgets from the Widget Box:
- Push Button
- List Widget
- Line Edit
Now we need to give each widget a name. You will use this name to reference the widget from within your Python script. Click on the Push Button you just added, then in Property Editor on the right hand side, edit the objectName field to be “addBtn” as shown below:
Do the same thing to name the Line Edit widget to “myTextInput” and ensure that the List Widget is named “listWidget”.
By default, our dialog has 2 buttons in the bottom: “OK” and “Cancel”. You can change this by clicking on OK or Cancel, then scroll down the list of properties in the Property Editor until you find “standardButtons”, expand this item to find a list of many buttons you can use here such as “Yes”, “No”, “Ignore”, “Cancel”, and many more.
That’s it! Save the design by clicking File > Save As…, and name your file “secondgui.ui”.
Recap: Loading and Running a GUI in Python via PyQt
To recap, the steps for converting the .ui file are:
– Create a GUI in Qt Designer and save the design. (e.g. “secondgui.ui”)
– Run pyuic5.bat, taking “secondgui.ui” as input and outputting “secondgui.py”
– Create/modify your Python script to import the class from “secondgui.py”
This concludes the tutorial. Please post questions or comments in the comment section below!
– Digging into the code of PyQt5: http://zetcode.com/gui/pyqt5/firstprograms/
– PyQt Tutorial: http://pythonthusiast.pythonblogs.com/230_pythonthusiast/categories/426_qt_pyqt_and_pyside_tutorial.html