csc 1010 programming for all lecture 7 input, output & graphics
TRANSCRIPT
![Page 1: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/1.jpg)
CSC 1010Programming for All
Lecture 7Input, Output & Graphics
![Page 2: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/2.jpg)
INPUT
2
![Page 3: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/3.jpg)
Reading using input function• Prompt:
– Asks the user for input– Example: input(“Enter your first name”)– Need to store the string results
• Input• firstName = input(“Enter your first name”)
– Here – message is displayed– Computer waits until user types in and hits Enter– Characters are stored in variable to left of =– print(firstName) #prints what user entered – Input is always of type string
![Page 4: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/4.jpg)
Number needed• Converting a string variable to a number can be
used if numeric (rather than string input) is needed
age = int(input("Please enter age: "))
• The above is equivalent to doing it two steps (getting the input and then converting it to a number):
aString = input("Please enter age: ") # String input age = int(aString) #age is now an integer
decimalAge = float(aString) # a float
![Page 5: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/5.jpg)
Example: y = ax2 + bx + c • Try to use the coefficients of a quadratic equation
s = input(“enter single digit quadratic coefficients: “ +
“a b c with one space in betweensa = s[0] # string inputbs = s[2]cs = s[4]
a=int(as) # converts string to numberb=int(bs)c=int(cs)
ans=a+b+c # proves we converted from string to numbers
![Page 6: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/6.jpg)
Quick check• Ask the user for his number of siblings and convert
the to an integer (paper answer)• Ask the user for price of soda and covert to decimal
number(paper answer)• NEXT: Go to IDLE
– New Window – Save as testInput.py#Testing input and conversionsage=input(“Enter your age”)ans=sage*2
– Did it work? Try converting sage to integer age and then multiplying age * 2
– Did this work?
![Page 7: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/7.jpg)
FORMATTING OUTPUT
7
![Page 8: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/8.jpg)
Formatting• Two separate parts:• The mask(s) to be used in formatting• The value(s) to be formatted• The mask(s)
– Surrounded by quote marks– Each mask is preceded by %– Each mask is followed by its type (s,f,d)– Each mask can have a width– All items are right justified unless specified differently
• The value(s)– Enclosed in parenthesis – Preceded by %– In same order as the mask(s)
![Page 9: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/9.jpg)
Formatting Output• Outputting floating point values can look strange: price = 1.21997
• We want to format the output to look good – Want 1.22– print(“%.2f” % price)
• Suppose we want a field of width 10 characters– print("%10.2f" % price)
• The %10.2f is called a format specifier
10 spaces 9
![Page 10: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/10.jpg)
Syntax: formatting strings
Copyright © 2011 by John Wiley & Sons. All rights reserved.
Page 10
![Page 11: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/11.jpg)
Formatting Examples:
• Left Justify a String: print("%-10s" %("Total:"))
Right justify a number with two decimal places print("%10.2f" %(price))
And you can print multiple values: print("%-10s%10.2f" %("Total: ", price))
11
![Page 12: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/12.jpg)
Format String
Sample output
Comments
“%d” 24 Use with integers
“%5d” 24 3 spaces to left of number
“%05d” 00024 3 zeroes to left of number
“HI:%5d”
HI: 24 Word HI followed by 3spaces&#
“%f” 1.21997 Use with Floating point number
“%2f” 1.22 2 places after decimal & rounds
“%5s” HI String right justified
“%-5s” HI String left justified
“%d%%” 24% Adds a % after number
![Page 13: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/13.jpg)
Quick check with Partner• Open IDLE• Type the following and save as testFmt.py
# Testing Format# testFmt.pymyString=“HI”myInt=54myFloat=1.21997print(“Format Example = \n“ , -------)
• Change ---- to format mask in quotes and the %(number) you are formatting (no comma in between)
![Page 14: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/14.jpg)
GRAPHICS
14
![Page 15: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/15.jpg)
Download Graphics• For our class Schedule for today, download
Graphics.zip• Unzip it and...• Store it in on your computer or on VUAD (the
shared space on the university system)• Open the folder and look at the files
15
![Page 16: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/16.jpg)
Creating Graphics Window• First: Import the Graphics Window:
from graphics import GraphicsWindow
• Second: Size the window to (640 x 480 pixels):
win = GraphicsWindow(640, 480)
• Third: Access the canvas contained in the graphics window:
canvas = win.canvas()
![Page 17: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/17.jpg)
Drawing on a Canvas & Waiting• Once we have the canvas we can draw• Example
canvas.drawRect(15, 10, 20, 30)
•Must “wait” after drawing to allow window to stay opened until user clicks the X to close the window
win.wait()
![Page 18: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/18.jpg)
A graphics window
Copyright © 2011 by John Wiley & Sons. All rights reserved.
Page 18
![Page 19: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/19.jpg)
Quick Check• Download the graphics module• Create the following short program called testWin.py in IDLE and run it
#Test Graphics Windowfrom graphics import GraphicsWindowwin = GraphicsWindow()canvas=win.canvas()canvas.drawRect(5,10,20,30)win.wait()
![Page 20: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/20.jpg)
Math Coordinate System
x- Axis
y- Axis
0,0
![Page 21: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/21.jpg)
Python Coordinate System
0,0
21
y- Axis
x- Axis
![Page 22: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/22.jpg)
Lines • Draw from one point to a second point• Each point is designated with an x,y coordinate• Example:
canvas.drawLine(x1,y1,x2,y2)
• Example:
canvas.drawLine(40,10, 100,65)
![Page 23: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/23.jpg)
canvas.drawLine:
23
x1, y1
x2,y2
0, 0
drawLine(x1, y1, x2, y2)
![Page 24: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/24.jpg)
Drawing a Line
Copyright © 2012 Pearson Education, Inc.
X
Y
10
20
150
45
canvas.drawLine (10, 20, 150, 45)
canvas.drawLine (150, 45, 10, 20)
or
![Page 25: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/25.jpg)
Lets have some Fun• Basic shapes have 4 properties: x coordinate, y
coordinate, width and height.• Example:
canvas.drawRect(20, 15,120, 75)– This statement draws a rectangle with the upper top left
corner at point (20,15) in the window with a width of 120 and a width of 75.
• Common shapes that can be drawn include: rectangles, squares, circles and ovals.
• In a Square the width and height are equal
![Page 26: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/26.jpg)
canvas.drawRect:
26
x, y width
height
0, 0
drawRect( x, y, width, height)
![Page 27: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/27.jpg)
Drawing Ovals:• To draw an oval (or circle)• We specify the rectangle into which the oval is to be
inscribed• The rectangle is the bounding box that will contain
the oval
canvas.drawOval(x,y, width, height)
• Example:
canvas.drawOval(175, 20, 50, 80)
![Page 28: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/28.jpg)
Drawing an Oval
Copyright © 2012 Pearson Education, Inc.
X
Y
canvas.drawOval (175, 20, 50, 80)
175
20
50
80
boundingrectangle
![Page 29: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/29.jpg)
Quick Check• Take testWin.py: change the win instruction to be:
win = GraphicsWindow(680,400)• and do the following additional code just before the
instruction:
win.wait()
• Draw an oval• Draw a circle• Draw a line• Save and run the program
![Page 30: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/30.jpg)
Making Text Part of Drawing• Used to label parts of a drawing• Specify x, y coordinates of where to start• Specify the message in Quotes• Example:
cavas.drawText(x,y, “Message”)
canvas.drawText(50,100, “Hi There”)-----------------------------------------------------------
Quick Check: Add to testWin.py before the wait, save and run program
![Page 31: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/31.jpg)
Recap
![Page 32: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/32.jpg)
Colors – codes and color names• Colors use the RGB code – 0 to 255• Example:
(255, 0, 0 ) Lots of Red, no green, no blue
(0, 255, 0) No red, lots of green, no blue
(255, 0, 255) Red, no green, Blue = purple
• Color names are easier
![Page 33: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/33.jpg)
Color Names
![Page 34: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/34.jpg)
Set Outline colors• Default outline is black• Change outline color as follows:
canvas.setOutline(255,0,0)
or
canvas.setOutline(“red”)
• Once the outline is set you can draw your shape
canvas.drawOval(175, 20, 50, 80)
![Page 35: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/35.jpg)
Fill Shapes• Default is no Fill• To fill shapes
canvas.setFill(0,255,0) # fills green• or
canvas.setFill(“green”)• Then:
canvas.drawOval(175, 20, 50, 80)
• To Erase Fill:
canvas.setFill()
![Page 36: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/36.jpg)
Sets Color for Both Fill and Outline• Uses RGB or Color Names:
canvas.setColor(red, green, blue values)
canvas.setColor(“name”)
Example:
canvas.setColor(0,0,255)canvas.setColor(“blue”)• Then
canvas.drawOval(175, 20, 50, 80)
![Page 37: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/37.jpg)
Recap
![Page 38: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/38.jpg)
Going Back to defaults
canvas.setFill("red")canvas.setOutline("black")canvas.setFill()canvas.drawOval(310,340,75, 85)
![Page 39: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/39.jpg)
Remember: • To create any graphics program you need:
from graphics import GraphicsWindow
win = GraphicsWindow(680,400)
canvas=win.canvas()
# your code in here
win.wait()
![Page 40: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/40.jpg)
Quick Check• Open IDLE and create a program: testColor.py
– Remember you will need the import, window, canvas and wait instructions. Move the shape each time, so all show
1. set the outline color to one of your choice
2. display any shape
3. set the fill color to another color using RGB
4. display a different shape
5. Set an outline of one color and a fill of a second color and display a third shape
6. Display a 4th shape using the settings from #5
7. Erase the outline from all shapes and display again the same shape used in #6
8. Show to instructor, TA or lab neighbor.
![Page 41: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/41.jpg)
Summary• The Python library has mathematical
functions like sqrt() and abs()
• Convert between integers, floats and strings using the respective functions: int(), float(), str()
• Python libraries are grouped into modules. Use the import statement to use methods from a module.
41
![Page 42: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/42.jpg)
String Summary• Strings are sequences of characters.
• len() function yields the number of characters in a String.
• Use the + operator to concatenate Strings; that is, to put them together to yield a longer String.
• To perform a concatenation, the + operator requires both arguments to be strings.
• Numbers must be converted to strings using the str() function.
42
![Page 43: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/43.jpg)
String Summary, continued
• String index numbers are counted starting with 0.
• Use the [ ] operator to extract the elements of a String.
43
![Page 44: CSC 1010 Programming for All Lecture 7 Input, Output & Graphics](https://reader036.vdocument.in/reader036/viewer/2022062315/5697bf8f1a28abf838c8d32b/html5/thumbnails/44.jpg)
Summary, continued• Use the input() function to read keyboard input
in a console window.• Use the format specifiers to specify how values
should be formatted.
--------------------------------------------------• Graphical shapes (such as squares, rectangles,
circles, ovals), or lines and text can be drawn using the graphics module.
• The color of graphical objects can be set with the setOutline() and setFill() methods.
44