m

co
MODULE 3

.
es
ot
an
r al
ke

For More Study Materials : [Link]

• Graphics
• Terminal-based programs
• Simple Graphics using Turtle Operations
• 2D Shapes

m
• Colors and RGB Systems

co
• A case study.

.
•

es
Image Processing
•

ot
Basic image processing with inbuilt functions.

an
• Graphical User Interfaces
•

al
Event-driven programming

r
• Coding simple GUI-based programs
ke
• Windows, Labels, Displaying images, Input text entry, Popup dialog
boxes, Command buttons
• A case study.

For More Study Materials : [Link]

Graphics
• The representation and display of geometric shapes in two-and three-
dimensional space, as well as image processing.

m
co
Turtle graphics

.
es
• A Turtle graphics toolkit provides a simple and enjoyable way to draw

ot
pictures in a window and gives you an opportunity to run several

an
methods with an object.

r al
ke

For More Study Materials : [Link]

Overview of Turtle Graphics
• Turtle graphics were originally developed as part of the children’s
programming language Logo, created by Seymour Paper tand his
colleagues at MIT in the late 1960s.

m
• Imagine a turtle crawling on a piece of paper with a pen tied to its

co
tail.

.
es
• Commands direct the turtle as it moves across the paper and tell it to

ot
lift or lower its tail, turn some number of degrees left or right, and

an
move a specified distance.

al
• Whenever the tail is down, the pen drags along the paper, leaving a
r
ke
trail.
• In this manner, it is possible to program the turtle to draw pictures
ranging from the simple to the complex.

For More Study Materials : [Link]

• In the context of a computer, of course, the sheet of paper is a window on a
display screen, and the turtle is an icon, such as an arrowhead.
• At any given moment in time, the turtle is located at a specific position in
the window This position is specified with (x, y) coordinates.
• The coordinate system for Turtle graphics is the standard Cartesian system,

m
co
with the origin (0, 0) at the center of a window.

.
• The turtle’s initial position is the origin, which is also called the home.

es
ot
• An equally important attribute of a turtle is its heading, or the direction in

an
which it currently faces.

al
• The turtle’s initial heading is 0 degrees, or due east on its map.
r
ke
• The degrees of the heading increase as it turns to the left, so 90 degrees is
due north.
• Together, these attributes make up a turtle’s state.
For More Study Materials : [Link]
 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Turtle Operations
• Every data value in Python is an object.
• The types of objects are called classes.

m
The methods (or operations) that apply to objects of that class.

co
• Turtle is an object, its operations are also defined as methods.

.
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Draw a square

m
import turtle

. co
t=[Link]()

es
for i in range(4):

ot
an
[Link](50)

al
[Link](90)
r
ke
[Link]()

For More Study Materials : [Link]

• Two other important classes used in Python’s Turtle graphics system
are Screen, which represents a turtle’s associated window.
• Canvas, which represents the area in which a turtle can move and

m
draw lines.

co
• A canvas can be larger than its window, which displays just the area of

.
es
the canvas visible to the human user.

ot
• The Turtle class is defined in the turtle module.

an
al
• The turtle’s icon is located at the home position (0, 0) in the center
r
ke
of the window, facing east and ready to draw.
• The user can resize the window in the usual manner.

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Drawing Two-Dimensional Shapes
• Many graphics applications use vector graphics, which includes the
drawing of simple two-dimensional shapes, such as rectangles,
triangles, pentagons, and circles

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Manipulating a Turtle’s Screen
• Turtle object of type (Class)
• Screen-turtle’s window
• Canvas -drawing area in window

m
• Screen object’s attributes –width , height in pixels

co
• background color

.
es
• Access Screen object -[Link].

ot
• window_width() and window_height() to locate the boundaries of a

an
turtle’s window.

r al
ke

For More Study Materials : [Link]

• The rectangular display area on a computer screen is made up of
colored dots called picture elements or pixels.
• The smaller the pixel, the smoother the lines drawn with them will

m
co
be.

.
• Setting the resolution to smaller values increases the size of the

es
pixels, making the lines on the screen appear more ragged.

ot
an
• Each pixel represents a color.

al
• Turtle’s default color is black
r
ke
• Pen color method is used to change the color .
• RGB system is the common color representation system

For More Study Materials : [Link]

• RGB components are mixed together to form a unique color value
• Each color component can range from 0 through 255.

m
• The value 255 represents the maximum saturation of a given color

co
component.

