[PyQt5] QPainter를 이용한 다양한 그래픽

위젯은 자신을 다시 그릴때 paintEvent 함수를 호출합니다. 즉, 위젯에 무언가를 그리기에 가장 적당한 시점은 paintEvent입니다. 또한 여기에 그래픽 요소를 그리기 위해서 QPainter라는 API를 사용할 수 있습니다. 이 두가지를 조합하여 위젯을 상속받는 윈도우를 화면에 표시하고 이 윈도우에 원하는 그래픽 요소를 그리는 예를 살펴보겠습니다.

먼저 위젯을 상속받는 MyWindow라는 클래스를 하나 정의하는데, 이 클래스에는 앞서 언급한 paintEvent 함수를 재정의하고 있습니다.

import sys, random
from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QColor, QFont, QPen, QBrush, QPainterPath
from PyQt5.QtCore import Qt

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()
        
    def initUI(self):      
        self.setGeometry(300, 300, 400, 400)
        self.setWindowTitle('QPainter를 이용한 그래픽스')
        self.show()

    def paintEvent(self, event):
        qp = QPainter()
        qp.begin(self)

        # 그리기 함수의 호출 부분

        qp.end()
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = MyWindow()
    sys.exit(app.exec_())

위의 코드에서 20번째 줄에 그리기 함수를 호출함으로써 그 결과를 살펴볼 수 있는데요. 그리기 함수는 MyWindow 클래스의 맴버 함수로써 정의합니다. 먼저 텍스트를 그리는 함수입니다.

    def drawText(self, event, qp):
        qp.setPen(QColor(0, 0, 0))
        qp.setFont(QFont('나눔명조', 35))
        qp.drawText(event.rect(), Qt.AlignCenter, '스산한 늦가을\n아니.. 초겨울인가?')

결과는 아래와 같습니다.

다음은 화면에 포인트를 찍는 함수입니다.

    def drawPoints(self, event, qp):
        pen = QPen(Qt.gray, 3)
        qp.setPen(pen)

        size = self.size()
        
        for i in range(700):
            x = random.randint(1, size.width()-1)
            y = random.randint(1, size.height()-1)
            qp.drawPoint(x, y)  

결과는 아래와 같습니다.

다음은 사각형을 그리는 함수입니다.

    def drawRectangles(self, qp):
        col = QColor(0, 0, 0)
        col.setNamedColor('#d4d4d4')
        qp.setPen(col)

        qp.setBrush(QColor(200, 0, 0))
        qp.drawRect(50, 50, 100, 100)

        qp.setBrush(QColor(255, 80, 0, 160))
        qp.drawRect(150, 150, 100, 100)

        qp.setBrush(QColor(25, 0, 90, 200))
        qp.drawRect(250, 250, 100, 100)

결과는 아래와 같습니다.

다음은 선을 그리는 함수입니다.

    def drawLines(self, qp):
        pen = QPen(Qt.black, 3, Qt.SolidLine)

        qp.setPen(pen)
        qp.drawLine(50, 50, 350, 50)

        pen.setStyle(Qt.DashLine)
        qp.setPen(pen)
        qp.drawLine(50, 110, 350, 110)

        pen.setStyle(Qt.DashDotLine)
        qp.setPen(pen)
        qp.drawLine(50, 170, 350, 170)

        pen.setStyle(Qt.DotLine)
        qp.setPen(pen)
        qp.drawLine(50, 230, 350, 230)

        pen.setStyle(Qt.DashDotDotLine)
        qp.setPen(pen)
        qp.drawLine(50, 290, 350, 290)

        pen.setStyle(Qt.CustomDashLine)
        pen.setDashPattern([1, 4, 5, 4])
        qp.setPen(pen)
        qp.drawLine(50, 350, 350, 350)

결과는 아래와 같습니다.

