Python(TkInter) GUIアプリの開発を終えて 自分の端末以外で 実行したら 同じ画面イメージで表示されなかった

Question

標題の件、大変初歩的なことと思いますが　教えてください。

解像度が異なる端末であっても
自分が　従来まで開発してきた端末と同じように各フォームを表示させたいのですが、悉く無駄な余白が現れ
同じように表示されていませんでした。

自分の開発端末で表示されてたイメージ同様、縦横の縮尺率だけが違うだけの　表示を達成するには　どういった設定を行う・気を付ければよいでしょうか

ご見解を頂けたら幸いです、よろしくお願いします。

20200703 14:45 現況コードと画像追加

from tkinter import *
import tkinter.ttk as ttk
import tkinter.scrolledtext as tksc
import math



class Apprication(ttk.Frame):

    def __init__(self, app):
        
        
        super().__init__(app)
        self.pack(fill = BOTH, expand=True)

        btn1 = ttk.Button(self, text="Script", command=self.openDialog1)
        btn1.bind('<Return>', self.openDialog1)
        btn1.pack(fill = BOTH, expand=True)
        btn1.focus_set()

        btn2 = ttk.Button(self, text="Mail")
        btn2.pack(fill = BOTH, expand=True)

        btn3 = ttk.Button(self, text="Job")
        btn3.pack(fill = BOTH, expand=True)

        btn4 = ttk.Button(self, text="Quit", command=app.quit)
        btn4.bind('<Return>', lambda _: app.quit())
        btn4.pack(fill = BOTH, expand=True) 

        self.menu()



    def menu(self):
        menu_top = Menu(app)
        menu_file = Menu(menu_top, tearoff=False)
        menu_open = Menu(menu_top, tearoff=False)

        menu_help = Menu(menu_top, tearoff=False)   #★


        app.configure(menu=menu_top, bg="#F0FFFF")

        menu_top.add_cascade (label='File(F)', menu=menu_file, underline=0)
        #★menu_top.add_command(label='Help(H)', underline=0)
        menu_top.add_cascade(label='Help(H)', menu=menu_help, underline=0)  #★

        menu_file.add_cascade(label='Open(O)', underline=0, menu=menu_open)
        menu_open.add_command(label='Script(S)', underline=0, command=self.openDialog1) 
        menu_open.add_command(label='Job(J)', underline=0) 
        menu_open.add_command(label='Mail(M)', underline=0)
        menu_file.add_command(label='Quit(Q)',underline=0, command=app.quit)

        #★
        menu_help.add_command(label='Display(D)', underline=0) 
        menu_help.add_command(label='Version(V)', underline=0)
        #★
    
    
    
    
    # 子画面①開く Script Menu
    def openDialog1(self, event=None):

        global pngfile

        # メモリにＤＢ一覧を作る
        



        self.dialog = Toplevel(self)
        self.dialog.title("Script Menu")

        #フォームサイズを実行端末から導き、ド真中に配置表示
        lw = math.ceil(ww * 0.408)
        lh = math.ceil(wh * 0.477)
        self.dialog.geometry(str(lw)+"x"+str(lh)+"+"+str(int(ww/2-lw/2))+"+"+str(int(wh/2-lh/2)))
        
        self.dialog.configure(bg="#F0FFFF")
        self.dialog.resizable(0,0)
        self.dialog.protocol('WM_DELETE_WINDOW', (lambda: 'pass')())
        
        # 当該ダイアログのカーソルを変更し、関数側でもカーソルを変更できるように
        self.dialog['cursor'] = 'hand2'
        self.this = self.dialog

        # modalに
        self.dialog.grab_set()
        
        
        
        # DataBaseを選択するためのコンボボックス
        self.cmbox1 = ttk.Combobox(self.dialog, width=5, justify=CENTER, state='readonly', takefocus=1)
        self.cmbox1.grid(row=0, column=0, padx=(10, 0), pady=(10,0), sticky=W+E)
        self.cmbox1.focus_set()

        # DataBaseという文字
        self.txt1 = Entry(self.dialog, state="readonly", takefocus=1)
        self.txt1.grid(row=0, column=1, columnspan=7, sticky=W+E, pady=(10,0))
        


        
        # 登録SQL文のコンボボックス
        self.v2 = StringVar()
        self.cmbox2 = ttk.Combobox(self.dialog, width=5, justify=CENTER, state='disable', textvariable=self.v2, takefocus=1)
        self.cmbox2.grid(row=1, column=0, padx=(10, 0), sticky=W+E)

        self.txt2 = Entry(self.dialog, state="readonly", takefocus=1)
        self.txt2.grid(row=1, column=1, columnspan=7, sticky=W+E)

        # 登録SQL文のコンボボックスの有効無効切替え
        self.chbox1_var = BooleanVar(self.dialog)
        self.chbox1 = Checkbutton(self.dialog, variable=self.chbox1_var, bg="#F0FFFF", takefocus=1, activebackground="#F0FFFF")
        self.chbox1.grid(row=1, column=8)
        
        self.btn4 =  Button(self.dialog, text='Delete', state=DISABLED, takefocus=1)
        self.btn4.grid(row=1, column=10, padx=(0,10), sticky=W+E)
        


        
        # 発行するSQL文の入力エリア
        self.scrtxt1 = tksc.ScrolledText(self.dialog, bg="black", fg="orange", font=("Helvetica",11), insertbackground="orange", blockcursor=False, height=6, state="disable", takefocus=1)
        self.scrtxt1.grid(row=2, column=0, columnspan=11, sticky=W+E, padx=10)

        self.update()
        scrtxt1_width = self.scrtxt1.winfo_width()
        scrtxt1_height = self.scrtxt1.winfo_height()
        middle_x = scrtxt1_width / 2
        middle_y = scrtxt1_height / 2

        self.cvs = Canvas(self.dialog, height=scrtxt1_height)
        self.cvs.create_image(middle_x, middle_y, anchor=CENTER)
        self.cvs.grid(row=2, column=0, columnspan=11, sticky=W+E, padx=10)
        
    

        
        self.lb1 = Label(self.dialog, bg="#F0FFFF", fg="red")
        self.lb1.grid(row=3, column=0, padx=(10, 0), pady=(0, 20), sticky=N+W)
        
        self.lb2 = Label(self.dialog, bg="#F0FFFF", fg="red")
        self.lb2.grid(row=3, column=2, pady=(0, 20), sticky=N+W)

        # SQL文の表示を許すか許さないかの切替え
        self.chbox2_var = BooleanVar(self.dialog)
        self.chbox2 = Checkbutton(self.dialog, variable=self.chbox2_var, bg="#F0FFFF", takefocus=1, activebackground="#F0FFFF")
        self.chbox2.grid(row=3, column=8, pady=(0, 40), )

        # ★SQL発行ボタン★
        self.btn1  = Button(self.dialog, text='Execute', width=10, state=DISABLED, takefocus=1)
        self.btn1.grid(row=3, column=10, pady=(0, 20), padx=(0,10), sticky=N)
        


        
        # SQL発行結果（表示専用）
        self.scrtxt2 = tksc.ScrolledText(self.dialog, bg="SystemButtonFace", font=("Helvetica",11), height=6, takefocus=1)
        self.scrtxt2.grid(row=4, column=0, columnspan=11, sticky=W+E, padx=10)
        
        

        
        # SQL登録ボタン
        self.btn2 =  Button(self.dialog, text='Save', state=DISABLED, takefocus=1)
        self.btn2.grid(row=5, column=0, padx=(10,0), sticky=W+E)

        # SQL登録ID
        self.lb3 = Label(self.dialog, bg="black", fg="orange", width=7, takefocus=1)
        self.lb3.grid(row=5, column=1, sticky=W+E)

        self.txt3 = Entry(self.dialog, state='readonly', takefocus=1)
        self.txt3.grid(row=5, column=2, columnspan=10, sticky=W+E, padx=(0,10))
        


        
        # EXCEL出力ボタン
        self.btn3 =  Button(self.dialog, text='Excel', state=DISABLED, takefocus=1)
        self.btn3.grid(row=6, column=0, padx=(10,0), sticky=W+E)

        self.prbar1 = ttk.Progressbar(self.dialog, orient=HORIZONTAL, length=100, mode='determinate')
        self.prbar1.grid(row=6, column=1, columnspan=3, pady=(5,0), sticky=N+W)

        # SQL文の提供を受けることを想定し　インポートメニューを追加
        btn5 = Button(self.dialog, text='Import', width=10, takefocus=1)
        btn5.grid(row=6, column=8, pady=10)


        # 閉じるボタン
        btn4 = Button(self.dialog, text='Quit', command=self.closeDialog, width=10, takefocus=1)
        btn4.grid(row=6, column=10, pady=10, padx=(0,10))
        btn4.bind('<Return>', self.closeDialog)
        


        self.dialog.grid_rowconfigure(1, weight=1)
        self.dialog.grid_rowconfigure(3, weight=1)

        self.dialog.grid_columnconfigure(2, weight=1)




        
    # 子画面閉じる
    def closeDialog(self, event=None):
        self.dialog.destroy()