.
es
• Value 0 represents the total absence of that component.

ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• An image is a visual representation of something
• An image is defined as a two dimensional function F(x,y), where x and

m
y are spacial coordinates and amplitude of F at any pair of coordinate

co
F(x,y) is called the intensity of that image at at that point

.
es
• When x,y and F are finite it is called as a digital image

ot
• Image processing is a method to perform some operations on an

an
image in order to get an enhanced image or to extract some useful

al
information from it
r
ke
Analog and Digital Information
• Analog Signals have continuous electrical signal whereas Digital
signals have non-continuous electrical signals (bits and bytes)
For More Study Materials : [Link]
Sampling and Digitizing Images
Sampling is a step used in converting an analog signal to digital signal
Or digitizing the coordinate value is called sampling

m
• Sampling devices measure discrete color values at distinct points on a

co
two-dimensional grid. These values are pixels

.
es
• More pixels that are sampled –More realistic image

ot
• Sampling of 10 pixels per millimeter(250 pixels per inch and 62,500

an
pixels per square inch)

al
• 3-inch by 5-inch image -3 *5 *62,500 pixels/inch2= 937,500 pixels
r
ke
• approximately one megapixel

For More Study Materials : [Link]

Image File Formats

Jpeg

m
 Joint Potographic Expert Group

. co
 Known as loosy compression-Quality of the image decrease as the file

es
size decrease

ot
an
 Animation is not supported

al
 Some of the image information is lost on decompression
r
ke
 Support 16 million colors and mostly used in photographs

For More Study Materials : [Link]

 GIF
Graphic Interchange Format
• Use looseless compression algorithm

m
co
• No image information is lost on decompression

.
es
• Support only 256 colors

ot
• Support Animations

an
• Mostly used in computer generated images and logos

r al
ke

For More Study Materials : [Link]

• Image-Manipulation Operations
• Transform the information in the pixels
• Alter the arrangement of the pixels in the image.
• Rotate an image

m
•

co
Convert an image from colour to greyscale

.
• Apply colour filtering to an image

es
• Highlight a particular area in an image

ot
an
• Blur all or part of an image

al
• Sharpen all or part of an image

r
•
ke
Control the brightness of an image
• Perform edge detection on an image
• Enlarge or reduce an image’s size
• Apply colour inversion to an image
For More Study Materials : [Link]
The Properties of Images
• The software maps the bits from the image file into a rectangular area
of colored pixels for display.
• The coordinates of the pixels range from (0, 0) at the upper-left

m
corner of an image to (width –1, height –1) at the lower-right corner.

co
• Different from the standard Cartesian coordinate system used with

.
es
Turtle graphics, where the origin (0, 0) is at the center of the

ot
rectangular grid.

an
• An image consists of a width, a height, and a set of color values

al
accessible by means of (x, y) coordinates.
r
ke
• A color value consists of the tuple(r, g, b), where the variables refer to
the integer values of its red, green, and blue components,
respectively.

For More Study Materials : [Link]

The images Module
• The images module is a non-standard, open-source Python tool.
• The images module includes a class named Image.
• The Image class represents an image as a two-dimensional grid of

m
co
RGB values.

.
• Python raises an exception if it cannot locate the file in the current

es
directory, or if the file is not a GIF file.

ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
co
• The method getPixelreturns a tupleof the RGB values at the given

.
es
coordinates.
• See the information for the pixel at position (0, 0), which is at the image’s

ot
an
upper-left corner
• The programmer can use the method setPixelto replace an RGB value at a

r al
given position in an image.
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• A pixel’s RGB values are stored in a tuple, manipulating them is quite
easy.
• getPixel() to retrieve a tuple

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• New tuple with the results of the computations and resetting the
pixel to that tuple:

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• For each pixel, the algorithm computes the average of the red, green,

m
and blue values.

co
• The algorithm then resets the pixel’s color values to 0 (black) if the

.
es
average is closer to 0.

ot
• To 255 (white) if the average is closer to 255

an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• Black-and-white photographs are not really just black and white; they also
contain various shades of gray known as grayscale.

m
• Color values in Grayscale might be 8, 16, or 256 shades of gray (including

co
black and white at the extremes).

.
es
• To obtain the new RGB values, instead of adding up the color values and

ot
dividing by 3, multiply each one by a weight factor and add the results.

an
• Relative luminance proportions of green, red, and blue are .587, .299, and

al
.114, respectively. These values add up to 1.

r
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• One could create a new, blank image of the same height and width as
the original.
• The Image class includes a clone method for this purpose.

