Thursday, November 29, 2012

เมนูเปิดไฟล์รูป

 ในบทความนี้ เราจะเพิ่มเติมเมนูสำหรับเปิดไฟล์รูป เพื่อความสะดวกในการเลือกไฟล์รูปใดๆในเครื่องคอมพิวเตอร์นั้น





ลองดูตามโค้ดด้านล่างนี้ได้ครับ
from Tkinter import Tk,Menu,Label
from PIL import Image,ImageTk
import tkFileDialog

class MainApp:
    #constructor
    def __init__(self,mainwindow):
        #assign class variable to input parameter
        self.mainwindow = mainwindow
        #set title
        self.mainwindow.title("Menu")
        self.lbl = Label(self.mainwindow)

    def createMenu(self):
        #create menubar
        menubar = Menu(self.mainwindow)
        self.mainwindow.config(menu=menubar)
        #FILE menu
        fileMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="File", menu=fileMenu)
        fileMenu.add_command(label="Open...",command=self.openFile)
        fileMenu.add_separator()
        fileMenu.add_command(label="Exit", command=self.mainwindow.destroy)
        #EDIT menu
        editMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="Edit", menu=editMenu)
        editMenu.add_command(label="Restore Image", command=self.imgRestore)
        #PROCESS menu
        processMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="Process", menu=processMenu)
        processMenu.add_command(label="Rotate", command=self.imgRotate)

    def openFile(self):
        #file type filter
        ftypes = [('Image files', '*.jpg *.png *.gif'),
        ('All files', '*')]
        filename = tkFileDialog.askopenfilename(parent=self.mainwindow,title='Choose a file',filetypes=ftypes)
        if filename:
           try:
                #open image
                self.im = Image.open(filename)
                #keep its copy for restoring later
                self.imOrigin = self.im.copy()
                self.showImage()
           except: pass

    def showImage(self):
        self.imTk = ImageTk.PhotoImage(self.im)
        self.lbl.destroy()
        self.lbl = Label(self.mainwindow, image=self.imTk)
        self.lbl.pack()

    def imgRestore(self):
        self.im = self.imOrigin.copy()
        self.showImage()

    def imgRotate(self):
        self.im = self.im.rotate(45)
        self.showImage()

#---Main app starts here---
root = Tk()
app = MainApp(root)
#create menu
app.createMenu()
root.mainloop()

กลับไปสู่ภาพต้นฉบับ

ในบทความนี้เราจะลองสร้างเมนูใหม่ คือ Edit และมีคำสั่ง Restore Image เพื่อให้เราสามารถย้อนกลับไปสู่ภาพต้นฉบับ ในกรณีที่ทำการประมวลผลไปแล้ว




หลักการก็ตรงไปตรงมาครับ สำเนารูปต้นฉบับไว้ก่อน ด้วยคำสั่ง
Image.copy()

ตัวอย่างเช่น
imOrigin = im.copy()

จากนั้นเมื่อต้องการกลับไปสู่ต้นฉบับ ก็สำเนากลับ โดยใช้คำสั่ง
im = imOrigin.copy()

ลองมาดูโค้ดเต็มๆที่เพิ่มเมนูนี้ครับ
from Tkinter import Tk,Menu,Label
from PIL import Image,ImageTk

class MainApp:
    #constructor
    def __init__(self,mainwindow):
        #assign class variable to input parameter
        self.mainwindow = mainwindow
        #set title
        self.mainwindow.title("Menu")
        self.lbl = Label(self.mainwindow)

    def createMenu(self):
        #create menubar
        menubar = Menu(self.mainwindow)
        self.mainwindow.config(menu=menubar)
        #FILE menu
        fileMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="File", menu=fileMenu)
        fileMenu.add_command(label="Exit", command=self.mainwindow.destroy)
        #EDIT menu
        editMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="Edit", menu=editMenu)
        editMenu.add_command(label="Restore Image", command=self.imgRestore)
        #PROCESS menu
        processMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="Process", menu=processMenu)
        processMenu.add_command(label="Rotate", command=self.imgRotate)

    def loadImage(self):
        self.im = Image.open("lena.jpg")
        self.imOrigin = self.im.copy()
        self.showImage()

    def showImage(self):
        self.imTk = ImageTk.PhotoImage(self.im)
        self.lbl.destroy()
        self.lbl = Label(self.mainwindow, image=self.imTk)
        self.lbl.pack()

    def imgRestore(self):
        self.im = self.imOrigin.copy()
        self.showImage()

    def imgRotate(self):
        self.im = self.im.rotate(45)
        self.showImage()

