見出し画像

Pythonで作るGUI付き翻訳支援アプリの作成 Part4：GUIレイアウトの作成1

NSシステムズ

gui.pyの作成

gui.pyには、GUIレイアウトをコーディングしていきます。図1で示すように、作成する画面は2つでそれぞれmain_window()とconfig_window()とします。また、メイン画面は縦に2分割しますので、それぞれleft_col=[]とright=[]として作成します。

図1

gui.pyの骨子は、以下の通りとなります。main_window()関数が呼び出された時に、戻り値としてsg.Window("翻訳支援アプリ", layout, finalize=True)を返す事で呼び出した際にメイン画面を表示させます。DeepL設定画面もconfig_window(config_deepl)関数を呼び出す事でsg.Window("DeepL設定", config_layout, finalize=True)を返して表示するようにします。ここで、引数にはconfig_deeplを渡しています。

imort 必要なライブラリ等

def main_window():

    left_col = []
    right_col = []

    layout = [
        [sg.Column(left_col),
         sg.VSeperator(),
         sg.Column(right_col)]
    ]

    return sg.Window("翻訳支援アプリ", layout, finalize=True)
   

def config_window(config):

   config_layout = []

   return sg.Window("DeepL設定", config_layout, finalize=True)

必要なモジュールのインポート

まず初めに必要なモジュールをインポートします。GUIはPySimpleGUIを使いますので、PySimpleGUIをsgとしてインポートします。次は、staticフォルダ内にお気に入りのフォントを入れたfont.pyファイルを格納しておりますので、そちらをインポートしています。そして、PySimpleGUIのテーマRedditをsg.theme('Reddit')として指定します。

import PySimpleGUI as sg
from static import font

sg.theme('Reddit')

メイン画面のレイアウト作成

メイン画面はlef_col=[]とright=[]で構成されています。この2つをlayout = [ [sg.Column(left_col), sg.VSeperator(), sg.Column(right_col)] ]として縦に並べています。それでは、left_col=[]から作成していきます。

left_col[]の作成

図.メイン画面のレイアウト説明を参照下さい。それぞれの番号とコード内の行番号を一致させていますので、一つづつの詳細な説明は割愛してポイントだけを説明します。

図.メイン画面のレイアウト説明

left_col内の4行目は図中の④に対応しています。ここには翻訳させたい原文が入力出来るようにMultilineウィジェットを設置しています。font=font.udp_mのところは、後ほど作成するfont.pyにお気に入りのフォントを登録しておりますので、そのフォントを指定しています。そして、キーはkey='-original_text-'として設定しています。

left_col内の6行目は図中の⑥に対応しています。ここには翻訳した結果をさらに翻訳させた逆翻訳の結果を反映させるようにMultilineウィジェットを設置しています。ウィジェットのキーはkey='-back_trans_text-'として設定しています。

left_col = [
    [sg.Text('翻訳支援アプリ', font=font.udp_l, justification='center', text_color='#483d8b')],
    [sg.Text('powered by', font=font.udp_s, text_color='#483d8b'),sg.Image(source='static/deepL_logo_ss.png')],
    [sg.Text('原文(日、英は自動判定します)', font=font.udp_m, pad=(0, 20))],
    [sg.Multiline('', key='-original_text-', font=font.udp_s, size=(35, 10))],
    [sg.Text('逆翻訳(DeepL翻訳⇨DeepL再翻訳)', font=font.udp_m, pad=(0, 20))],
    [sg.Multiline('', key='-back_trans_text-', font=font.udp_s, size=(35, 10))],
]

right_col[]の作成

こちらも図.メイン画面のレイアウト説明を参照下さい。こちらは、left_col[]からの続きの番号を入れておりますので、コード内の行番号とは一致しませんが連番を振っておりますので、詳細説明は同様に割愛してポイントだけを説明します。

⑦歯車マークのウィジェットは、right_col []内の1行目になります。ここでは、sg.Frame()ウィジェットを設定してツールバーを表示させています。toolbar_buttonsは、right_col []の前で設定しています。以下のコードを参照下さい。

toolbar_buttons = [[
    sg.Button('', image_filename='static/gear.png', key='-config-',
              button_color=('#eeeeee', 'white'), pad=((300, 0), (0, 30))),
]]