m
• The method clone builds and returns a new image with the same

co
attributes as the original one, but with an empty string as the

.
filename.

es
ot
• The two images are thus structurally equivalent but not identical

an
r al
ke

For More Study Materials : [Link]

Blurring an Image

• An image appears to contain rough, jagged edges, known as

pixilation.

m
• This can be mitigated by blurring the image’s problem areas.

. co
• Blurring makes these areas appear softer, but losing some definition.

es
ot
• This algorithm resets each pixel’s color to the average of the colors of

an
the four pixels that surround it.

r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke
Before blur After blur

For More Study Materials : [Link]

• Edge Detection
• Inverse function on a colorimage.
• Examines the below, left of each pixel in an image

m
• Detects an edge

co
• -if luminance differs by significant amount.

.
es
• -set color to black, else to white.

ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• The size and the quality of an image depends on Image’s width and
height in pixels Display medium’s resolution.
• Resolution is measured in pixels, or dots per inch (DPI).
• Decide resolution of an image itself before the image is captured.

m
• Reducing an image’s size Reduces load time in a Web page. Reduces

co
space occupied on a storage medium

.
es
•A size reduction usually preserves an image’s aspect ratio.

ot
Method

an
[Link] a new image whose width and height are a constant fraction

al
of the original image’s width and height.
r
ke
2. Copy color value to new image
To reduce the size of an image by a factor of 2, copy the color values
from every other row and every other column of the original image to
the new image.
For More Study Materials : [Link]
 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Disadvantages

• Throws away pixel information

• Greater the reduction, the greater the information loss.

m
co
• Human eye does not normally notice the loss of visual information.

.
es
• The results are different when an image is enlarged

ot
• Because it requires transform the existing pixels to blend in with the

an
new ones that are added

r al
ke

For More Study Materials : [Link]

Graphical User Interfaces

Graphical user interface (GUI)

m
• Displays text/icons

co
• Commands activated by pressing the enter key or control keys

.
es
1.A GUI program is event driven

ot
an
[Link] until user interacts GUI components

al
[Link] inputs in any order
r
ke
[Link] different data sets does not require re-entering all of the
data

For More Study Materials : [Link]

Terminal based program
1.A terminal based program maintains constant control over the interactions
with the user.

m
2. Prompts users to enter successive inputs

co
[Link] user is constrained to reply to a definite sequence of prompts for

.
es
inputs

ot
[Link] an input is entered, there is no way to back up and change it.

an
al
[Link] obtain results for a different set of input data, the user must run the
r
program again. ke
6. At that point, all of the inputs must be re-entered.

For More Study Materials : [Link]

 m
. co
es
ot
A GUI-based tax calculator program

an
A session with the terminal-based tax calculator program

r al
ke Window and widgets
• Title bar
• Labels
• entry fields
•command button

For More Study Materials : [Link]

Type of programming used to create user-generated events (mouse
clicks, pulling in inputs) processing them, displaying results is called
event-driven programming.

m
GUI-based programs are almost always object based.

co
1. Define a new class to represent the main application window.

.
es
[Link] the classes of window components such as labels, fields,

ot
and command buttons.

an
3. Position components in the window.

r al
ke
[Link] a method with each window component in which an event
relevant to the application might occur.
5. Define methods to handle the events.
6. Define a main function that instantiates the window class and runs
For More Study Materials : [Link]
• Coding simple GUI-based programs Python’s standard tkinter module
includes classes for windows and numerous types of window

m
components,

co
• A Simple “Hello World” Program

.
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke
init method initializes the window by setting its attributes and populating it with
the appropriate GUI components.
Python runs this method automatically when the constructor function is called.

For More Study Materials : [Link]

Windows and Window Components
Windows and Their Attributes
A window has several attributes.
• [Link] (an empty string by default)

m
co
• [Link] and height in pixels

.
• [Link](true by default)

es
ot
• [Link] color(white by default)

an
r al
ke
Override window’s default title, an empty string, by supplying another
string as an optional title argument to the EasyFrame method init .

For More Study Materials : [Link]

The window’s background color can be set to yellow

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Window Layout
• Window components are laid out in the window’s two-dimensional grid.
• The grid’s rows and columns are numbered from the position (0, 0) in
the upper left corner of the window.

m
• A window component’s row and column position in the grid is specified

co
when the component is added to the window.

.
es
• Can override the default alignment by including the sticky attribute as a

ot
keyword argument when the label is added to the window.

