Python PyQt5 image annotation application

Python PyQt Event Handling: Exercise-9 with Solution

Write a Python program that displays an image and allows users to annotate it with text.

From doc.qt.io:

QApplication Class: The QApplication class manages the GUI application's control flow and main settings.

QMainWindow Class: The QMainWindow class provides a main application window.

QGraphicsView Class: The QGraphicsView class provides a widget for displaying the contents of a QGraphicsScene.

QGraphicsScene Class: The QGraphicsScene class provides a surface for managing a large number of 2D graphical items.

QGraphicsTextItem Class: The QGraphicsTextItem class provides a text item that you can add to a QGraphicsScene to display formatted text.

QInputDialog Class: The QInputDialog class provides a simple convenience dialog to get a single value from the user.

QPixmap Class: The QPixmap class is an off-screen image representation that can be used as a paint device.

QFont Class: The QFont class specifies a query for a font used for drawing text.

Qt module: PyQt5 is a set of Python bindings for the Qt application framework. It allows us to use Qt, a popular C++ framework, to create graphical user interfaces (GUIs) in Python.

Sample Solution:

Python Code:

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QGraphicsView, QGraphicsScene, QGraphicsTextItem, QInputDialog
from PyQt5.QtGui import QPixmap, QFont
from PyQt5.QtCore import Qt
class ImageViewerApp(QMainWindow):
    def __init__(self):

        self.setWindowTitle("Image Viewer with Annotations")
        self.setGeometry(100, 100, 500, 400)


    def initUI(self):
        self.scene = QGraphicsScene()
        self.view = QGraphicsView(self.scene)
        self.view.setSceneRect(0, 0, 500, 400)

        self.image = QPixmap("image1.png")  # Load your image here

        self.annotation_mode = False

        self.view.mousePressEvent = self.mousePressEventCustom

    def drawAnnotation(self, pos, text):
        if self.annotation_mode:
            text_item = QGraphicsTextItem(text)
            text_item.setFont(QFont("Arial", 12))

    def mousePressEventCustom(self, event):
        if event.button() == Qt.LeftButton:
            annotation_text, ok = QInputDialog.getText(self, "Annotation", "Input text:")
            if ok and annotation_text:
                self.annotation_mode = True
                self.annotation_text = annotation_text
                self.annotation_start = event.pos()

                self.drawAnnotation(event.pos(), self.annotation_text)

def main():
    app = QApplication(sys.argv)
    window = ImageViewerApp()

if __name__ == "__main__":


In the exercise above -

Import the necessary modules from PyQt5 for creating the application.

We create a custom ImageViewerApp class that inherits from QMainWindow, which is the main application window.

In the initUI method, we set up the main user interface:

  • We create a QGraphicsView widget to display the image.
  • We load an image using QPixmap and add it to a QGraphicsScene.
  • We handle mouse events (clicks) by overriding the mousePressEvent method.

We define a drawAnnotation method that takes a position and text as input and adds a red text annotation to the scene.

In the mousePressEventCustom method, when the user clicks the left mouse button:

  • We prompt the user for text input using QInputDialog.
  • If text is entered, we set annotation_mode to True, store the annotation text and the starting position.
  • We call drawAnnotation to display the annotation on the image.

The main function sets up the application and runs it.


PyQt: Python PyQt5 image annotation application. Part-1
PyQt: Python PyQt5 image annotation application. Part-2


Flowchart: Python PyQt5 image annotation application.
Flowchart: Python PyQt5 image annotation application.

Python Code Editor:

Previous: Python PyQt5 drawing application.
Next: Python PyQt5 digital clock widget.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.