แนะนำตัว
ใน Python เราใช้ tkinter library เพื่อสร้างส่วนประกอบ GUI และสร้างส่วนต่อประสานผู้ใช้ที่ดีขึ้น
ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้างแอปพลิเคชันเครื่องคิดเลขที่ใช้ GUI อย่างง่าย
เริ่มต้นใช้งาน
ก่อนที่เราจะพูดถึงเรื่องนี้ มีบางสิ่งที่เราต้องจัดระเบียบก่อน
ให้เราเริ่มต้นด้วยการดาวน์โหลดไลบรารีภาพของ Python ที่เราจะใช้เพื่อรับภาพจากระบบในพื้นที่ของเรา ในการติดตั้ง PIL(Pillow) ให้เปิดเทอร์มินัลแล้วพิมพ์คำสั่งด้านล่าง
pip install Pillow
ตอนนี้คุณได้ติดตั้งแพ็คเกจแล้ว คุณจะต้องดาวน์โหลดไอคอนที่จำเป็นสำหรับเครื่องคิดเลข
คุณสามารถไปที่ Google รูปภาพและดาวน์โหลดไอคอนที่จำเป็น อย่างไรก็ตาม หากคุณต้องการชุดไอคอนเดียวกันกับที่ฉันเคยใช้สำหรับโปรเจ็กต์นี้ คุณสามารถดาวน์โหลดได้จาก -
https://www.dropbox.com/sh/0zqd6zd9b8asmor/AAC3d2iOvMRl8INkbCuMUo_ya?dl=0
อย่าลืมดาวน์โหลดไอคอนทั้งหมดไปยังโฟลเดอร์ชื่อ “asset”
ถัดไป เราต้องนำเข้าโมดูลที่จำเป็น
from tkinter import * from PIL import Image # pip install Pillow from PIL import ImageTk
และนั่นแหล่ะ ตอนนี้คุณต้องมีทุกอย่างพร้อมและพร้อมที่จะเริ่มต้น
การสร้างฟังก์ชัน
ประการแรก เราต้องสร้างฟังก์ชันที่คอมโพเนนต์ GUI จะใช้
มีฟังก์ชันหลักสามอย่าง ฟังก์ชันหนึ่งเมื่อกดตัวเลขหรือสัญลักษณ์ อีกฟังก์ชันหนึ่งเมื่อกดปุ่มเท่ากับ และสุดท้ายเมื่อกดปุ่มล้าง
ให้เราเริ่มต้นตัวแปรระดับโลกสองสามตัวก่อน -
txt = "" res = False ans = 0
ตัวอย่าง
ฟังก์ชันเมื่อกดหมายเลขคีย์ -
def press(num): global txt, ans, res if (res==True): txt = ans res = False txt = txt + str(num) equation.set(txt)
ตัวอย่าง1
ฟังก์ชันเมื่อกดปุ่มเท่ากับ −
def equal():
try:
global txt, ans, res
ans = str(eval(txt))
equation.set(ans)
res = True
except:
equation.set("ERROR : Invalid Equation")
txt="" ฟังก์ชั่นเมื่อกดปุ่มล้าง -
ตัวอย่าง
def clear():
global txt, ans, res
txt = ""
equation.set("")
res = False ตอนนี้เราได้กำหนดฟังก์ชันแล้ว เราสามารถเริ่มฟังก์ชันหลักและเริ่มทำงานกับคอมโพเนนต์ GUI ได้
if __name__ == "__main__":
window = Tk()
window.configure(background="black")
window.title("Calculator")
window.iconbitmap("assets\Calculator\Logo.ico")
window.geometry("343x417")
window.resizable(0,0) บรรทัดของโค้ดด้านบนจะเป็นโครงสร้างเครื่องคิดเลขที่สมบูรณ์แบบ
หมายเหตุ − เพื่อหลีกเลี่ยงข้อผิดพลาด ตรวจสอบให้แน่ใจว่าคุณปฏิบัติตามโครงสร้างไฟล์ที่แน่นอนตามโค้ดด้านบน บันทึกไอคอนโลโก้ในโฟลเดอร์เครื่องคิดเลขซึ่งอยู่ในโฟลเดอร์ทรัพย์สิน
ทำตามรูปแบบด้านล่าง −
+---Working Directory +---Calculator.py +---assets +---Calculator +---All the icons.
ขั้นต่อไป ให้เราออกแบบช่องข้อความที่เราจะเห็นตัวเลข
equation = StringVar()
txt_field = Entry(relief=RIDGE,textvariable=equation,bd=10,font=("Aerial",20),bg="powder blue")
txt_field.grid(columnspan=4,ipady=10,ipadx=10,sticky="nsew") ตอนนี้ เราจะทำตามขั้นตอนซ้ำๆ ในการเพิ่มไอคอนในหน้าต่าง GUI ทีละรายการ ด้านล่างนี้คือตัวอย่างเดียว ทำตามที่เหลือหรือคัดลอกจากโค้ดฉบับสมบูรณ์ที่อยู่ท้ายบทความนี้
ตัวอย่าง
width=80
height=80
img1 = Image.open("assets/Calculator/one.PNG")
img1 = img1.resize((width,height))
oneImage = ImageTk.PhotoImage(img1)
button1 = Button(window, image=oneImage,bg="white",command = lambda:press(1),height=height,width=width)
button1.grid(row=2,column=0,sticky="nsew") คล้ายกับบรรทัดด้านบน ให้ทำตาม button2, button3 และต่อไปจนกว่าจะครอบคลุมตัวเลขและสัญลักษณ์ทั้งหมด
และนั่นแหล่ะ หากคุณเปิดโปรแกรมตอนนี้ คุณจะต้องเห็นเครื่องคิดเลขที่ดูเป็นนามธรรมมาก
ในกรณีที่ติดตามไม่ได้ ให้นำโค้ดที่สมบูรณ์จากด้านล่าง
ตัวอย่าง
from tkinter import *
from PIL import Image
from PIL import ImageTk
txt = ""
res = False
ans = 0
def press(num):
global txt, ans, res
if (res==True):
txt = ans
res = False
txt = txt + str(num)
equation.set(txt)
def equal():
try:
global txt, ans, res
ans = str(eval(txt))
equation.set(ans)
res = True
except:
equation.set("ERROR : Invalid Equation")
txt=""
def clear():
global txt, ans, res
txt = ""
equation.set("")
res = False
if __name__ == "__main__":
window = Tk()
window.configure(background="black")
window.title("Calculator")
window.iconbitmap("assets\Calculator\Logo.ico")
window.geometry("343x417")
window.resizable(0,0)
equation = StringVar()
txt_field = Entry(relief=RIDGE,textvariable=equation,bd=10,font=("Aerial",20),bg="powder blue")
txt_field.grid(columnspan=4,ipady=10,ipadx=10,sticky="nsew")
width=80
height=80
img1 = Image.open("assets/Calculator/one.PNG")
img1 = img1.resize((width,height))
oneImage = ImageTk.PhotoImage(img1)
button1 = Button(window, image=oneImage,bg="white",command = lambda:press(1),height=height,width=width)
button1.grid(row=2,column=0,sticky="nsew")
img2 = Image.open("assets/Calculator/two.PNG")
img2 = img2.resize((width,height))
twoImage = ImageTk.PhotoImage(img2)
button2 = Button(window, image=twoImage,bg="white",command = lambda:press(2),height=height,width=width)
button2.grid(row=2,column=1,sticky="nsew")
img3 = Image.open("assets/Calculator/three.PNG")
img3 = img3.resize((width,height))
threeImage = ImageTk.PhotoImage(img3)
button3 = Button(window, image=threeImage,bg="white",command = lambda:press(3),height=height,width=width)
button3.grid(row=2,column=2,sticky="nsew")
img4 = Image.open("assets/Calculator/four.PNG")
img4 = img4.resize((width,height))
fourImage = ImageTk.PhotoImage(img4)
button4 = Button(window, image=fourImage,bg="white",command = lambda:press(4),height=height,width=width)
button4.grid(row=3,column=0,sticky="nsew")
img5 = Image.open("assets/Calculator/five.PNG")
img5 = img5.resize((width,height))
fiveImage = ImageTk.PhotoImage(img5)
button5 = Button(window, image=fiveImage,bg="white",command = lambda:press(5),height=height,width=width)
button5.grid(row=3,column=1,sticky="nsew")
img6 = Image.open("assets/Calculator/six.PNG")
img6 = img6.resize((width,height))
sixImage = ImageTk.PhotoImage(img6)
button6 = Button(window, image=sixImage,bg="white",command = lambda:press(6),height=height,width=width)
button6.grid(row=3,column=2,sticky="nsew")
img7 = Image.open("assets/Calculator/seven.PNG")
img7 = img7.resize((width,height))
sevenImage = ImageTk.PhotoImage(img7)
button7 = Button(window, image=sevenImage,bg="white",command = lambda:press(7),height=height,width=width)
button7.grid(row=4,column=0,sticky="nsew")
img8 = Image.open("assets/Calculator/eight.PNG")
img8 = img8.resize((width,height))
eightImage = ImageTk.PhotoImage(img8)
button8 = Button(window, image=eightImage,bg="white",command = lambda:press(8),height=height,width=width)
button8.grid(row=4,column=1,sticky="nsew")
img9 = Image.open("assets/Calculator/nine.PNG")
img9 = img9.resize((width,height))
nineImage = ImageTk.PhotoImage(img9)
button9 = Button(window, image=nineImage,bg="white",command = lambda:press(9),height=height,width=width)
button9.grid(row=4,column=2,sticky="nsew")
img0 = Image.open("assets/Calculator/zero.PNG")
img0 = img0.resize((width,height))
zeroImage = ImageTk.PhotoImage(img0)
button0 = Button(window, image=zeroImage,bg="white",command = lambda:press(0),height=height,width=width)
button0.grid(row=5,column=1,sticky="nsew")
imgx = Image.open("assets/Calculator/multiply.PNG")
imgx = imgx.resize((width,height))
multiplyImage = ImageTk.PhotoImage(imgx)
buttonx = Button(window, image=multiplyImage,bg="white",command = lambda:press("*"),height=height,width=width)
buttonx.grid(row=2,column=3,sticky="nsew")
imgadd = Image.open("assets/Calculator/add.PNG")
imgadd = imgadd.resize((width,height))
addImage = ImageTk.PhotoImage(imgadd)
buttonadd = Button(window, image=addImage,bg="white",command = lambda:press("+"),height=height,width=width)
buttonadd.grid(row=3,column=3,sticky="nsew")
imgdiv = Image.open("assets/Calculator/divide.PNG")
imgdiv = imgdiv.resize((width,height))
divImage = ImageTk.PhotoImage(imgdiv)
buttondiv = Button(window, image=divImage,bg="white",command = lambda:press("/"),height=height,width=width)
buttondiv.grid(row=5,column=3,sticky="nsew")
imgsub = Image.open("assets/Calculator/subtract.PNG")
imgsub = imgsub.resize((width,height))
subImage = ImageTk.PhotoImage(imgsub)
buttonsub = Button(window, image=subImage,bg="white",command = lambda:press("- "),height=height,width=width)
buttonsub.grid(row=4,column=3,sticky="nsew")
imgeq = Image.open("assets/Calculator/equal.PNG")
imgeq = imgeq.resize((width,height))
eqImage = ImageTk.PhotoImage(imgeq)
buttoneq = Button(window, image=eqImage,bg="white",command = equal,height=height,width=width)
buttoneq.grid(row=5,column=2,sticky="nsew")
imgclear = Image.open("assets/Calculator/clear.PNG")
imgclear = imgclear.resize((width,height))
clearImage = ImageTk.PhotoImage(imgclear)
buttonclear = Button(window, image=clearImage,bg="white",command = clear,height=height,width=width)
buttonclear.grid(row=5,column=0,sticky="nsew")
window.mainloop() หากคุณมีปัญหาในการจัดรูปแบบกับโปรแกรมข้างต้น คุณสามารถดาวน์โหลดได้จาก https://github.com/SVijayB/PyHub/blob/master/Graphics/Simple%20Calculator.py เช่นกัน
ผลลัพธ์
