Programming app development with Python Day 3

downlaod เอกสารประกอบการสอน Programming app develop with Python Day 3
visual studio code แล้วเปิด folder myapp แล้วเลือกไฟล์ BMIGUI.py

Code เก่าของไฟล์ BMIGUI.py

import tkinter as tk #เรียก lib tk เพื่อสร้าง GUI
app=tk.Tk() #เรียกใช้ GUI Form
app.title("BMI") #หัวด้านบนของฟอร์มที่จะแสดง
app.geometry("300x400") #ประกาศขนาด GUI ให้มี กว้าง x สูง pixel
#code  ต่าง สร้าง ก่อน mainloop ที่จะแสดงผล GUI
#สร้าง Label แสดงข้อความ
Label_Height=tk.Label(app,text="ส่วนสูง:")
Label_Height.grid(column=0,row=0)
#สร้างกล่อง input เพื่อรับค่าส่วนสูง
Input_Height=tk.Entry(app,width=30) 
Input_Height.grid(column=1,row=0)

#สร้าง Label แสดงข้อความ
Label_Weight=tk.Label(app,text="น้ำหนัก:")
Label_Weight.grid(column=0,row=1)
#สร้างกล่อง input เพื่อรับค่าน้ำหนัก
Input_Weight=tk.Entry(app,width=30) 
Input_Weight.grid(column=1,row=1)

#สร้าง Label ผลลัพธ์
Label_ResultBMI=tk.Label(app,text="ผล:")
Label_ResultBMI.grid(column=1,row=3)
#funtion def
def BMI_Cal():
#print(Input_Height.get())
#print(Input_Weight.get())
#ให้แสดงผลใน label ผลลัพธ์ทำผ่าน 'text'
#Label_ResultBMI['text']=Input_Height.get()
# BMI = น้ำหนัก / ส่วนสูง(m)**2
     Input_HeightM=float(Input_Height.get())/100
     BMI=float(Input_Weight.get())/Input_HeightM**2
     Label_ResultBMI['text']=f'BMI={BMI:.2f}'
#สร้างปุ่มกด ให้คำนวน
Button_CalBMI=tk.Button(app,text="คำนวน",command=BMI_Cal)
Button_CalBMI.grid(column=1,row=2)

app.mainloop() #แสดง GUI ออกมา

แก้ไขใน def BMI_Cal()

def BMI_Cal():
#print(Input_Height.get())
#print(Input_Weight.get())
#ให้แสดงผลใน label ผลลัพธ์ทำผ่าน 'text'
#Label_ResultBMI['text']=Input_Height.get()
# BMI = น้ำหนัก / ส่วนสูง(m)**2
     Input_HeightM=float(Input_Height.get())/100
     BMI=float(Input_Weight.get())/Input_HeightM**2
     #ตรวจสอบค่า BMI ว่าอ้วน หรือ ผอม หรือ ....
     #สร้างตัวแปรมาเป็บค่า text หรือข้อความผลลัพธ์ที่ได้
     Summary_text=""
     if BMI < 18.5 : 
           Summary_text="ผอม"
     elif BMI>=18.5 and BMI <=22.9 :
           Summary_text="ปกติ"

     Label_ResultBMI['text']=f'BMI={BMI:.2f} {Summary_text}'

code.ทั้งหมดของการตรวจสอบ BMI ใน def BMI_Cal()

 #สร้างตัวแปรมาเป็บค่า text หรือข้อความผลลัพธ์ที่ได้
     Summary_text=""
     if BMI < 18.5 : 
           Summary_text="ผอม"
     elif BMI>=18.5 and BMI <=22.9 :
           Summary_text="ปกติ"
     elif BMI>=23 and BMI <=24.9 :
           Summary_text="ท้วม"
     elif BMI>=25 and BMI <=29.9 :
           Summary_text="อ้วน"
     else :
           Summary_text="อ้วนมาก"

     Label_ResultBMI['text']=f'BMI={BMI:.2f} {Summary_text}'

หรืออาจจะเขียนแบบให้สั้นลงเลยเทียบแค่ค่ามากกว่าหรือน้อยกว่าแบบโค้ดด้านล่าง

