본문 바로가기
코딩취미/Python

PySide6를 사용하여 MDI 인터페이스에서 수식 표현하기

by 브링블링 2025. 2. 19.
반응형

PySide6를 사용하여 MDI 인터페이스에서 수식 표현하기

🏷️ 소개

PySide6는 Python 기반의 GUI 애플리케이션 개발을 위한 강력한 도구입니다. 이 글에서는 MDI(Multiple Document Interface) 환경에서 수식을 시각적으로 표현하고, HTML을 활용하여 분수를 표시하는 방법을 단계적으로 설명합니다. 초보자도 쉽게 따라할 수 있도록 상세한 코드와 설명을 제공합니다.

⚙️ 프로젝트 요구사항

항목 설명
Python 3.10 이상
PySide6 6.x 버전
QtWebEngineWidgets HTML 렌더링을 위한 필수 라이브러리

 

설치 명령어:

pip install PySide6

🛠️ 프로젝트 설명

기능:

  1. MDI 환경에서 수식 렌더링
  2. HTML을 사용하여 수식의 분자와 분모를 구분
  3. 사용자의 입력값에 따라 수식을 동적으로 업데이트
  4. 특정 위젯만 중앙에 정렬
  5. 수식 아래에 사용자에게 필요한 주의사항 추가

수식 형식:

반응형

💻 소스 코드

import sys
from PySide6.QtWidgets import (QApplication, QMainWindow, QMdiArea, QMdiSubWindow, QVBoxLayout, QWidget,
                               QLabel, QLineEdit, QPushButton, QFormLayout)
from PySide6.QtGui import QFont
from PySide6.QtCore import Qt

class MathGraphicsView(QLabel):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setAlignment(Qt.AlignCenter)
        self.setFont(QFont("Arial", 16))
        self.setTextInteractionFlags(Qt.TextSelectableByMouse)
        self.update_math_expression(1, 1, 1, 1, 1)

    def update_math_expression(self, r, n1, n2, p, d):
        formula_text = f"""
        <html>
        <body>
        <div style="text-align: center; font-size: 20px; font-family: Arial, sans-serif;">
        <table style="margin: auto; text-align: center; border-collapse: collapse; width: auto;">
            <tr>
                <td rowspan="2" style="vertical-align: middle; padding-right: 5px;"><b>f<sub>OUT</sub></b> =</td>
                <td style="padding-bottom: 2px; text-align: center;">
                    <div style="display: inline-block; width: 100%; text-align: center;">
                        f<sub>PLLINCLK</sub> × ({n1} + 1)
                    </div>
                </td>
                <td rowspan="2" style="vertical-align: middle; padding-left: 5px;">× ({d} + 1)</td>
            </tr>
            <tr>
                <td style="border-top: 2px solid black; padding-top: 2px; text-align: center;">
                    ({r} + 1) × ({n2} + 1) × ({p} + 1)
                </td>
            </tr>
        </table>
        <br>
        <div style="text-align: left; font-size: 16px; font-family: Arial, sans-serif; margin-top: 10px;">
            <b>* Requirements for calculating Fout formula</b>
            <ul>
                <li>Set the value of <b>[START]</b> to '<b>True</b>'</li>
                <li>Set the value of <b>[OUTPUT_TYPE]</b> to '<b>PLL_OUT</b>'</li>
            </ul>
        </div>
        </div>
        </body>
        </html>
        """
        self.setText(formula_text)

class MathSubWindow(QMdiSubWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Formula View")
        self.view = MathGraphicsView()
        self.initUI()

    def initUI(self):
        widget = QWidget()
        layout = QVBoxLayout()

        self.r_input = QLineEdit("1")
        self.n1_input = QLineEdit("1")
        self.n2_input = QLineEdit("1")
        self.p_input = QLineEdit("1")
        self.d_input = QLineEdit("1")

        form_layout = QFormLayout()
        form_layout.addRow("R:", self.r_input)
        form_layout.addRow("N1:", self.n1_input)
        form_layout.addRow("N2:", self.n2_input)
        form_layout.addRow("P:", self.p_input)
        form_layout.addRow("D:", self.d_input)

        update_button = QPushButton("Update Formula")
        update_button.clicked.connect(self.update_formula)

        layout.addLayout(form_layout)
        layout.addWidget(update_button)
        layout.addWidget(self.view, alignment=Qt.AlignVCenter)

        widget.setLayout(layout)
        self.setWidget(widget)

    def update_formula(self):
        r = self.r_input.text()
        n1 = self.n1_input.text()
        n2 = self.n2_input.text()
        p = self.p_input.text()
        d = self.d_input.text()

        try:
            r, n1, n2, p, d = int(r), int(n1), int(n2), int(p), int(d)
            self.view.update_math_expression(r, n1, n2, p, d)
        except ValueError:
            pass

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("MDI Example")
        self.setGeometry(100, 100, 800, 600)

        self.mdi = QMdiArea()
        self.setCentralWidget(self.mdi)

        self.addSubWindows()

    def addSubWindows(self):
        math_window = MathSubWindow()

        self.mdi.addSubWindow(math_window)

        math_window.show()

if __name__ == "__main__":
    app = QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()
    sys.exit(app.exec())

🔍 코드 설명

1️⃣ MathGraphicsView 클래스

  • QLabel을 상속받아 수식을 HTML 형태로 표현.
  • update_math_expression() 메서드를 통해 입력값에 따라 수식을 동적으로 업데이트.

2️⃣ MathSubWindow 클래스

  • QMdiSubWindow를 상속받아 서브 윈도우를 구성.
  • 입력 폼과 수식 창을 하나의 레이아웃에 배치.
  • 특정 위젯(self.view)만 중앙 정렬하도록 설정.

3️⃣ MainWindow 클래스

  • QMainWindow를 상속받아 메인 윈도우 구성.
  • QMdiArea를 사용하여 MDI 환경을 구축.

🧪 실행 결과

  1. 수식 표시: 입력값을 변경하면 수식이 동적으로 변경됩니다.
  2. 중앙 정렬: 수식 위젯이 중앙에 표시됩니다.
  3. 주의사항 출력: 수식 아래에 주의사항이 표시됩니다.
반응형
저작자표시 비영리 변경금지

'코딩취미 > Python' 카테고리의 다른 글

PySide6에서 화면 로딩 중 마우스 포인터 변경하는 방법  (0) 2025.02.20
PySide6에서 GIF 이미지를 반전시키는 방법  (0) 2025.02.19
PySide6에서 sizeHint()와 resizeEvent의 크기 차이 이해하기  (0) 2025.02.19
PySide6 QComboBox 아이템 우측 정렬 적용 방법  (0) 2025.02.18
PySide6로 QGroupBox를 스크롤 가능하게 만드는 방법  (0) 2025.02.18

관련글

티스토리툴바