Pythonで作るGUIアプリ入門 Part10 -画像表示の設定-
画像表示の設定
GUI ウィンドウに任意の画像を表示させる事が出来ます。画像処理ライブラリのOpenCVなどを組み合わせれば、自分専用の画像処理アプリも作成出来るようになります。画像表示は、sg.Image(source)でウィジェットを設定する事が出来ます。sourceには、ファイル名を含む画像のパスを指定します。ただし、PySimpleGUIはpngとGIF形式しかサポートしていないので、JPEGを取り扱いたい時は別のライブラリなどを使う必要があります（今回は、紹介致しません）。
GUIウィンドウに画像と新しい画像を選択ボタン、そして選択した画像を表示ボタンをレイアウトしたGUIアプリを作成して、画像の表示を学びましょう（図10-1）。新しい画像を選択ボタンは、ファイルブラウズボタンにしますので図10-2のように画像選択ダイアログが開かれます。画像を選択した後に選択した画像を表示ボタンを押すと、元の画像と新しく選択した画像が切り替わるようにします（図10-3）。
コードは、以下の通りです。
import PySimpleGUI as sg
layout = [
[sg.Image(source='logo200.png', key='-Canvas-')],
[sg.FilesBrowse('新しい画像を選択', key='-File_path-')],
[sg.Button('選択した画像を表示', key='-Btn-')],
]
window = sg.Window('画像の表示', layout)
while True:
event, value = window.read() # イベントの入力を待つ
if event == '-Btn-':
window.find_element('-Canvas-').Update(source=value['-File_path-'])
elif event is None:
break
window.close()レイアウトの設定
1行目で画像を表示させています。source = ‘logo200.png’ として、表示させたい画像のパスを指定し、キーは'-Canvas-' としています。
2行目でファイルブラウズボタンを設定し、ボタンには新しい画像を選択'と表示させています。キーは、key='-File_path-' としています。今回は、隣にインプットテキストは設置しておりませんので、画像を選択した後もパスは表示されません。。
3行目では、選択した画像を表示ボタンとキーを設定しています。
イベントの設定
選択した画像を表示ボタン’-Btn-’が押された時のイベントを設定します。
if event == '-Btn-':window.find_element('-Canvas-')で元の画像があったウィジェットを指定します。Update(source=value['-File_path-'])で、元の画像を新しい画像で更新しています。ここで、sourceにはファイルブラウズで選択した画像のパスvalue['-File_path-'] を指定します。
window.find_element('-Canvas-').Update(source=value['-File_path-'])以上のようにして、画像をGUIウィンドウに表示させたり、画像をボタンで更新したりする事が出来ます。
今回も少し紹介しましたが、次回はウィジェットの設定について説明します。
記事が参考になりましたら、❤️を押していただけると励みになります😊
「世界一やさしいPythonデスクトップアプリ開発のはじめ方」を2022/3/19にAmazon Kindleで発売しました！
Amazon売れ筋ランキングで…
・Kindle有料（全体）：685位
・プログラミング（Kindleストア）：１位
・データベース（Kindleストア）：１位
・デジタルエンターテイメント（Kindleストア）：１位
と大変好評をいただいております。ありがとうございます。
Kindle Unlimitedなら無料ですので、ぜひご一読下さい！