다음은 다양한 채움 스타일로 사각형을 그리는 함수입니다.

    def drawBrushes(self, qp):
        brush = QBrush(Qt.SolidPattern)
        qp.setBrush(brush)
        qp.drawRect(20, 20, 110, 110)

        brush.setStyle(Qt.Dense1Pattern)
        qp.setBrush(brush)
        qp.drawRect(145, 20, 110, 110)

        brush.setStyle(Qt.Dense2Pattern)
        qp.setBrush(brush)
        qp.drawRect(270, 20, 110, 110)

        brush.setStyle(Qt.DiagCrossPattern)
        qp.setBrush(brush)
        qp.drawRect(20, 145, 110, 110)

        brush.setStyle(Qt.Dense5Pattern)
        qp.setBrush(brush)
        qp.drawRect(145, 145, 110, 110)

        brush.setStyle(Qt.Dense6Pattern)
        qp.setBrush(brush)
        qp.drawRect(270, 145, 110, 110)

        brush.setStyle(Qt.HorPattern)
        qp.setBrush(brush)
        qp.drawRect(20, 270, 110, 110)

        brush.setStyle(Qt.VerPattern)
        qp.setBrush(brush)
        qp.drawRect(145, 270, 110, 110)

        brush.setStyle(Qt.BDiagPattern)
        qp.setBrush(brush)
        qp.drawRect(270, 270, 110, 110)

결과는 아래와 같습니다.

다음은 베이지 곡선을 그리는 함수입니다.

    def drawBezierCurve(self, qp):
        pen = QPen(Qt.black, 7)
        qp.setPen(pen)

        path = QPainterPath()
        path.moveTo(50, 50)
        path.cubicTo(200, 50, 50, 350, 350, 350)
        
        qp.drawPath(path)

결과는 아래와 같습니다.

[PyQt5] 타이머(Timer) 사용하기

PyQt에서 제공하는 타이머를 사용해 간단한 디지털 시계에 대한 UI를 구성해 보겠습니다. 디지털 시계에 대한 표현은 QLCDNumber라는 위젯을 사용합니다. 아래는 최종 실행 결과입니다.

시작 버튼을 클릭하면, 일정한 주기로 시간 표시가 변경되며 멈춤 버튼을 클릭하면 시간 표시에 대한 갱신을 중단합니다. 멈춤 상태에서 다시 시작 버튼을 클릭하면 시간 표시가 변경되기 시작합니다. 코드는 다음과 같습니다.

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import QTimer, QTime

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()

        self.timer = QTimer(self)
        self.timer.setInterval(1000)
        self.timer.timeout.connect(self.timeout)

        self.setWindowTitle('QTimer')
        self.setGeometry(100, 100, 600, 280)
 
        layout = QVBoxLayout()
 
        self.lcd = QLCDNumber()
        self.lcd.display('')
        self.lcd.setDigitCount(8)

        subLayout = QHBoxLayout()
        
        self.btnStart = QPushButton("시작")
        self.btnStart.clicked.connect(self.onStartButtonClicked)
 
        self.btnStop = QPushButton("멈춤")
        self.btnStop.clicked.connect(self.onStopButtonClicked)
 
        layout.addWidget(self.lcd)
        
        subLayout.addWidget(self.btnStart)
        subLayout.addWidget(self.btnStop)
        layout.addLayout(subLayout)
 
        self.btnStop.setEnabled(False)

        self.setLayout(layout)        

    def onStartButtonClicked(self):
        self.timer.start()
        self.btnStop.setEnabled(True)
        self.btnStart.setEnabled(False)

    def onStopButtonClicked(self):
        self.timer.stop()
        self.btnStop.setEnabled(False)
        self.btnStart.setEnabled(True)

    def timeout(self):
        sender = self.sender()
        currentTime = QTime.currentTime().toString("hh:mm:ss")

        if id(sender) == id(self.timer):
            self.lcd.display(currentTime)

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

앞서 언급한 타이머의 갱신 시간 주기는 QTimer의 setInterval 함수로 지정하며 단위는 ms로써, 1000이 1초에 해당합니다. 타이머에 대한 갱신 시작과 중지는 각각 start와 stop입니다.

