PyQt Designerを使用したPython GUIの構築

効果的なPython+PyQt Designerワークフロー

始める前に、Pythonの中級から上級の知識があることを前提としています。 これには、基本的なデータ型(特に辞書)、ステートメント、および関数が含まれます。 オブジェクト指向プログラミング(OOP)に関する知識は有用ですが、必須ではありません。これは、Python PyQtライブラリとデザイナーの組み合わせを使用してPython GUIを作成するための簡単なチュートリアルです。 DesignerはPyQtに付属しており、GUIを視覚的に作成できるプログラムです。 DesignerとPython IDE/テキストエディタだけを使用します。 Python GUIは複雑である必要はありません!

これらの機能を備えたPython GUIワークフローの作成を見てみましょう。

  • カスタムユーザー設定用の設定ファイル
  • プログラム内の複数のウィンドウ
  • ボタン、入力ボックス、およびその他のクリック可能な項目に機能を追加する
  • 写真とロゴ

これは本当にあなたがシンプルだが堅牢なPython GUIに必要なものです。 このチュートリアルでは、単純な通貨コンバータを作成してみましょう。

Python3を使用します。6このチュートリアルでは、Windows10を使用して仮想環境でこのチュートリアルを作成します。 このチュートリアルでは、GUI用のPyqt5とサンプルプロジェクトの要求のみをインストールする必要があります。 これはpipを使用して行われます。 Designerにはpip Pyqt5のインストールは付属しておらず、個別にインストールする必要があることに注意することが重要です。 以下のコードブロックは、入力する必要があるコマンドを示しています:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Output of the pip install process for PyQt5

Once it is installed, just search for “Designer” in your computer and it should pop up.Div>

通貨データ

私たちは、便利に私たちが使用できるapiを持っているexchangerate-apiから無料の外国為替データを取得することができます。 APIは、Python辞書を使用してナビゲートできる通貨情報を含むJSONオブジェクトを返します。 為替レートは、指定したマスター通貨に基づいています。

以下の例では、米ドル(USD)をマスター通貨として使用して外国為替を見てみたいと思います。

import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
response = requests.get(url)
data = response.json()# The data variable will look like the dictionary below
{
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.
}
}

GUIを作成する

今、楽しい部分が来ます。 GUIを作成する!Qt Designerを開くと、このプロンプトが開きます。 私は空のキャンバスから始めたいので、”ボタンなしのダイアログ”を選択してから”作成”をクリックします。div>

今、あなたはで動作する空のダイアログウィンドウを持っています….. あなたは、左側のリストを使用してウィジェットを追加するために開始することができます。 これらのウィジェットを追加するには、GUIウィンドウにドラッグアンドドロップします。 多くのウィジェットがありますが、このチュートリアルでは次のウィジェットのみをカバーします。

  • ラベル
  • プッシュボタン
  • 行編集
  • コンボボックス

コンボボックスはドロップダウンリストとも呼ばれ、デザイナでコンボボックスオブジェクトをダブルクリックすると、アイテムを追加できるウィンドウが表示されます。 この場合、使用している通貨を追加します。 これにより、ユーザーは参照通貨として使用する通貨を決定できます。p>

左下の緑色の追加ボタンをクリックしてウィジェットを設定します

左下の緑色の追加ボタンをクリックしてウィジェットを設定します

これらのウィジェットの追加を開始するときは、pythonコードで簡単に参照できるように、名前が適切であることを確認する必要があります。 これは、右側のプロパティエディタのobjectNameを使用して行われます。 通常、labelTitleやlineEditLocationDetailsなどの既存の名前に関数を追加するだけです。 このスタイルの命名は、Pythonコードを入力するときにどのタイプのGUIオブジェクトを使用しているかを覚えておくのに役立ちます。P>

objectName(赤で強調表示)は、Pythonコードで作業するときの変数名になります

あなたが望むようにスタイルを設定しますが、このチュートリアルに従う人のために、以下のようなguiを作成します:div>

私の美しいGUI

