[pyqt] qt desginer로 계산기 만들기

이번 시간에는 qt desginer로 ui를 디자인하고 py 파일로 가져온 다음에 이벤트 연결을 통해 기능을 구현해보는 실습을 해볼 것이다.

 

디자인 부분

우선 Push Button을 4 x 5 번 끌어와서 디자인을 한다. 

 

계산기 결과가 나오는 부분은 Label 객체로 만들었다. Label에 네모가 둘러쌓은 모양이 나오는 것은 Property Editor에서 frameShape의 설정을 Box로 바꾸면 된다. 또 Horiontal을 AlignRight로 설정을 해주면 글자가 오른쪽에 위치한다. 

 

이후 Object Inspector에서 객체의 변수명을 알아보기 쉽게 바꿔준다. 

 

 

변환 부분

python -m PyQt5.uic.pyuic -x Calc.ui -o Calc.py

해당 코드를 cmd에 입력하여 파이썬 파일로 변환한다.

 

 

이벤트 연결 부분

변환된 파이썬 파일을 보면 다음과 같다. 

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):    
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(361, 578)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.OutputLabel = QtWidgets.QLabel(self.centralwidget)
        self.OutputLabel.setGeometry(QtCore.QRect(10, 10, 341, 91))
        font = QtGui.QFont()
        font.setPointSize(34)
        self.OutputLabel.setFont(font)
        self.OutputLabel.setFrameShape(QtWidgets.QFrame.Box)
        self.OutputLabel.setFrameShadow(QtWidgets.QFrame.Sunken)
        self.OutputLabel.setLineWidth(3)
        self.OutputLabel.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
        self.OutputLabel.setObjectName("OutputLabel")
        self.button_perccent = QtWidgets.QPushButton(self.centralwidget))
        self.button_perccent.setGeometry(QtCore.QRect(10, 110, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_perccent.setFont(font)
        self.button_perccent.setObjectName("button_perccent")
        self.button_arrow = QtWidgets.QPushButton(self.centralwidget)
        self.button_arrow.setGeometry(QtCore.QRect(184, 110, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_arrow.setFont(font)
        self.button_arrow.setObjectName("button_arrow")
        self.button_c = QtWidgets.QPushButton(self.centralwidget)
        self.button_c.setGeometry(QtCore.QRect(93, 110, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_c.setFont(font)
        self.button_c.setObjectName("button_c")
        self.button_div = QtWidgets.QPushButton(self.centralwidget)
        self.button_div.setGeometry(QtCore.QRect(275, 110, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_div.setFont(font)
        self.button_div.setObjectName("button_div")
        self.button_9 = QtWidgets.QPushButton(self.centralwidget)
        self.button_9.setGeometry(QtCore.QRect(185, 192, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_9.setFont(font)
        self.button_9.setObjectName("button_9")
        self.button_8 = QtWidgets.QPushButton(self.centralwidget)
        self.button_8.setGeometry(QtCore.QRect(94, 192, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_8.setFont(font)
        self.button_8.setObjectName("button_8")
        self.button_mut = QtWidgets.QPushButton(self.centralwidget)
        self.button_mut.setGeometry(QtCore.QRect(275, 192, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_mut.setFont(font)
        self.button_mut.setObjectName("button_mut")
        self.button_7 = QtWidgets.QPushButton(self.centralwidget)
        self.button_7.setGeometry(QtCore.QRect(11, 192, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_7.setFont(font)
        self.button_7.setObjectName("button_7")
        self.button_6 = QtWidgets.QPushButton(self.centralwidget)
        self.button_6.setGeometry(QtCore.QRect(185, 275, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_6.setFont(font)
        self.button_6.setObjectName("button_6")
        self.button_5 = QtWidgets.QPushButton(self.centralwidget)
        self.button_5.setGeometry(QtCore.QRect(94, 275, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_5.setFont(font)
        self.button_5.setObjectName("button_5")
        self.button_minus = QtWidgets.QPushButton(self.centralwidget)
        self.button_minus.setGeometry(QtCore.QRect(275, 275, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_minus.setFont(font)
        self.button_minus.setObjectName("button_minus")
        self.button_4 = QtWidgets.QPushButton(self.centralwidget)
        self.button_4.setGeometry(QtCore.QRect(11, 275, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_4.setFont(font)
        self.button_4.setObjectName("button_4")
        self.button_3 = QtWidgets.QPushButton(self.centralwidget)
        self.button_3.setGeometry(QtCore.QRect(185, 362, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_3.setFont(font)
        self.button_3.setObjectName("button_3")
        self.button_2 = QtWidgets.QPushButton(self.centralwidget)
        self.button_2.setGeometry(QtCore.QRect(94, 362, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_2.setFont(font)
        self.button_2.setObjectName("button_2")
        self.button_plus = QtWidgets.QPushButton(self.centralwidget)
        self.button_plus.setGeometry(QtCore.QRect(275, 362, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_plus.setFont(font)
        self.button_plus.setObjectName("button_plus")
        self.button_1 = QtWidgets.QPushButton(self.centralwidget)
        self.button_1.setGeometry(QtCore.QRect(11, 362, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_1.setFont(font)
        self.button_1.setObjectName("button_1")
        self.button_decimal = QtWidgets.QPushButton(self.centralwidget)
        self.button_decimal.setGeometry(QtCore.QRect(184, 452, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_decimal.setFont(font)
        self.button_decimal.setObjectName("button_decimal")
        self.button_0 = QtWidgets.QPushButton(self.centralwidget)
        self.button_0.setGeometry(QtCore.QRect(93, 452, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_0.setFont(font)
        self.button_0.setObjectName("button_0")
        self.button_equal = QtWidgets.QPushButton(self.centralwidget)
        self.button_equal.setGeometry(QtCore.QRect(271, 453, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_equal.setFont(font)
        self.button_equal.setObjectName("button_equal")
        self.button_plus_minus = QtWidgets.QPushButton(self.centralwidget)
        self.button_plus_minus.setGeometry(QtCore.QRect(10, 452, 75, 75))
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(26)
        self.button_plus_minus.setFont(font)
        self.button_plus_minus.setObjectName("button_plus_minus")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 361, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Calculator"))
        self.OutputLabel.setText(_translate("MainWindow", "0"))
        self.button_perccent.setText(_translate("MainWindow", "%"))
        self.button_arrow.setText(_translate("MainWindow", "<<"))
        self.button_c.setText(_translate("MainWindow", "C"))
        self.button_div.setText(_translate("MainWindow", "/"))
        self.button_9.setText(_translate("MainWindow", "9"))
        self.button_8.setText(_translate("MainWindow", "8"))
        self.button_mut.setText(_translate("MainWindow", "x"))
        self.button_7.setText(_translate("MainWindow", "7"))
        self.button_6.setText(_translate("MainWindow", "6"))
        self.button_5.setText(_translate("MainWindow", "5"))
        self.button_minus.setText(_translate("MainWindow", "-"))
        self.button_4.setText(_translate("MainWindow", "4"))
        self.button_3.setText(_translate("MainWindow", "3"))
        self.button_2.setText(_translate("MainWindow", "2"))
        self.button_plus.setText(_translate("MainWindow", "+"))
        self.button_1.setText(_translate("MainWindow", "1"))
        self.button_decimal.setText(_translate("MainWindow", "."))
        self.button_0.setText(_translate("MainWindow", "0"))
        self.button_equal.setText(_translate("MainWindow", "="))
        self.button_plus_minus.setText(_translate("MainWindow", "+/-"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

이전에 포스팅들을 열심히 따라왔다면 코드가 복잡해보이지만 익숙한 매서드들이 보일 것이다. 이제 이벤트 연결을 해주어야한다. 특정 버튼이 클릭될 떄마다 해당하는 이벤트를 발생시켜주어야 한다. 가령 숫자 버튼이 클릭되면 해당 숫자로 QLabel에 쓰여진 글씨가 바꾸게 하는 이벤트가 실행될 것이다.

 

 

self.button_perccent = QtWidgets.QPushButton(self.centralwidget, clicked = lambda: self.press_it("%"))

다음과 같은 코드로 이벤트 연결을 해줄 수 있다. 모든 버튼마다 이벤트 연결을 하고 각각의 이벤트마다 필요한 함수를 실행하게 만들면 gui가 완성이 된다.

 

 

다음은 예시로 만들어본 함수들이다만 완벽하지는 않다.

    def calc_it(self):
        screen = self.OutputLabel.text()
        answer = eval(screen)
        self.OutputLabel.setText(str(answer))


    def puls_minus_it(self):
        screen = self.OutputLabel.text()
        if '-' in screen:
            self.OutputLabel.setText(screen.replace("-",""))
        else:
            self.OutputLabel.setText(f"-{screen}")

    def remove_it(self):
        screen = self.OutputLabel.text()
        screen = screen[:-1]
        self.OutputLabel.setText(screen)

    def dot_it(self):
        screen = self.OutputLabel.text()
        if screen[-1] == ".": 
            pass
        self.OutputLabel.setText(f"{screen}.")        
        
    def press_it(self, pressed):
        if pressed == "C":
            self.OutputLabel.setText("0")   
        else:     
            if self.OutputLabel.text() == "0":
                self.OutputLabel.setText("")        
            self.OutputLabel.setText(f"{self.OutputLabel.text()}{pressed}")

 

 

 

마치며

qt desinger를 사용하여 디자인을 하고 만들어진 ui 파일을 py 파일로 변환한 이후에 이벤트 연결을 해주어 계산기 gui를 만드는 실습을 진행해보았다.