1

Programming for Engineers in

Python

Autumn 2011-12

Lecture 11: GUI

2

Lecture 10: Highlights• What is an image?

• Representation, resolution, quantization, gray-level images• http://www.youtube.com/watch?v=bgtHKR0aQpQ&feature=related

• http://en.wikipedia.org/wiki/Lenna

• Image processing using PIL• Read, write, manipulate pixels

• Edges detection

• Denoising

• Image segmentation: thresholding

• Real world computer vision application: face detection

• HW – the whole loop + GUI (today!)

3

Plan

• GUI (Based on slides from the course Software1, CS, TAU)

• GUI in Python (Based on Chapter 19 from the book “Think Python”)

• Sorting – completions (merge sort, bucket sort)

• Off topic: incremental development (?)

4

5

גראפי ממשק פיתוח שלבי

מהנדס ממשקי אנוש

מפתח ממשק כך שיהיה •מובן, יעיל, נעים

מודדים את איכות •הממשק על קב'

משתמשים ומתקנים בהתאם

מחליט איך הממשק •יתנהג

מעצב גראפי

מחליט על סוגי •האלמנטים שיופיעו על

המסך, ועל סידורם

מחליט איך הממשק •ייראה/יישמע מהנדס תכנה

למתכנתים אין תפקיד כ"כ גדול מימושבתהליך

6

אנוש ממשקי הנדסתשל; אינטואיטיביות• המוקדמות לציפיות בהתאם להתנהג צריך הממשק

,) , - ( ; פריטים/ של המראה למשל הדבק גזור אוטומטיות פעולות ת המשתמש , ,) , של) התוכנית של הכללית וההתנהגות המראה למשל צלמיות

הפלטפורמה

• , המחשב/ לא בשליטה ת , המשתמש מה; ידיעה באשף אחורה חזרהכרגע עושה היא ומה התוכנית של הנוכחי המצב

• , המחשב של לא המשתמש של , יעילות הן; משכורות זולה היא חומרהיקרות, יותר עוד הן ואכזבות יקרות

התוכנה • וללימוד השימוש לתכיפות באופן; התאמה בה משתמשים האם ;) ( ) יומיומי ) משתמש גם דואל יומיומי או צוואות לכתיבת אשף פעמי חד

ניסיון חסר מתחיל פעם היה בתוכנה

7

מ שקיםמעיצוב

קונסיסטנטיות•; קונטרסט• ויזואלי עומס הדגשה דרוש שבאמת מה להדגשת

הקונטרסט את מפחית(ארגון• בסריג ) שימוש תוך כלל בדרך המסך של ברורברורים • וסדר משמאל ) כיוון למטה מלמעלה המידע לסריקת

) לשמאל, ימין או לימיןמ • של הגרפי ; מהעיצוב מוחלט אינו כלל בדרך תוכנית של שק

/ בחירת על להשפיע עשויים הפלטפורמה או ו המשתמש ;) , תפריטים ) כפתורים גראפיים פריטים של הסגנון ועל גופנים

לסביבה עצמו את להתאים צריך העיצוב

8

למימוש ועכשיו

9

גרפית תוכנה של הצירים שלושת

המסך אלמנטים• על שונים מסוגיםהאלמנטים הארגון• של הדו־מימדישל ההתנהגות• לפעולות בתגובה האלמנטים של הדינמית

) , , :" גרירה/ )" הקלקה הקלדה ארועים ת המשתמש

10

כמיכלים חלונות

הוא • דבר (widgetכל , , , משטח ) תפריט כפתור חלון•) לרבים ) אחד הכלה יחס מקיימים החלונות

משטח עבודה)אב עליון(

שורת משימות

אפליקציה)צייר(

11

) המשך ) החלונות מודל

12

Swampy and Tkinter• We will use Swampy (http://greenteapress.com/thinkpython/swampy/)

• Download )http://greenteapress.com/thinkpython/swampy/install.html(

• Add Swampy to search path

• Instructions on how to modify Python’s search path http://docs.python.org/install/index.html#inst-search-path

• The convention is to download packages to …/site-packages/

• Create path configuration file (.pth) in …/site-packages/

• It is easy to create it on your own (if not automatically created)

