Displaying an image using PyQt5 in Python
In this post, I will specifically be demonstrating to you the use of a QGraphicsView() widget in PyQt5. I’ll be using Python 3.7 and the versions of other modules are as follows:
PyQt5: '5.13.0' Python: '3.7.4 (tags/v3.7.4:e09359112e, Jul 8 2019, 19:29:22) [MSC v.1916 32 bit (Intel)]'
Ways To view image using Python and PyQt5
The first thing you have to do, to view any image on any PyQt5 window, is you have to use the QPixmap function from PyQt5.QtGui.
from PyQt5.QtGui import QPixmap
Now, you have to load an image using QPixmap.
For this, you can either create an instance of the QPixmap function and then load the image using the .load() attribute of QPixmap():
pix = QPixmap() pix.load(image_path)
Or, you can Directly pass the image_path to the QPixmap function, like this:
Up to this was the loading of the image located in your Device. Now to display the loaded image, we have two common options. Either we can use QGraphicsViewer or we can use QLabel widget to display the image to the PyQt5 window.
Displaying the loaded Image:
label_image = QLabel() label_image.setPixmap(QPixmap(image_path))
(Note: Viewing Image file using QLabel requires setting up of a proper layout and central widget for the window)
Using QGraphicsView() widget:
pix = QPixmap(image_path) item = QWidgets.QGraphicsPixmapItem(pix) scene = QWidgets.QGraphicsScence(self) scene.addItem(item) self.ui.graphicsView.setScene(scene)
Here, graphicsView widget can be created using:
graphicsView = QtWidgets.QGraphicsView(Dialog)
You can see the full demonstration of the latter option in the below image viewer application.
Overview of the Working of the Application
On this application, you can view any image located on your computer. You have to just put the image file path and press the “open” button to see the picture.
I will design the layout of my GUI window using the Qt Designer. Then convert the generated .ui file to Python file using pyuic5 command utility! The design will look like this:
As this is a very basic image opener, I have used some simple widgets. It has 1 LineEdit widget 1 PushButton and 1 GraphicsViewer widget.
Generating the Python file from the .ui file
Open the terminal and move to the directory where your .ui file is saved. And use this command:
pyuic5 image_viewer.ui -o image_viewer.py
It will generate a Python file in the same directory (image_viewer.py). Create a new Python file in the same directory and name it “call_image_viewer.py” and edit that file to import the generated Python file(image_viewer). And also to assign an event to the clicking of the open button as follows:
from image_viewer import * from PyQt5.QtWidgets import QApplication, QDialog from PyQt5.QtGui import QPixmap import os import sys class My_Application(QDialog): def __init__(self): super().__init__() self.ui = Ui_Dialog() self.ui.setupUi(self) self.ui.pushButton.clicked.connect(self.checkPath) print(self.checkPath()) def checkPath(self): image_path = self.ui.lineEdit.text() if os.path.isfile(image_path): scene = QtWidgets.QGraphicsScene(self) pixmap = QPixmap(image_path) item = QtWidgets.QGraphicsPixmapItem(pixmap) scene.addItem(item) self.ui.graphicsView.setScene(scene) if __name__ == '__main__': app = QApplication(sys.argv) class_instance = My_Application() class_instance.show() sys.exit(app.exec_())
A short overview of the “ call_image_viewer.py ” file.
I have simply created an instance of the first Python file and call that instance to tract the mouse clicking event on the pushButton widget. As a result of this, as soon as you press the open button the control moves to the checkPath () method and checks if the provided path is valid or not. And finally opens the image file, as shown:
The two complete codes are as follows:
from PyQt5 import QtCore, QtGui, QtWidgets class Ui_Dialog(object): def setupUi(self, Dialog): Dialog.setObjectName("Dialog") Dialog.resize(766, 569) self.label = QtWidgets.QLabel(Dialog) self.label.setGeometry(QtCore.QRect(30, 20, 61, 21)) self.label.setObjectName("label") self.lineEdit = QtWidgets.QLineEdit(Dialog) self.lineEdit.setGeometry(QtCore.QRect(100, 20, 641, 20)) self.lineEdit.setObjectName("lineEdit") self.graphicsView = QtWidgets.QGraphicsView(Dialog) self.graphicsView.setGeometry(QtCore.QRect(25, 71, 721, 491)) self.graphicsView.setSizeIncrement(QtCore.QSize(0, 0)) self.graphicsView.setFrameShadow(QtWidgets.QFrame.Raised) self.graphicsView.setSizeAdjustPolicy(QtWidgets.QAbstractScrollArea.AdjustToContentsOnFirstShow) self.graphicsView.setAlignment(QtCore.Qt.AlignJustify|QtCore.Qt.AlignVCenter) self.graphicsView.setObjectName("graphicsView") self.pushButton = QtWidgets.QPushButton(Dialog) self.pushButton.setGeometry(QtCore.QRect(670, 40, 75, 23)) self.pushButton.setObjectName("pushButton") self.retranslateUi(Dialog) QtCore.QMetaObject.connectSlotsByName(Dialog) def retranslateUi(self, Dialog): _translate = QtCore.QCoreApplication.translate Dialog.setWindowTitle(_translate("Dialog", "Image Viewer")) self.label.setText(_translate("Dialog", "Image Path")) self.pushButton.setText(_translate("Dialog", "open")) from image_viewer import * from PyQt5.QtWidgets import QApplication, QDialog from PyQt5.QtGui import QPixmap import os import sys class My_Application(QDialog): def __init__(self): super().__init__() self.ui = Ui_Dialog() self.ui.setupUi(self) self.ui.pushButton.clicked.connect(self.checkPath) def checkPath(self): image_path = self.ui.lineEdit.text() if os.path.isfile(image_path): scene = QtWidgets.QGraphicsScene(self) pixmap = QPixmap(image_path) item = QtWidgets.QGraphicsPixmapItem(pixmap) scene.addItem(item) self.ui.graphicsView.setScene(scene) if __name__ == '__main__': app = QApplication(sys.argv) class_instance = My_Application() class_instance.show() sys.exit(app.exec_())
Images/QPixmap
This PyQt5 tutorial will show you how to display images using something called a QPixmap.
Displaying an Image
For this tutorial we will create an image using PyQt Designer and then change them image source from our python code.
To display an image we can actually use a label!
We will start by dragging in a label and resizing it to our desired dimensions. After that we will scroll all the way down in the Property Editor tab until we see a property that says Pixmap. Here we can select an image file to display.
After clicking the black arrow we can select a file.
Changing the Image
For this specific program I’d like to create two buttons that we can use to change the image. I’ve set up my UI to support this by adding two buttons.
After you create your UI save it and convert it to a python file using the following command:
pyuic5 -x "filename".ui -o "filename".pyNext we will open our python file and add some methods to change the image source.
To edit our image source we will use the following line.
self.photo.setPixmap(GtGUI.QPixmap("dog.jpg")) # note: photo is the name of my label # "dog.jpg" is a photo that is in the same directory as my python fileWe'll add some methods that we can call to change the image.
def show_cat(self): self.photo.setPixmap(QtGUI.QPixmap("cat.jpg")) def show_dog(self): self.photo.setPixmap(QtGUI.Qpixmap("dog.jpg"))And finally link our buttons to call them.
def setupUI(self): ... self.dog.clicked.connect(self.show_dog) self.cat.clicked.connect(self.show_cat)Full Code
# -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'test.ui' # # Created by: PyQt5 UI code generator 5.11.3 # # WARNING! All changes made in this file will be lost! from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName("MainWindow") MainWindow.resize(800, 600) self.centralwidget = QtWidgets.QWidget(MainWindow) self.centralwidget.setObjectName("centralwidget") self.photo = QtWidgets.QLabel(self.centralwidget) self.photo.setGeometry(QtCore.QRect(0, 0, 841, 511)) self.photo.setText("") self.photo.setPixmap(QtGui.QPixmap("cat.jpg")) self.photo.setScaledContents(True) self.photo.setObjectName("photo") self.cat = QtWidgets.QPushButton(self.centralwidget) self.cat.setGeometry(QtCore.QRect(0, 510, 411, 41)) self.cat.setObjectName("cat") self.dog = QtWidgets.QPushButton(self.centralwidget) self.dog.setGeometry(QtCore.QRect(410, 510, 391, 41)) self.dog.setObjectName("dog") MainWindow.setCentralWidget(self.centralwidget) self.menubar = QtWidgets.QMenuBar(MainWindow) self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21)) self.menubar.setObjectName("menubar") MainWindow.setMenuBar(self.menubar) self.statusbar = QtWidgets.QStatusBar(MainWindow) self.statusbar.setObjectName("statusbar") MainWindow.setStatusBar(self.statusbar) self.retranslateUi(MainWindow) QtCore.QMetaObject.connectSlotsByName(MainWindow) self.dog.clicked.connect(self.show_dog) self.cat.clicked.connect(self.show_cat) def retranslateUi(self, MainWindow): _translate = QtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow")) self.cat.setText(_translate("MainWindow", "CAT")) self.dog.setText(_translate("MainWindow", "DOG")) def show_dog(self): self.photo.setPixmap(QtGui.QPixmap("imgs/dog.jpg")) def show_cat(self): self.photo.setPixmap(QtGui.QPixmap("imgs/cat.jpg")) if __name__ == "__main__": import sys app = QtWidgets.QApplication(sys.argv) MainWindow = QtWidgets.QMainWindow() ui = Ui_MainWindow() ui.setupUi(MainWindow) MainWindow.show() sys.exit(app.exec_())