#---Main app starts here---
root = Tk()
app = MainApp(root)
#create menu
app.createMenu()
app.loadImage()
root.mainloop()

Tuesday, November 27, 2012

เมนู+รูป+การประมวลผล 2

ต่อเนื่องจากคราวที่แล้วครับ แก้ปัญหา Label เก่าซ้อนกับอันใหม่ เพื่อให้ได้ผลลัพธ์ตามนี้


วิธีการแก้ปัญหาคือ ต้องทำลาย Label อันเก่าที่ค้างอยู่บนหน้าต่างก่อนที่จะแสดง Label ใหม่ นั่นคือ
1. ให้ตัวแปร Label เป็นตัวแปรของคลาส และ
2. ใช้คำสั่ง destroy เพื่อทำลาย Label อันเก่า

โคัดทั้งหมดหลังจากการแก้ไขก็จะเป็นดังนี้ครับ
from Tkinter import Tk,Menu,Label
from PIL import Image,ImageTk

class MainApp:
    #constructor
    def __init__(self,mainwindow):
        #assign class variable to input parameter
        self.mainwindow = mainwindow
        #set title
        self.mainwindow.title("Menu")
        self.lbl = Label(self.mainwindow)

    def createMenu(self):
        #create menubar
        menubar = Menu(self.mainwindow)
        self.mainwindow.config(menu=menubar)
        #FILE menu
        fileMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="File", menu=fileMenu)
        fileMenu.add_command(label="Exit", command=self.mainwindow.destroy)
        #PROCESS menu
        processMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="Process", menu=processMenu)
        processMenu.add_command(label="Rotate",command=self.imgRotate)

    def loadImage(self):
        self.im = Image.open("lena.jpg")
        self.showImage()

    def showImage(self):
        self.imTk = ImageTk.PhotoImage(self.im)
        self.lbl.destroy()
        self.lbl = Label(self.mainwindow, image=self.imTk)
        self.lbl.pack()

    def imgRotate(self):
        self.im = self.im.rotate(45)
        self.showImage()

#---Main app starts here---
root = Tk()
app = MainApp(root)
#create menu
app.createMenu()
app.loadImage()
root.mainloop()

โค้ดข้างต้นก็จะเป็นต้นแบบหลักๆในการประมวลผลรูปไ้ด้แล้วครับ ครั้งหน้าเราจะลองเพิ่มเมนูในการเรียกรูปต้นฉบับกลับคืนมา หลังจากประมวลผลไปแล้วครับ

เมนู+รูป+การประมวลผล

คราวนี้เราจะลองเอา เมนูในบทความที่แล้ว มาประกอบกับรูปในบทความก่อนหน้านั้นครับ


โคัดเมื่อรวมๆกันแล้วก็จะได้แบบนี้
from Tkinter import Tk,Menu,Label
from PIL import Image,ImageTk

class MainApp:
    #constructor
    def __init__(self,mainwindow):
        #assign class variable to input parameter
        self.mainwindow = mainwindow
        #set title
        self.mainwindow.title("Menu")

    def createMenu(self):
        #create menubar
        menubar = Menu(self.mainwindow)
        self.mainwindow.config(menu=menubar)
        #FILE menu
        fileMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="File", menu=fileMenu)
        fileMenu.add_command(label="Exit", command=self.mainwindow.destroy)

    def loadImage(self):
        self.im = Image.open("lena.jpg")
        self.showImage()

    def showImage(self):
        self.imTk = ImageTk.PhotoImage(self.im)
        lbl = Label(self.mainwindow, image=self.imTk)
        lbl.pack()

#---Main app starts here---
root = Tk()
app = MainApp(root)
#create menu
app.createMenu()
app.loadImage()
root.mainloop()

จากนั้น เราจะลองเพิ่มเมนู Process สำหรับการประมวลผลภาพ เพื่อทำการหมุนรูปใหัได้ผลคือ