[PyQt5] MatplotLib의 차트를 Widget으로 사용하기

PyQt에서 차트를 위젯으로 사용하기 위해 코드입니다. 먼저 실행 결과는 다음과 같습니다.

하단에 컴보박스를 통해 2가지 항목을 선택할 수 있는데요. 항목을 선택할때마다 해당되는 항목의 그래프가 상단에 표시됩니다.

먼저 이를 위한 UI 구성을 위해 아래와 같은 코드를 작성합니다.

import sys
import numpy as np
from PyQt5.QtWidgets import *
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

        self.setLayout(self.layout)
        self.setGeometry(200, 200, 800, 600)

    def initUI(self):
        self.fig = plt.Figure()
        self.canvas = FigureCanvas(self.fig)
        
        layout = QVBoxLayout()
        layout.addWidget(self.canvas)

        cb = QComboBox()
        cb.addItem('Graph1')
        cb.addItem('Graph2')
        cb.activated[str].connect(self.onComboBoxChanged)
        layout.addWidget(cb)

        self.layout = layout

        self.onComboBoxChanged(cb.currentText())

    def onComboBoxChanged(self, text):
        if text == 'Graph1':
            self.doGraph1()
        elif text == 'Graph2':
            self.doGraph2()

    def doGraph1(self):
        ....

    def doGraph2(self):
        ....
            
if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MyWindow()
    window.show()
    app.exec_()

Qt5에서 Matplot을 사용하기 위해서는 matplotlib.backends.backend_qt5agg 패이지의 FigureCanvasQTAgg라는 이름의 위젯 클래스가 필요하다는 것을 알 수 있습니다. MyWindow 클래스의 doGraph1과 doGraph2 함수의 코드가 핵심인데, 그 내용은 아래와 같습니다.

   def doGraph1(self):
        x = np.arange(0, 10, 0.5)
        y1 = np.sin(x)
        y2 = np.cos(x)
        
        self.fig.clear()

        ax = self.fig.add_subplot(111)
        ax.plot(x, y1, label="sin(x)")
        ax.plot(x, y2, label="cos(x)", linestyle="--")
        
        ax.set_xlabel("x")
        ax.set_xlabel("y")
        
        ax.set_title("sin & cos")
        ax.legend()
        
        self.canvas.draw()

    def doGraph2(self):
        X = np.arange(-5, 5, 0.25)
        Y = np.arange(-5, 5, 0.25)
        X, Y = np.meshgrid(X, Y)
        Z = X**2 + Y**2
        
        self.fig.clear()
        
        ax = self.fig.gca(projection='3d')
        ax.plot_wireframe(X, Y, Z, color='black')

        self.canvas.draw() 

doGraph2 함수에 대한 실행 결과는 다음과 같습니다. 물론 이 함수의 실행은 컴보박스의 항목 중 Graph2를 선택했을때 실행됩니다.

참고로 이 글의 차트는 아래의 글을 참고로 하여 작성하였습니다.

파이썬의 matplotlib 노트

[PyQt5] 메인 윈도우와 다이얼로그 연동

메인 윈도우에서 대화상자를 열고, 대화상자에서 입력한 값을 메인 윈도우에 표시하고하는 경우에 대한 설명입니다. UI 라이브러리는 PyQt5를 사용했습니다. 먼저 메인 모듈에 대한 코드입니다. 참고로 이글은 PyQt5에 대한 최소한의 기초 내용을 파악하고 있는 개발자를 대상으로 합니다.

import sys
from MainWindow import MainWindow
from PyQt5.QtWidgets import *

if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    sys.exit(app.exec_())

