機能追加（１）テーマ切り替え

2024年5月11日 02:19

（Python学習初心者の試行錯誤・備忘録です）
前回

までで、動作は基本的に変えずに、コード内容を整理する「リファクタリング」を試みました。MVCの役割ごとにファイルを分けたら、全体の見通しが良くなった（と思っているところ）。何のための作業かと言うと、その先の「機能拡張」をスムーズに行えるようにするためだろうと自分は思います。ここまではこんなアプリです。

「発声」をクリックすると、指定言語で読み上げる。「連想」をクリックすると、訳語（など、DBに読み込ませた二つ目のテキストデータ）を表示する。

「覚えた」をクリックすると、

その単語は「習熟レベル」を一つ上げる。（レベル０⇒１）
忘れていたらレベル０まで下げる。そして次の単語に行く。
　表示する単語は、対象の中で「習熟レベル」が最も低く、かつその中でも最後に確認した時間（timestamp）が最も古いものが優先で抽出される。
・・というものです。

デザインを派手に？

　上のアプリを試しに知人に使ってもらったところ、まず「地味だね」と言われてしまいました。見た目から入るのか？　肝心なのは「そこじゃない」とは思うのですが、学習者の関心をつなぎとめるためにも、見た目にこだわりましょうか。
　「ダークテーマ」とかいろいろ、切り替えられるようにするには？
　ここまでGUIの表示には、TkEasyGUIをimportして使ってきましたが、画面のデザイン「テーマ」を切り替えるような機能があるのか不明だったので、PySimpleGUIに変えてみることにしました(但し登録不要のVer4のもの)。mvctest_view.pyで

#import TkEasyGUI as eg
import PySimpleGUI as eg

これだけで画面デザインがかなり変わりますが、ちょっと格好をつけて、ユーザーが自分でデザインを切り替えられるよう、コンボボックスを置いてみます。

mvctest_view.pyを次のように改造

#import TkEasyGUI as eg
import PySimpleGUI as eg

