クーの自由研究

最下層からまた一段ずつ螺旋階段を登り始めます

QTデザイナ(QT Designer)でpyqtgraphオブジェクトを扱う方法

今回はQT Designerでpyqtgraphオブジェクトを扱う方法です

 

こんにちわ、こんばんわ。かえるのクーです。

 

かえるはだいたいじっとじていて、気が向いたときや

窮地におちいったときだけジャンプします。(自己正当化)

 

OS領域の容量不足のためWindows10を再インストールしました。(ubuntsuはVMで動作させます。)いろいろ整ってませんが、ゆるゆると進みます。

お急ぎの方は「操作手順(例)」だけご覧ください。

 

f:id:np2LKoo:20180715160512p:plain

さて、QT編で画面デザインしてから、pyqtgraphでリアルタイムで倍音表示したところまで行いましたが、今回はそれをあわせて表示してみます。

新規性はありませんが、QTの「デザイナ」でpyqtgraphオブジェクトを扱う方法をメモします。

これはネットを探していましたが、なかなか情報がありません。。。

と思っていたらpyqtgraphの本家にその方法が書かれています。

チュートリアルやサンプルコードまであります。

 

このページをご覧いただいている方でQTについて興味がある方はほとんどないと思われますが、思いのほか便利なので自分の備忘のために書いておきます。

ブログの備忘としての機能は、思いのほか実用性があることを実感しています。わすれっぽいので、何度も自分のブログに救われています。

 

pyqtgraph にこだわるのは、そのリアルタイム性に惚れ込んだからです。

今年のおたまじゃくしさん向けに少し余談もふくめて書きます。

 

QT(キュート)についてのおさらい

 プラットホームに依存しないGUIツールキットです。GUI以外にもいろいろ機能がありますが、まずはGUIツールキットとして使うケースがほとんどだと思います。

QTデザイナーで画面のオブジェクトを自由に配置して、基本的な属性を設定して簡単に画面を作れます。基本的な画面構成であればだいたいこなせるようです。QTデザイナーで作成したファイルは、拡張子が .ui で保存されます。普通のテキストエディタでも見れるXML形式の記述になっています。

この .ui ファイルをもとに、各言語の実装にプレコンパイルする方法や、各言語で .ui ファイルをそのまま解釈して画面オブジェクトとして Load するしくみが準備されています。

変換はOSコマンドで行います。

・pyuic5 -o PopTeamEpic.py PopTeamEpic.ui (またはpyuic4)

・pyside -uic -o PopTeamEpic.py PopTeamEpic.ui (PySide系はこちら)

Python では ui ファイルを直接読むことができます。

・PyQt5.uic.loadUi('./PopTeamEpic.ui')   (PyQt4 も同様)

・QUiLoader().load("./PopTeamEpic.ui") (PySide.QtUiTools)

 

日本ではあまり人気がない?

書籍の翻訳の少なさや日本語での情報量の圧倒的少なさから、現在でも人気が薄いと思われます。初期の人気のなさは、日本語固有のバクに起因するものといわれています。

初心者のボクでもとても使いやすく、もっと人気がでてもいいのでは?と思います。

 

PythonでのQT

Pythonで主だったバインディングとして、PyQT系とPySide系があります。情報の検索ではどちらの系の情報か、または両方で有効な情報なのかについて気をつける必要があります。「PySide系」限定のようにみえる記事でもPyQT系でも問題ないものが結構ありました。(とはいえ、それぞれ別のバインディングであることに注意が必要です)

 

シグナルとスロットについて

QTを使うためには「シグナル&スロット」について知る必要があります。

「オブザーバー」パターンだそうです。

あるオブジェクト(通知する側:サブジェクト)で発生したイベントを「シグナル」として別のオブジェクト(通知される側:オブザーバ)へ通知し、そのシグナルの情報(引数など)をもとに特定の「スロット」が動作します。

このシグナルとスロットを結びつけ(コネクト)ることによりイベントでの動作を定義していきます。

QTに関する説明はこのシグナルとスロット、およびオブジェクト(ウィジェット)の属性や親子関係についてのものが多数でてきます。まずは、シグナルとスロットがなにかを知りました。いろいろ検索してみました。Python系の説明やチュートリアルをさがしてみましょう。

PyQtでお手軽GUI開発♪―――は可能だったか? 第3回 イベント編

QTデザイナについて


では、簡単なチュートリアルのYoutubeを張りました。

