Image Color Space With OpenCV and PyQt

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

Follow these steps below:

1. Open Qt Designer. Put two Label widgets dan two Push Button widgets onto form.
2. Set objectName property of the two Label widgets by name labelImage and labelGray.
3. Set objectName property of the two Push Button widgets by name pbOriginalImage and pbGrayImage.
4. Name form as read_image.ui.
5. Form now looks as follows:



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



import sys
import cv2
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 FormImage(QDialog):

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

        self.setWindowTitle("Reading Image")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbGrayImage.clicked.connect(self.convert_to_gray)

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

    def convert_to_gray(self):
        gray_img = cv2.imread(fname[0], cv2.IMREAD_GRAYSCALE)
        height, width = gray_img.shape[:2]

        img = QImage(gray_img, width, height, QImage.Format_Grayscale8)
        pixmap = QPixmap.fromImage(img)
        self.labelGray.setPixmap(pixmap)
        self.labelGray.setScaledContents(True);
        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImage()
    w.show()
    sys.exit(app.exec_())



7. Run the program. Click on Read Image button and then click on Convert To Gray button. You will see the image with its grayscale version:





8. Modify read_image.ui form and add one Label widget dan another Push Button widget. You will add functionality to convert original image into YUV color space:





9. Modify read_image.py as follows:



