ဒီ Tutorial လေးမှာတော့ PySimpleGUI ကို သုံးပြီး Calculator App တစ်ခုကို တည်ဆောက်သွားမှာ ဖြစ်ပါတယ်။ PySimpleGUI က Python နဲ့ GUI တွေ အလွယ်တကူဆွဲနိုင်အောင် ဖန်တီးထားတဲ့ Library တစ်ခုပါ။ ဒီ Project လေးမှာဆိုရင် ကုဒ်ကြောင်းရေ 50 လောက်နဲ့ အပြည့်အစုံအလုပ်လုပ်တဲ့ Calculator App တစ်ခုကို ရေးနိုင်ပါတယ်။ ဒီ App ကို ရေးပြီးတာနဲ့ ကိုယ်ပိုင် Project တွေမှာ စိတ်ကြိုက် GUI တွေကို လွယ်လွယ်ကူကူနဲ့ ဆွဲနိုင်လာမှာ ဖြစ်ပါတယ်။

>> Project Source Code

Table of Contents

  1. PySimpleGUI – Basics
  2. Drawing Calculator GUI
  3. User Interaction
  4. Calculating the Result

PySimpleGUI – Basics

ကိုယ်ဆွဲချင်တဲ့ GUI ကို လွယ်လွယ်ကူကူ မြန်မြန်ဆန်ဆန်နဲ့ ရေးနိုင်တာက PySimpleGUI ရဲ့ အဓိက အားသာတဲ့ အချက်ပါ။ GUI element တွေကို ကြိုက်သလို Customize လုပ်နိုင်တဲ့ အပြင် Underlying work တွေကို ဂရုစိုက်စရာမလိုတဲ့ အတွက် ကိုယ်ရေးတဲ့ Program ရဲ့ Logic တွေကိုပိုပြီး အာရုံစိုက်နိုင်ပါတယ်။

PySimpleGUI မှာ GUI layout ကို List တွေသုံးပြီး သတ်မှတ်ပေးရပါတယ်။ Layout list ကြီးတစ်ခုထဲမှာ Row တွေကို list အဖြစ်နဲ့ ထည့်ပြီး Column တွေကို Row list ထဲမှာ Item တွေအနေနဲ့ ထည့်ပေးရပါတယ်။

layout = [
	[sg.Text("Hello World!")],
    [sg.Input()],
    [sg.Button("OK"), sg.Button("Cancel")]
]

အပေါ်က နမူနာ Layout list ကို သုံးမယ်ဆိုရင် GUI က ဒီလို ထွက်လာမှာပါ။

Example layout

List ထဲက Item တစ်ခုစီကို Element တွေလို့ ခေါ်ပါတယ်။ Element တစ်ခုစီမှာ သက်ဆိုင်တဲ့ Attribute တွေ ရှိပါတယ်။ ကိုယ်သုံးချင်တဲ့ Attribute ကို Element တည်ဆောက်တဲ့အခါမှာ Keyword argument အနေနဲ့ ထည့်ပေးရပါတယ်။

ဒါတွေသိထားရင် Calculator app ကို ရေးလို့ ရပါပြီ။ PySimpleGUI ကို ပိုပြီး ပြည့်ပြည့်စုံစုံလေ့လာချင်ရင်တော့ Intro to PySimpleGUI မှာ ကြည့်နိုင်ပါတယ်။

Drawing GUI for Calculator

Base Layout for PySimpleGUI

အရင်ဆုံး PySimpleGUI program တိုင်းမှာ သုံးရမယ့် Template code ကို ရေးပါမယ်။ Layout list ထဲမှာ ကိုယ်သုံးချင်တဲ့ Element တွေနဲ့ Attribute တွေကို အရင်သတ်မှတ်ပေးရပါတယ်။ ဒီ list ကို သုံးပြီး Window object နဲ့ GUI ဆွဲပါတယ်။ ပြီးရင် Main loop ထဲမှာ Event တွေကို ဖတ်ပေးပါတယ်။