if __name__ == '__main__':

    #世間でいうrootをappとしています
    app  = Tk()

    #実行端末の画面サイズを取得
    ww = app.winfo_screenwidth()
    wh = app.winfo_screenheight()

    app.update_idletasks()

    #フォームサイズを実行端末から導き、ド真中に配置表示
    lw = math.ceil(ww * 0.208)
    lh = math.ceil(wh * 0.277)
    app.geometry(str(lw)+"x"+str(lh)+"+"+str(int(ww/2-lw/2))+"+"+str(int(wh/2-lh/2)) )

    #タイトルを指定
    app.title("Main Menu")


    #フォームの最大化、×ボタン操作を無効化
    app.resizable(0,0)
    app.protocol('WM_DELETE_WINDOW', (lambda: 'pass')())

    # カーソル変更
    app["cursor"] = "hand2"

    

    # フレームを作成する
    frame =  Apprication(app)
    # 格納したTkインスタンスのmainloopで画面を起こす
    app.mainloop()
    

端末Ａでの実行（立ち上げ時メニューでSCRIPTを押してください）

端末Ｂでの実行（立ち上げ時メニューでSCRIPTを押してください）

Comments

[shiracamus]

解像度に合わせてフォントサイズを変更することが考えられますが、まったく同じイメージにはならないと思います。