an
• The values of sticky are the strings “N,” “S,” “E,” and “W,” or any

r al
combination thereof. ke

For More Study Materials : [Link]

• labels retain their alignments in the exact center of their grid positions
• window layout involves the spanning of a window component across
several grid positions.
• The programmer can force a horizontal and/ or vertical spanning of grid

m
positions by supplying the rowspan and columnspan keyword arguments

co
when adding a component

.
es
ot
an
r al
ke

For More Study Materials : [Link]

Types of Window Components and Their Attributes
• GUI programs use several types of window components, or widgets as
they are commonly called.
• These include labels, entry fields, text areas, command buttons, drop-

m
down menus, sliding scales, scrolling list boxes, canvases, and many

co
others.

.
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Displaying Images
One label displays the image and the other label displays the caption.

m
. co
es
ot
an
r al
ke
[Link]

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Command Buttons and Responding to Events:

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Command Buttons and Responding to Events
• A command button can be added to a window by specifying its text
and position in the grid.
• A button is centered in its grid position by default.

m
• The method addButton accomplishes all this and returns an object of

co
type [Link].

.
es
• Button can display an image instead of a string.

ot
an
• A button also has a state attribute, which can be set to “normal” to
enable the button (its default state) or “disabled” to disable it.

r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Input and Output with Entry Fields
• An entry field is a box in which the user can position the
mouse cursor and enter a number or a single line of text.
Text Fields

m
co
• A text field is appropriate for entering or displaying a single-line

.
es
string of characters.

ot
• The method addTextFieldis used to add a text field to a window.

an
• The method returns an object of type TextField, which is a subclass

al
of [Link].
r
ke
• Required arguments to addTextFieldare text (the string to be initially
displayed), row, and column.
• Optionalarguments are rowspan, columnspan, sticky, width, and
state.
For More Study Materials : [Link]
• A text field is aligned by default to the northeast of its grid cell.
• A text field has a default width of 20 characters.
• This represents the maximum number of characters viewable in the

m
box, but the user can continue typing or viewing them by moving the

co
cursor key to the right.

.
es
• The programmer can set a text field’s state attribute to “readonly” to

ot
prevent the user from editing an output field.

an
• The TextFieldmethod getTextreturns the string currently contained in

r al
a text field. ke
• The method setTextoutputs its string argument to a text field.

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Using Pop-Up Message Boxes
• When errors arise in a GUI-based program, the program often
responds by popping up a dialog window with an error message.
• The program detects the error, pops up the dialog to inform the user,

m
and, when the user closes the dialog, continues to accept and check

co
input data.

.
es
• In a terminal-based program, this process usually requires an explicit

ot
loop structure.

an
• In a GUI-based program, Python’s implicit event-driven loop

al
continues the process automatically.
r
ke

For More Study Materials : [Link]

Python’s try-except statement.

m
. co
es
• If an exception is raised anywhere in this process, control

ot
shifts immediately to the except clause

an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

The following GUI-based application computes a person’s income tax, based on a mythical tax code
having a flat tax rate of 15%.

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

[Link] and pop up a window with the appropriate data fields,
buttons, and other controls.

m
[Link] for the user to perform an action, such as pressing a button or

co
selecting text in a field.

.
es
3. Detect a user’s action (also called an event).

ot
[Link] appropriately to each type of user action. We call this type

an
of programming event-driven, because the program’s behavior is driven

al
by user events
r
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

Create GUI program for computing the area or radius of a circle

m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

 m
. co
es
ot
an
r al
ke

For More Study Materials : [Link]

• Differentiate between terminal based and GUI based programming in Python?
• Write a program to draw a hexagon using turtle

m
• Write a note on the image processing in Python

co
• Describe the features of event driven Programming?

.
es
• Write a GUI based program that allows the user to convert temperature values
between degrees Fahrenheit and degrees Celsius. The interface should have

ot
labeled entry fields for these two values. These components should e arranged in

an
a grid where the labels occupy the first row and the corresponding field occupy

al
the second row. At start up the Fahrenheit field should contain 32 and the Celsius
field contain [Link] third row in the window contain two command buttons
r
ke
,labeled >>>> and <<<<.When the user presses the first button, the program
should use the data in the Fahrenheit field to compute the Celsius value, which
should then be output to the Celsius field. The second button should perform the
inverse function?

For More Study Materials : [Link]

 m
co
Thank you

.
es
ot
an
r al
ke

For More Study Materials : [Link]