class View_EG:
    def __init__(self,theme='LightGreen') -> None:
        self.makemain(theme)

    def makemain(self, theme):
        #再度呼び出せるようwindowアトリビュートの有無を確認、あったらcloseして再構築
        if hasattr(self,"window"):
            self.window.close()

        self.mytheme = theme
        eg.theme(self.mytheme)
        lfont = ('標楷體', 100) #大きい表示用フォント
        sfont = ('Arial', 50) #小さい表示用フォント
        btfont= ('Arial', 20) #ボタン表示用フォント
        
        #表示サンプル
        myword = '仮置き'; pinyin = 'karioki'
        menu_def = [
            ['ファイル',['読み込み',['CSV::LoadCSV'],  '---', 'Exit']],
        ]
    #表示テーマ
        themelist=['LightGreen','Black', 'BlueMono', 'BluePurple', 'BrightColors', 'BrownBlue',
                    'Dark', 'Dark2', 'DarkAmber', 'DarkBlack', 'DarkBlack1', 'DarkBlue',
                    'DarkBlue1', 'DarkBlue10', 'DarkBlue11', 'DarkBlue12', 'DarkBlue13', 
                    'DarkBlue14', 'DarkBlue15', 'DarkBlue16', 'DarkBlue17', 'DarkBlue2', 
                    'DarkBlue3', 'DarkBlue4', 'DarkBlue5', 'DarkBlue6', 'DarkBlue7', 
                    'DarkBlue8', 'DarkBlue9', 'DarkBrown', 'DarkBrown1', 'DarkBrown2', 
                    'DarkBrown3', 'DarkBrown4', 'DarkBrown5', 'DarkBrown6', 'DarkBrown7', 
                    'DarkGreen', 'DarkGreen1', 'DarkGreen2', 'DarkGreen3', 'DarkGreen4', 
                    'DarkGreen5', 'DarkGreen6', 'DarkGreen7', 'DarkGrey', 'DarkGrey1', 
                    'DarkGrey10', 'DarkGrey11', 'DarkGrey12', 'DarkGrey13', 'DarkGrey14', 
                    'DarkGrey2', 'DarkGrey3', 'DarkGrey4', 'DarkGrey5', 'DarkGrey6', 
                    'DarkGrey7', 'DarkGrey8', 'DarkGrey9', 'DarkPurple', 'DarkPurple1', 
                    'DarkPurple2', 'DarkPurple3', 'DarkPurple4', 'DarkPurple5', 'DarkPurple6', 
                    'DarkPurple7', 'DarkRed', 'DarkRed1', 'DarkRed2', 'DarkTanBlue', 'DarkTeal', 
                    'DarkTeal1', 'DarkTeal10', 'DarkTeal11', 'DarkTeal12', 'DarkTeal2',
                    'DarkTeal3', 'DarkTeal4', 'DarkTeal5', 'DarkTeal6', 'DarkTeal7', 
                    'DarkTeal8', 'DarkTeal9', 'Default', 'Default1', 'DefaultNoMoreNagging',
                    'Green', 'GreenMono', 'GreenTan', 'HotDogStand', 'Kayak', 'LightBlue',
                    'LightBlue1', 'LightBlue2', 'LightBlue3', 'LightBlue4', 'LightBlue5',
                    'LightBlue6', 'LightBlue7', 'LightBrown', 'LightBrown1', 'LightBrown10',
                    'LightBrown11', 'LightBrown12', 'LightBrown13', 'LightBrown2', 'LightBrown3',
                    'LightBrown4', 'LightBrown5', 'LightBrown6', 'LightBrown7', 'LightBrown8',
                    'LightBrown9', 'LightGray1', 'LightGreen', 'LightGreen1', 'LightGreen10',
                    'LightGreen2', 'LightGreen3', 'LightGreen4', 'LightGreen5', 'LightGreen6',
                    'LightGreen7', 'LightGreen8', 'LightGreen9', 'LightGrey', 'LightGrey1',
                    'LightGrey2', 'LightGrey3', 'LightGrey4', 'LightGrey5', 'LightGrey6', 
                    'LightPurple', 'LightTeal', 'LightYellow', 'Material1', 'Material2', 
                    'NeutralBlue', 'Purple', 'Python', 'Reddit', 'Reds', 'SandyBeach', 
                    'SystemDefault', 'SystemDefault1', 'SystemDefaultForReal', 
                    'Tan', 'TanBlue', 'TealMono', 'Topanga']   

        layout = [
            [eg.Menu(menu_def)],
            [eg.Combo(values=["zh-TW","ja","en-US"],default_value="zh-TW",key="-LANG-"),
            eg.Text("デザインテーマ"),eg.Combo(values=themelist,default_value=self.mytheme,
                                        key="-THEME-",enable_events=True)],
            
            [eg.Button("発声", font = btfont, key ="-BTN_SPEAK-"),
            eg.Button("連想", font = btfont, key ="-BTN_SHOW_BACK-"),
            eg.Button("覚えた", font = btfont, key ="-BTN_MEMORIZE-"),
            eg.Button("まだ", font = btfont, key ="-BTN_FORGET-")],
            [eg.Text('サマリー仮置き',
            key="-DISP_SUMMARY-",font=('Arial', 15))],
            [eg.Text(myword, font = lfont, key="-DISP_MAIN-")],
            [eg.Text(pinyin, font = sfont, key="-DISP_SUB-")],
        ]
        self.window = eg.Window("単語暗記 for Windows(Python版)", layout=layout, finalize=True)

当初、Viewのクラス（View_EG）のイニシャライザの中に直書きしていた処理を、makemain() と言う関数にして外に出しています。さらにテーマに応じたウインドウを構築するように変更しています。
　メインのイベント処理の中ではにテーマ設定のコンボボックスに変更があったらビューのmakemainを呼び出して、新しいテーマでウインドウを作り直すように記述を加えました。

    elif event == "-THEME-":
        myview.makemain(value["-THEME-"])
        mycontroller.pickupcard(0)
        mycontroller.refresh_view(myview.window)