見出し画像

PySimple GUI でボタン操作時のアクション作成

この記事では、Python で GUI を作成できるライブラリ PySimple GUI の基本的な操作として、ボタンが操作された時のアクションを作成する方法について書いていきます。

テキスト表示、テキストボックス作成、ボタン作成については以前に書いたこちらの記事をご参照ください。

環境

私は以下の環境で動かしています。ご参考までに。

・windows 10(64bit)
・python 3.8.2(32bit版)
・エディタ Visual Studio Code 1.53.1

ボタン操作時のアクション

ボタン操作時のアクションを加えたソースコードを以下に記載します。内容を以降で解説していきます。

コードの概要しては、ボタンが操作されたときに関数を呼び出し、テキストボックスに入力した文字が画面上に出力される処理が行われます。

レイアウトはテキスト表示、テキストボックス、ボタンで構成しています。テキストボックスとボタンには「key」をつけて、イベントと値を読み込めるようにしておきます。また、表示内容を更新したいテキスト部も同様に「key」をつけておきます。

「elif event == 'key_button_ok'」でボタンが操作されたイベント発生時のアクションを記載します。今回は関数を呼び出すことにしているので、あらかじめ定義した関数を記載します。そして、テキスト表示内容を更新したいので関数の引数にはテキストボックスに入力された値を記載します。

関数内では更新したいテキストの「key」を用いてウィンドウ表示をアップデートさせるコードを記載します。

# =================================================
#           ライブラリインポート
# =================================================
import PySimpleGUI as gui

# =================================================
#           変数定義
# =================================================
TEXT_YOURNAME = 'xxxxxxxxxx'

# =================================================
#           関数定義
# =================================================
def func_button_ok(name):
   window['ket_tex_name'].update(name)
   pass

# =================================================
#           ウィンドウレイアウト
# =================================================
layout = [
   [gui.Text('名前:'), gui.InputText(default_text='', key='key_box_name')],
   [gui.Button('OK', key='key_button_ok')],
   [gui.Text('')],
   [gui.Text('あなたの名前は'), gui.Text(TEXT_YOURNAME, key='ket_tex_name')]
]

# =================================================
#           ウィンドウ処理
# =================================================
# ウィンドウオブジェクトの作成
window = gui.Window('PySimpleGUI', layout, size=(400, 200))

# イベントのループ
while True:
   # イベントの読み込み
   event, values = window.read()
   # ウィンドウの×ボタンが押されれば終了
   if event == gui.WIN_CLOSED:
       break
   # ボタン操作時のアクション
   elif event == 'key_button_ok':
       # 関数呼び出し, 引数はテキストボックス入力データ
       func_button_ok(values['key_box_name'])

# ウィンドウ終了処理
window.close()

実行結果

上記のコードを実行すると、初期画面は以下のようになります。

画像1

テキストボックスに文字を入力して「OK」ボタンをクリックすると次のようにテキスト表示が更新されます。

画像2

おわりに

この記事ではボタン操作時のアクション作成方法について書きました。これをベースにボタンやボタン操作時の機能を追加していけば、GUI上に様々な機能を追加していくことができると思います。個人的には他のライブラリと組み合わせながら様々な使い方を試していきたいと考えています。

何かお役に立てたら、サポートしていただけると嬉しいです!モチベーションを高めて、アウトプットしていきます!