Computer Science 112 Fundamentals of Programming II Graphics Programming.
Computer Science 112
description
Transcript of Computer Science 112
![Page 1: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/1.jpg)
Computer Science 112
Fundamentals of Programming IIUser Interfaces
Introduction to GUI programming
![Page 2: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/2.jpg)
What Is a User Interface?
• A set of hardware devices (touch screen, monitor, keyboard, mouse, microphone, speakers)
• Software (input/output functions)
• Allows human beings to use a computer effectively
UI
Inputs
OutputsComputation
![Page 3: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/3.jpg)
Types of User Interfaces
• ZUI (zoomable user interface)
• GUI (graphical user interface)
• TUI (terminal-based user interface)
UI
Inputs
OutputsComputation
![Page 4: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/4.jpg)
Terminal-Based User Interface (TUI)
import mathradius = float(input('Enter the radius: '))area = math.pi * radius ** 2print('The area is', area)
Supports input via the keyboard and output via the monitor
In Python, the I/O functions are input and print
![Page 5: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/5.jpg)
Terminal-Based User Interface (TUI)
import mathradius = float(input('Enter the radius: '))area = math.pi * radius ** 2print('The area is', area)
Supports input via the keyboard and output via the monitor
In Python, the I/O functions are input and print
![Page 6: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/6.jpg)
Problems with a TUI
• Must enter inputs in a certain order
• Cannot back up to correct input mistakes or change one’s mind
• Must re-enter all inputs to change just one
• I/O restricted to text
![Page 7: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/7.jpg)
Graphical User Interface (GUI)
• Supports input via the keyboard
• Can output text and also graphical shapes representing desktop elements, such as windows, command buttons, data fields, and drop-down menus (also called “widgets”)
• Supports direct manipulation of desktop elements via the mouse or touchscreen
![Page 8: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/8.jpg)
TUI vs GUI
Non-programmers (the 99%) do not use a TUI, they use a GUI
Only programmers (the 1%) use a TUI (and also a GUI)
Most beginning programmers program to a TUI, not a GUI
![Page 9: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/9.jpg)
Programming a GUI
• Most modern programming languages (like Python and Java) include packages or modules for programming a GUI
• In Python, this module is called tkinter
• The model of computation for a GUI program is more complex than that of a TUI program
![Page 10: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/10.jpg)
Models of Computation
TUI
1. Obtain user inputs
2. Perform computations
3. Print results
GUI
1. Layout and pop up the window
2. Wait for user events
3. Handle a user event
4. Goto step 2
![Page 11: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/11.jpg)
GUI Resources in Python
tkinterhttp://docs.python.org/py3k/library/tkinter.html#module-tkinter
breezypythonguihttp://home.wlu.edu/~lambertk/breezypythongui/index.html
![Page 12: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/12.jpg)
What Is breezypythongui?
• A module of classes and functions that makes GUI programming with tkinter easy for beginners
• The module is free and open-source
• A tutorial and sample programs are available at the breezypythongui Web site
![Page 13: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/13.jpg)
A First GUI Program: Hello World
from breezypythongui import EasyFrame
Import the abstract window class
![Page 14: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/14.jpg)
A First GUI Program: Hello World
from breezypythongui import EasyFrame
class HelloWorld(EasyFrame): """Displays a greeting in a window."""
Define a subclass to specialize it for this application
![Page 15: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/15.jpg)
A First GUI Program: Hello World
from breezypythongui import EasyFrame
class HelloWorld(EasyFrame): """Displays a greeting in a window."""
def __init__(self): """Sets up the window and the label.""" EasyFrame.__init__(self) self.addLabel(text = "Hello world!", row = 0, column = 0)
Lay out the window and its widgets
![Page 16: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/16.jpg)
A First GUI Program: Hello World
from breezypythongui import EasyFrame
class HelloWorld(EasyFrame): """Displays a greeting in a window."""
def __init__(self): """Sets up the window and the label.""" EasyFrame.__init__(self) self.addLabel(text = "Hello world!", row = 0, column = 0)
# Instantiates and pops up the window.if __name__ == "__main__": HelloWorld().mainloop()
Create and launch the application window
![Page 17: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/17.jpg)
The Structure of Any GUI Program
from breezypythongui import EasyFrame
class <class name>(EasyFrame):
def __init__(self): EasyFrame.__init__(self <optional args>) <code to set up widgets>
<code to define event-handling methods>
# Instantiates and pops up the window.if __name__ == "__main__": <class name>().mainloop()
![Page 18: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/18.jpg)
Laying Out Widgets
class LayoutDemo(EasyFrame): """Displays labels in the quadrants."""
def __init__(self): """Sets up the window and the labels.""" EasyFrame.__init__(self) self.addLabel(text = "(0, 0)", row = 0, column = 0) self.addLabel(text = "(0, 1)", row = 0, column = 1) self.addLabel(text = "(1, 0)", row = 1, column = 0) self.addLabel(text = "(1, 1)", row = 1, column = 1)
![Page 19: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/19.jpg)
Alignment and Spanning
def __init__(self): """Sets up the window and the labels.""" EasyFrame.__init__(self) self.addLabel(text = "(0, 0)", row = 0, column = 0, sticky = "NSEW") self.addLabel(text = "(0, 1)", row = 0, column = 1, sticky = "NSEW") self.addLabel(text = "(1, 0 and 1)", row = 1, column = 0, sticky = "NSEW", columnspan = 2)
![Page 20: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/20.jpg)
Window Attributes
• width (window shrink-wraps around widgets by default)
• height
• title (empty string by default)
• background (“white” by default)
• resizable (True by default)
![Page 21: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/21.jpg)
Arguments to __init__
def __init__(self): """Sets up the window.""" EasyFrame.__init__(self, title = "Blue Window", width = 200, height = 100, background = "blue", resizable = False)
![Page 22: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/22.jpg)
Method Calls on self (the Window)
def __init__(self): """Sets up the window.""" EasyFrame.__init__(self) self.setTitle("Blue Window") self.setSize(200, 100) self.setBackground("blue") self.setResizable(False)
![Page 23: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/23.jpg)
Set the Window’s Attribute Dictionary
def __init__(self): """Sets up the window.""" EasyFrame.__init__(self) self["title"] = "Blue Window" self.setSize(200, 100) self["background"] = "blue" self.setResizable(False)
![Page 24: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/24.jpg)
The Label Widget and Its Attributes
• The breezypythongui method addLabel– creates an object of type tkinter.Label with the
given attributes (text and position are required)
– places it in the window’s grid at the given position
– returns the label object
• The label’s attributes can then be accessed or modified by accessing its attribute dictionary
![Page 25: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/25.jpg)
The Label Widget and Its Attributes
• font (a tkinter.font.Font object)
• background (the color of the rectangular area surrounding the label)
• foreground (the text color)
• text (the label’s text)
• image (a tkinter.PhotoImage object)
![Page 26: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/26.jpg)
A Captioned Image
![Page 27: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/27.jpg)
A Captioned Imagefrom breezypythongui import EasyFramefrom tkinter import PhotoImagefrom tkinter.font import Font
![Page 28: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/28.jpg)
A Captioned Imagefrom breezypythongui import EasyFramefrom tkinter import PhotoImagefrom tkinter.font import Font
class ImageDemo(EasyFrame): """Displays an image and a caption."""
def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Image Demo", resizable = False) imageLabel = self.addLabel(text = "", row = 0, column = 0, sticky = "NSEW") textLabel = self.addLabel(text = "Smokey the cat", row = 1, column = 0, sticky = "NSEW")
![Page 29: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/29.jpg)
A Captioned Imagefrom breezypythongui import EasyFramefrom tkinter import PhotoImagefrom tkinter.font import Font
class ImageDemo(EasyFrame): """Displays an image and a caption."""
def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Image Demo", resizable = False) imageLabel = self.addLabel(text = "", row = 0, column = 0, sticky = "NSEW") textLabel = self.addLabel(text = "Smokey the cat", row = 1, column = 0, sticky = "NSEW") # Load the image and associate it with the image label. self.image = PhotoImage(file = "smokey.gif") imageLabel["image"] = self.image
![Page 30: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/30.jpg)
A Captioned Imagefrom breezypythongui import EasyFramefrom tkinter import PhotoImagefrom tkinter.font import Font
class ImageDemo(EasyFrame): """Displays an image and a caption."""
def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Image Demo", resizable = False) imageLabel = self.addLabel(text = "", row = 0, column = 0, sticky = "NSEW") textLabel = self.addLabel(text = "Smokey the cat", row = 1, column = 0, sticky = "NSEW") # Load the image and associate it with the image label. self.image = PhotoImage(file = "smokey.gif") imageLabel["image"] = self.image
# Set the font and color of the caption. font = Font(family = "Verdana", size = 20, slant = "italic") textLabel["font"] = font textLabel["foreground"] = "blue"
![Page 31: Computer Science 112](https://reader035.fdocuments.us/reader035/viewer/2022062518/568148ad550346895db5c0f3/html5/thumbnails/31.jpg)
For Next Time
• Command buttons
• Responding to user events