[PyQT5] PyQt5 Mainwindow에 Qt Designer를 사용한 graph Widget 추가

Qt Designer로 설계할 때 PyQt5 응용프로그램에서 사용자 정의 위젯을 사용하는 방법에 대해 알아보기

Qt Designer는 PyQt5 GUI를 설계하기 위한 훌륭한 도구로, PyQt5 위젯과 레이아웃의 전체 범위를 사용하여 앱을 구성할 수 있다. 그러나 응용프로그램이 점점 더 복잡해짐에 따라 사용자 정의 위젯을 작성하거나 Qt Designer 내에서 위젯을 사용할 수 없는 PyQtGraph와 같은 PyQt5 라이브러리를 사용할 수 있다.

Qt Designer는 설계에서 사용자 정의 또는 외부 위젯을 나타내기 위해 placeholder(자리 표시자) 위젯을 사용하는 메커니즘을 지원한다. 본 과정에서는 Qt Designer 내에서 MainWindow에 PyQtGraph plot을 포함하기 위해 placeholder(자리 표시자)를 사용하는 과정을 설명한다.

위젯 승격(Widget Promote)

Qt Designer에서 placeholder(자리 표시자)를 사용하는 원칙은 매우 간단하다.

Qt Designer에서 UI를 정상적으로 생성하십시오.
추가할 사용자 지정 위젯을 나타내는 placeholder(자리 표시자) 위젯을 추가하십시오.
Qt에 UI를 작성할 때 placeholder(자리 표시자)를 실제 위젯으로 바꾸도록 지시하십시오.
Qt에서 이 최종 단계는 (기본 클래스를 promote하는 것과 같이) 'promote'이라고 한다.

추가하려는 사용자 지정 위젯이 기존 Qt 위젯의 하위 클래스인 경우 기본 클래스를 승격할 placeholder로 사용할 수 있다. 예를 들어 QPushButton에서 하위 분류된 사용자 지정 MyAwesomeButton 위젯이 있는 경우 QPushButton을 placeholder로 사용하여 MyAwesomeButton으로 승격한다. 이를 통해 Qt Designer 내에서 기본 클래스 속성, 이벤트 및 작업에 액세스할 수 있다.

사용할 명백한 기본 클래스가 없는 경우 모든 Qt Widget의 공통 기본 클래스인 "Widget"을 사용할 수 있다.

PyQtGraph

데이터 과학에 있어서 Python은 향후 대중적인 사용이 될 것이며, PyQt5를 통해서 대시보드와 분석 도구를 일반적인 사용Case가 될 것이다. 이러한 점에서 UI에 plot을 추가할 수 있다는 것은 매우 유용하며 Qt Designer에서 이 작업을 수행할 수 있다는 것은 훨씬 더 유용하다고 할 수 있다.

Python에는 많은 plotting library가 있으며, matplotlib가 가장 인기 있고 PyQt5에 대한 기본적인 지원을 제공한다. PyQtGraph는 Qt의 기본적인 QGraphicsScene을 사용하여 애플리케이션의 자연스러운 부분을 느끼는 빠른 줌, 스케일링, 드래그 드롭 동작을 제공하는 인기 있는 대안이다.

Ploting을 위해 PyQtGraph를 사용하든 maplotlib를 사용하든, plot canvas 위젯은 Qt Designer 내에서 사용할 수 없다. 하지만 본 과정에서는 사용자 지정 위젯으로 사용하는 방법을 안내하도록 하겠다.

PyQtGraph를 아직 설치하지 않은 경우 다음을 사용하여 설치할 수 있다.

Qt Designer

이제 Qt Designer를 사용하여 간단한 UI 디자인을 만들고 PyQtGraph 위젯의 placeholder를 추가하도록 하겠다. 먼저 Qt Designer를 열고 정상적으로 새 MainWindow를 생성한다.

PyQtGraph 위젯에 적합한 기본 클래스가 없으므로 기본 "Widget"을  선택하여 창 중앙에 끌어 놓는다.
그리고, 위젯 Object Name을  "graphWidget"이라는 이름을 지정하고, 파이썬 코드에서 그 이름으로 참조하도록 한다.

위젯을 마우스 오른쪽 버튼으로 누르고 위젯의 상황에 맞는 메뉴에서 승격 대상을 선택한다.
QWidget을 승격하면 PyQtGraph plot 위젯에서 지정된 하위 클래스로 교체해야 함을 나타낸다.

자리 표시자 위젯이 될 사용자 지정 위젯 클래스를 지정하는 대화상자가 표시된다.

헤더 파일은 클래스를 가져오는 데 사용되는 Python 모듈의 이름인 pyqtgraph이다. 대체할 위젯의 클래스 이름을 "PlotWidget"으로 지정한다.

짜잔! 그 위젯은 이제 plot이 가능한 canvas로 승격되었다. 하지만 Qt Designer 내에서는 어떤 변화도 볼 수 없을 것이다. MainWindow를 PyQt app과 동일한 디렉토리에 "mainwindow.ui"라는 이름으로 저장하자.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Loading the .ui file

이제 UI 정의를 포함하는 mainwindow.ui 파일이 있다. Python에서 이걸 로드해서 창과 사용자 지정 위젯을 보여줄 수 있다. 기본 앱 템플릿부터 시작해 봅시다.

우선, x와 y 데이타를 갖는 간단한 plot을 만드는 함수를 만들어보자.

그래서, 온도를 나타내는 temp와 시간을 나타내는 hour라는 두 개의 배열을 이용하여 plot() method를 추가하여 graph widget인 .plot() method를 사용하도록 했다.
이제 코드를 실행하여 다음을 확인하도록 하자.

자! 이제 당신은 방금 당신의 첫 plot을 PyQtGraph에 삽입하는데 성공했을 것이다.

기본 PyQtGraph plot은 그리 예쁘지 않지만 표시된 데이터를 변경하기 위해 .plot()을 호출하여 사용할 수 있다.

다음 기회가 되면, 라인 색상, 스타일 및 대체 유형의 plot을 포함하여 좀 더 복잡한 PyQtGraph plot과 plot customization을 다루려 한다.

참조사이트: https://www.learnpyqt.com/courses/qt-creator/embed-pyqtgraph-custom-widgets-qt-app/

[출처] https://howtoworld.tistory.com/22