簡単なサンプルコードを示してくれれば、アドバイスもしやすくなります。
OSが違うとフォントの種類やサイズも違うので、OSの種類・バージョン、Pythonのバージョン、tkinterのバージョンも示してください。

[saya24]

shiracamusさん　ご見解ありがとうございます。簡易コードを作り本文に反映させて頂きました。
アプリの利用予定端末は　すべてWindows10、コードはPython3.6で構築、TkIinterのVerは...ごめんなさい　ちょっと不明です。

希望としてはどのWindows10端末であっても　常に端末Ｂ（アプリの開発端末）で実行されている際同様に　SCRIPTのフォームを　形成して表示されて欲しいです！！

[hope_mucci]

端末の画像解像度に合わせてウィンドウサイズを変更していますが、それは必要な要件なのでしょうか？

[saya24]

いえ、必要ない要件です。

ただ、ウィンドウサイズを　可変にさせないと　大きな画像のモニタに　フォームが極小で表示されてしまったりしないかを　懸念致しました。

ひょっとして、開発端末と同一の　画像サイズ（縦×横　比率）でないと、同じデザインを保てない、ということでしょうか？？　ほんと初心者で　分からないんです。

[hope_mucci]

医療用モニタや8Kモニタにdot by dotで表示させない限りは読めないほど小さくならないのでは・・・

Answer 1

レイアウトが崩れるのはモニタ解像度によりgeometryでウィンドウサイズを変更しているのが原因です。

app.geometry(str(lw)+"x"+str(lh)+"+"+str(int(ww/2-lw/2))+"+"+str(int(wh/2-lh/2)) )

コメントを見る限りウィンドウサイズは固定でよさそうなので初期表示位置を設定する用途だけに使ってください。

Comments

[saya24]

仰るとおりでした！
私にとっては貴重なアドバイスでした。ありがとうございます。

[saya24]

引用頂きましたコードで　ww　と　wh　というのが　端末からの画面サイズなのですが
この比率、つまりは　縦と横の関係さえ維持すれば　開発端末で表示されていフォームイメージが　どの端末でも　同じように表示されると思っていたら....違うのですねぇ！！！！　今日改めて気が付きました。

モニター違いで、縮尺率だけ変わって同じ範囲の内容表示をするのなら　上記ロジックが成り立つのでしょうが　決して　そうじゃないんですね？？？？？

表示できる範囲さえも　変わってくるのですね！（行数とか）

だから　みなさん　わざわざ　大きな外付けモニタを購入するのですねぇ....
今更ですが