Ecole nationale d’ingénieurs de Sfax

Travaux pratiques « Computer Vision 1 »

A.U: 2021-2022
Enseignante: Dr. Amal Hammami

TP1: Prise en main de Python/OpenCV/Qt

 Objectif du TP
L'objectif de ce TP est l’implémentation d’une interface graphique en utilisant la bibliothèque
PyQt5 permettant d’exécuter quelques traitements basiques sur les images (l’affichage d’une
image, sa décomposition en différents canaux, la conversion entre les espaces de couleurs et la
détection des contours) en utilisant l’environnement de développement PyCharm et la
bibliothèque OpenCV.

I. Création de l’interface graphique

Nous allons étudier la création des interfaces graphiques moyennant PyQt5 qui permet
d’utiliser la bibliothèque Qt version 5 avec Python.
L’interface à développer renferme:
 Un bouton « Parcourir » qui permet de parcourir les fichiers images (.jpg, .jpeg et .png)
et de sélectionner une image. Cette dernière et ses dimensions seront par la suite
affichées dans les parties qui leur sont réservées labélisées par « Image originale » et «
Dimensions » respectivement.
 Un bouton « Afficher canal rouge » pour afficher la composante rouge de l’image
sélectionnée dans la partie qui lui est réservée.
 Un bouton « Afficher canal vert » pour afficher la composante verte de l’image
sélectionnée dans la partie qui lui est réservée.
 Un bouton « Afficher canal bleu » pour afficher la composante bleue de l’image
sélectionnée dans la partie qui lui est réservée.
 Trois boutons radios « YCbCr », « YUV » et « HSV » pour sélectionner un espace de
couleurs.

Page 1 sur 6
 Un premier bouton « valider » qui permet l’affichage de l’image après sa conversion
vers un autre espace de couleurs sélectionné.
 Deux zones de saisie labélisés « seuil 1 » et « seuil 2 » qui permettent de saisir les seuils
qui seront par la suite utilisés lors de la détection de contours.
 Un deuxième bouton « valider » qui permet l’affichage de l’image contours selon les
seuils saisis.

Figure 1. Aperçu de l’interface demandée

1. Question 1
a. Créer un nouveau projet Python Sous PyCharm, nommé « TP1 »
b. Commencer par la création d’une nouvelle fenêtre sous QtDesigner de type
MainWindow et modifier la pour contenir les éléments graphiques comme illustré dans
la Figure 1.
c. Enregistrer l’interface créée sous « design.ui ».
d. Générer le code Python « design.py » du fichier de l’interface graphique crée «design.ui
».

Page 2 sur 6
 2. Question 2
Pour afficher l'interface graphique et s’assurer du bon fonctionnement de l’application:
a. Commencer par importer les bibliothèques nécessaires dans le fichier « main.py » :

from PyQt5 import QtWidgets, uic,QtGui # import PyQt5

widgets
from PyQt5.QtWidgets import QFileDialog
from PyQt5.QtGui import QPixmap
import cv2
import sys

b. Charger (load) le fichier de l’interface « Design.ui » :

qtcreator_file = "Design.ui" # Enter file here.

Ui_MainWindow, QtBaseClass =
uic.loadUiType(qtcreator_file)

c. Créer la classe designWindow correspondant à l’interface créée.

class designWindow(QtWidgets.QMainWindow,
Ui_MainWindow):

d. Développer sa méthode d’initialisation pour créer l’interface.

def __init__(self):
QtWidgets.QMainWindow.__init__(self)
Ui_MainWindow.__init__(self)
self.setupUi(self)

e. Ajouter la méthode principale pour afficher l’interface.

if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
window = designWindow()
window.show()
sys.exit(app.exec_())

f. Exécuter votre application et vérifier son bon fonctionnement

II. Ajout de la logique de l’application

3. Question 3
a. Développer une fonction makeFigure qui permet d’ajouter une figure (une
image/un graphe) à un Widget:

Page 3 sur 6
 b. Développer la méthode showDimensions qui permet de calculer et afficher les
dimensions d’une image dans le Widget dédié (Dimensions)
c. Développer la fonction get_image qui permet de parcourir les fichiers images (.jpg,
.jpeg et .png), d’afficher l’image sélectionnée dans le Widget dédié (OriginalImg)
ainsi que d’afficher ses dimensions:
 La lecture d’une image avec OpenCV est réalisée avec la fonction
