Image Histogram with OpenCV and PyQt

To know more about Python GUI, you can visit my book (LEARN FROM SCRATCH SIGNAL AND IMAGE PROCESSING WITH PYTHON GUI) on Amazon or Google Books.

In this tutorial, you will display image histogram with OpenCV and PyQt. Follow these steps below:

1. Open Qt Designer. Create the form using the Main Window template:





2. Click the Create button.
3. Then, place a Push Button widget and a Label widget on the form.
4. Specify the text property of the Push Button widget to Read Image dan that of Label widget to labelImage in the Property Editor window.
5. Set the property of the objectName from the Push Button widget in the Property Editor window to pbImage.
6. Place a Widget from the Containers panel on the form. Set the objectName property to be the widgetDisplay.
7. Save the form with the name histogram.ui. Now, the form looks like it looks in the following figure:





8. Next, right-click on the Widget and from  the context menu displayed select Promote to ...:





9. Name the Promoted class name as Histogram:





10. Then click the Add button and click the Promote button. In the Object Inspector window, you can see that widgetDisplay (Histogram class) along with the pbImage object (QPushButton class) is now in the centralwidget object (QWidget class).
11. Define the Histogram class in a Python file with the same name:



from PyQt5.QtWidgets import*
from matplotlib.backends.backend_qt5agg import FigureCanvas
from matplotlib.figure import Figure
    
class Histogram(QWidget):    
    def __init__(self, parent = None):
        QWidget.__init__(self, parent)        
        self.canvas = FigureCanvas(Figure())
       
        vertical_layout = QVBoxLayout()
        vertical_layout.addWidget(self.canvas)
        
        self.canvas.sumbu1 = self.canvas.figure.add_subplot(111)
        self.canvas.figure.set_facecolor("xkcd:wheat")
        self.setLayout(vertical_layout)



12. Define the new Python script with name main_histogram.py that defines the method display_histogram() and connect it with the clicked() event from pbImage widget:



#main_histogram.py
import cv2
import numpy as np
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)
from PyQt5.QtWidgets import QDialog, QFileDialog
from PyQt5.QtGui import QIcon, QPixmap, QImage

import numpy as np
fname = ""
     
class Display_Histogram(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("histogram.ui",self)

        self.setWindowTitle("Image Histogram")
        self.pbImage.clicked.connect(self.display_histogram)
        self.addToolBar(NavigationToolbar(self.widgetDisplay.canvas, self))

    def display_histogram(self):
        global fname
        fname = QFileDialog.getOpenFileName(self, 'Open file', 
           'd:\\',"Image Files (*.jpg *.gif *.bmp *.png *.tiff)")
        pixmap = QPixmap(fname[0])
        self.labelImage.setPixmap(pixmap)
        self.labelImage.setScaledContents(True);
        

        self.widgetDisplay.canvas.sumbu1.clear()
        read_img = cv2.imread(fname[0], cv2.IMREAD_COLOR)
        color = ('b','g','r')
        for i,col in enumerate(color):
            histr = cv2.calcHist([read_img],[i],None,[256],[0,256])
            self.widgetDisplay.canvas.sumbu1.plot(histr,color = col,linewidth=3.0)
            self.widgetDisplay.canvas.sumbu1.set_ylabel('Y', color='blue')
            self.widgetDisplay.canvas.sumbu1.set_xlabel('X', color='blue')
            self.widgetDisplay.canvas.sumbu1.set_title('Histogram')
            self.widgetDisplay.canvas.sumbu1.set_facecolor('xkcd:wheat')
            self.widgetDisplay.canvas.sumbu1.grid()
        self.widgetDisplay.canvas.draw()
            
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = Display_Histogram()
    ex.show()
    sys.exit(app.exec_())



13. Click on Read Image button. You now can see the image and its histogram:







14. Place another Push Button widget and Label widget onto form. 
15. Set the property of the objectName from the Push Button widget in the Property Editor window to pbFilter.
16. Set the property of the objectName from the Label widget in the Property Editor window to labelFilter.
17. Place another Widget from the Containers panel on the form. Set the objectName property to be the widgetDisplay2. 
18. Next, right-click on the Widget and from  the context menu displayed select Promoter widgets and select checkbox available:





19. Modify main_histogram.py that defines the method filter_histogram() and connect it with the clicked() event from pbFilter widget:



#main_histogram.py
import cv2
import numpy as np
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)
from PyQt5.QtWidgets import QDialog, QFileDialog
from PyQt5.QtGui import QIcon, QPixmap, QImage

import numpy as np
fname = ""
     