そのフローティング”ロゴ”テキストは、ロードする画像のプレースホルダーです。 それは後で説明します!QT DesignerからPythonへ

UIファイルをプロジェクトフォルダに”mainDialog.”として保存します。私は”ui”というサブフォルダを作成し、そこに保存して、プロジェクトフォルダを整理しておくのが好きです。それが保存されたら、Pythonが実際に理解できるものに変換する必要があります。 コマンドプロンプトを使用して、uiサブフォルダに移動します。 仮想環境でもこれを行う場合は、Pyqt5インストールが含まれている仮想環境にもいることを確認してください。

このコードを入力して、uiファイルを含むフォルダに移動し、変換します。uiファイルを.pyファイルに変換します。

プロジェクトフォルダのルートに、”というPythonファイルを作成しますmain.py”.このコードを入力します:p>

実行しますmain.py Pythonインタプリタを使用したファイル。 おめでとう! これでPythonがコードを実行でき、GUIがポップアップ表示されます。 私はこれまでのコードの重要な部分を説明します:

  • 行5:私たちはインポートしていますmainDialog.py uiサブフォルダ内のファイル。 私はエイリアス”mainDialog”を使用して命名を容易にします。
  • 10行目:このクラスは、作成したmainDialogウィンドウに関連するすべての関数を保持します。 最初の引数は、使用しているGUIのタイプであるQDialogオブジェクトを呼び出します。 第二引数は、我々が宣言したエイリアスに基づいており、それはから生成されたPythonファイル内のUi_Dialogクラスです。uiファイルの変換
  • 12行目:__init__関数は、プログラムの起動時に実行するコードであるため、重要です。 だから、これはどこに自己です。setupUi(self)は、プログラムを開いたときにUIを実行するために使用されます。 私たちは、ソフトウェアを実行するとすぐにそれらを動作させたいので、ここに設定ファイルやボタン機能をロードするようなものを置くことに
  • 20行目:これはGUIを実行して開くコードです。

ボタンやオブジェクトに関数を追加する

今、私たちは私たちの美しいGUIを持っています。 どのように我々はそれが外国為替を行うようにするのですか? のは、私はこの記事の冒頭で示した最新の外国為替レートをロードする機能を追加してみましょう。 次に、オブジェクトをPythonコードに接続するためのコードを入れてみましょう。Designerで作成したオブジェクトに接続しようとするときは、”self”から始める必要があります。

”. したがって、PyQt DesignerのオブジェクトがlabelTitleと呼ばれていた場合は、selfと入力してオブジェクトを呼び出します。ラベルタイトトル… オブジェクトがlineEditInputDirectoryと呼ばれていた場合は、selfと入力して呼び出します。lineEditInputDirectoryなど。

Githubの要点と以下の説明をチェックしてください:

16行目:この関数は、ユーザーがボタ オブジェクト自体は自己です。pushButtonLoadRatesしかし、ユーザーが追加してクリックしたときに機能を添付します。クリックしました。接続()。 この関数にはいくつかの特定のニュアンスがあります。 の引数。connect()は括弧なしの関数のみを受け入れるため、この場合はself。load_rates。 ラムダを使用する必要があるPython関数の要件のために引数を追加する必要がある場合は、以下のコードブロックを参照してください。

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...)) 

19行目:。currentText()は、参照通貨となるcomboBoxオブジェクトの現在の文字列を取得します。 したがって、ユーザーがUSDを選択すると、1USDに対する外国為替レートが返されます。 この文字列は、次の行でAPIに接続するために使用されるURLに追加されます。

24-26行目:これらはlineEditオブジェクトにデータをロードするために使用されます。 私たちは使用します。setText()はlineEditオブジェクトのテキストを変更します。 文字列のみを受け入れるため、APIからの数値は文字列に変換する必要があります。1フィリピンペソと比較した場合の最新の外国為替レート

1フィリピンペソと比較した場合の最新の外国為替レート

設定ファイルを追加する