Summary_text=""
     if BMI >= 30: 
           Summary_text="อ้วนมาก"
     elif BMI>=25:
           Summary_text="อ้วน"
     elif BMI>=23:
           Summary_text="ท้วม"
     elif BMI>=18.5:
           Summary_text="ปกติ"
     else :
           Summary_text="ผอม"

     Label_ResultBMI['text']=f'BMI={BMI:.2f} {Summary_text}'

การแทรกรูปลงไปใน form tkinter ทำได้โดยประกาศเรียกใช้งาน lib ด้านบนสุดต่อจาก import tkinter
```
import tkinter as tk #เรียก lib tk เพื่อสร้าง GUI
from PIL import Image, ImageTk  #ใส่ด้านบนหลัง import tkinter
```

หลังจากนั้นพิมพ์โค้ดLoad image มาเก็บใน memory ของโปรแกรม

#Load image มาเก็บใน memory 
#Load image
images = {
     "ผอม": ImageTk.PhotoImage(Image.open("lv1.png")),
     "ปกติ": ImageTk.PhotoImage(Image.open("lv2.png")),
     "ท้วม": ImageTk.PhotoImage(Image.open("lv3.png")),
     "อ้วน": ImageTk.PhotoImage(Image.open("lv4.png")),
     "อ้วนมาก": ImageTk.PhotoImage(Image.open("lv5.png")),
}

ไปหาภาพมาแทน lv1-lv5 ของระดับ BMI ของเรา
save ภาพข้อที่ 9 นำไปวางไว้ในที่เดียวกับไฟล์ python BMIGUI.py

สร้าง Label แสดงภาพต่อจาก Label ผลลัพธ์

#สร้าง Label สำหรับแสดงภาพ
Label_ResultIMG=tk.Label(app,text="")
Label_ResultIMG.grid(column=1,row=4)

หลังจากนั้นให้แสดงผลภาพ

  #แสดงภาพ
     img = images[Summary_text]
     Label_ResultIMG['image'] = img
     Label_ResultIMG.image = img  # ✅ บรรทัดนี้สำคัญมาก! เก็บ reference ไว้กัน GC

Code ทั้งหมดที่แสดงภาพได้แล้ว

import tkinter as tk #เรียก lib tk เพื่อสร้าง GUI
from PIL import Image, ImageTk  #ใส่ด้านบนหลัง import tkinter


app=tk.Tk() #เรียกใช้ GUI Form
app.title("BMI") #หัวด้านบนของฟอร์มที่จะแสดง
app.geometry("300x400") #ประกาศขนาด GUI ให้มี กว้าง x สูง pixel
#code  ต่าง สร้าง ก่อน mainloop ที่จะแสดงผล GUI
#สร้าง Label แสดงข้อความ
Label_Height=tk.Label(app,text="ส่วนสูง:")
Label_Height.grid(column=0,row=0)
#สร้างกล่อง input เพื่อรับค่าส่วนสูง
Input_Height=tk.Entry(app,width=30) 
Input_Height.grid(column=1,row=0)

#สร้าง Label แสดงข้อความ
Label_Weight=tk.Label(app,text="น้ำหนัก:")
Label_Weight.grid(column=0,row=1)
#สร้างกล่อง input เพื่อรับค่าน้ำหนัก
Input_Weight=tk.Entry(app,width=30) 
Input_Weight.grid(column=1,row=1)

#สร้าง Label ผลลัพธ์
Label_ResultBMI=tk.Label(app,text="ผล:")
Label_ResultBMI.grid(column=1,row=3)

#สร้าง Label สำหรับแสดงภาพ
Label_ResultIMG=tk.Label(app,text="")
Label_ResultIMG.grid(column=1,row=4)

#Load image มาเก็บใน memory 
#Load image
images = {
     "ผอม": ImageTk.PhotoImage(Image.open("lv1.png")),
     "ปกติ": ImageTk.PhotoImage(Image.open("lv2.png")),
     "ท้วม": ImageTk.PhotoImage(Image.open("lv3.png")),
     "อ้วน": ImageTk.PhotoImage(Image.open("lv4.png")),
     "อ้วนมาก": ImageTk.PhotoImage(Image.open("lv5.png")),
}

