Leon's Programming: 9월 2021

2021년 9월 4일 토요일

Designer를 이용해서 작업할 때, Slot 단위의 추가가 아니라, 새로운 UI 클래스를 적용해야 할 때가 있습니다.

예를 들어 "게임 화면용 Widget"을 추가하려고 할 때, 해당 Widget은 굉장히 복잡한 Paint, Mouse, Keyboard 등의 이벤트를 처리해야 합니다. 그래서 이 때는 "게임 화면용 Widget"을 미리 Python 코드로 만들어 놓고 Designer에서 그 클래스로 대체해 주는게 더 낫습니다.

Custom Widget 정의

그래픽 처리만 담당하는 Widget을 아래처럼 gamewiget.py 파일에 정의합니다.

from PySide6.QtCore import *  # type: ignore
from PySide6.QtGui import *  # type: ignore
from PySide6.QtWidgets import *  # type: ignore

# 게임용 위젯
class GameWidget(QWidget):
    def __init__(self, parent= None):
        super().__init__(parent)
        self.initUI()

    def initUI(self):
        self.setGeometry(10, 10, 100,100)
        self.show()

    def paintEvent(self, e):
        qp = QPainter()
        qp.begin(self)
        qp.drawRect(10, 10, 10, 10)
        qp.end()

Designer에서 Widget 추가하기

Designer에서 해당 Widget을 GameWidget으로 변경하기

Widget을 우클릭하여 다음으로 승격을 선택

클래스 이름에는 앞에서 만들었던 이름인 GameWidget, 헤더파일에는 gmaewidget.h 입력
추가 버튼 누르고, 승격 버튼 누름

모든 작업들이 완료되면, 우측 "객체 탐색기" 부분에 Widget이 GameWidget으로 변경된 것을 확인할 수 있습니다.

Python Code 복사하여 Python IDE로 붙여넣기 수행

Pyside QT Designer로 버튼 만들기에서 수행한 작업과 동일하게 진행합니다.

작업이 완료되면 자동으로 from gamewidget import GameWidget 구문이 삽입된 것을 알 수 있습니다.
그리고 setupUi 함수에서 widget이 self.widget = GameWidget(Form) 으로 변경된것도 확인 가능합니다.

from PySide6.QtCore import *  # type: ignore
from PySide6.QtGui import *  # type: ignore
from PySide6.QtWidgets import *  # type: ignore

from gamewidget import GameWidget


class Ui_Form(object):
    def setupUi(self, Form):
        if not Form.objectName():
            Form.setObjectName(u"Form")
        Form.resize(400, 300)
        self.widget = GameWidget(Form)
        self.widget.setObjectName(u"widget")
        self.widget.setGeometry(QRect(20, 10, 361, 231))
        self.widget.setAutoFillBackground(True)
        self.pushButton = QPushButton(Form)
        self.pushButton.setObjectName(u"pushButton")
        self.pushButton.setGeometry(QRect(20, 260, 351, 24))

        self.retranslateUi(Form)

        QMetaObject.connectSlotsByName(Form)
    # setupUi

    def retranslateUi(self, Form):
        Form.setWindowTitle(QCoreApplication.translate("Form", u"Form", None))
        self.pushButton.setText(QCoreApplication.translate("Form", u"PushButton", None))
    # retranslateUi


# UI 디자이너에서 가져온 UI를 연결하는 클래스
class WindowClass(QMainWindow, Ui_Form):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


# Main 함수
if __name__ == '__main__':

    app = QApplication()
    window = WindowClass()
    window.show()
    app.exec()

실행 확인

코드를 실행하면 GameWidget의 paint 이벤트에서 정의한 qp.drawRect(10, 10, 10, 10) 함수가 잘 작동하는 것을 확인할 수 있습니다(너무 작게 그려서 잘 안보이는거 같네요 ㅠㅠㅠ).

이상입니다.

더 다양한 정보는 Pyside Qt 강좌에서 확인해 보세요.

Pyside QT Designer로 버튼 만들기

코드를 이용해서 GUI 디자인 하는 것보다 툴을 이용하여 디자인을 하고 그 결과물을 코드로 변환하여 적용하는 방식이 편리합니다.

Qt도 Designer라는 툴을 제공하므로 그것을 이용하는 방법을 알아보겠습니다.

GUI 개발 환경 구성

어이가 없지만, GUI 디자인 결과를 코드로 변경하는 프로그램(uic.exe)이 제 위치에 있지 않아서 제대로 작업을 수행할 수 없습니다. 그래서 먼저 프로그램 위치를 잡겠습니다.

venv/PySide6 아래에 bin 폴더를 생성합니다.
venv/PySide6/uic.exe 파일을 위에서 생성한 venv/PySide6/bin 폴더 아래에 복사해 넣습니다.