⑩では、DeepLのボタン画像を指定して表示させています。image_filename ='static/deepL_btn_s.png',として、staticフォルダに保存してある画像deepL_btn_s.pngを読み込み表示させます。ウィジェットのキーはkey='-run_deepl-'として設定しています。

13では、ProgressBarウィジェットを使用してDeepLの使用率をパーセンテージ表示で視覚的に見易くしています。プログレスバーの表示はorientation ='h'として水平にし、ウィジェットのキーはkey = '-usage_bar-'として設定しています。

right_col = [
    [sg.Frame('', toolbar_buttons, title_color='white',vertical_alignment='t',element_justification='right', border_width=0)],
    [sg.Text('DeepL翻訳（原文⇨DeepL翻訳））', justification='center', font=font.udp_m, pad=(50, 20))],
    [sg.Multiline('', key='-translated_text-', font=font.udp_s, size=(35, 10))],
    [sg.Button(image_filename='static/deepL_btn_s.png', key='-run_deepl-', pad=(120, 20))],
    [sg.Text('DeepL Usage', font=font.udp_m, pad=(120, 10))],
    [sg.Text('', key='-Char_cnt-', font=font.udp_s, pad=(100, 10))],
    [sg.ProgressBar(BAR_MAX, orientation='h', key='-usage_bar-', visible=True, size=(35, 20),pad=(30, 10))]
]

layoutの作成

上で作成したleft_col=[]とright_col=[]をsg.Columnウィジェットとして並べて縦の２分割表示でレイアウトを作成します。element_justification = 'c'は、各ウィジェットを中央表示させる指定になります。また、vertical_alignment = 'top'は各ウィジェットを上に合わせて表示させる設定です。sg.VSeperator(color='#eeeeee')は、分割線をカラーコード#eeeeeeで指定しています。

    layout = [
        [sg.Column(left_col, element_justification='c'),
         sg.VSeperator(color='#eeeeee'),
         sg.Column(right_col, vertical_alignment='top')]
    ]

メイン画面のGUI完成

以上でメイン画面のGUIが完成しました。最後は、戻り値をreturn sg.Window("翻訳支援アプリ", layout, finalize=True)として返します。最終的にdef main_window():は以下のようになります。

def main_window():
    toolbar_buttons = [[
        sg.Button('', image_filename='static/gear.png', key='-config-',
                  button_color=('#eeeeee', 'white'), pad=((300, 0), (0, 30))),
    ]]
    
　　left_col = [
        [sg.Text('翻訳支援アプリ', font=font.udp_l, justification='center', text_color='#483d8b')],
        [sg.Text('powered by', font=font.udp_s, text_color='#483d8b'),
         sg.Image(source='static/deepL_logo_ss.png')],
        [sg.Text('原文(日、英は自動判定します)', font=font.udp_m, pad=(0, 20))],
        [sg.Multiline('', key='-original_text-', font=font.udp_s, size=(35, 10))],
        [sg.Text('逆翻訳(DeepL翻訳⇨DeepL再翻訳)', font=font.udp_m, pad=(0, 20))],
        [sg.Multiline('', key='-back_trans_text-', font=font.udp_s, size=(35, 10))],
    ]

    # 
    right_col = [
        [sg.Frame('', toolbar_buttons, title_color='white',
                  vertical_alignment='t',
                  element_justification='right', border_width=0)],
        [sg.Text('DeepL翻訳（原文⇨DeepL翻訳））', justification='center', font=font.udp_m, pad=(50, 20))],
        [sg.Multiline('', key='-translated_text-', font=font.udp_s, size=(35, 10))],
        [sg.Button(image_filename='static/deepL_btn_s.png', key='-run_deepl-', pad=(120, 20))],
        [sg.Text('DeepL Usage', font=font.udp_m, pad=(120, 10))],
        [sg.Text('', key='-Char_cnt-', font=font.udp_s, pad=(100, 10))],
        [sg.ProgressBar(100, orientation='h', key='-usage_bar-', visible=True, size=(35, 20),
                        pad=(30, 10))]
    ]

    layout = [
        [sg.Column(left_col, element_justification='c'),
         sg.VSeperator(color='#eeeeee'),
         sg.Column(right_col, vertical_alignment='top')]
    ]

    return sg.Window("翻訳支援アプリ", layout, finalize=True)

また記事が長くなってしまいましたので、続きは明日になります。
明日は、DeepL設定画面を解説します。

記事が参考になりましたら、❤️を押していただけると励みになります😊

いいなと思ったら応援しよう！