import PySimpleGUI as sg

btn_size = (3, 1)
layout = [
    [sg.Text(0)],
    [
        sg.Button("7", size=btn_size),
        sg.Button("8", size=btn_size),
        sg.Button("9", size=btn_size),
        sg.Button("+", size=btn_size),
    ],
]

window = sg.Window("My Calculator", layout)

# Main Loop
while True:
    event, values = window.read()

    if event == sg.WIN_CLOSED:
        break

window.close()

Layout list ထဲမှာ Text နဲ့ Button element ကို သုံးထားပါတယ်။ Button မှာဆိုရင် size attribute ကို သတ်မှတ်ပေးထားတာကို တွေ့ရမှာပါ။ ဒီနေရာမှာ Size ကို Font width နဲ့တိုင်းပါတယ်။ size=(3, 1) က စာလုံး 3 လုံးစာကျယ်ပြီး 1 လုံးစာ မြင့်တယ်လို့ ဆိုလိုပါတယ်။ ဒါကို run ကြည့်လိုက်ရင် စာတစ်ကြောင်းနဲ့ Button 4 ခုပါတဲ့ အတန်းတစ်တန်း ပေါ်လာမှာပါ။ ဒီအထိ အဆင်ပြေတယ်ဆိုရင် နောက်တစ်ဆင့်မှာ လိုအပ်တဲ့ Element တွေ ထပ်ထည့်ပါမယ်။

GUI Elements

Layout list ထဲမှာ Calculator အတွက် လိုအပ်တဲ့ Element တွေ ထပ်ထည့်ပါမယ်။ Layout ကို ကိုယ်နှစ်သက်သလို သတ်မှတ်ပေးနိုင်ပါတယ်။ ကျွန်တော်ကတော့ နမူနာအဖြစ်နဲ့ Standard Calculator ပုံစံကိုပဲ သုံးသွားပါမယ်။

layout = [
    [sg.Push(), sg.Text("0", font="Consolas 20", key="-FORMULA-")],
    [sg.Push(), sg.Text("0", font="Consolas 40", key="-DISPLAY-")],
    [
        sg.Button("*", size=btn_size),
        sg.Button("del", size=btn_size, button_color="black on red"),
        sg.Button("clear", expand_x=True, button_color="black on orange"),
    ],
    [
        sg.Button("7", size=btn_size),
        sg.Button("8", size=btn_size),
        sg.Button("9", size=btn_size),
        sg.Button("+", size=btn_size),
    ],
    [
        sg.Button("4", size=btn_size),
        sg.Button("5", size=btn_size),
        sg.Button("6", size=btn_size),
        sg.Button("-", size=btn_size),
    ],
    [
        sg.Button("1", size=btn_size),
        sg.Button("2", size=btn_size),
        sg.Button("3", size=btn_size),
        sg.Button("/", size=btn_size),
    ],

    [
        sg.Button("0", size=btn_size),
        sg.Button(".", size=btn_size),
        sg.Button("=", expand_x=True, button_color="green3"),
    ],
]

Element တည်ဆောက်တဲ့ ကုဒ်တွေက အရမ်းကို ရိုးရှင်းတဲ့အတွက် သိပ်ရှင်းပြစရာတောင် မလိုပါဘူး။Button တွေမှာ button_color နဲ့ expand_x ဆိုပြီး Attribute အသစ်နှစ်ခု သုံးထားပါတယ်။ Button color ထဲမှာ အရောင်နာမည်ကို string အဖြစ်ထည့်ပေးရပါတယ်။ Button font ပါ ပြောင်းချင်တယ်ဆိုရင် အရောင်နှစ်ခုကြားထဲမှာ “on” ဆိုပြီး ထည့်ပေးလိုက်ပါ။ ဥပမာ- “black on red” က နောက်ခံ အနီပေါ်မှာ စာလုံးအနက်ရောင် ဆွဲပေးပါတယ်။ Expand_x ကတော့ နာမည်အတိုင်း X-axis မှာ နေရာလွတ်ကျန်သလောက်ကို ဖြည့်ပေးတာပါ။ ဒီလိုပဲ Expand_y ဆိုပြီးလည်း ရှိပါတယ်။ PySimpleGUI မှာ သုံးနိုင်တဲ့ Element နဲ့ Attribute တွေအတွက် Documentation ကို အရင်အပိုင်းမှာ ဖော်ပြခဲ့ပြီး ဖြစ်ပါတယ်။