#funtion def
def BMI_Cal():
#print(Input_Height.get())
#print(Input_Weight.get())
#ให้แสดงผลใน label ผลลัพธ์ทำผ่าน 'text'
#Label_ResultBMI['text']=Input_Height.get()
# BMI = น้ำหนัก / ส่วนสูง(m)**2
     Input_HeightM=float(Input_Height.get())/100
     BMI=float(Input_Weight.get())/Input_HeightM**2
     #ตรวจสอบค่า BMI ว่าอ้วน หรือ ผอม หรือ ....
     #สร้างตัวแปรมาเป็บค่า text หรือข้อความผลลัพธ์ที่ได้
     Summary_text=""
     if BMI >= 30: 
           Summary_text="อ้วนมาก"
     elif BMI>=25:
           Summary_text="อ้วน"
     elif BMI>=23:
           Summary_text="ท้วม"
     elif BMI>=18.5:
           Summary_text="ปกติ"
     else :
           Summary_text="ผอม"

     Label_ResultBMI['text']=f'BMI={BMI:.2f} {Summary_text}'
     #แสดงภาพ
     img = images[Summary_text]
     Label_ResultIMG['image'] = img
     Label_ResultIMG.image = img  # ✅ บรรทัดนี้สำคัญมาก! เก็บ reference ไว้กัน GC
#สร้างปุ่มกด ให้คำนวน
Button_CalBMI=tk.Button(app,text="คำนวน",command=BMI_Cal)
Button_CalBMI.grid(column=1,row=2)

app.mainloop() #แสดง GUI ออกมา

ถ้าต้องการ resize ภาพ เพื่อลดขนาดให้แก้ไขตรง Load Image แล้วเพิมคำสั่ง resize ไป

#Load image มาเก็บใน memory 
#Load image
size = (120,270) #กำหนดขนาด resize ภาพเป็นกว้าง 120 สูง 270 pixel
images = {
     "ผอม": ImageTk.PhotoImage(Image.open("lv1.png").resize(size)),
     "ปกติ": ImageTk.PhotoImage(Image.open("lv2.png").resize(size)),
     "ท้วม": ImageTk.PhotoImage(Image.open("lv3.png").resize(size)),
     "อ้วน": ImageTk.PhotoImage(Image.open("lv4.png").resize(size)),
     "อ้วนมาก": ImageTk.PhotoImage(Image.open("lv5.png").resize(size)),
}

โค้ดทั้งหมดรวม resize

import tkinter as tk #เรียก lib tk เพื่อสร้าง GUI
from PIL import Image, ImageTk  #ใส่ด้านบนหลัง import tkinter


app=tk.Tk() #เรียกใช้ GUI Form
app.title("BMI") #หัวด้านบนของฟอร์มที่จะแสดง
app.geometry("300x400") #ประกาศขนาด GUI ให้มี กว้าง x สูง pixel
#code  ต่าง สร้าง ก่อน mainloop ที่จะแสดงผล GUI
#สร้าง Label แสดงข้อความ
Label_Height=tk.Label(app,text="ส่วนสูง:")
Label_Height.grid(column=0,row=0)
#สร้างกล่อง input เพื่อรับค่าส่วนสูง
Input_Height=tk.Entry(app,width=30) 
Input_Height.grid(column=1,row=0)

#สร้าง Label แสดงข้อความ
Label_Weight=tk.Label(app,text="น้ำหนัก:")
Label_Weight.grid(column=0,row=1)
#สร้างกล่อง input เพื่อรับค่าน้ำหนัก
Input_Weight=tk.Entry(app,width=30) 
Input_Weight.grid(column=1,row=1)

#สร้าง Label ผลลัพธ์
Label_ResultBMI=tk.Label(app,text="ผล:")
Label_ResultBMI.grid(column=1,row=3)

#สร้าง Label สำหรับแสดงภาพ
Label_ResultIMG=tk.Label(app,text="")
Label_ResultIMG.grid(column=1,row=4)