GUI 디자인 작업

venv/PySide6/designer.exe 실행 시켜서, Widget을 만듭니다.

좌측 Buttons 메뉴에서 PushButton을 끌어다가 가운데에 놓습니다.

GUI 이벤트 처리 작업

상단에 Signal/Slot 모드를 선택하여 모드를 변경합니다.

만들어진 PushButton을 드래그 하면 붉은색 전기신호선 같은 선이 나오게 하면 됩니다.

드래그가 완료되면 Signal과 Slot을 연결시키는 창이 뜹니다. 현재는 Slot이 없으므로 편집 버튼을 눌러서 Slot 생성 준비합니다.

Slot의 + 버튼을 누르고 pushTest() 함수를 생성합니다.

clicked() Signal과 위에서 만든 pushTest() Slot을 연결하고 확인 버튼을 누릅니다.

모든 작업이 완료되면, 모든 연결이 완료되어 파란색으로 표시 됩니다.

이제 만들어진 GUI를 코드로 변경해 보겠습니다.
일단 먼저 UI를 잘 저장해 둡니다. 저장은 소중하니까요~
그리고 상단 메뉴에서 "폼" - "Python 코드보기"를 누릅니다.

아래와 같이 코드나 나오게 되고 아래의 코드를 복사합니다.

Python 코드로 완성

위에서 최종적으로 나온 UI 클래스는 아래의 과정을 거치면 사용가능합니다.

Designer에서 작성한 Slot(이번에는 pushTest)을 처리해줄 클래스가 하나 필요해서, WindowClass 라는 Rapper 클래스를 만들어 줍니다. 만약에 Designer에서 나온 UI 클래스에 직접 함수를 넣게 되면, 다음에 Designer를 이용해 수정한 코드를 받을때, 내가 만든 함수를 다른곳에 복사했다가, 다시 붙여넣어 줘야 하는 불편함이 발생합니다.

WindowClass의 멤버 함수로 pushTest 함수를 정의합니다.
Designer에서 복사해온 코드를 붙여넣기 하면 완료됩니다.

from PySide6.QtCore import *  # type: ignore
from PySide6.QtGui import *  # type: ignore
from PySide6.QtWidgets import *  # type: ignore

# 복사해서 가져온 클래스
class Ui_Form(object):
    def setupUi(self, Form):
        if not Form.objectName():
            Form.setObjectName(u"Form")
        Form.resize(400, 300)
        self.pushButton = QPushButton(Form)
        self.pushButton.setObjectName(u"pushButton")
        self.pushButton.setGeometry(QRect(150, 130, 75, 24))

        self.retranslateUi(Form)
        self.pushButton.clicked.connect(Form.pushTest)

        QMetaObject.connectSlotsByName(Form)
    # setupUi

    def retranslateUi(self, Form):
        Form.setWindowTitle(QCoreApplication.translate("Form", u"Form", None))
        self.pushButton.setText(QCoreApplication.translate("Form", u"PushButton", None))


# UI 디자이너에서 가져온 UI를 연결하는 클래스
class WindowClass(QMainWindow, Ui_Form):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

    def pushTest(self):
        print('Hello Designer')


# Main 함수
if __name__ == '__main__':

    app = QApplication()
    window = WindowClass()
    window.show()
    app.exec()

실행화면 입니다.

이상입니다.

더 다양한 정보는 Pyside Qt 강좌에서 확인해 보세요.

2021년 9월 3일 금요일

Pyside 코드로 Button 만들기

GUI 프로그래밍의 시작 Button을 만들어보겠습니다.

Button 생성

아래와 같이 QPushButton을 생성해 보겠습니다.

from PySide6.QtWidgets import QApplication, QWidget
from PySide6.QtWidgets import QPushButton

app = QApplication()
window = QWidget()
window.resize(300, 200)

button = QPushButton("Push me", window)
button.move(50, 50)
button.resize(80, 30)

window.show()
app.exec()

위처럼 입력하면 아래와 같이 버튼이 생성됩니다. 그런데 이벤트 연결이 안되어 있기 때문에, 눌러도 아무런 반응이 없습니다.

Button에 이벤트 연결하기

우리는 Button을 클릭했을때, "Hello Pyside"를 출력해 보겠습니다.

Qt에서 이벤트는 Signal과 Slot으로 구성됩니다. 간단히 보면 Signal은 이벤트의 종류이고 Slot은 이벤트 처리 함수라고 보시면 됩니다.

다시 정리하면 Button의 click 이벤트가 발생하면 print를 수행하는 함수로 연결해주는 코드를 작성해 보겠습니다.

from PySide6.QtWidgets import QApplication, QWidget
from PySide6.QtWidgets import QPushButton


def function_print():
    print("Hello Pyside")