Push element က သူ့နောက်မှာရှိတာတွေကို ဟိုဘက်အထိရောက်အောင် ပို့ပေးတာဖြစ်ပါတယ်။ Program ထဲမှာ Text element တွေကို update လုပ်မှာ ဖြစ်တဲ့အတွက် key တွေထည့်ပေးထားပါတယ်။

ဒီလို Layout သတ်မှတ်ပြီးသွားရင် Calculator ပုံစံ ပေါ်လာမှာ ဖြစ်ပါတယ်။

Calculator First Look

Customize UI

App အတွက် ကိုယ်နှစ်သက်ရာ Theme နဲ့ Font ကို အပေါ်ဆုံးမှာ သတ်မှတ်ပေးလိုက်ပါ။ သုံးနိုင်တဲ့ Theme တွေကို သိချင်ရင် theme name နေရာမှာ ကြိုက်တဲ့ စာရိုက်ထည့်လိုက်ပါ။ Terminal ထဲမှာ သုံးလို့ရတဲ့ Theme list ကို ပြပေးပါလိမ့်မယ်။ Font ကိုတော့ System ထဲမှာရှိတဲ့ Font ကြိုက်ရာ သုံးနိုင်ပါတယ်။ Font attribute သတ်မှတ်တဲ့ပုံစံ 2 မျိုးရှိပါတယ်။ [1. font= ("Rockwell", 25) 2. font="Consolas 20"] Font name မှာ space ပါနေရင် ပထမပုံစံကို သုံးမှ ရပါတယ်။

Theme Customization

User Interaction

App အတွက် လိုအပ်တဲ့ GUI တွေ ဆွဲပြီးပြီ ဖြစ်တဲ့အတွက် နောက်တစ်ဆင့်မှာ Input handling ကို ဆက်ရေးပါမယ်။

Getting and Displaying Numbers

User နှိပ်လိုက်တဲ့ နံပါတ်တွေကို သိမ်းဖို့အတွက် Main loop အပြင်မှာ list တစ်ခု အရင်သတ်မှတ်ထားပါမယ်။ ပြီးရင် နှိပ်လိုက်တဲ့ နံပါတ်တစ်ခုစီကို Append လုပ်ပြီး App ထဲမှာ ပြပေးမှာ ဖြစ်ပါတယ်။

current_num = []
num_str = ""
# Main Event Loop
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break

	# Append input numbers and decimal point
    if event.isdigit() or (event == "." and "." not in current_num):
        # Skip first 0
        if len(current_num) == 0 and event == "0":
            continue
            
        # Extend current number
        current_num.append(event)
        num_str = "".join(current_num)
        window.Element("-DISPLAY-").update(num_str)

window.close()

Button တစ်ခုကို နှိပ်လိုက်ရင် Button ထဲမှာ ပါတဲ့ string နဲ့ Event တစ်ခုပေါ်ပါတယ်။ ဥပမာ- 9 ခလုတ်ကိုနှိပ်လိုက်ရင် event="9" ဖြစ်ပြီး clear ကို နှိပ်လိုက်ရင် event="clear" ဖြစ်မှာပါ။ ဒါကြောင့် နှိပ်လိုက်တဲ့ ခလုတ်က နံပါတ်ဖြစ်တယ်ဆိုရင် current_num list ထဲကို append လုပ်ပါတယ်။ ဒဿမကိန်းတွေ ရေးဖို့အတွက် Decimal point ကိုလည်း ထည့်ပေးပါတယ်။ သူ့ကို မထည့်ခင် list ထဲမှာ ဒဿမ နှစ်ခု မဖြစ်အောင် စစ်ပေးရပါတယ်။
App ထဲမှာ နံပါတ်ပေါ်ဖို့အတွက် current_num list ကို string ပြောင်းပြီး Display text ကို update လုပ်ပေးရုံပါပဲ။ update function က Element ထဲက string တန်ဖိုး ပြောင်းတဲ့ အခါမှာ သုံးပါတယ်။