class Display_Histogram(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("histogram.ui",self)

        self.setWindowTitle("Image Histogram")
        self.pbImage.clicked.connect(self.display_histogram)
        self.pbFilter.clicked.connect(self.filter_histogram)
        self.addToolBar(NavigationToolbar(self.widgetDisplay.canvas, self))

    def display_histogram(self):
        global fname
        fname = QFileDialog.getOpenFileName(self, 'Open file', 
           'd:\\',"Image Files (*.jpg *.gif *.bmp *.png *.tiff)")
        pixmap = QPixmap(fname[0])
        self.labelImage.setPixmap(pixmap)
        self.labelImage.setScaledContents(True);
        

        self.widgetDisplay.canvas.axes1.clear()
        read_img = cv2.imread(fname[0], cv2.IMREAD_COLOR)
        color = ('b','g','r')
        for i,col in enumerate(color):
            histr = cv2.calcHist([read_img],[i],None,[256],[0,256])
            self.widgetDisplay.canvas.axes1.plot(histr,color = col,linewidth=3.0)
            self.widgetDisplay.canvas.axes1.set_ylabel('Y', color='blue')
            self.widgetDisplay.canvas.axes1.set_xlabel('X', color='blue')
            self.widgetDisplay.canvas.axes1.set_title('Histogram')
            self.widgetDisplay.canvas.axes1.set_facecolor('xkcd:wheat')
            self.widgetDisplay.canvas.axes1.grid()
        self.widgetDisplay.canvas.draw()

    def filter_histogram(self):
        read_img = cv2.imread(fname[0], cv2.IMREAD_COLOR)
        
        # To filter image using kernel 5x5
        kernel_5x5 = np.ones((5,5), np.float32) / 25.0
        output = cv2.filter2D(read_img, -1, kernel_5x5)
        
        # To convert back from BGR to RGB space color
        cv2.cvtColor(output, cv2.COLOR_BGR2RGB, output)
        
        # To display image in label widget
        height, width, channel = output.shape
        bytesPerLine = 3 * width
        qImg = QImage(output.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelFilter.setPixmap(pixmap)
        self.labelFilter.setScaledContents(True);        

        self.widgetDisplay2.canvas.axes1.clear()
        color = ('b','g','r')
        for i,col in enumerate(color):
            histr = cv2.calcHist([output],[i],None,[256],[0,256])
            self.widgetDisplay2.canvas.axes1.plot(histr,color = col,linewidth=3.0)
            self.widgetDisplay2.canvas.axes1.set_ylabel('Y', color='blue')
            self.widgetDisplay2.canvas.axes1.set_xlabel('X', color='blue')
            self.widgetDisplay2.canvas.axes1.set_title('Histogram of Filtered Image')
            self.widgetDisplay2.canvas.axes1.set_facecolor('xkcd:wheat')
            self.widgetDisplay2.canvas.axes1.grid()
        self.widgetDisplay2.canvas.draw()
            
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = Display_Histogram()
    ex.show()
    sys.exit(app.exec_())



20. Click on Read Image and Filter Image buttons. You now can see the image and its each histogram:





21. 
    

Image Filter with OpenCV and PyQt

In this tutorial, you will learn how to use OpenCV module to filter image using kernels and to display the resulting image with PyQt. 

Follow these steps below:

1. Open Qt Designer. Put four Label widgets dan four Push Button widgets onto form.
2. Set objectName property of the four Label widgets by name labelImage, labelIdentity, labelKernel3x3, and labelKernel5x5.
3. Set objectName property of the four Push Button widgets by name pbOriginalImage, pbIdentityImage, pbKernel3x3, and pbKernel5x5.
4. Name form as image_filter.ui.
5. Form now looks as follows:





6. Write this script and name it as image_filter.py:



import sys
import cv2
import numpy as np
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
from PyQt5.QtWidgets import QDialog, QFileDialog
from PyQt5.QtGui import QIcon, QPixmap, QImage
from PyQt5.uic import loadUi

fname = ""
    
class FormImageFilter(QDialog):

    def __init__(self):
        QDialog.__init__(self)
        loadUi("image_filter.ui",self)

        self.setWindowTitle("Image Filter")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbIdentityImage.clicked.connect(self.image_identity)
        self.pbKernel3x3.clicked.connect(self.kernel3x3)
        self.pbKernel5x5.clicked.connect(self.kernel5x5)

    def display_image(self):
        global fname
        fname = QFileDialog.getOpenFileName(self, 'Open file', 
           'd:\\',"Image Files (*.jpg *.gif *.bmp *.png *.tiff)")
        pixmap = QPixmap(fname[0])
        self.labelImage.setPixmap(pixmap)
        self.labelImage.setScaledContents(True);

    def image_identity(self, b=None):
        read_img = cv2.imread(fname[0], cv2.IMREAD_COLOR)
        kernel_identity = np.array([[0,0,0], [0,1,0], [0,0,0]])
        
        # To filter image using identity kernel
        output = cv2.filter2D(read_img, -1, kernel_identity)
        
        # To convert back from BGR to RGB space color
        cv2.cvtColor(output, cv2.COLOR_BGR2RGB, output)
        
        # To display image in label widget
        height, width, channel = output.shape
        bytesPerLine = 3 * width
        qImg = QImage(output.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelIdentity.setPixmap(pixmap)
        self.labelIdentity.setScaledContents(True);

    def kernel3x3(self):
        read_img = cv2.imread(fname[0], cv2.IMREAD_COLOR)
        
        # To filter image using kernel 3x3
        kernel_3x3 = np.ones((3,3), np.float32) / 9.0
        output = cv2.filter2D(read_img, -1, kernel_3x3)
        
        # To convert back from BGR to RGB space color
        cv2.cvtColor(output, cv2.COLOR_BGR2RGB, output)
        
        # To display image in label widget
        height, width, channel = output.shape
        bytesPerLine = 3 * width
        qImg = QImage(output.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelKernel3x3.setPixmap(pixmap)
        self.labelKernel3x3.setScaledContents(True);

    def kernel5x5(self):
        read_img = cv2.imread(fname[0], cv2.IMREAD_COLOR)
        
        # To filter image using kernel 5x5
        kernel_5x5 = np.ones((5,5), np.float32) / 25.0
        output = cv2.filter2D(read_img, -1, kernel_5x5)
        
        # To convert back from BGR to RGB space color
        cv2.cvtColor(output, cv2.COLOR_BGR2RGB, output)
        
        # To display image in label widget
        height, width, channel = output.shape
        bytesPerLine = 3 * width
        qImg = QImage(output.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelKernel5x5.setPixmap(pixmap)
        self.labelKernel5x5.setScaledContents(True);
        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImageFilter()
    w.show()
    sys.exit(app.exec_())



7. Run the program and you now can see the resulting images (identity image and two kernel images):