app = QApplication()
window = QWidget()
window.resize(300, 200)

button: QPushButton = QPushButton("Push me", window)
button.move(50, 50)
button.resize(80, 30)

button.clicked.connect(function_print)

window.show()
app.exec()

button.clicked.connect(function_print) 구문에서 clicked가 Signal 이고, function_print 함수가 Slot이 되겠습니다.

이제 실행해보면, 버튼을 누를때 Hello Pyside가 출력되는것을 볼수 있습니다.^^

이상입니다.

더 다양한 정보는 Pyside Qt 강좌에서 확인해 보세요.

Pyside 시작하기 - Qt를 python에서 사용하기

Python에서 GUI를 사용하는 방법이 여러 개가 있는데, 그 중에 가장 안정적으로 사용할 수 있는 방법이 Qt 입니다.

처음 Qt 프로그래밍을 하기엔 초반 러닝커브가 있어서 힘들 수 있는데, 조금만 극복하면 잘 사용할 수 있습니다.

Qt를 Python에서 사용하는 방법은 PyQt와 PySide가 있는데, 둘 차이는 라이센스에 있습니다.

PyQt는 GPL 이고, PySide는 LGPL 이라서, PySide가 상업적으로도 사용 가능합니다.

설치하기

현재 나온 최신 버전은 Pyside6 입니다. 아래의 명령어로 설치!

pip install pyside6

기본 화면 띄우기

Qt 기본 구조는 기본적으로 하나의 Application이 존재하고, 그 아래에 window가 자식으로 붙는 구조입니다.

from PySide6.QtWidgets import QApplication, QWidget

app = QApplication()
window = QWidget()
window.show()
app.exec()

위의 코드를 입력하면 아래와 같이 화면이 나옵니다.

이상입니다.

더 다양한 정보는 Pyside Qt 강좌에서 확인해 보세요.

Blogger 작성하는 방법

네이버 블로그 하다가, 구글로 블로그로 옮겼습니다.

구글로 검색을 자주 하기 때문에, 제가 쓴 글을 구글에서 보기 위한 선택입니다.

그런데 블로그 작성하는 건 네이버에 비해서 조금 불편합니다.

글쓰기에 필요한 기능을 간단히 작성해 봅니다.

글 작성

메인 화면에서 "+ 새 글" 버튼을 누르면 됩니다.

이미지 올리기( Ctrl + c, v 기능 지원합니다.)

이미지 복사해서 클립보드에 있는 걸 붙여 넣기 하면 될때가 있고 아닐때가 있어서 상단의 이미지 파일 추가 버튼을 눌러서 하는거 추천

프로그램 코드 올리기

개발자에게는 프로그램 코드가 개발 툴처럼 보기 좋게 올라가면 눈에 잘 들어옵니다. Blogger에서는 html 코드는 직접 작성하는 방식으로 올려야 하는데, html 코드를 예쁘게 편집해주는 사이트가 있습니다(예쁘긴 한데 좀 어렵습니다).

먼저 http://hilite.me/ 사이트에 접속합니다.

먼저 Source code에 자신의 코드를 입력합니다.
Language를 선택합니다.
Highlight!를 클릭하면 Preview에 결과 화면이 나옵니다.
Preview가 맘에 들면 HTML을 복사합니다.
이제 다시 Blogger로 와서 우측 상단에 보면 연필 아이콘이 있는데 이것을 눌러보면 아래와 같이 선택 창이 뜹니다. 여기서 HTML 보기를 선택합니다.

그리고 hilight 사이트에서 복사해온 HTML코드를 위에 원하는 위치에 넣어줍니다(이 때 HTML 지식이 좀 필요해서, 사람들이 불편하다고 합니다). 보통은 <p> 태그 기준으로 넣을 위치가 나타납니다.
모든 작업을 완료하면 아래와 같이 짠하고 나옵니다.

카테고리 설정

이 기능이 네이버 블로그에 비해서 불편합니다. 네이버가 폴더 방식이라 직관적입니다. Blogger에서는 태그 방식이라서 태그(라벨)를 잘 정리(?)하면 됩니다.

글 작성할 때 우측 상단에 라벨이 있는데, 여기에 태그명을 작성하면 됩니다.

이상입니다. 앞으로 기술 관련 내용은 이곳에 작성 하렵니다.

Leon's Programming

2021년 9월 4일 토요일

Pyside Qt 강좌 목록

Pyside QT Designer로 그래픽 처리용 위젯 추가하기

Pyside QT Designer로 버튼 만들기

2021년 9월 3일 금요일

Pyside 코드로 Button 만들기

Pyside 시작하기 - Qt를 python에서 사용하기

Blogger 작성하는 방법

글 작성

Pyside Qt 강좌 목록