Same GUI; Different Module

It was so much fun the first time, let’s try to do the same with PyQt5.

If you jumped in here fresh, first have a look at my series on using Pythonista and its UI module to create a GUI interface. We’ll walk through the same steps here but using the PyQt5 module, and talk about its similarities and differences. If this new series is well received, then we’ll back-track once again and do it using TKinter.

A simple GUI application

Let’s start, again, by creating a simple trial app using some simple widgets. The first screen we built before was a simple push-button to add one to a running counter. It had minimal code, thanks to the screen designer that is part of Pythonista. On my Mac or a Windows machine, PyQt5 has a standalone app called QT Designer, where we can do the same thing.

On the iPhone, we wanted to use the entire screen, but on a laptop, we really want to limit the window to a necessary size; nobody likes an app that takes over the entire screen needlessly. Using QT Designer, we can size our window to however we like.

Using QT Designer to build the window, this leaves us to write a bit more code than we had to in Pythonista UI, but still not a huge amount:

''' An example of PyQt5 '''

import sys
from PyQt5 import QtWidgets as qtw
from PyQt5 import QtGui as qtg
from PyQt5 import QtCore as qtc
from PyQt5 import uic

MW_Ui, MW_Base = uic.loadUiType('mediumQtExample.ui')

class MainWindow (MW_Base, MW_Ui):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        # define the window

        self.Add1.clicked.connect(self.add1)

        # end of definition
        self.show()

    def add1(self):
        count = int(self.Count.text()) + 1
        self.Count.setText(str(count))


if __name__ == '__main__':
    app = qtw.QApplication(sys.argv)
    mw = MainWindow()
    sys.exit(app.exec())

We import the portions of PyQt5 we need for the app (actually a bit more than we need here, but we’ll be using the rest in future apps). We then read in the PT Designer file our window is saved in. This will define the classes necessary to convert the names we used in the Designer to Python symbols so we can reference them.

PyQt5 can also convert the .ui file directly to Python which you can import into your program, but while this will speed up the interface, it means that if you want to change anything in the future, you’ll need to edit the .ui file with the Designer, and recompile it into Python code. DO NOT make the mistake of trying to edit the generated Python — if you should ever need to make a major change to the window and edit the .ui file again, you’ll need to recompile it, and all your changes will be lost.

Now, we define our MainWindow class, which inherits from the generated classes created by the .ui file. Calling .setupUi() finishes the setup needed by the generated classes and connects everything to our MainWindow.

Next, we connect an action to the button we defined. It will read the current value of the label, add one, and replace the text of the label.

We end the __init__() by calling .show(), which will display the window on the screen.

Our mainline code calls QApplication to set up the environment and the event loop. we create our MainWindow object, and then call app.exec() to begin the event loop.

This duplicates the program created in the first article of the original series, “Shifting Gears for GUI Development in Python”. As shown, the two libraries are similar, and the results are much the same. Again, both programs are eventually controlled by the active event loop, which allows the end user to control what action the program will take next.