GUI Drawing and Control

Week 6 – Topic 2 GUI Drawing and Control

Whatisin thislesson?

1. Graphical User Interfaces
2. Drawing Shapes with the Canvas WidgetList
3. Introduction to PyGame 11th January 2026 Tram Tran

12-3

1. Graphical User Interfaces Concept: A graphical user interface allows the user to interact with the operating system and other programs using graphical elements such as icons, buttons, and dialog boxes.

12-4

Graphical User Interfaces A computer’s user interface is the part of the computer that the user interacts with User interface consists of

• Hardware devices
• Commands from the user the operating system accepts Command line interface displays a prompt and the user types a command which is then executed A command line interface

12-5

Graphical User Interfaces A graphical user interface (GUI) allows the user to interact with the operating system and other programs through graphical elements (icons, buttons, slider bars, etc.) on the screen.

• GUIs popularized the use of the mouse.
• GUIs allow the user to point at graphical elements and click the mouse button to activate them.

12-6

Graphical User Interfaces Interaction with a GUI is done through dialog boxes – small windows that display information and allow the user to perform actions

12-7

Graphical User Interfaces GUI Programs Are Event-Driven User determines the order in which things happen GUI programs respond to the actions of the user, thus they are event driven.

12-8

Using the tkinter Module Concept: In Python you can use the tkinter module to create simple GUI programs.

• Python does not have GUI programming features built into the language. The tkinter module allows the creation of simple GUI programs. tkinter does not always run reliably under IDLE. Use IDLE’s editor to write GUI programs, but for best results run the program from the OS command line.

12-9

Using the Tkinter Module

12-10

Using the Tkinter Module

12-11

Display Text with Label Widgets Concept: You use the Label widget to display text in a window.

12-12

Display Text with Label Widgets

12-13

Display Text with Label Widgets

12-14

Organizing Widgets with Frames Concept: A Frame is a container that can hold other widgets. You can use Frames to organize the widgets in a window.

12-15

Organizing Widgets with Frames

• A Frame is a container.
• It is a widget that can hold other widgets.
• Frames are useful for organizing and arranging groups of widgets in a window.

12-16

Organizing Widgets with Frames

12-17

Button Widgets and Info Dialog Boxes Concept: Use the Button widget to create a standard button in a window. When the user clicks a button, a specified function or method is called. An info dialog box is a simple window that displays a message to the user and has an OK button that dismisses the dialog box. You can use the tkMessageBox module’s showinfo function to display an info dialog box.

12-18

Button Widgets and Info Dialog Boxes

• A Button is a widget that the user can click to cause an action to take place
• A callback function (event handler) is a function or method that executes when the user clicks the button

12-19

Button Widgets and Info Dialog Boxes Info Dialog box tkMessageBox.showinfo(title, message)

12-20

Getting Input with the Entry Widget Concept: An Entry widget is a rectangular area into which the user can type input. Use the Entry widget’s get method to retrieve the data that has been typed into the widget.

• An Entry widget is a rectangular area into which the user can type text.
• These widgets are used to gather input in a GUI program.
• The get method returns a string.

12-21

Getting Input with the Entry Widget

12-22

Getting Input with the Entry Widget

1. Drawing Shapes with the Canvas Widget
2. Overview of the Canvas Widget
3. Definition: A Canvas is a rectangular area used for drawing 2D shapes.
4. Capabilities: It provides methods to draw lines, rectangles, ovals, arcs, polygons, and text.
5. Requirement: To position graphics, you must use the widget’s screen coordinate system. 1-23

Drawing Shapes with the Canvas Widget

• The Screen Coordinate System
• Pixels: Images consist of tiny dots called pixels, each identified by an $(X, Y)$ coordinate.
• X Coordinate: Specifies the horizontal position.
• Y Coordinate: Specifies the vertical position.
• Origin (0, 0): Located at the upper-left corner of the window.
• Direction of Increase:
• X increases from left to right.
• Y increases from top to bottom. 1-24

Drawing Shapes with the Canvas Widget

1-25

1-26

1-27

class MyGUI: def __init__(self): # Create the main window.

self.main_window = tkinter.Tk()

# Create the Canvas widget.

self.canvas = tkinter.Canvas(self.main_window, width=CANVAS_WIDTH,
height=CANVAS_HEIGHT)

# Draw the body of the house. self.canvas.create_rectangle(HOUSE_X, HOUSE_Y, HOUSE_X + HOUSE_WIDTH,

HOUSE_Y – HOUSE_HEIGHT)

# Draw the roof. self.canvas.create_polygon(ROOF_X, ROOF_Y, ROOF_APEX_X, ROOF_APEX_Y,

ROOF_X + ROOF_WIDTH, ROOF_Y,

ROOF_X, ROOF_Y)

# Draw the door. self.canvas.create_rectangle(DOOR_X, DOOR_Y,

DOOR_X + DOOR_WIDTH, DOOR_Y – DOOR_HEIGHT)

# Draw window 1. self.canvas.create_rectangle(WINDOW1_X, WINDOW1_Y,

WINDOW1_X + WINDOW_WIDTH,

WINDOW1_Y – WINDOW_HEIGHT)

# Draw window 2. self.canvas.create_rectangle(WINDOW2_X, WINDOW2_Y,

WINDOW2_X + WINDOW_WIDTH,

WINDOW2_Y – WINDOW_HEIGHT)

# Draw the sun. self.canvas.create_oval(SUN_X, SUN_Y,

SUN_X + SUN_WIDTH, SUN_Y – SUN_WIDTH,

fill='yellow')

# Pack the canvas. self.canvas.pack() # Start the mainloop. tkinter.mainloop() # Create an instance of the MyGUI class.

if __name__ == '__main__':
my_gui = MyGUI()

1-28

Copyright © 2009 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

QUESTIONS

?

Recap

1. Graphical User Interfaces
2. Drawing Shapes with the Canvas WidgetList 1-38