ΜΥΥ105: Εισαγωγή στον Προγραμματισμό Γραφικά Περιβάλλοντα

Γραφικό Περιβάλλον Οι περισσότερες εφαρμογές συνοδεύονται με ένα γραφικό περιβάλλον Ο χρήστης επικοινωνεί με την εφαρμογή μέσω του περιβάλλοντος Το γραφικό περιβάλλον βοηθάει το χρήστη να εισάγει τα δεδομένα του και να βλέπει τα αποτελέσματα μέσω παραθύρων.

Ανάπτυξη Γραφικού Περιβάλλοντος στην Python Μέσω του module tkinter Επιτρέπει σχεδιασμό βασικών στοιχείων σε παραθυρικά περιβάλλοντα, όπως κουμπιά, ετικέττες, φόρμες εισαγωγής κειμένου, μενού, κλπ. Τα στοιχεία αυτά αποκαλούνται widgets Θα κάνουμε μια μικρή εισαγωγή στη χρήση του module tkinter

Το βασικό παράθυρο >>> from tkinter import Tk >>> root = Tk() >>> root.mainloop() δημιουργεί το βασικό παράθυρο σαν αντικείμενο και το αποθηκεύει στη μεταβλητή root μέθοδος που εμφανίζει το παράθυρο root

Βάζοντας ετικέττες >>> from tkinter import Tk, Label >>> root = Tk() >>> hello = Label(master = root, text = 'Hello GUI world!') >>> hello.pack() >>> root.mainloop() δημιουργεί μια ετικέττα και την τοποθετεί στο root ορίζει αυτόματα το πως θα εμφανιστεί η ετικέττα

Παρουσίαση εικόνων from tkinter import Tk, Label, PhotoImage root = Tk() # the window # transform GIF image to a format tkinter can display photo = PhotoImage(file='car07a.gif') car = Label(master=root, image=photo, width=320, # width of label, in pixels height=150) # height of label, in pixels car.pack() root.mainloop() προεραιτικά ορίσματα για το μέγεθος του παραθύρου

Πακετάρισμα πολλών widgets from tkinter import Tk, Label, PhotoImage,BOTTOM,LEFT,RIGHT root = Tk() photo1 = PhotoImage(file='wheel.gif') photo2 = PhotoImage(file='car07a.gif') txt = Label(master=root,text = 'Driving my car with a steering wheel') txt.pack(side=BOTTOM) car = Label(master=root,image=photo1) car.pack(side=LEFT) car = Label(master=root,image=photo2) car.pack(side=RIGHT) root.mainloop() Προσδιορίζοντας το side προσδιορίζουμε την θέση του αντικειμένου

Χρήση σχάρας αντί πακεταρίσματος from tkinter import Tk, Label, RAISED root = Tk() labels = [['1', '2', '3'], # phone dial labels ['4', '5', '6'], # organized in a grid ['7', '8', '9'], ['*', '0', '#']] for r in range(4): for c in range(3): # create label for row r and column c label = Label(root, relief=RAISED, #raised border padx=10, #make label wide text=labels[r][c]) # label text # place label in row r and column label.grid(row=r, column=c) root.mainloop()

Άσκηση Φτιάξτε μια συνάρτηση cal(year, month), που θα παίρνει σαν όρισμα ένα έτος και ένα μήνα και θα δείχνει σε ένα παράθυρο το αντίστοιχο ημερολόγιο Π.χ. >>> cal(2012, 2)

Άσκηση Για να λύσουμε την άσκηση θα χρησιμοποιήσουμε το module calendar: >>> from calendar import monthrange >>> monthrange(2012, 2) # year 2012, month 2 (February) (2, 29) σημαίνει Wednesday 0: Monday, 1: Tuesday, … σημαίνει ότι ο μήνας έχει 29 μέρες

Άσκηση from tkinter import Tk, Label from calendar import monthrange def cal(year, month): root = Tk() daysofweek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] for i in range(7): label = Label(root, text=daysofweek[i]) label.grid(row=0,column=i) weekday, nodays = monthrange(year, month) week = 1 for i in range(1,nodays+1): label = Label(root, text=str(i)) label.grid(row=week,column=weekday) weekday += 1 if weekday>6: weekday=0 week +=1 root.mainloop()

Widgets που αποκρίνονται σε ενέργειες του χρήστη Κουμπιά, φόρμες εισόδου, κλπ. Προγραμματισμός με βάση γεγονότα (event-driven programming) Προγράμματα στα οποία η ροή ελέγχεται με βάση την διαδραστικότητα του χρήστη με το περιβάλλον Π.χ. μια συνάρτηση καλείται όταν πατήσει ένα κουμπί ο χρήστης

Παράδειγμα με κουμπί >>> Day: 14 Dec 2014 Time: 08:27:44 AM

