ΠΑΝΕΠΙΣΤΗΜΙΟ ΙΩΑΝΝΙΝΩΝ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Eισαγωγή στον προγραμματισμό Γραφικά Περιβάλλοντα Διδάσκων: Ν. Μαμουλής

Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς.

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

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

Ανάπτυξη Γραφικού Περιβάλλοντος στην 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()

Χρήση σχάρας αντί πακεταρίσματος 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() συνάρτηση που θα κληθεί όταν πατηθεί το κουμπί (χειριστής γεγονότος)

Παράδειγμα με κουμπί 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 τρέχει το εξής ατέρμον 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() Συναρτήσεις χειρισμού κουμπιών

Παράδειγμα με φόρμα 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(): global amountEnt # amountEnt is a global variable amount = amountEnt.get() # read amount from entry amountEnt global rateEnt # rateEnt is a global variable rate = rateEnt.get() # read rate from entry rateEnt global yearsEnt # yearsEnt is a global variable 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() Ορίζει τον τίτλο του παραθύρου

Παράδειγμα με κείμενο >>> char = h char = e char = l char = o 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.

Τέλος Ενότητας

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Ιωαννίνων» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους.

Σημειώματα

Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση 1.0. Έχουν προηγηθεί οι κάτωθι εκδόσεις: Έκδοση 1.0 διαθέσιμη εδώ. http://ecourse.uoi.gr/course/view.php?id=1179.

Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Ιωαννίνων, Διδάσκων: Ν. Μαμουλής. «Εισαγωγή στον Προγραμματισμό. Γραφικά Περιβάλλοντα». Έκδοση: 1.0. Ιωάννινα 2014. Διαθέσιμο από τη δικτυακή διεύθυνση: http://ecourse.uoi.gr/course/view.php?id=1179.

Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά Δημιουργού - Παρόμοια Διανομή, Διεθνής Έκδοση 4.0 [1] ή μεταγενέστερη. [1] https://creativecommons.org/licenses/by-sa/4.0/