import sys
import cv2
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 FormImage(QDialog):

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

        self.setWindowTitle("Reading Image")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbGrayImage.clicked.connect(self.convert_to_gray)
        self.pbYUVImage.clicked.connect(self.convert_to_yuv)

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

    def convert_to_gray(self):
        gray_img = cv2.imread(fname[0], cv2.IMREAD_GRAYSCALE)
        height, width = gray_img.shape[:2]

        img = QImage(gray_img, width, height, QImage.Format_Grayscale8)
        pixmap = QPixmap.fromImage(img)
        self.labelGray.setPixmap(pixmap)
        self.labelGray.setScaledContents(True);
        
    def convert_to_yuv(self):
        read_img = cv2.imread(fname[0])
        yuv_img = cv2.cvtColor(read_img, cv2.COLOR_BGR2YUV)
        height, width, channel = yuv_img.shape
        bytesPerLine = 3 * width
        qImg = QImage(yuv_img.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelYUV.setPixmap(pixmap)
        self.labelYUV.setScaledContents(True);
        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImage()
    w.show()
    sys.exit(app.exec_())



10. Run again the program. Click on Read Image button, then click on Convert To Gray button to see the image with its grayscale version, and then click on Convert To YUV button to see YUV color space of original image:





11. Finally, add three mode Label widgets and another Push Button widget. In this case, you will extract and display each channel of HSV color space. Modify read_image.py as follows:



import sys
import cv2
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 FormImage(QDialog):

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

        self.setWindowTitle("Reading Image")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbGrayImage.clicked.connect(self.convert_to_gray) 
        self.pbYUVImage.clicked.connect(self.convert_to_yuv)
        self.pbHSVImage.clicked.connect(self.extract_hsv)

    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 convert_to_gray(self):
        gray_img = cv2.imread(fname[0], cv2.IMREAD_GRAYSCALE)
        height, width = gray_img.shape[:2]

        img = QImage(gray_img, width, height, QImage.Format_Grayscale8)
        pixmap = QPixmap.fromImage(img)
        self.labelGray.setPixmap(pixmap)
        self.labelGray.setScaledContents(True);
        
    def convert_to_yuv(self):
        read_img = cv2.imread(fname[0])
        yuv_img = cv2.cvtColor(read_img, cv2.COLOR_BGR2YUV)
        height, width, channel = yuv_img.shape
        bytesPerLine = 3 * width
        qImg = QImage(yuv_img.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelYUV.setPixmap(pixmap)
        self.labelYUV.setScaledContents(True);
    
    def extract_hsv(self):
        read_img = cv2.imread(fname[0])
        hsv_img = cv2.cvtColor(read_img, cv2.COLOR_BGR2HSV)
        
        #H Channel
        h = hsv_img[:, :, 0]
        h = cv2.cvtColor(h, cv2.COLOR_GRAY2BGR)
        height, width, channel = h.shape
        bytesPerLine = 3 * width
        img = QImage(h, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(img)
        self.labelH.setPixmap(pixmap)
        self.labelH.setScaledContents(True);
        
        #S Channel
        s = hsv_img[:, :, 1]
        s = cv2.cvtColor(s, cv2.COLOR_GRAY2BGR)
        height, width, channel = s.shape
        bytesPerLine = 3 * width
        img = QImage(s, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(img)
        self.labelS.setPixmap(pixmap)
        self.labelS.setScaledContents(True);
        
        #V Channel
        v = hsv_img[:, :, 2]
        v = cv2.cvtColor(v, cv2.COLOR_GRAY2BGR)
        height, width, channel = v.shape
        bytesPerLine = 3 * width
        img = QImage(v, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(img)
        self.labelV.setPixmap(pixmap)
        self.labelV.setScaledContents(True);

        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImage()
    w.show()
    sys.exit(app.exec_())



12. Run again the program. Click on Read Image button, then click on Convert To Gray button to see the image with its grayscale version, then click on Convert To YUV button to see YUV color space of original image, and then click on Extract HSV button to see each channel of HSV color space from original image:

MORE WITH GRAPH AND GUI PYTHON

You need to see introduction of how to plot simple line graph using GUI Python in this link.

TWO AXES IN ONE FIGURE GUI WITH CERTAIN OPACITY LEVELS

In this case, you will display two graphs on each axis, where each graph will be filled with a certain color and opacity level. Modify the utama.py script, so use the fill() method, as shown below:

#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
import random

class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Grafik Dua Garis")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.dsAlpha.valueChanged.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas1, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))      
        Fs = self.leFrekuensi.text()
        alfa = self.dsAlpha.value()
        
        #Subplot1
        y1 = np.sin(2*np.pi*float(Fs)*x)
        y2 = np.cos(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas1.sumbu1.clear()
        self.widgetTampil.canvas1.sumbu1.fill(x, y1, 'b', x, y2, 'r', alpha=alfa)
        self.widgetTampil.canvas1.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_title('Grafik Sinus dan Kosinus')
        self.widgetTampil.canvas1.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas1.sumbu1.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas1.sumbu1.grid()

        #Subplot2
        FsAcak = random.randint(1, 5)     
        y11 = np.sin(2*np.pi*FsAcak*x)
        y21 = np.cos(2*np.pi*FsAcak*x)
        
        self.widgetTampil.canvas1.sumbu2.clear()
        self.widgetTampil.canvas1.sumbu2.fill(x, y11, 'b', x, y21, 'r', alpha=alfa)
        self.widgetTampil.canvas1.sumbu2.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_title('Grafik Sinus dan Kosinus Frekuensi Acak')
        self.widgetTampil.canvas1.sumbu2.set_facecolor('xkcd:lightblue')
        self.widgetTampil.canvas1.sumbu2.legend(('sinus acak', 'kosinus acak'),loc='upper right')
        self.widgetTampil.canvas1.sumbu2.grid()
        
        self.widgetTampil.canvas1.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())

It can be noted that the alpha opacity level is controlled by the Double Spin Box widget named dsAlpha. The method gambar_grafik() is then attached to the valueChanged() event of dsAlpha so that any change in value on dsAlpha will call the method citra_grafik().

CHOOSING THE COLOR OF LINE FROM COMBO BOX WIDGET

In this case, you place a number of colors in two combo boxes. The gambar_grafik() method is then attached to the currentIndexChanged() event of the two Combo Box widgets (cbWarnaGaris1 and cbWarnaGaris2), so that each time the user changes the selected index from one or both of the combo boxes, the citra_grafik() method will be called.

#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
import random
from matplotlib import colors as mwarna

class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Grafik Dua Garis")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.dsLebarGaris.valueChanged.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas1, self))
        self.isi_combo_box()
        self.cbWarnaGaris1.currentIndexChanged.connect(self.gambar_grafik)
        self.cbWarnaGaris2.currentIndexChanged.connect(self.gambar_grafik)

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))      
        Fs = self.leFrekuensi.text()
        lebarGaris = self.dsLebarGaris.value()

        #Subplot1
        y1 = np.sin(2*np.pi*float(Fs)*x)
        y2 = np.cos(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas1.sumbu1.clear()
        self.widgetTampil.canvas1.sumbu1.plot(x, y1, str(self.cbWarnaGaris1.currentText()),\
                                              x, y2, str(self.cbWarnaGaris2.currentText()),\
                                              linewidth=lebarGaris)
        self.widgetTampil.canvas1.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_title('Grafik Sinus dan Kosinus')
        self.widgetTampil.canvas1.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas1.sumbu1.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas1.sumbu1.grid()

        #Subplot2
        FsAcak = random.randint(1, 20)     
        y11 = np.sin(2*np.pi*FsAcak*x)
        y21 = np.cos(2*np.pi*FsAcak*x)
        
        self.widgetTampil.canvas1.sumbu2.clear()
        self.widgetTampil.canvas1.sumbu2.plot(x, y11, str(self.cbWarnaGaris1.currentText()),\
                                              x, y21, str(self.cbWarnaGaris2.currentText()),\
                                              linewidth=lebarGaris)
        self.widgetTampil.canvas1.sumbu2.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_title('Grafik Sinus dan Kosinus Frekuensi Acak')
        self.widgetTampil.canvas1.sumbu2.set_facecolor('xkcd:lightblue')
        self.widgetTampil.canvas1.sumbu2.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas1.sumbu2.grid()
        
        
        self.widgetTampil.canvas1.draw()

    def isi_combo_box(self):        
        # Mengisi combo box warna
        warna = dict(mwarna.BASE_COLORS, **mwarna.CSS4_COLORS)

        # Mengurutkan warna berdasarkan hue, saturation, value dan nama.
        by_hsv = sorted((tuple(mwarna.rgb_to_hsv(mwarna.to_rgba(color)[:3])), nama)
        for nama, color in warna.items())
        nama_urut = [nama for hsv, nama in by_hsv]

        for nama in nama_urut:
            self.cbWarnaGaris1.addItem(nama)
            self.cbWarnaGaris2.addItem(nama)
        
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())

LINE GRAPH WITH LINE EDIT WIDGET

You need to see introduction of how to plot simple line graph using GUI Python in this link.

You will develop an existing GUI by adding several Line Edit widgets to read input, which are used to set the range and step of the graph (signal). Follow the steps below:

1. Open the gui_grafik.ui file with Qt Designer. Add four Label widgets and four Line Edit widgets on the form.
2. Name the text property of the four Label widgets with Batas Awal, Batas Akhir, Langkah, and Frek.
3. Set the objectName property of the four Line Edit widgets to be leBatasAwal, leBatasAkhir, leLangkah, and leFrekuensi.
4. Save the form with the same name. The form now looks like this:





5. Define the GUI_Grafik class (according to the class name from widgetTampil) as before:



from PyQt5.QtWidgets import*
from matplotlib.backends.backend_qt5agg import FigureCanvas
from matplotlib.figure import Figure
    
class GUI_Grafik(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)



6. Modify the GambarGrafikGUI class in the utama.py so that it involves the four Line Edit widgets that are used to read the initial boundary, end, step, and signal frequency values:



#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
     
class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Contoh GUI Dengan PyQt5 & Matplotlib")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))
        
        Fs = self.leFrekuensi.text()
        y = np.sin(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas.sumbu1.clear()
        self.widgetTampil.canvas.sumbu1.plot(x, y, color='blue', linewidth=3.0)
        self.widgetTampil.canvas.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas.sumbu1.set_title('Grafik Sinusoidal')
        self.widgetTampil.canvas.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas.sumbu1.grid()
        self.widgetTampil.canvas.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())





7. Run the program in utama.py. You will find all four Label widgets and all four Line Edit widgets on the form. Now, you can assign values ​​to each Line Edit widget, as desired:

TWO OR MORE GRAPHS IN ONE AXIS

Using the same gui_grafik.ui file, you can use it to display other signals (graphs) on the same axis. What you need to do is define two y functions and place them in the plot() method:

#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
     
class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Grafik Dua Garis")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))
        
        Fs = self.leFrekuensi.text()
        y1 = np.sin(2*np.pi*float(Fs)*x)
        y2 = np.cos(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas.sumbu1.clear()
        self.widgetTampil.canvas.sumbu1.plot(x, y1, x, y2, 'r--', linewidth=2.0)
        self.widgetTampil.canvas.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas.sumbu1.set_title('Grafik Sinus dan Kosinus')
        self.widgetTampil.canvas.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas.sumbu1.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas.sumbu1.grid()
        self.widgetTampil.canvas.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())

Run the program above. You will find two graphs (sine and cosine) with a lower limit, an upper limit, a step, and a frequency that can be controlled through the four Line Edit widgets provided.

TWO AXES ON ONE FIGURE

In this case, you will create two axes in one figure. Each axis is then filled with two line graphs. What you need to do is modify the Python file so that it defines the two axes on the canvas figure, as shown below:

#gui_grafik.py
from PyQt5.QtWidgets import*
from matplotlib.backends.backend_qt5agg import FigureCanvas
from matplotlib.figure import Figure
    
class GUI_Grafik(QWidget):    
    def __init__(self, parent = None):
        QWidget.__init__(self, parent)        
        self.canvas1 = FigureCanvas(Figure())
       
        vertical_layout = QVBoxLayout()
        vertical_layout.addWidget(self.canvas1)
        
        self.canvas1.sumbu1 = self.canvas1.figure.add_subplot(211)
        self.canvas1.sumbu2 = self.canvas1.figure.add_subplot(212)
        self.canvas1.figure.set_facecolor(color='bisque')
        self.setLayout(vertical_layout)

Then, in the main file. You define a signal or graph that will be placed on each axis. In the script below, signals y1 and y2 are placed on sumbu1 and signals y11 and y21 are placed on sumbu2:

#utama.py
from PyQt5.QtWidgets import*
from PyQt5.uic import loadUi
from matplotlib.backends.backend_qt5agg import (NavigationToolbar2QT as NavigationToolbar)

import numpy as np
import random

class GambarGrafikGUI(QMainWindow):   
    def __init__(self):
        
        QMainWindow.__init__(self)
        loadUi("gui_grafik.ui",self)

        self.setWindowTitle("Grafik Dua Garis")
        self.pbTampil.clicked.connect(self.gambar_grafik)
        self.dsLebarGaris.valueChanged.connect(self.gambar_grafik)
        self.addToolBar(NavigationToolbar(self.widgetTampil.canvas1, self))

    def gambar_grafik(self):
        batasAwal = self.leBatasAwal.text()
        batasAkhir = self.leBatasAkhir.text()
        langkah = self.leLangkah.text()
        x = np.arange(float(batasAwal), float(batasAkhir), float(langkah))      
        Fs = self.leFrekuensi.text()
        lebarGaris = self.dsLebarGaris.value()
        
        #Subplot1
        y1 = np.sin(2*np.pi*float(Fs)*x)
        y2 = np.cos(2*np.pi*float(Fs)*x)
        
        self.widgetTampil.canvas1.sumbu1.clear()
        self.widgetTampil.canvas1.sumbu1.plot(x, y1, x, y2, 'r--', linewidth=lebarGaris)
        self.widgetTampil.canvas1.sumbu1.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu1.set_title('Grafik Sinus dan Kosinus')
        self.widgetTampil.canvas1.sumbu1.set_facecolor('xkcd:wheat')
        self.widgetTampil.canvas1.sumbu1.legend(('sinus', 'kosinus'),loc='upper right')
        self.widgetTampil.canvas1.sumbu1.grid()

        #Subplot2
        FsAcak = random.randint(1, 20)     
        y11 = np.sin(2*np.pi*FsAcak*x)
        y21 = np.cos(2*np.pi*FsAcak*x)
        
        self.widgetTampil.canvas1.sumbu2.clear()
        self.widgetTampil.canvas1.sumbu2.plot(x, y11, x, y21, 'r--', linewidth=lebarGaris)
        self.widgetTampil.canvas1.sumbu2.set_ylabel('Y', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_xlabel('X', color='blue')
        self.widgetTampil.canvas1.sumbu2.set_title('Grafik Sinus dan Kosinus Frekuensi Acak')
        self.widgetTampil.canvas1.sumbu2.set_facecolor('xkcd:lightblue')
        self.widgetTampil.canvas1.sumbu2.legend(('sinus acak', 'kosinus acak'),loc='upper right')
        self.widgetTampil.canvas1.sumbu2.grid()    
        
        self.widgetTampil.canvas1.draw()
               
if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    ex = GambarGrafikGUI()
    ex.show()
    sys.exit(app.exec_())