Παράδειγμα με κουμπί (Button) from tkinter import Tk, Button from time import strftime, localtime def clicked(): 'prints day and time info' time = strftime('Day: %d %b %Y\nTime: %H:%M:%S %p\n’, localtime()) print(time) root = Tk() # create button labeled 'Click it' and event handler clicked() button = Button(root, text='Click it', # text on top of button command=clicked) # button click event handler button.pack() root.mainloop() συνάρτηση που θα κληθεί όταν πατηθεί το κουμπί (χειριστής γεγονότος – event handler) Θυμηθείτε ότι η συνάρτηση είναι κι αυτή αντικείμενο

Παράδειγμα με κουμπί δείχνει μήνυμα σε παράθυρο from tkinter import Tk, Button from tkinter.messagebox import showinfo from time import strftime, localtime def clicked(): 'prints day and time info' time = strftime('Day: %d %b %Y\nTime: %H:%M:%S %p\n’, localtime()) showinfo(message = time) root = Tk() # create button labeled 'Click it' and event handler clicked() button = Button(root, text='Click it', # text on top of button command=clicked) # button click event handler button.pack() root.mainloop() δείχνει μήνυμα σε παράθυρο συνάρτηση που θα κληθεί όταν πατηθεί το κουμπί (χειριστής γεγονότος)

Παράδειγμα με κουμπί

Ερμηνεία της root.mainloop() Όταν καλείται η root.mainloop() η Python τρέχει το εξής ατέρμονo loop: while True: περίμενε να συμβεί κάποιο γεγονός κάλεσε τη συνάρτηση που χειρίζεται το γεγονός Ο παραπάνω βρόγχος τερματίζει από μια συνάρτηση χειρισμού Π.χ. πατώντας το κουμπάκι που κλείνει το κυρίως παράθυρο

Άσκηση Αλλάξτε την άσκηση στη διαφάνεια 8 ώστε οι ετικέττες να «πατιούνται» και να τυπώνεται ο αριθμός και το σύμβολο που πατιούνται κάθε φορά >>> 25470#51456#02

Άσκηση Συναρτήσεις χειρισμού κουμπιών Ορίζεται μία για κάθε κουμπί. from tkinter import Tk, Button root = Tk() labels = [['1', '2', '3'], # phone dial labels ['4', '5', '6'], # organized in a grid ['7', '8', '9'], ['*', '0', '#']] for r in range(4): for c in range(3): def clicked(x=labels[r][c]): print(x,end='') but = Button(root, text=labels[r][c], command=clicked) but.grid(row=r, column=c) root.mainloop() Συναρτήσεις χειρισμού κουμπιών Ορίζεται μία για κάθε κουμπί. Τι θα γίνει αν δεν έχουμε το x=…?

Άσκηση from tkinter import Tk, Button root = Tk() labels = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'],['*', '0', '#']] for r in range(4): for c in range(3): def clicked(i = r, j = c, x=labels[r][c]): print(x,end='') global o_x global o_y but = Button(root, width = 5, bg = 'grey', text=labels[o_x][o_y], command=clicked) but.grid(row=o_x, column=o_y) but = Button(root, width = 5, bg = 'red', text=x, command=clicked) but.grid(row=i, column=j) o_x, o_y = i,j but = Button(root, width = 5, bg = 'grey', text=labels[r][c], command=clicked) but.grid(row=r, column=c) o_x,o_y = 0,0 root.mainloop() Κάνετε το κουμπί να αλλάζει χρώμα όταν το πατάς

Παράδειγμα με φόρμα label entry button messagebox

Παράδειγμα με φόρμα (Entry) from tkinter import Tk, Button, Entry, Label, END from time import strptime, strftime from tkinter.messagebox import showinfo def compute(): global dateEnt # dateEnt is a global variable date = dateEnt.get() # read date from entry dateEnt # compute weekday corresponding to date weekday = strftime('%A', strptime(date, '%b %d, %Y')) # display the weekday in a pop-up window showinfo(message = '%s was a %s' % (date, weekday)) dateEnt.delete(0, END) # delete date from entry dateEnt root = Tk() label = Label(root, text='Enter date') label.grid(row=0, column=0) dateEnt = Entry(root) dateEnt.grid(row=0, column=1) button = Button(root, text='Enter', command=compute) button.grid(row=1, column=0, columnspan=2) root.mainloop() Μετατρέπει αλφαριθμητικό σε αντικείμενο χρόνου Πιάνει 2 στήλες

Μέθοδοι φορμών e.get() Επιστρέφει το αλφαριθμητικό που υπάρχει στη φόρμα e e.insert(index, text) Εισάγει το αλφαριθμητικό text μέσα στη φόρμα e στη θέση index. Αν index=END το text προστίθεται στο τέλος e.delete(from, to) Διαγράφει όλους τους χαρακτήρες από τη θέση from στη θέση to. Π.χ. η delete(0, END) διαγράφει όλο το κείμενο από τη φόρμα

Άσκηση Φτιάξτε ένα πρόγραμμα που θα παίρνει από το χρήστη ένα ποσό, ένα επιτόκιο (%) και έναν αριθμό ετών και θα υπολογίζει πόσο θα έχει γίνει το ποσό μετά τον αριθμό ετών

Άσκηση συνεχίζεται from tkinter import Tk, Button, Entry, Label, END from tkinter.messagebox import showinfo def compute(): amount = amountEnt.get() # read amount from entry amountEnt rate = rateEnt.get() # read rate from entry rateEnt years = yearsEnt.get() # read years from entry yearsEnt # compute amount plus interest result = eval(amount) for i in range(int(years)): result = result*(1+eval(rate)/100) # display the result in a pop-up window showinfo(message = 'Your amount after %s years will be %.2f' % (years, result)) amountEnt.delete(0, END) # delete amount rateEnt.delete(0, END) # delete rate yearsEnt.delete(0, END) # delete years συνεχίζεται

Άσκηση Ορίζει τον τίτλο του παραθύρου root = Tk() root.title("Interest") label1 = Label(root, text='Amount:’) label1.grid(row=0, column=0) amountEnt = Entry(root) amountEnt.grid(row=0, column=1) label2 = Label(root, text='Rate:’) label2.grid(row=1, column=0) rateEnt = Entry(root) rateEnt.grid(row=1, column=1) label3 = Label(root, text='Years:’) label3.grid(row=2, column=0) yearsEnt = Entry(root) yearsEnt.grid(row=2, column=1) button = Button(root, text='Calculate', command=compute) button.grid(row=3, column=0, columnspan=2) root.mainloop() Ορίζει τον τίτλο του παραθύρου

Παράδειγμα με κείμενο text >>> char = h char = e char = l char = o char = space char = w

Παράδειγμα με κείμενο (Text) from tkinter import Tk, Text, BOTH def record(event): '''event handling function for key press events; input event is of type tkinter.Event''' print('char = %s' % event.keysym) # print key symbol root = Tk() text = Text(root, width=20, # set width to 20 characters height=5) # set height to 5 rows of characters # Bind a key press event with the event handling function record() text.bind('<KeyPress>', record) # widget expands if the master does text.pack(expand=True, fill=BOTH) root.mainloop() συνάρτηση που καλείται για κάθε γεγονός τύπου <KeyPress> Πρέπει να έχει σαν όρισμα το event

Μέθοδοι widget κειμένου t.insert(index, text) Εισάγει το αλφαριθμητικό text μέσα στο t πριν τη θέση index t.get(from, to) Επιστρέφει το υπο-αλφαριθμητικό από τη θέση from μέχρι τη θέση to t.delete(from, to) Διαγράφει όλους τους χαρακτήρες από τη θέση from στη θέση to

«Δέσιμο» γεγονότος σε συνάρτηση χειρισμού text.bind('<KeyPress>', record) Δένει το γεγονός που περιγράφεται με το αλφαριθμητικό '<KeyPress>' στη συνάρτηση record Γενικά οι τύποι γεγονότων έχουν τη μορφή: <modifier-type-detail> Παραδείγματα: <Control-Button-1>: Ctrl + left mouse button <Button-1><Button-3>: left mouse button, then right mouse button <KeyPress-D><Return>: D, then Enter/Return

Παραδείγματα Γεγονότων <modifier-type-detail>

Η συνάρτηση χειρισμού παίρνει σαν όρισμα το γεγονός def record(event): print('char = %s' % event.keysym) Ένα αντικείμενο γεγονότος έχει διάφορα χαρακτηριστικά τα οποία μπορούμε να χειριστούμε μέσα στη συνάρτηση

Παράδειγμα με καμβά canvas

Παράδειγμα με καμβά (canvas) from tkinter import Tk, Canvas def begin(event): 'initializes the start of the curve to mouse position' global oldx, oldy oldx, oldy = event.x, event.y def draw(event): 'draws a line segment from old mouse position to new one' global oldx, oldy, canvas # oldx and oldy will be modified newx, newy = event.x, event.y # new mouse position # connect previous mouse position to current one canvas.create_line(oldx, oldy, newx, newy) oldx, oldy = newx, newy # new position becomes previous root = Tk() oldx, oldy = 0, 0 # mouse coordinates (global variables) canvas = Canvas(root, height=100, width=150) # canvas # bind left mouse button click event to function begin() canvas.bind("<Button-1>", begin) # bind mouse motion while pressing left button event canvas.bind("<Button1-Motion>", draw) canvas.pack() root.mainloop()

Μέθοδοι widget καμβά create_line(x1, y1, x2, y2, ...) Ενώνει τα σημέια (x1, y1), (x2, y2), κλπ. με ευθύγραμμα τμήματα create_rectangle(x1, y1, x2, y2) Δημιουργεί ορθογώνιο με γωνίες στις συντενταγμένες (x1, y1) και (x2, y2) create_oval(x1, y1, x2, y2) Δημιουργεί οβάλ μεσα σε ορθογώνιο με γωνίες τις συντενταγμένες (x1, y1) και (x2, y2) Οι παραπάνω συναρτήσεις επιστρέφουν το ID του αντικειμένου που ζωγραφίζουν Η delete(ID) σβήνει το αντικείμενο που έχει το ID Η move(ID, dx, dy) μετακινεί το αντικείμενο που έχει το ID dx pixels στον χ άξονα και dy pixels στον y