#Load image มาเก็บใน memory 
#Load image
size = (120,270) #กำหนดขนาด resize ภาพเป็นกว้าง 120 สูง 270 pixel
images = {
     "ผอม": ImageTk.PhotoImage(Image.open("lv1.png").resize(size)),
     "ปกติ": ImageTk.PhotoImage(Image.open("lv2.png").resize(size)),
     "ท้วม": ImageTk.PhotoImage(Image.open("lv3.png").resize(size)),
     "อ้วน": ImageTk.PhotoImage(Image.open("lv4.png").resize(size)),
     "อ้วนมาก": ImageTk.PhotoImage(Image.open("lv5.png").resize(size)),
}

#funtion def
def BMI_Cal():
#print(Input_Height.get())
#print(Input_Weight.get())
#ให้แสดงผลใน label ผลลัพธ์ทำผ่าน 'text'
#Label_ResultBMI['text']=Input_Height.get()
# BMI = น้ำหนัก / ส่วนสูง(m)**2
     Input_HeightM=float(Input_Height.get())/100
     BMI=float(Input_Weight.get())/Input_HeightM**2
     #ตรวจสอบค่า BMI ว่าอ้วน หรือ ผอม หรือ ....
     #สร้างตัวแปรมาเป็บค่า text หรือข้อความผลลัพธ์ที่ได้
     Summary_text=""
     if BMI >= 30: 
           Summary_text="อ้วนมาก"
     elif BMI>=25:
           Summary_text="อ้วน"
     elif BMI>=23:
           Summary_text="ท้วม"
     elif BMI>=18.5:
           Summary_text="ปกติ"
     else :
           Summary_text="ผอม"

     Label_ResultBMI['text']=f'BMI={BMI:.2f} {Summary_text}'
     #แสดงภาพ
     img = images[Summary_text]
     Label_ResultIMG['image'] = img
     Label_ResultIMG.image = img  # ✅ บรรทัดนี้สำคัญมาก! เก็บ reference ไว้กัน GC
#สร้างปุ่มกด ให้คำนวน
Button_CalBMI=tk.Button(app,text="คำนวน",command=BMI_Cal)
Button_CalBMI.grid(column=1,row=2)

app.mainloop() #แสดง GUI ออกมา

ทำการ pack โปรแกรมของเราเป็น .exe .app สำหรับไปใช้งาน
ก่อนจะทำ .exe (run บน windows) หรือ .app (run บน macos)
ตรวจสอบก่อนว่ามีรูปภาพไหมถ้ามีต้องเพิ่ม add data รูปภาพไปกับไฟล์ด้วย
ต้องลง library พิมพ์ใน cmd
```
pip install pyinstaller 
pip install pillow
```
ถ้าบน macos ใช้คำสั่ง
```
python3 -m pip install pyinstaller 
python3 -m pip install pillow
```
คำสั่งในการทำ ถ้าไม่มีรูปภาพ
```
pyinstaller --onefile --windowed BMIGUI.py
```
ถ้ามีรูปภาพให้ใช้คำสั่งนี้
1) เพิ่มโค้ดลงไปใน BMIGUI.py
```
import sys, os #ไว้ด้านบนสุด
```
#ไว้ด้านล่างก่อนโหลด image memory

def resource_path(filename):

if hasattr(sys, ‘_MEIPASS’):

return os.path.join(sys._MEIPASS, filename)

return filename
2) แก้ไขโค้ดตอน Load image
```
#Load image
size = (120,270) #กำหนดขนาด resize ภาพเป็นกว้าง 120 สูง 270 pixel
images = {
     "ผอม": ImageTk.PhotoImage(Image.open(resource_path("lv1.png")).resize(size)),
     "ปกติ": ImageTk.PhotoImage(Image.open(resource_path("lv2.png")).resize(size)),
     "ท้วม": ImageTk.PhotoImage(Image.open(resource_path("lv3.png")).resize(size)),
     "อ้วน": ImageTk.PhotoImage(Image.open(resource_path("lv4.png")).resize(size)),
     "อ้วนมาก": ImageTk.PhotoImage(Image.open(resource_path("lv5.png")).resize(size)),
}
```

Code ทั้งหมด ที่มีการใช้ภาพเพื่อเอาไปทำ .exe หรือ .app

import tkinter as tk #เรียก lib tk เพื่อสร้าง GUI
import sys, os
from PIL import Image, ImageTk  #ใส่ด้านบนหลัง import tkinter