ลองเพิ่มโค้ดต่อไปนี้ในส่วนของ createMenu() ครับ
#PROCESS menu
processMenu = Menu(menubar, tearoff=0)
menubar.add_cascade(label="Process", menu=processMenu)
processMenu.add_command(label="Rotate",command=self.imgRotate) 

จะเห็นว่าเราได้เพิ่มคำสั่ง Rotate ในส่วนของเมนู Process ดังนั้น เราจำเป็นต้องเขียน method ใหม่ให้สอดคล้องกับคำสั่งดังกล่าว เพื่อหมุนรูปดังนี้
    def imgRotate(self):
        self.im = self.im.rotate(45)
        self.showImage()

เมื่อแก้ไขข้างต้นแล้ว หากรันโปรแกรมแ้ล้วเลือกเมนู Process / Rotate จะได้ผลลัพธ์คือ



อ้าว ทำไมเป็นแบบนี้ล่ะ มีส่วนว่างๆข้างบนมาได้อย่างไร?

เหตุผลก็เป็นเพราะว่า ใน showImage() มีการสร้าง Label ใหม่เรื่อยๆ ส่วน Label เก่าที่ถูกสร้างไว้ก็ยังเหลืออยู่ (ยกเว้นรูป เพราะถูก garbage collector ทำลายไปแล้ว) ทำให้เกิดพื้นที่ว่างที่เป็นของ Label เก่าค้างอยู่ในหน้าต่าง

เราจะมาลองแก้ปัญหานี้ในคราวถัดไปครับ

Monday, November 26, 2012

การสร้างเมนู

ตอนที่แล้วเรามีการประมวลผลภาพและแสดงผลในหน้าต่าง ซึ่งจะเรียกใช้งานคำสั่งผ่านโค้ดโดยตรง

ขั้นตอนดังกล่าวอาจจะไม่สะดวกและยืดหยุ่นพอ ในกรณีที่มีการประมวลผลมีหลายรูปแบบ ซึ่งผู้ใช้งานน่าจะเลือกได้ด้วยตนเอง

ดังนั้น ทางเลือกนึงคือการสร้างเมนู เพื่อให้จัดการการประมวลผลรูปได้ง่ายขึ้น

ในบทความนี้จึงนำเสนอการสร้างเมนูอย่างง่าย เพื่อให้ได้ผลลัพธ์ดังนี้


นั่นคือ การสร้างเมนูหนึ่งเมนูชื่อ File และมีคำสั่งย่อยคือ Exit เมื่อคลิกที่คำสั่งนี้ก็จะปิดหน้าต่างไป

เราลองมาสร้างเมนูก่อน ด้วยคำสั่งดังต่อไปนี้
from Tkinter import Tk,Menu

class mainApp:
    #constructor
    def __init__(self,mainwindow):
        #assign class variable to input parameter
        self.mainwindow = mainwindow
        #set title
        self.mainwindow.title("Menu")

    def createMenu(self):
        #create menubar
        menubar = Menu(self.mainwindow)
        #attach menubar to main window
        self.mainwindow.config(menu=menubar)
        #FILE menu, tearoff = user can drag the menu
        fileMenu = Menu(menubar, tearoff=0)
        #add FILE menu to menubar
        menubar.add_cascade(label="File", menu=fileMenu)
        #add EXIT command to FILE menu
        fileMenu.add_command(label="Exit")

#---Main app starts here---
root = Tk()
app = mainApp(root)
#create menu
app.createMenu()
root.mainloop()

ณ ตอนนี้ หากเราคลิกที่คำสั่ง Exit ก็จะยังไม่มีอะไรเกิดขึ้น เราต้องเชื่อมคำสั่งนี้กับ method ซึ่งในที่นี้ก็คือคำสั่ง root.destroy (ผมลองใช้คำสั่ง root.quit ตามตัวอย่างหลายๆแห่งแล้วมันค้างงงงง)

แก้ไขเฉพาะบรรทัดเดียวครับ คือบรรทัด
 fileMenu.add_command(label="Exit")
เปลี่ยนเป็น
fileMenu.add_command(label="Exit", command=self.mainwindow.destroy)

จากนั้นเมนูคำสั่ง Exit ก็จะใช้งานได้แล้วครับ

ตอนหน้าเราจะลองเอาเมนูไปผูกกับคำสั่งในการประมวลผลภาพต่อครับ