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!).
Note: The bindings for Qt5 are PyQt5 or PySide2. The HSU vlab currently uses the PySide2 library so you will need to replace PyQt5 below with PySide2
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 PySide2 on the HSU vlab. from PyQt5.QtWidgets import * from PyQt5.QtCore import *
from PyQt5.QtGui 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_())
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
There are a large number of user interface controls called "Widgets" that we can add to the layout.
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.
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
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 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)
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)
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.
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")
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(self.TheComboBox) # add the combobox to a layout
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) HorizontalLayout2.addWidget(TheSlider) # add the slider to a layout
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
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.
There are a large number of different widgets available in Qt. Check out the resources below for additional information.
ZetCode Qt Tutorial - Excellent tutorial on building GUIs with Qt
© Copyright 2018 HSU - All rights reserved.