この部分は少しトリッキーであり、既存のpythonの知識が役立つ場所です。 このセクションでは、次の機能について説明します:

  • プログラム内で新しいウィンドウを開く
  • 設定ファイルを作成して使用する

作業プログラムができたので、例のために、部門の異なる人々が異なるニーズを持っており、すべてが異なる通貨で作業しているとしましょう。 設定ファイルを追加して、毎回ドロップダウンボックスを使用する必要がないようにすることで、生活を楽にすることができます。 設定ファイルを使用して、我々は彼らのユニークな設定を保存し、プログラムの起動時にそれをロードすることができます。

ここで、”Config”ボタンが入ります。 ユーザーが設定を変更するための新しいウィンドウを作成しましょう。 これを行うと、私たちはきれいで整理メインウィンドウを維持することができます。

これをuiフォルダーにconfigDialogとして保存します…..このチュートリアルで先に行ったように、以下のコードブロックに見られるのと同じpyuic5コマンドを使用して変換します。

cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py

ここで、更新されたコード 新しいコードの追加の説明は、このGithub gistの下にあります。

  • 6行目:このimportステートメントを使用して設定ダイアログウィンドウインポートを追加します
  • 10-11行目:素敵な設定ファイルのワークフローを持つことに関連する新しいimportステートメント。 pickleとosの両方にはデフォルトのPython環境が付属しており、追加のインストールは必要ありません。
  • 13-14行目: 設定ファイルの場所は、すべてのクラスでスクリプト全体で使用されるため、グローバルとして宣言し、定数であるためすべて大文字にします。
  • 17行目:このクラスは、設定ウィンドウに関連するすべての情報を保持します。 作成した設定UIファイル内のオブジェクトを呼び出す場合は、MainDialogクラスではなく、このクラスで呼び出しを行うことをお勧めします。
  • 23行目:既存の設定ファイルをロードします。 これは、現在の設定がユーザーに何であるかを示すことができるようにします。
  • 26行目: ロードされた設定ファイルを使用して、コンボボックスのテキストを現在の設定に設定します。33行目:設定を保存するときに、selfに保存されている辞書を更新したいと思います。設定ファイルを書き込む前に設定します。
  • 行39:これは、設定パラメータウィンドウを閉じます。
  • 48-54行目:これは、メインダイアログウィンドウで設定ファイルをロードするときのロジックです。 何らかの理由で、設定ファイルが欠落している可能性があり、エラーのためにプログラムが起動しません。 設定ファイルが欠落している場合は、ユーザーがプログラムを起動して後でパラメータを変更できるように、デフォルトのパラメータで設定ファイルを作
  • 56行目:カスタム設定をロードし、コンボボックスをユーザーの好みの通貨に設定します。
  • 行62-63:これは、設定パラメータウィンドウを起動します。 これは、config dialogクラス名の名前に基づいています。 この場合、クラスの名前はConfigParametersです。
  • 65-68行目:ユーザーが設定の構成を完了し、ウィンドウが閉じられた後。 プログラムは自分自身を更新し、参照通貨コンボボックスを更新する前に設定ファイルを再度ロードします。

このワークフローにより、ユーザーは独自の設定を保存でき、設定ファイルが欠落している場合でもプログラムは動作します。 あなたは試してみて、あなたのプログラムが遭遇するすべての問題を考慮したいです。

画像を追加する

今、あなたは完全に機能するプログラムを持っている、のは、最後の仕上げを追加してみましょう:ロゴ。 画像を保存できるPyQtリソースファイルがあるかもしれませんが、私はラベルとpixmapsを使って画像をロードすることを好みます。 これは非常に速いです。56-58行目:uiフォルダーに保存したロゴをロードします。 次に、labelLogoオブジェクトを設定してpixmapをロードし、内容をlabelLogoオブジェクトのサイズにスケールするように設定します。

Our final product

Final project folder structure

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. 私はこれらのことをグーグル数え切れないほどの時間を費やし、Udemyでも有料のチュートリアルは少し役に立

コメントを残す

メールアドレスが公開されることはありません。