13

Path Configuration File

14

Create a GUI

• mainloop runs the event loop, which waits for the user to do something and responses accordingly

• It is an infinite loop – runs until the user closes the window or causes the program to quite

• This Gui doesn’t do much because is does not have any widgets

15

Widgets• Widgets are elements that make up a GUI, they include:

• Button: A widget, containing text or an image, that performs an action when pressed

• Canvas: A region that can display lines, rectangles, circles and other shapes

• Entry: A region where users can type text

• Scrollbar: A widget that controls the visible part of another widget

• Frame: A container, often invisible, that contains other widgets

• The empty gray square you see when creating a Gui is a Frame

• When creating new widgets, they are added to this Frame

• bu – a method that returns a Button object

• bu takes up to 32 parameters that control the appearance and function of the button (e.g., text)

• When you add a widget to the Frame, it gets “shrink-wrapped;” • Add a label widget

• By default, Tkinter stacks the widgets top-to-bottom and centers them. We’ll see how to override that behavior soon 16

Add Button and Label

• Pressing the button…we haven’t told it what to do!

• command – controls the behavior of a button

• The value of command is a function that gets executed when the button is pressed

• Example:

17

Callbacks

Global variable

18

Callbacks

• Callback - a function object, after we call bu to create the button, the flow of execution “calls back” when the user presses the button.

• This kind of flow is characteristic of event-driven programming. User actions, like button presses and key strokes, are called events. In event-driven programming, the flow of execution is determined by user actions rather than by the programmer.

• A major challenge of event-driven programming is to construct a set of widgets and callbacks that work correctly for any sequence of user actions.

19

Event-Driven Programming

20

Canvas Widgets

21

Examplebutton + canvas

• Create a Canvas and a Button

• When the use presses the button a circle is drawn on the canvas

22

Examplebutton + canvas

23

Coordinates Sequences

24

More Widgets

In the tirgul )19.5 in the book(

25

Packing Widgets• Until now we have been stacking widgets in a single column

• Most GUIs’ layouts are more complicated

• Example: Turtle World (19.6 in the book) (http://www.greenteapress.com/thinkpython/code/SimpleTurtleWorld.py ):

26

Another Example

• PyNote – a Python Notepad, in the tirgul

27

Display an Image in a GUI

28

Display an Image in a GUI

29

Code – Bubble Sort

n iterations

i iterations

constant

(n-1 + n-2 + n-3 + …. + 1 * )const ~ ½ * n2

30

7 2 8 5 4

2 7 8 5 4

2 7 8 5 4

2 7 5 8 4

2 7 5 4 8

2 7 5 4 8

2 5 7 4 8

2 5 4 7 8

2 7 5 4 8

2 5 4 7 8

2 4 5 7 8

2 5 4 7 8

2 4 5 7 8

2 4 5 7 8

(done)

Bubble Sort Example

We showed that it is possible to sort in O(n2)

Can we do it faster?

31

Yes!

32

Comparing Bubble Sort with sorted

The Idea Behind Merge Sort

33

• Sorting a short array is much faster than a long array

• Two sorted arrays can be merged to a combined sorted array quite fast (O(n))

Merging Two Sorted Arrays

34

1 2 5 7 9 3 4 6 8 10

p q

u

1

u

p p p p q q q q

u u u u u u u u

2 3 4 5 6 7 8 9 10

p

Merge Sort Algorithm

35

• If the array is of size < 2 it is already sorted

• Partition the array to two halves

• Sort recursively each half

• Merge the sorted sub arrays to a single sorted array

Merge Sort (Partial) Code

36

37

Merge Sort Example

Merge Sorttime complexity analysis

38

• If the array is of size < 2 it is already sorted

• Partition the array to two halves

• Sort recursively each half

• Merge the sorted sub arrays to a single sorted array

n + 2 * (n/2) + 22 * n/22 + 23 * n/23 + … + 2log(n) * n/2log(n)=

n + n + … + n = (n+1) * log(n)

log)n( +1

Graphical Comparison

39

40

Bucket SortO(n)אלגוריתם בזמן לינארי : •

אבל... מוגבל למספרים שלמים, חסומים •בטווח.

41

Bucket Sort