Masthead

Qt5

Qt5 is a toolkit that makes it easy to create standard Graphical User Interfaces with Python. Qt5 was created by the Qt company but the core of Qt5 is licensed as open source. Qt is also available through Anaconda for Python 3x. There is an older library, tkinter available as a standard Python library but it does not create modern looking GUIs and is more challenging to use.

This web page and the subsequent ones will get you started creating simple GUIs with Qt. Then, I recommend this zetcode tutorial to go into more depth and the Qt5 reference documentation for learning all the details of Qt.

Note: Qt5 is a huge library that allows creating simple one-dialog utility programs or huge software applications. There are also a number of ways to use Qt5. What I have created below is what I find to be the simplest and most robust way to get started with Qt (taking into account that I've been using it for a whole six months!).

Setting Up the Application

The code below will setup a simple application with a single window. Copy and paste this code into a Python script and make sure it works. Then, try changing the size and title for the window.

########################################################################################
# A tiny program to get us started with creating GUIs based on the Qt library
########################################################################################
# import sys so we can run the program
import sys
   
# import the main classes and widgets from the Qt library
from PyQt5 import *
from PyQt5.QtWidgets import *

########################################################################################
# Main Dialog box class
########################################################################################
class MainDialogClass(QWidget):
	"""
	A very simple dialog box based utility program
	"""
	def __init__(self):
		super().__init__()
	
		# add widgets here
	
		# setup the size of the window
		self.setGeometry(200, 300, 300, 150) # x, y, width, height, in pixels
		self.setWindowTitle("My First Qt Program") # title appears in the top bar of the dialog box
	
		self.show() # display the dialog to the user
########################################################################################
# Main code
########################################################################################
# Create the app and the dialog box and then run the app until the user closes the dialog
TheApplicationObject = QApplication(sys.argv)
MainDialogObject = MainDialogClass()
sys.exit(TheApplicationObject.exec_())

Adding Layouts

Qt was created with "layouts" that will automatically layout our controls for us. This is great but it also requires a bit more work than some other approaches.

To start, we'll add a "horizontal box layout" to our dialog box. Add the code below where the comment indicates "add layout below". When you run the program, you won't see anything yet but when we add some additional items to the layout, they will appear in a hozitonal row in the dialog.

# Create a layout to organize the widgets into a horiziontal row
MainLayout = QHBoxLayout()
self.setLayout(MainLayout)  # add the layout to the main dialog object
 

Adding Controls ("Widgets")

There are a large number of user interface controls called "Widgets" that we can add to the layout.

Push Buttons

Try adding the code below the code below just before your call to "show()" in your SimpleWindow class and see what happens:

# add a push button to the layout
TheButton=QPushButton("This is a button!") # create the button and give it a text label
MainLayout.addWidget(TheButton) # add the button to the layout

Try adding a few more buttons to your dialog box.

CheckBoxes

Check boxes can be "on" or "off". Try adding the code below just after your push button code. Note that we are setting the variable "TheCheckBox" into the "self" object. This saves the checkbox object into the dialog box object so we can access it later.

 # add a check box
 self.TheCheckBox = QCheckBox('CheckBox')
 self.TheCheckBox.toggle() # turn the checkbox on
 MainLayout.addWidget(self.TheCheckBox) # add the checkbox to the layout

Labels

Add the code below after the code that creates your push button. Make sure it works and then change the position of the label and the button so they do not overlap.

# add a label
TheLabel = QLabel("Name:")
MainLayout.addWidget(TheLabel) # add the label

Text Edit Boxes

Text Edit boxes or "LineEdit" boxes in Qt allow the user to enter text such as labels, titles, descriptions, logins, and passwords. Add a LineEdit box as below and then move it to the right of your label.

 # add a line edit box
self.TheLineEdit = QLineEdit(self)
MainLayout.addWidget(self.TheLineEdit)

Combining Layouts

At this point, you may be concerned that you have controls in one line making a really wide, short dialog. Try changing the QHBoxLayout to a QVBoxLayout and see what happens. The reall power in using the layouts in Qt comes from combining layouts in different ways. As an example, we can put several QHBoxLayouts into a single QVBoxLayout to create a dialog with groups of horizointal widgets moving vertically down the dialog.

Add the code below to your dialog and then add widgets to these layouts instead of the MainLayout. Try this with a number of different widgets and then add some more layouts!

 
 HorizontalLayout1=QHBoxLayout()
 MainLayout.addLayout(HorizontalLayout1)
 
 HorizontalLayout2=QHBoxLayout()
 MainLayout.addLayout(HorizontalLayout2)
 

Connecting Widgets to Functions

Tyipcally, we'll be adding Widgets and then connecting them to a function that is called when the user interacts with the widget. Add the function below to the top of your dialog class.

def OnButtonPushed(self):
	print("A button was pushed")

Then, add the code below just below where you create the button in your code. Now, when you click the button, you should see the message print out in Debug I/O.

TheButton.clicked.connect(self.OnButtonPushed) # add this line to connect the button to a function

Now we can add additional widgets to make our dialog more interesting and to get information from the user.

Getting Information from the User

A typical dialog will present a number of Widgets to the user and then have a push button, often labeled "OK", to start some action based on the settings in the Widgets. Let's take the text and have it display in our message box when the user clicked on our push button. First, we have to save the LineEdit object into the window so we can access it in the OnCheckBox function. This is done by saving the object into the "self" object which is the same as the object for the window. Change the TextEdit code to put the LineEdit object into self as below.

# add a line edit box
 self.TheLineEdit = QLineEdit(self) # save the line edit object into the windows object (i.e. it's "self")
 HorizontalLayout2.addWidget(TheLineEdit)
 

Now we can access the LineEdit object from within the OnButtonPushed() function as below.

 TheText=self.TheLineEdit.text()
 print("The text you entered is: "+TheText); # print the contents of the line edit widget
 

Next, if we add a label for output and save it to self, we can access it within our button function. First add the following to our widget code:

# add a label for outputing values
self.OutputLabel = QLabel("") # start with this being blank
HorizontalLayout2.addWidget(self.OutputLabel) # add the label

Then, in our button function we can display text to the user when the button is clicked. This allows us to create GUIs where the user can enter values, we can then perform a wide variety of calculations on the values, and then output the results back to the user.

# do some calculations
   
# output the results to a label
self.OutputLabel.setText("hi")

Combination Boxes

A combination box or "ComboBox" includes a text edit field and a popup menu.

 TheItems=["one","two","three"] # an array with the items for the combo box 
 self.TheComboBox = QComboBox(self) # create the combo box 
 for TheItem in TheItems: self.TheComboBox.addItem(TheItem) # add the items from the array 
 HorizontalLayout2.addWidget(TheLineEdit) # add the combobox to a layout

Sliders

A slider allows the user to select values along a continum from a minimum to a maximum value.

 #add a slider
 TheSlider = QSlider(Qt.Horizontal, self)
 TheSlider.setMinimum(-180)
 TheSlider.setMaximum(180)
 TheSlider.setValue(0)
 TheSlider.setGeometry(80,190, 100, 30)

Qt Message Boxes

Qt provides an easy to use way to create simple message boxes to provide errors, warnings, and other information to the user.

def OnButtonPushed(self):
  TheMessageBox=QMessageBox() # create the message box
  TheMessageBox.setText("The button has been pushed"); # set the contents of the box
	TheMessageBox.exec(); # display the box to the user

Creating a Small Application

There is a lot more to learn about creating user interfaces with Qt but you now have all you need to create a small utility that provides useful features to users.

Additional Widgets

There are a large number of different widgets available in Qt. Check out the resources below for additional information.

Resources

ZetCode Qt Tutorial - Excellent tutorial on building GUIs with Qt

Qt Documentation

 

© Copyright 2018 HSU - All rights reserved.