app=tk.Tk() #เรียกใช้ GUI Form
app.title("BMI") #หัวด้านบนของฟอร์มที่จะแสดง
app.geometry("300x400") #ประกาศขนาด GUI ให้มี กว้าง x สูง pixel
#code  ต่าง สร้าง ก่อน mainloop ที่จะแสดงผล GUI
#สร้าง Label แสดงข้อความ
Label_Height=tk.Label(app,text="ส่วนสูง:")
Label_Height.grid(column=0,row=0)
#สร้างกล่อง input เพื่อรับค่าส่วนสูง
Input_Height=tk.Entry(app,width=30) 
Input_Height.grid(column=1,row=0)

#สร้าง Label แสดงข้อความ
Label_Weight=tk.Label(app,text="น้ำหนัก:")
Label_Weight.grid(column=0,row=1)
#สร้างกล่อง input เพื่อรับค่าน้ำหนัก
Input_Weight=tk.Entry(app,width=30) 
Input_Weight.grid(column=1,row=1)

#สร้าง Label ผลลัพธ์
Label_ResultBMI=tk.Label(app,text="ผล:")
Label_ResultBMI.grid(column=1,row=3)

#สร้าง Label สำหรับแสดงภาพ
Label_ResultIMG=tk.Label(app,text="")
Label_ResultIMG.grid(column=1,row=4)


#ไว้ด้านล่างก่อนโหลด image memory 
def resource_path(filename): 
     if hasattr(sys, '_MEIPASS'): 
          return os.path.join(sys._MEIPASS, filename) 
     return filename
#Load image มาเก็บใน memory 
#Load image
size = (120,270) #กำหนดขนาด resize ภาพเป็นกว้าง 120 สูง 270 pixel
images = {
     "ผอม": ImageTk.PhotoImage(Image.open(resource_path("lv1.png")).resize(size)),
     "ปกติ": ImageTk.PhotoImage(Image.open(resource_path("lv2.png")).resize(size)),
     "ท้วม": ImageTk.PhotoImage(Image.open(resource_path("lv3.png")).resize(size)),
     "อ้วน": ImageTk.PhotoImage(Image.open(resource_path("lv4.png")).resize(size)),
     "อ้วนมาก": ImageTk.PhotoImage(Image.open(resource_path("lv5.png")).resize(size)),
}

#funtion def
def BMI_Cal():
#print(Input_Height.get())
#print(Input_Weight.get())
#ให้แสดงผลใน label ผลลัพธ์ทำผ่าน 'text'
#Label_ResultBMI['text']=Input_Height.get()
# BMI = น้ำหนัก / ส่วนสูง(m)**2
     Input_HeightM=float(Input_Height.get())/100
     BMI=float(Input_Weight.get())/Input_HeightM**2
     #ตรวจสอบค่า BMI ว่าอ้วน หรือ ผอม หรือ ....
     #สร้างตัวแปรมาเป็บค่า text หรือข้อความผลลัพธ์ที่ได้
     Summary_text=""
     if BMI >= 30: 
           Summary_text="อ้วนมาก"
     elif BMI>=25:
           Summary_text="อ้วน"
     elif BMI>=23:
           Summary_text="ท้วม"
     elif BMI>=18.5:
           Summary_text="ปกติ"
     else :
           Summary_text="ผอม"

     Label_ResultBMI['text']=f'BMI={BMI:.2f} {Summary_text}'
     #แสดงภาพ
     img = images[Summary_text]
     Label_ResultIMG['image'] = img
     Label_ResultIMG.image = img  # ✅ บรรทัดนี้สำคัญมาก! เก็บ reference ไว้กัน GC
#สร้างปุ่มกด ให้คำนวน
Button_CalBMI=tk.Button(app,text="คำนวน",command=BMI_Cal)
Button_CalBMI.grid(column=1,row=2)

app.mainloop() #แสดง GUI ออกมา

3) ทำ exe app ต่อได้เลยใน cmd หรือ terminal

pyinstaller --onefile --windowed --add-data="lv1.png:." --add-data="lv2.png:." --add-data="lv3.png:." --add-data="lv4.png:." --add-data="lv5.png:." BMIGUI.py