CS 115 Lecture 7 Graphics – coordinate systems, Text, Entry, aliases Taken from notes by Dr. Neil Moore

Changing the coordinate system In the default coordinate system for the library – (0,0) is at the upper left corner of the window – (width-1, height-1) is in the lower right corner – Coordinates are measured in pixels (integers) Why would we want to change that? – To use different window sizes without changing the code – To put your origin at the bottom of the screen – Maybe it just makes the math easier.

Changing the coordinate system win.setCoords (xll, yll, xur, yur) – Give the x and y coordinates of The lower left corner: xll, yll (that’s NOT x11 and y11) The upper right corner: xur, yur All drawing after this statement will be in this coordinate system. Example: win.setCoords (0, 0, 1, 1) – Now Point(0, 1) is in the upper left corner of the window – Point (0.5, 0.5) is in the center of the window – Point (0,0) is the lower left corner of the window – Note that coordinates can be floats, not just integers. – Note that y’s are “right side up” now, they increase as you move UP the screen. Handy methods for a GraphWin, getWidth() and getHeight()

Drawing Text You can display text in the graphics window You need the location (Point) where you want the center of the string, and a string greeting = Text(Point(250, 250), “Hello”) You can specify the font size greeting.setSize(30) # between 5 and 36 You can also make it bold and/or italic greeting.setStyle(“bold”) greeting.setStyle(“italic”) The library supports a few typefaces: greeting.setFace(“courier”) greeting.setFace(“times roman”)

Outputting numeric values Suppose you had a variable like width which has an integer value. You want to put it on the graphics window. myresult = Text(Point(150, 100), width)#bad But this is NOT good. It is only a number, no label! It is easier to make ONE string which is used by ONE Text object. myresult = Text(Point(150, 100), “the width is “ + str(width)) # better! Typecast the numeric variable to a string then concatenate it with the label (including spaces as needed). This makes one string which is then displayed with the Text object.

Interacting with the user What if a graphics program needs input from the user? – You could use the input function call, but that uses the keyboard and Shell window – Making the user switch back and forth is annoying – … and it doesn’t work well in WingIDE! We can make a graphical text-entry box input_box = Entry(center, width) – center is a Point object (where the box will be centered) – width is a number of characters (not pixels) This controls the size of the input box, not the size of the input. The user can enter more characters (it scrolls)

Interacting with the user You can set the initial text, font size, color… input_box.setText(“default”) Very useful to give default value that user can get by just clicking on the screen without any typing input_box.setSize(24) # 24 point input_box.setTextColor(“green”) After you have the object the way you want, don’t forget to draw it! input_box.draw(win)

Getting user input from an Entry object After you’ve drawn the Entry object, you MUST give the user time to actually type in the box Use win.getMouse() Then you use the getText() method to actually get what the user typed user_input = input_box.getText() Returns a string just like the input function – Use a typecast if you need a number type temperature = float(in_box.getText())

Graphical input in a nutshell 1.Display a prompt for the user (using Text) 2.Create an Entry object with settings as desired 3.Draw that object 4.win.getMouse() # to give user time to type 5.user_input = Entry object.getText() And modify user_input as needed for type desired

More about mouse clicks We’ve used win.getMouse() to wait for a click, to pause the program’s execution. Wouldn’t it be nice to know where the user clicked? – We don’t even need a new method to do that! – getMouse actually returns a Point object clickpos = win.getMouse() – You can use this variable as a Point, anywhere a Point would work, like clickpos.draw(win) Or Line(clickpos, Point(0,0)) – You can get the x and y coordinates of the point they clicked on click_x = clickpos.getX() click_y = clickpos.getY() When we called getMouse before, for a pause, we were just throwing this Point object away. – To wait for a click and get its location: pt = win.getMouse() – To just wait for a click: win.getMouse()

Aliasing You must be careful when using the assignment operator (=) with shapes. eye = Circle (Point(200, 250), 50) eye.draw(win) eye2 = eye eye2.move(100, 0) – This moves the FIRST circle! What happened? – There is really only one circle here, with two different names. They have the same identity: – print(id(eye)) → – print(id(eye2)) → – We say that eye2 is an alias for eye. – You can check for aliasing with the is operator: print(eye is eye2) → True This is NOT the same as asking if they are equal More detail on that later with relational operators.

Preventing aliasing Aliasing happens because the assignment operator (=) does NOT create NEW objects. To avoid aliasing, either: – Call the constructor every time you want to make a new object. eye2 = Circle(Point(200, 250), 50) print(id(eye2)) → – Or clone the object (for graphics shapes only) eye2 = eye.clone() print(id(eye2)) → – alias-fixed.py

Preventing aliasing Aliasing isn’t a problem for integers, strings, etc. – These objects are immutable. The number 42 never changes. Immutable object can still be aliased, but since they can’t be modified, the aliasing doesn’t cause problems. – More on this in chapter 8 about lists.