Appending Symbols

သင်္ကေတတွေကိုလည်း နံပါတ်တွေလိုပဲ ထည့်ပါမယ်။ ဒါပေမယ့် ရိုက်ထားတဲ့ နံပါတ်ရှိ၊ မရှိ အရင်စစ်ရပါမယ်။ ဒီလို မစစ်ရင် နံပါတ်မပါပဲနဲ့ သင်္ကေတတွေဆက်တိုက် ရေးလို့ ရနေပါလိမ့်မယ်။ Operation တစ်ခုလုံးကို သိမ်းဖို့အတွက် အပေါ်မှာ list အလွတ်တစ်ခု သတ်မှတ်ပေးထားရပါမယ်။ ဒီ List ထဲမှာ တွက်ရမယ့် Formula ကို သိမ်းထားမှာပါ။ သင်္ကေတ တစ်ခုကို နှိပ်လိုက်တာနဲ့ လက်ရှိရိုက်ထားတဲ့ ဂဏန်းကို သိမ်းပြီး နံပါတ်နောက်တစ်ခု စရေးမှာပါ။ Formula ထည့်ပြီးတာနဲ့ GUI မှာ Formula text ကို update လုပ်ပါတယ်။

formula = []
# Main loop
while True:
	...
    # Append math symbols
	if event in ["+", "-", "*", "/"] and len(current_num):
        formula.append(num_str)
        # Append 0 if num ends with decimal point e.g., 120.
        if current_num[-1] == ".":
            formula.append("0")
        formula.append(event)
        window["-FORMULA-"].update("".join(formula))
        current_num = []
	...

Delete and Clear Buttons

ရိုက်ထားတဲ့ နံပါတ်ကို နောက်ကနေ တစ်ခုချင်း Delete လုပ်ဖို့အတွက် current_num list ကို Pop လုပ်ပေးရပြီး အကုန်လုံးကို Clear ဖို့အတွက်တော့ variable တွေကို အလွတ်ပြန်ထားပေးရပါမယ်။

# Main loop
while True:
	...
	if event == "del" and len(current_num):
        current_num.pop()
        num_str = "".join(current_num) if len(current_num) else "0"
        window["-DISPLAY-"].update(num_str)

    if event == "clear":
        current_num = []
        formula = []
        window["-DISPLAY-"].update(0)
        window["-FORMULA-"].update(0)

ဒီအဆင့်ထိရောက်ရင်တော့ ခလုတ်တွေ အကုန်လုံးနီးပါးအလုပ်လုပ်တဲ့ Calculator လေးတစ်ခု ဖြစ်လာပါပြီ။ တစ်ကယ့် Calculator တစ်ခုဖြစ်ဖို့အတွက် အဓိကလိုအပ်တဲ့ “=” ညီမျှခြင်း ခလုတ်ပဲ ကျန်ပါတော့တယ်။

User Interaction

Calculating the Result