위의 코드에서 메인 윈도우는 MainWindow.py 파일에 정의되어 있으며, 코드는 다음과 같습니다.

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from SubWindow import SubWindow

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('Main Window')
        self.setGeometry(100, 100, 300, 200)

        layout = QVBoxLayout()
        layout.addStretch(1)

        label = QLabel("미지정")
        label.setAlignment(Qt.AlignCenter)
        font = label.font()
        font.setPointSize(30)
        label.setFont(font)
        self.label = label

        btn = QPushButton("값 얻어오기")
        btn.clicked.connect(self.onButtonClicked)

        layout.addWidget(label)
        layout.addWidget(btn)

        layout.addStretch(1)

        centralWidget = QWidget()
        centralWidget.setLayout(layout)
        self.setCentralWidget(centralWidget)

    def onButtonClicked(self):
        win = SubWindow()
        r = win.showModal()

        if r:
            text = win.edit.text()
            self.label.setText(text)

    def show(self):
        super().show()

위의 메인 윈도우는 아래와 같은 UI를 표시합니다.

“값 얻어오기” 버튼을 클릭하면 대화창을 표시되며, 표시된 대화창에서 텍스트를 입력하고 대화창의 “확인” 버튼을 클릭하면 대화창에서 입력한 텍스트값을 메인 윈도우의 라벨 위젯에 표시하게 됩니다. 대화창에 대한 코드 파일은 SubWindow.py이며 다음과 같습니다.

import sys
from PyQt5.QtWidgets import *

class SubWindow(QDialog):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('Sub Window')
        self.setGeometry(100, 100, 200, 100)

        layout = QVBoxLayout()
        layout.addStretch(1)

        edit = QLineEdit()
        font = edit.font()
        font.setPointSize(20)
        edit.setFont(font)
        self.edit = edit

        subLayout = QHBoxLayout()
        
        btnOK = QPushButton("확인")
        btnOK.clicked.connect(self.onOKButtonClicked)

        btnCancel = QPushButton("취소")
        btnCancel.clicked.connect(self.onCancelButtonClicked)

        layout.addWidget(edit)
        
        subLayout.addWidget(btnOK)
        subLayout.addWidget(btnCancel)
        layout.addLayout(subLayout)

        layout.addStretch(1)

        self.setLayout(layout)

    def onOKButtonClicked(self):
        self.accept()

    def onCancelButtonClicked(self):
        self.reject()

    def showModal(self):
        return super().exec_()

아래는 메인 윈도우에서 위의 코드에 대한 대화창을 표시한 뒤 사용자가 “하이! PyQt5″텍스트를 입력한 화면입니다.

위의 화면에서 닫기 버튼을 클릭하면 창이 닫히고 메인 윈도우에 대화창에서 입력한 텍스트가 표시되는데, 아래와 같습니다.

OpenCV의 이미지에 한글 출력하기

사실 OpenCV의 이미지는 numpy의 배열입니다. 그런데 문제는 파이썬에서 OpenCV를 통해 텍스트를 출력할때 한글 출력이 쉽지 않습니다. 해서 한글 출력을 위해 PIL(Python Imaging Library)의 도움을 받을 수 있습니다. 아래의 예제가 바로 그것입니다.

import numpy as np
from PIL import ImageFont, ImageDraw, Image
import cv2

img = np.zeros((200,400,3),np.uint8)

b,g,r,a = 255,255,255,0
fontpath = "fonts/gulim.ttc"
font = ImageFont.truetype(fontpath, 20)
img_pil = Image.fromarray(img)
draw = ImageDraw.Draw(img_pil)
draw.text((60, 70),  "김형준ABC123#GISDeveloper", font=font, fill=(b,g,r,a))

img = np.array(img_pil)
cv2.putText(img,  "by Dip2K", (250,120), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (b,g,r), 1, cv2.LINE_AA)

cv2.imshow("res", img)
cv2.waitKey()
cv2.destroyAllWindows()

7-12번 코드가 PIL을 이용해 한글을 출력하는 코드이고, 14~15번 코드는 OpenCV의 텍스트 출력 코드입니다. 결과는 다음과 같습니다.