PysimpleGUI 超簡単ボタンの作り方

2021年6月9日

こんにちは、せつやです。
前回に引き続き、PysimpleGUIについての記事になります。

今回は、PysimpleGUIシリーズ第2弾として「ボタンの作り方」をご紹介します。

前回のテキスト表示とは異なり、表示部分とは別に動作部分についても
詳しく説明していきたいと思います。

PysimpleGUI ボタン完成サンプル画像

ボタンの配置部分のコード

layout = [
           # ボタンレイアウト
           [ sg.Submit(button_text='ボタン(1)',
                       font=('yu Gothic UI',8),size=(15,1),key='button1'),
             sg.Submit(button_text='ボタン(2)',
                       font=('yu Gothic UI',8),size=(15,1),key='button2'),
             sg.Submit(button_text='ボタン(3)',
                       font=('yu Gothic UI',8),size=(15,1),key='button3') ],

           # テキストレイアウト
           [ sg.Text(' ● 押したボタンを判定します。',
                       font=('yu Gothic UI',8),key='text1')]
    ]

補足説明

button_text=’ボタン(1)'ボタン上に表示させる文字を指定
font=('yu Gothic UI',8)ボタン上の文字フォントと文字サイズを指定
size=(15,1)ボタンのサイズを指定 size=(横幅,高さ)
key=’button1',設置したボタンの固有名を指定
※どのボタンが押されたのかを識別させる。

key=’button1′ は、ボタン毎に固有の名前をつけることができ
ボタンを押したときの処理をボタン毎に紐づけることができます。

複数のボタンを設置する場合には、それぞれ固有の名称をつけてあげましょう👍
また、keyは、ボタンに限らずテキストにもつける事ができます。

表示させているテキストの内容を更新したいときは
あらかじめテキストにkeyを設定しておくとよいでしょう。😀

ボタンの動作部分のコード

while True:
    # ウィンドウ表示
    event, values = window.read()

    if event is None:
        break

    if event == "button1":
        #ボタン(1)で実行させたい処理
        window['text1'].update(' ● ボタン(1)を押しました。',text_color=("#ff0000"))

    if event == "button2":
        #ボタン(2)で実行させたい処理
        window['text1'].update(' ● ボタン(2)を押しました。',text_color=("#00ff00"))

    if event == "button3":
        #ボタン(3)で実行させたい処理
        window['text1'].update(' ● ボタン(3)を押しました。',text_color=("#0000ff"))

▼ 下記の実行時の処理は、既に表示させているテキストの内容を更新する処理の記述になります。

window['text1'].update(' ● ボタン(3)を押しました。',text_color=("#0000ff"))

if event == “button1“:
event == にはボタンを設置したときのkeyを指定しているね
設置したボタンと処理をここで紐づけているんだ。

また、既に表示させているテキストの内容を変更する場合には
テキストにもkeyを設定すると、簡単に更新できそうだね。

Pythonでそのまま使えるサンプルコード

# coding: utf-8
# *************************************************************************************
# * PysimpleGUI ボタンの作り方
# *************************************************************************************
# *====================================================================================
# * インポートライブラリ
# *====================================================================================
# +-----------------------------------------------------------------------------------+
# + PySimpleGUI
# +-----------------------------------------------------------------------------------+
#(pip install pysimplegui)
import PySimpleGUI as sg

# +-----------------------------------------------------------------------------------+
# + PyAutoGUI
# +-----------------------------------------------------------------------------------+
#(pip install pyautogui)
import pyautogui as pg

# *====================================================================================
# * GUI作成
# *====================================================================================
# +-----------------------------------------------------------------------------------+
# + スタイル設定
# +-----------------------------------------------------------------------------------+
sg.theme('Dark Blue 3')

# +-----------------------------------------------------------------------------------+
# + レイアウト設定
# +-----------------------------------------------------------------------------------+
layout = [
           # ボタンレイアウト
           [ sg.Submit(button_text='ボタン(1)',
                       font=('yu Gothic UI',8),size=(15,1),key='button1'),
             sg.Submit(button_text='ボタン(2)',
                       font=('yu Gothic UI',8),size=(15,1),key='button2'),
             sg.Submit(button_text='ボタン(3)',
                       font=('yu Gothic UI',8),size=(15,1),key='button3') ],

           # テキストレイアウト
           [ sg.Text(' ● 押したボタンを判定します。',
                       font=('yu Gothic UI',8),key='text1')]
    ]

# +-----------------------------------------------------------------------------------+
# + ウィンドウ作成
# +-----------------------------------------------------------------------------------+
window = sg.Window('タイトルに表示させたい文字',layout,size=(485,85))

# *====================================================================================
# * プログラム開始
# *====================================================================================
# +-----------------------------------------------------------------------------------+
# + GUIループ
# +-----------------------------------------------------------------------------------+
while True:
    # ウィンドウ表示
    event, values = window.read()

    if event is None:
        break

    if event == "button1":
        #ボタン(1)で実行させたい処理
        window['text1'].update(' ● ボタン(1)を押しました。',text_color=("#ff0000"))

    if event == "button2":
        #ボタン(2)で実行させたい処理
        window['text1'].update(' ● ボタン(2)を押しました。',text_color=("#00ff00"))

    if event == "button3":
        #ボタン(3)で実行させたい処理
        window['text1'].update(' ● ボタン(3)を押しました。',text_color=("#0000ff"))

Pythonをまとめて学びたい方は、まずは無料オンラインセミナーがおすすめ