Qt5 is a toolkit that makes it easy to create standard Graphical User Interfaces with Python. Qt5 was created by the Qt company but is licensed as open source.
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.
# import sys so we can access the command-line arguments import sys # import all the Qt5 classes we are going to be using from PyQt5 import * from PyQt5.QtWidgets import * from PyQt5.QtCore import Qt from PyQt5.QtGui import * # the window class definition class SaimpleWindow(QWidget): # inherits from QWidget def __init__(self): super().__init__() # call the superclass (QWidget) to initialize # setup the window self.setGeometry(300, 300, 800, 800) # move and size the window (Left, Top, Width, Height) self.setWindowTitle('Sample Application') # set the window title # show the window self.show() # display the window to the user # the main code TheApplication = QApplication(sys.argv) # Create the application object TheWindow = SaimpleWindow() # create the window sys.exit(TheApplication.exec_()) # run the application until it is closed by the user
There are a large number of user interface controls called "Widgets" that we can add to the window. Add the code below just before your call to "show()" in your SimpleWindow class and see what happens:
# add a push button UpdateButton = QPushButton('Update', self) # create the button and give it a text label UpdateButton.move(5,0) # set the position of the button.
Try changing the text and the position of the button.
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 and then "connect" it to your button as shown:
# add a push button UpdateButton = QPushButton('Update', self) # create the button and give it a text label UpdateButton.move(5,0) # set the position of the button. UpdateButton.clicked.connect(self.OnButtonPushed) # add this line to connect the button to a function
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
Make sure the code works and then change the message in the box.
Now we can add additional widgets to make our dialog more interesting and to get information from the user.
Add the code below just after your push button code and then reposition the widgets.
# add a check box self.TheCheckBox = QCheckBox('CheckBox', self) self.TheCheckBox.toggle() # turn the checkbox on self.TheCheckBox.move(5, 100) # set the checkbox's position
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:", self) TheLabel.move(5,130)
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 TheLineEdit = QLineEdit(self) TheLineEdit.move(60, 40)
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") self.TheLineEdit.move(60, 40) # use the saved object
Now we can access the LineEdit object from within the OnButtonPushed() function as below.
TheText=self.TheLineEdit.text() TheMessageBox.setText("The text you entered is: "+TheText); # set the contents of the box
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 self.TheComboBox.move(80,160) # position the ComboBox
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)
From here, you just need to:
You can also put the results back into a label in the dialog if you like.
There are a large number of different widgets available in Qt. Check out the resources below for additional information.
Qt Tutorial - Excellent tutorial on building GUIs with Qt