Calculator ထဲမှာ နံပါတ်တွေနဲ့ သင်္ကေတတွေသုံးပြီး ကိုယ်တွက်ချင်တဲ့ Operation ကို ရေးလို့ရနေပါပြီ။ အပေါ်ကပုံမှာ ပြထားတဲ့ အတိုင်း ဒီအဆင့်မှာ ဆိုရင် တွက်ရမယ့် Formula ကို Formula text နေရာမှာ တွေ့ရမှာပါ။ ညီမျှခြင်းသင်္ကေတကို နှိပ်လိုက်ရင် လုပ်ဆောင်ပေးရမှာတွေကတော့-

  1. အရင်ဆုံး formula နဲ့ current_num ထဲမှာ တန်ဖိုးရှိ၊ မရှိစစ်ရပါမယ်။
  2. နောက်ဆုံးရေးထားတဲ့ ဂဏန်း current_num (e.g., 111) ကို formula list ထဲကို ထည့်ပေးရပါမယ်။
  3. formula list ထဲမှာပါတဲ့ ဂဏန်းတွေနဲ့ သင်္ကေတတွေကို သုံးပြီး အဖြေတွက်ပေးရပါမယ်။
  4. ရလာတဲ့ အဖြေကို Display မှာ ပြပေးပါမယ်။
  5. ပြီးရင် variable တွေကို အသစ်ပြန်သတ်မှတ်ပေးရပါမယ်။

eval() Function

ဒီနေရာမှာ Python ရဲ့ အရမ်းအသုံးဝင်တဲ့ Function တစ်ခုဖြစ်တဲ့ eval() function ကို သုံးမှာ ဖြစ်ပါတယ်။ ဒီ Function က ထည့်ပေးလိုက်တဲ့ string တွေကို Python expression အဖြစ် run ပေးပါတယ်။

eval("2 % 10")    # 2
eval("100 / 5")   # 20
eval("print('Hello')") # Hello

eval() function ကို သုံးပြီး Math operation string ကနေ တစ်ခါတည်း အဖြေတွက်ပေးနိုင်ပါတယ်။
ဒါကြောင့် fomula list ကို string ပြောင်းပြီး eval() function ထဲကို ထည့်ပေးလိုက်ရင် ကျွန်တော်တို့ လိုချင်တဲ့ အဖြေရလာမှာ ဖြစ်ပါတယ်။

# Main loop
while True:
	...
    if event == "=" and len(current_num) and len(formula):
        formula.append(num_str)
        formula_string = "".join(formula)
		# Calculate the result
        result = eval(formula_string)
        # Update GUI
        window["-DISPLAY-"].update(result)
        window["-FORMULA-"].update(formula_string)
		# Reset variable
        current_num = []
        formula = []

window.close()

ဒါဆိုရင်တော့ ကျွန်တော်တို့ Calculator App အတွက် လိုအပ်တာတွေ အကုန်ရေးပြီးသွားပြီလို့ ပြောနိုင်ပါတယ်။ Program ကို run လိုက်ရင် အပြည့်အစုံအလုပ်လုပ်တဲ့ Standard Calculator App လေးတစ်ခု ရလာမှာပါ။ Advanced calculation function တွေ ထပ်ထည့်ရေးလိုက်ရင်တော့ ပိုပြီး ပြည့်စုံသွားမှာ ဖြစ်ပါတယ်။ ဒီ Tutorial လေးမှာတော့ PySimpleGUI အလုပ်လုပ်ပုံကို အဓိကလေ့လာတာ ဖြစ်လို့ ဒီမှာပဲ ရပ်လိုက်ပါတော့မယ်။

Fully functioned Calculator

Conclusion

ဒါကတော့ PySimpleGUI ကို သုံးပြီး Calculator App လေးတစ်ခုကို တည်ဆောက်ခဲ့တာ ဖြစ်ပါတယ်။ ဒီ Project လေးကို လေ့လာရင်း PySimpleGUI နဲ့ အသုံးဝင်ပုံနဲ့ လက်တွေ့အသုံးချပုံတွေကို သေချာနားလည်ပြီး ကိုယ်ပိုင် Project တွေမှာလည်း GUI ထည့်ရေးနိုင်ဖို့အတွက် လုံလောက်တဲ့ အခြေခံတွေ ရသွားမယ်လို့ ယုံကြည်ပါတယ်။

👨‍💻 Happy Coding! ✌😃

Leave a comment