Qt DesignerでMatplotlibのウィジェットを配置したGUI画面を作成

Qt Python Matplotlib

はじめに

Qtで作成したGUI画面上で、Matplotlibで描いたグラフを描画することはできた。
しかしその場合にQt Designerは使用していなかった。画面デザインにはQt Designerを使うことが不可欠なので、Qt Designerを使う場合にグラフ画面をどのように埋め込むかをまとめる。

Matplotlibのウィジェットを配置したGUI画面をデザインする

Qt Designerのウィジェットボックスの中には、MatplotlibWidgetがあるので、これを画面上に配置して画面構成をデザインする。
ここでは、ボタンとMatplotlibWidgetを配置する。メニュー項目も加える。

このデザインを保存する。ファイル名はなんでもいいが、qtdesigner.uiとしよう。これをいつものようにpyファイルに変換する。

> pyuic4 qtdesigner.ui -o qtdesigner.py

変換の結果、作成されたコードは以下の通り。

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'qtdesigner.ui'
#
# Created: Wed Oct 22 17:26:35 2014
#      by: PyQt4 UI code generator 4.9.6
#
# WARNING! All changes made in this file will be lost!

from PyQt4 import QtCore, QtGui

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s

try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName(_fromUtf8("MainWindow"))
        MainWindow.resize(451, 395)
        self.centralwidget = QtGui.QWidget(MainWindow)
        self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
        self.verticalLayout_2 = QtGui.QVBoxLayout(self.centralwidget)
        self.verticalLayout_2.setObjectName(_fromUtf8("verticalLayout_2"))
        self.verticalLayout = QtGui.QVBoxLayout()
        self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
        self.mplwidget = MatplotlibWidget(self.centralwidget)
        self.mplwidget.setObjectName(_fromUtf8("mplwidget"))
        self.verticalLayout.addWidget(self.mplwidget)
        self.drawButton = QtGui.QPushButton(self.centralwidget)
        self.drawButton.setObjectName(_fromUtf8("drawButton"))
        self.verticalLayout.addWidget(self.drawButton)
        self.verticalLayout_2.addLayout(self.verticalLayout)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtGui.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 451, 24))
        self.menubar.setObjectName(_fromUtf8("menubar"))
        self.menuFile = QtGui.QMenu(self.menubar)
        self.menuFile.setObjectName(_fromUtf8("menuFile"))
        MainWindow.setMenuBar(self.menubar)
        self.actionClose = QtGui.QAction(MainWindow)
        self.actionClose.setObjectName(_fromUtf8("actionClose"))
        self.menuFile.addAction(self.actionClose)
        self.menubar.addAction(self.menuFile.menuAction())

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

    def retranslateUi(self, MainWindow):
        MainWindow.setWindowTitle(_translate("MainWindow", "Matplotlib embedded window", None))
        self.drawButton.setText(_translate("MainWindow", "Draw figure", None))
        self.menuFile.setTitle(_translate("MainWindow", "File", None))
        self.actionClose.setText(_translate("MainWindow", "Close", None))

from matplotlibwidget import MatplotlibWidget

メインのコードを書く

画面デザインのコードqtdesigner.pyは完成したので、処理を記述し画面を表示するコードを書く。
このコードは下のようになる。ファイル名は何でもいいがmain.pyとする。

import sys
from PyQt4 import QtCore
from PyQt4 import QtGui
from qtdesigner import Ui_MainWindow

class DesignerMainWindow(QtGui.QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(DesignerMainWindow, self).__init__(parent)
        self.setupUi(self)

        #グラフを描くためのシグナルとスロット
        QtCore.QObject.connect(self.drawButton, QtCore.SIGNAL("clicked()"),
                               self.draw_graph)
　　　　#ウィンドウを閉じるためのシグナルとスロット
        QtCore.QObject.connect(self.actionClose, QtCore.SIGNAL("triggered()"),
                               QtGui.qApp, QtCore.SLOT("quit()"))

    def draw_graph(self):
　　　　#ここでグラフを描く
        x = [0, 10, 100]
        y = [3, 4, 5]
        self.mplwidget.axes.set_xscale('log')
        self.mplwidget.axes.set_title('GRAPH')
        self.mplwidget.axes.plot(x,y)
        self.mplwidget.draw()

app = QtGui.QApplication(sys.argv)
dmw = DesignerMainWindow()
dmw.show()
sys.exit(app.exec_())

プログラムを実行する

main.pyを実行するとGUI画面が起動する。画面上のボタンを押すと、グラフが描画される。

ボタンを押す前

ボタンを押した後

Matplotlib for Python Developers: Build Remarkable Publication Quality Plots the Easy Way
Matplotlib for Python Developers: Build Remarkable Publication Quality Plots the Easy WaySandro Tosi

Packt Publishing 2009-10-30
売り上げランキング : 86743


Amazonで詳しく見る by G-Tools