ボクのWindows10環境ではQTデザイナ

C:\ProgramData\Anaconda3\Library\bin\designer.exe

にありました。(日本語メニュー化されています)(5.9.5)

昨日pip で取得した pyqt5-tools のQTデザイナは

C:\ProgramData\Anaconda3\Lib\site-packages\pyqt5-tools\designer.exe

にありました。(5.9.1)

なんとpipで取得した版よりもanacondaで取得した日本語メニューが使える版のほうが新しかったです。

日本語メニュー版を使っていますが、英語の説明でどのメニューのことを言っているかわからないことがあるので、両方必要に応じて起動しています。

 

灯台下暗し?

本題の「QTデザイナでpyqtgraphオブジェクトを扱う方法」については、なんのことはなく、pyqtgraphのマニュアルに載っていました。検索の仕方が悪かったのかなかなかここにたどり着けなかったので記載します。「さすがに本家には記載してないよね」の先入観があったようです。

How to use pyqtgraph — pyqtgraph 0.10.0 documentation

このリンク先の

Embedding widgets inside PyQt applications

のあたりに記載してある手順が「それそのもの」です。

PyQtGraphのウィジェットは、 "Promote To ..."機能を介してDesignerのuiファイルに含めることができます:

"Promote To ..."は日本語メニュでは、「格上げ先を指定...」です。

操作手順(例)

f:id:np2LKoo:20180715191658p:plain 1. QTデザイナで、Graphics View を画面に配置します。(画面左の"Display Widgets"の下に"Graphics View"があります。)

2. 配置したGraphics Viewのオブジェクトの上で右ボタンクリックメニューから「格上げ先を指定...」(英語メニューでは「Promote To...」)を選択します。

3. 格上げされたクラス名:欄にクラス名を指定します(操作例では"PlotWidget"を入力します。)

(英語ダイアログでは[Promoted class name:]です。)

4. ヘッダファイル:にpyqtgraphを入力します。グローバルにインクルードするにチェックを入れます。

f:id:np2LKoo:20180715194427p:plain

5. 「追加」ボタンをクリックしてから「格上げ」ボタンをクリックします。

(英語ダイアログでは[Add]ボタンと[Promote]ボタンです。)

f:id:np2LKoo:20180715194441p:plain

 この例では、該当オブジェクトは"graphicsView" というオブジェクト名です。(この画面とは別に、オブジェクトの「プロパティ」のObjectNameとして指定しています。「プロパティ」はデザイナー画面では右側のペイン(機能のエリア)にあります。)

loadUi() (たとえばPyQt5.uic.loadUi())すれば、そのインスタンスのgraphicsViewとしてアクセスして操作できます。*1

もちろん、graphicsViewはpyqtgraphのplotオブジェクトになっています。

 

素晴らしい!

f:id:np2LKoo:20180715210750p:plain

ちなみに定義したオブジェクトは.ui ファイルでは

f:id:np2LKoo:20180715211523p:plain

のように定義されていました。(配置の位置、サイズは別の箇所で定義されてました)

pyqtgraphのサンプルとしては、ボクの環境では、

C:\ProgramData\Anaconda3\Lib\site-packages\pyqtgraph\examples

にありました。なお、表示しているのは、前回と同様の音声のパワースペクトルです。リアルタイムに表示します。(他の部分はまだモック(張りぼて)です)

まとめ

QTデザイナ-でpyqtgraphを使うには配置オブジェクトの「格上げ」(Promote)操作のみで可能。(そのままLoadUi可能)

(デザイナーの右側の選択肢にpyqtgraphがでてくる訳ではない)

 

さらにpyqtgraph の動作サンプル(多数あり)は

import pyqtgraph.examples
pyqtgraph.examples.run()
 

で起動できるメニューからどうぞ。f:id:np2LKoo:20180715160947p:plain

f:id:np2LKoo:20180715161925p:plain

f:id:np2LKoo:20180715161951p:plain

う~ん。さらに素晴らしい!!

さぁみなさん、ご一緒に

pip install PyQt5

pip install PyQt5-tools

そして 

pip install pyqtgraph

*1:ちなみにQT Designerで作成した hogehoge.uiファイルはPythonコードに変換して使用する方法と、そのまま loadUi()する方法がありますが、ボクの使用範囲では、そのままloadUiするほうが楽です。

どぶお/Pythonで遊ぼう!/PyQt4でuiファイルを直接使う - BioKids Wiki