GRAPHICS AND GUI WITH PYTHON

SIMPLE LINE GRAPH
To display graphics in Python, you need to import these two modules:

import matplotlib.pyplot as plt
import numpy as np

You can use both modules for example, to call np.arange, np.zeros, np.pi, plt.figure, plt.plot, plt.show, and so on. Use the pyplot interface to create graphics, and then use the methods of the object to do the drawing:

x = np.arange(0, 10, 0.2)
y = np.sin(x)
fig, ax = plt.subplots()
ax.plot(x, y)
plt.show()

Below is the complete script:

#grafik_garis.py
import matplotlib.pyplot as plt
import numpy as np

x = np.arange(0, 10, 0.2)
y = np.sin(x)
fig, ax = plt.subplots()
ax.plot(x, y)
plt.show()

The graphics generated on the IPython console are:

LINE GRAPH IN THE PYTHON GUI

To display these simple line graphs in the Python GUI, you need a Qt Designer device. On this tool, you place the necessary widgets. Follow the steps in doing this:

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





2. Click the Create button.
3. Then, place a Push Button widget on the form.
4. Specify the text property of the Push Button widget in the Property Editor window to appear.
5. Set the property of the objectName from the Push Button widget in the Property Editor window to pbTampil.
6. Place a Widget from the Containers panel on the form. Set the objectName property to be the widgetTampil.
7. Save the form with the name gui_grafik.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 GUI_Grafik:





10. Then click the Add button and click the Promote button. In the Object Inspector window, you can see that widgetTampil (GUI_Grafik class) along with the pbTampil object (QPushButton class) is now in the centralwidget object (QWidget class):





11. Define the GUI_Grafik 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 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)



12. Define the new Python script with name utama.py that defines the method gambar_grafik() and connect it with the clicked() event from pbTampil widget:



#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):
        x = np.arange(0, 10, 0.2)
        y = np.sin(x)
        self.widgetTampil.canvas.sumbu1.clear()
        self.widgetTampil.canvas.sumbu1.plot(x, y, 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 Sederhana')
        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_())



13. Run utama.py script and click the Tampil button: