코딩도상국

안녕하세요.

전 글은 주피터 노트북을 이용하여 딥러닝 서버를 만드는 글을 올렸습니다.

그 과정에서 주피터 노트북의 테마를 변경하였고, 확장 프로그램을 이용하여 이것저것 패키지를 추가했습니다.

하지만 주피터 노트북 테마의 툴바와 확장 프로그램에서 Table of Contents이 겹쳐서 오류는 아니지만 아래의 사진과 같이 됩니다. 

툴바에 가려 위 글이 가려 집니다. 

위 문제를 해결하기 위해서 주피터 노트북의 CSS를 건들여야 합니다. 어렵지 않으니 그대로 따라하시면 됩니다. 

C:\Users\{"사용자 이름"}\.jupyter\custom

주피터 노트북 테마를 설치했다면, .jupyter 디렉토리에 custom 폴더가 생성되있습니다.

custom 폴더에 custom.css가 있습니다.

custom.css를 열어 아래처럼 주석 처리합니다. ( div의 maintoolbar )

/* 
div#maintoolbar {
 position: absolute;
 width: 90%;
 margin-left: -10%;
 padding-right: 8%;
 float: left;
 background: transparent !important;
}
#maintoolbar {
 margin-bottom: -3px;
 margin-top: 0px;
 border: 0px;
 min-height: 27px;
 padding-top: 2px;
 padding-bottom: 0px;
}
#maintoolbar .container {
 width: 75%;
 margin-right: auto;
 margin-left: auto;
}
*/

주피터 노트북을 다시 실행시킵니다.

위 처럼 툴바가 고정되어 더 이상 윗 부분을 가리지 않습니다. 

만약 저와 같이 따라 하셨다면, 참고하시면 좋을 것 같습니다. 

https://coding-yoon.tistory.com/152

https://coding-yoon.tistory.com/153

https://coding-yoon.tistory.com/154

안녕하세요.

오늘은 PyQt5에 matplotlib를 연동하는 방법에 대해 이야기하겠습니다.

제가 이번에 만든 필터를 구현하면서 애먹었던 부분 중 하나였던게

pyqt5에 plt를 연동시키는 것이였습니다.

결국 답이 레퍼런스 찾아보거나, stackoverflow를 통해 방법을 알아냈습니다.

우선 pyqt5에 matplotlib를 연동시키는 방법을 설명하겠습니다. 

1. pyqt5에 plt 연동

from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas

우선 import 부분에 위에 문구를 추가해줍니다.

from matplotlib import pyplot as plt



self.fig = plt.figure(figsize=[4, 4])



a = plt.subplot(2, 1, 1)
a1 = plt.subplot(2, 1, 2)

plot이 두개 담겨있는 fig가 변수로 저장이 되어있겠죠?

사용법은 간단합니다.

위에 import 해준 라이브러리를 사용하기 위해 fig를 FigureCanvas에 담아주면 됩니다. 

from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib import pyplot as plt



self.fig = plt.figure(figsize=[4, 4])



a = plt.subplot(2, 1, 1)
a1 = plt.subplot(2, 1, 2)

self.canvas = FigureCanvas(self.fig)

정말 간단하죠?

2. pyqt5에 toolbar 연동

위의 사진들 많이 보셨죠?

self.fig.show() 하면 보이는 툴바입니다.

툴바는 plot을 만들어서 분석하기 위해 확대하교 움직이기 위해 사용합니다.

사용방법은 FigureCanvas랑 비슷합니다.

from matplotlib import pyplot as plt
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.backends.backend_qt5agg import NavigationToolbar2QT as NavigationToolbar



self.fig = plt.figure(figsize=[4, 4])



a = plt.subplot(2, 1, 1)
a1 = plt.subplot(2, 1, 2)

self.canvas = FigureCanvas(self.fig)
self.toolbar = NavigationToolbar(self.canvas, self)

네. 비슷하기는 하지만 인자가 하나 더 들어가있죠?

첫번 째 인자로 우리가 방금 연동시킨 FigureCanvas가 들어가네요?

두번 째 인자로는 부모 인자를 넣으라 하는군요. 부모인자라 하면은 뭘까요?

우리들은 pyqt5를 사용하기 전에 우리들은 QWidget을 상속받아 사용합니다.

제 프로그램을 예시로

이런식으로 QWidget을 상속받고, self로 초기화 시킵니다. 

간단히 말해 parent 자리에 self를 넣어주면 됩니다.

3. Layout에 붙이기

2번까지 끝나셨으면 우리들에게는 두 개의 widget이 존재합니다.

self.canvas

self.toolbar

이제부터는 PyQt5의 기본 레이아웃 문제로 변하게 됩니다.

우선 저 같은 경우는 일단 Designer는 사용하지 않습니다. 

exe를 만들기 어려울뿐더러 하나 하나 코딩 한 줄 넣는게 저에겐 덜 헷갈려서 코딩으로 적겠습니다.

위에 그림처럼 위젯을 붙이기 위해서는 

수직으로 배치하는 QVBoxLayout (vertical)

lay = QVBoxLayout()

lay.addWidget(self.toolbar)
lay.addWidget(self.canvas)

짠!

만약 툴바를 아래로 내리고 싶으시면

lay = QVBoxLayout()

lay.addWidget(self.canvas)

lay.addWidget(self.toolbar)

짠!

두 위젯이 lay라는 레이아웃에 담겨 있습니다. 

이제 show를 해줍시다.

self.setLayout(lay)

from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib import pyplot as plt
from matplotlib.backends.backend_qt5agg import NavigationToolbar2QT as NavigationToolbar



self.fig = plt.figure(figsize=[4, 4])



a = plt.subplot(2, 1, 1)
a1 = plt.subplot(2, 1, 2)

self.canvas = FigureCanvas(self.fig)
self.toolbar = NavigationToolbar(self.canvas, self)

lay = QVBoxLayout()
lay.addWidget(self.canvas)
lay.addWidget(self.toolbar)

self.setLayout(lay)

이런식으로 pyqt5에 matplot 연동시키시면 됩니다.