cv2.imread :
 img = cv2.imread(file_path)
 La conversion d’une image au format QPixmap (le format requis pour
qu’une image peut être afficher dans un widget particulièrement un Qlabel)
est réalisée en utilisant la méthode suivante :
def convert_cv_qt(self, cv_image):
"""Convert from an opencv image to QPixmap"""
h, w, ch = cv_image.shape
bytes_per_line = ch * w
cv_image_Qt_format =
QtGui.QImage(cv_image.data, w, h, bytes_per_line,
QtGui.QImage.Format_BGR888)
return QPixmap.fromImage(cv_image_Qt_format)

d. Dans la méthode __init__, gérer l’évènement « au clic sur le bouton parcourir » en

associant la fonction get_image au bouton Browse

4. Question 4
a. Développer la fonction showRedChannel qui permet d’extraire la composante
rouge de l’image sélectionnée et l’afficher dans le Widget dédié (RedChannel)
b. Développer la fonction showBlueChannel qui permet d’extraire la composante
bleue de l’image sélectionnée et l’afficher dans le Widget dédié (BlueChannel)
c. Développer la fonction showGreenChannel qui permet d’extraire la composante
verte de l’image sélectionnée et l’afficher dans le Widget dédié (GreenChannel)
d. Dans la méthode __init__, gérer les évènements « au clic sur le bouton afficher
composante » en associant les fonctions showRedChannel, showBlueChannel et
showGreenChannel aux boutons DisplayRedChan, DisplayBlueChan et
DisplayGreenChan respectivement.

Page 4 sur 6
5. Question 5
a. Développer la fonction showNewImage qui permet de convertir l’image
sélectionnée de l’espace BGR vers l’espace de couleurs choisi à travers les boutons
radios, enregistrer la nouvelle image en tant que fichier image sous le nom
« NewImg.png » l’afficher dans le Widget dédié (NewImg) :
 La conversion d’une image de l’espace RBG en un nouvel espace de
couleurs s’effectue sous OpenCV en utilisant la fonction cv2.cvtColor.
 YCrCb _image=cv2.cvtColor(img, cv2.COLOR_BGR2YCrCb)
 L’enregistrement d’une image s’effectue sous OpenCV en utilisant la
fonction cv2.imwrite.
 cv2.cvtColor(‘NewImg.png’ , YCrCb _image)
b. Dans la méthode __init__, gérer les évènements « au clic sur le premier bouton
valider » en associant la fonctions showNewImage au boutons validate
6. Question 6
a. Développer une fonction getFirstThreshold qui permet de récupérer le premier
seuil entré dans la zone de saisie (FirstThresh)
b. Développer une fonction getSecondThreshold qui permet de récupérer le deuxième
seuil entré dans la zone de saisie (SecondThresh)
c. Développer une fonction showContours qui permet d’extraire les contours à partir
de l’image sélectionnée et les afficher dans le Widget dédié (ContoursImg):
 La détection des contours d’une image avec OpenCV est réalisée par
l’application des étapes suivantes :
 Convertir l’image en niveaux de gris avec la fonction cv2.cvtColor
 img_gray =cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
 Application d’un seuillage binaire selon les seuils FirstTH et SecondTH avec
la fonction cv2.threshold
 ret, thresh = cv2.threshold(img_gray, FirstTH, SecondTH,
cv2.THRESH_BINARY).
 Détection des contours sur l’image en niveaux de gris avec la fonction
cv2.findContours
 contours, hierarchy = cv2.findContours(image=thresh,
mode=cv2.RETR_TREE, method=cv2.CHAIN_APPROX_NONE)
 Dessiner les contours détectés sur l’image originale avec la fonction
cv2.drawContours

Page 5 sur 6
  image_copy = img.copy()
 cv2.drawContours(image=image_copy, contours=contours,
contourIdx=-1, color=(0, 255, 0), thickness=2,
lineType=cv2.LINE_AA)
d. Dans la méthode __init__, gérer l’évènement « au clic sur le deuxième bouton
valider » en associant la fonction showContours au bouton (validate_2)

7. Question 7

Exécuter votre application et vérifier son bon fonctionnement

Figure 2. Aperçu de l’interface après l’exécution des différentes fonctionnalités

développées

Page 6 sur 6