Py Qt5 Manual Ex1
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 5
| Download | |
| Open PDF In Browser | View PDF |
7/17/2018
2.6.1.1 Example 1 | GEOG 489: GIS Application Development
GEOG 489
GIS APPLICATION DEVELOPMENT
HOME
SYLLABUS
LESSONS
CANVAS
RESOURCES
LOGIN
2.6.1.1 Example 1
Print
Let’s start by just producing a simple window that has a title and displays some
simple text via a label widget as shown in the image below.
GEOG 489: GIS
Application
Development
Search
Lessons
Lesson 1 Python 3,
ArcGIS Pro &
Multiprocessing
Lesson 2 GUI
Development with
PyQt5 and Package
Management
Figure 2.13 First version of the Example 1 GUI with a QLabel widget located
at xed coordinates within the parent widget
Thanks to PyQt5, the code for producing this window takes only a couple of
lines:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
?
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QLabel
app = QApplication(sys.argv)
window = QWidget()
window.resize(400,200)
window.setWindowTitle("PyQt5 example 1")
label = QLabel("Just a window with a label!", window)
label.move(100,100)
window.show()
sys.exit(app.exec_())
Try out this example by typing or pasting the code into a new Python script and
running it. You should get the same window as shown in the image above. Let’s
brie y go through what is happening in the code:
First of all, for each Python program that uses PyQT5, we need to create
an object of the QApplication class that takes care of the needed
initializations and manages things in the background. This happens in
line 4 and we store the resulting QApplication object in variable app. At
the very end of the program after setting up the di erent GUI elements,
we use app.exec_() to call the exec_() method of the application object to
run the application and process user input. The return value is used to
exit the script by calling the sys.exit(…) function from the Python
standard library. These are things that will look identical in pretty much
any PyQT application.
Most visible GUI elements (windows, button, text labels, input elds, etc.)
in QT are derived in some way from the QWidget class and therefore
called widgets. Widgets can be containers for other widgets, e.g. a
window widget can contain a widget for a text label as in this example
here. We are importing the di erent widgets we need here together with
the QApplication class from the PyQt5.Widgets module in line 2. For our
window, we directly use a QWidget object that we create in line 6 and
store in variable window. In the following two lines, we invoke the
resize(…) and setWindowTitle(…) methods to set the size of the window in
terms of pixel width and height and to set the title shown at the top to
“PyQt5 example 1”. After creating the other GUI elements, we call the
show() method of the widget in line 13 to make the window appear on
the screen.
https://www.e-education.psu.edu/geog489/node/2228
2.1 Overview
and Checklist
2.2 List
comprehension
2.3 Accessing
and working
with web data
2.4 GUI
programming
basics
2.5 GUI options
for Python
2.6 GUI
development
with QT5 and
PyQt5
2.6.1 The
manual
approach
2.6.1.1
Example
1
2.6.1.2
Example
2
2.6.1.3
Example
3
2.6.2
Creating
GUIs with
QT
Designer
2.7
Walkthrough 1:
Building a GUIbased tool to
create features
from querying
web services
2.8 Packages
2.9 Lesson 2
Practice
Exercises
1/5
7/17/2018
2.6.1.1 Example 1 | GEOG 489: GIS Application Development
The content of the window is very simple in this case and consists of a
single QLabel widget that we create in line 10 providing the text it should
display as a parameter. We then use a xed coordinate to display the
label widget at pixel position 100,100 within the local reference frame of
the containing QWidget. These coordinates are measured from the top
left corner of the widget’s content area.
That’s all that’s needed! You will see that even if you resize the window, the
label will always remain at the same xed position. As we already pointed out in
Section 2.4.2, using absolute coordinates has a lot of disadvantages and rarely
happens when building GUIs. So let’s adapt the example code to use relative
layouts and alignment properties to keep the label always nicely centered in the
middle of the window. Here is the code with the main changes highlighted:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
?
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QLabel,
from PyQt5.QtCore import Qt
2.10 Lesson 2
Assignment
Lesson 3 Python
Geo and Data
Science Packages &
Jupyter Notebooks
Final Project
Proposal
Assignment
Lesson 4 ObjectOriented
Programming in
Python and Plugin
Development for
QGIS
Term Project
app = QApplication(sys.argv)
window = QWidget()
window.resize(400,200)
window.setWindowTitle("PyQt5 example 1")
layout = QGridLayout(window)
Who's online
There are currently 0
users online.
label = QLabel("Just a window with a label (now perfectly
label.setAlignment(Qt.AlignCenter)
layout.addWidget(label,0,0)
window.show()
sys.exit(app.exec_())
Try out this modi ed version and see whether you notice the change. Here is an
explanation:
For this simple example, di erent layouts would have worked, but we
here use a QGridLayout for the window content that allows for arranging
the child elements in a table–like way with the rows and columns being
resized automatically to arrange everything in an optimal way given the
available space. The grid layout object is created in line 11 and stored in
variable layout. By providing window as the parameter, it is directly
applied to manage the child elements of our window widget.
The cells in the grid are accessed via their row and column indices
starting from zero. In this example, we only have a single cell that will
span the entire window. We add the label widget to this cell by calling the
addWidget(…) method of the grid layout in variable layout and providing
the coordinates 0,0 of the top left cell.
Without any further changes, the label would now appear vertically
centered in the window because that is the default policy for the cells in a
grid layout, but horizontally adjusted to the left. To also make the label
appear horizontally centered, we use its setAlignment(…) method with
the constant Qt.AlignCenter that is de ned in the PyQt5.QtCore module
which we are also importing at the beginning.
If you tried out the modi ed example, you will have noticed that the label now
always remains in the center independent of how you resize the window. That
is the result of the grid layout manager working in the background to rearrange
the child elements whenever the size is changed.
As a further extension of this example, let us make things a bit more interesting
and bring in some interactions by adding a button that can be used to close the
application as an alternative to using the close icon at the top. The widget
needed to implement such a button is called QPushButton. We will add the
button to cell 1,0 which is the cell in row 1 and column 0, so below the cell
containing the label. That means that the grid layout will now consist of one
column and two rows. Here is the modi ed code with the main changes
highlighted:
1
2
3
4
5
6
7
8
9
10
11
?
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QLabel,
from PyQt5.QtCore import Qt
app = QApplication(sys.argv)
window = QWidget()
window.resize(400,200)
window.setWindowTitle("PyQt5 example 1")
layout = QGridLayout(window)
https://www.e-education.psu.edu/geog489/node/2228
2/5
7/17/2018
2.6.1.1 Example 1 | GEOG 489: GIS Application Development
12
13
14
15
16
17
18
19
20
21
22
23
24
25
label = QLabel("Just a window with a label (now perfectly
label.setAlignment(Qt.AlignCenter)
layout.addWidget(label,0,0)
button = QPushButton("Close me")
button.setToolTip('This is a QPushButton widget. Cl
layout.addWidget(button,1,0)
button.clicked.connect(app.quit)
window.show()
sys.exit(app.exec_())
Please note how the push button widget is created in line 17 providing the text
it will display as a parameter. It is then added to the layout in line 19. In
addition, we use the setToolTip(…) method to specify the text that should be
displayed if you hover over the button with the mouse. This method can be
used for pretty much any widget to provide some help text for the user. The
interesting part happens in line 21: Here we specify what should actually
happen when the button is pressed by, in QT terminology, “connecting a signal
(button.clicked) of the button to a slot (app.quit) of the application object”. So if
the button is clicked causing a “clicked” event, the method quit(…) of the
application object is called and the program is terminated as a result. Give this
example a try and test out the tooltip and button functionality. The produced
window should look like in the image below:
Figure 2.14 Third version of the Example 1 GUI, now with a button to close
the application and tooltip information
As you probably noticed, the button right now only takes up a xed small
amount of space in the vertical dimension, while most of the vertical space is
taken by the cell containing the label which remains centered in this area.
Horizontally, the button is expanded to always cover the entire available space.
This is the result of the interplay between the layout policies of the containing
grid layout and the button object itself. By default, the vertical policy of the
button is set to always take up a xed amount of space but the horizontal
policy allows for expanding the button. Since the default of the grid layout is to
expand the contained objects to cover the entire cell space, we get this very
wide button.
In the last version of this rst example, we are therefore going change things so
that the button is not horizontally expanded anymore by adding a
QHBoxLayout to the bottom cell of the grid layout. This is supposed to illustrate
how di erent widgets and layouts can be nested to realize more complex
arrangements of GUI elements. In addition, we change the code to not close the
application anymore when the button is clicked but instead call our own
function that counts how often the button has been clicked and displays the
result with the help of our label widget. A screenshot of this new version and
the modi ed code with the main changes highlighted are shown below.
https://www.e-education.psu.edu/geog489/node/2228
3/5
7/17/2018
2.6.1.1 Example 1 | GEOG 489: GIS Application Development
Figure 2.15 Fourth version of the Example 1 GUI with the button being part of
a horizontal layout set up to keep it from horizontally expanding more than
needed
Source code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import sys
?
from PyQt5.QtWidgets import QWidget, QApplication, QLabel,
from PyQt5.QtCore import Qt
def buttonClickedHandler(c):
global counter
counter += 1
label.setText('Thank you for clicking the button ' +
app = QApplication(sys.argv)
window = QWidget()
window.resize(400,200)
window.setWindowTitle("PyQt5 example 1")
layout = QGridLayout(window)
label = QLabel("Just a window with a label (now perfectly
label.setAlignment(Qt.AlignCenter)
layout.addWidget(label,0,0)
button = QPushButton("Click me")
button.setToolTip('This is a QPushButton widget. Cl
horLayout = QHBoxLayout()
horLayout.addStretch(1)
horLayout.addWidget(button)
horLayout.addStretch(1)
layout.addLayout(horLayout,1,0)
button.clicked.connect(buttonClickedHandler)
counter = 0
window.show()
sys.exit(app.exec_())
In addition to the highlighted changes, there are a few very minor changes to
the text displayed on the button and its tooltip. Let us rst look at the changes
made to implement the counting when the button is pressed. Instead of
directly connecting the button.clicked signal to the slot of another QT element,
we are connecting it to our own function buttonClickedHandler(…) in line 32. In
addition, we create a global variable counter for counting how often the button
has been clicked. When it is clicked, the buttonClickedHandler(…) function
de ned in lines 6 to 9 will be called, which rst increases the value of the global
counter variable by one and then uses the setText(…) method of our label
object to display a message which includes the number of button presses taken
from variable counter. Very simple!
Now regarding the changes to the layout to avoid that the button is expanded
horizontally: In principle, the same thing could have been achieved by
modifying the horizontal layout policy of the button. Instead, we add a new
layout manager object of type QHBoxLayout to the bottom cell of the grid
layout that allows for arranging multiple widgets in horizontal order. This kind
of layout would also be a good choice if, for instance, we wanted to have
several buttons at the bottom instead of just one, all next to each other. In line
26, we create the layout object and store it in variable horLayout. Later in line
30, we add the layout to the bottom cell of the grid layout instead of adding the
button directly. This is done using the addLayout(…) method rather than
addWidget(…).
https://www.e-education.psu.edu/geog489/node/2228
4/5
7/17/2018
2.6.1.1 Example 1 | GEOG 489: GIS Application Development
In between these two steps, we add the button to the new horizontal layout in
horLayout in line 28. In addition, we add horizontal stretch objects to the layout
before and after the button in lines 27 and 29. We can think of these objects as
springs that try to take up as much space as possible without compressing
other objects more than these allow. The number given to the addStretch(…)
method is a weight factor that determines how multiple stretch objects split up
available space between them. Since we use 1 for both calls of addStretch(…),
the button will appear horizontally centered and just take up as much space as
needed to display its text. If you want to have the button either centered to the
left or to the right, you would have to comment out line 27 or line 29,
respectively. What do you think would happen if you change the weight number
in line 27 to 2, while keeping the one in line 29 as 1? Give it a try!
‹ 2.6.1 The manual approach
up
2.6.1.2 Example 2 ›
Authors and/or Instructors: James O'Brien, John A. Dutton e-Education Institute, College of Earth and Mineral Sciences, The Pennsylvania
State University
Jan Oliver Wallgrün, John A. Dutton e-Education Institute, College of Earth and Mineral Sciences, The Pennsylvania State University
Jim Detwiler, John A. Dutton e-Education Institute, College of Earth and Mineral Sciences, The Pennsylvania State University
Andrew Murdoch, John A. Dutton e-Education Institute, College of Earth and Mineral Sciences, The Pennsylvania State University
This courseware module is part of Penn State's College of Earth and Mineral Sciences' OER Initiative.
Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0
International License.
The College of Earth and Mineral Sciences is committed to making its websites accessible to all users, and welcomes comments or
suggestions on access improvements. Please send comments or suggestions on accessibility to the site editor. The site editor may also be
contacted with questions or comments about this Open Educational Resource.
Navigation
Home
News
About
Contact Us
Programs and
Courses
People
Resources
Services
Login
The John A. Dutton e-Education Institute is the
learning design unit of the College of Earth and
Mineral Sciences at The Pennsylvania State
University.
EMS
Programs
College of Earth
and Mineral
Sciences
Department of
Energy and
Mineral
Engineering
Department of
Geography
Department of
Geosciences
Department of
Materials Science
and Engineering
Department of
Meteorology and
Atmospheric
Science
Earth and
Environmental
Systems Institute
Related Links
Online
Geospatial
Education
Programs
Dutton
Community
Yammer
Group
iMPS in
Renewable
Energy and
Sustainability
Policy
Program
Office
Penn State
Digital
Learning
Cooperative
BA in Energy
and
Sustainability
Policy
Program
Office
Penn State
World Campus
Web Learning
@ Penn State
M.Ed. in Earth
Sciences
Program
Office
Energy Institute
Institute for
National Gas
Research
2217 Earth and Engineering Sciences Building, University
Park, Pennsylvania 16802
Contact Us
https://www.e-education.psu.edu/geog489/node/2228
Privacy & Legal Statements | Copyright
Information
The Pennsylvania State University ©
2018
5/5
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.4 Linearized : No Warning : Invalid xref tableEXIF Metadata provided by EXIF.tools