Arrays with Numpy, Computer Graphics

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
VELAGAPUDI RAMAKRISHNA SIDDHARTHA ENGINEERING COLLEGE
20CSH4801A
ADVANCED PYTHON PROGRAMMING
UNIT 1
Lecture By,
Prabu. U
Assistant Professor,
Department of Computer Science and Engineering.

UNIT 1:
Arrays with Numpy: Creating an Array, Mathematical Operations,
Squaring an Array, Indexing and Slicing, Shape Manipulation.
Computer Graphics: Introduction to Computer Graphics, Python
Turtle Graphics, Creating Computer Art, Introduction to Matplotlib,
Graphing with Matplotlib pyplot, Graphical User Interfaces, The
wxPython GUI Library, Events in wxPython User Interfaces, PyDraw
wxPython Example Application.
20CSH4801A ₋ ADVANCED PYTHON PROGRAMMING

1. Creating an Array
2. Mathematical Operations
(i) Basic Mathematical Operations
(ii) Squaring an Array
(iii) A Trigonometric Function Performed on the Array
(iv) Conditional Operations
(v) Matrix Multiplication
3. Indexing and Slicing
4. Shape Manipulation
ARRAYS WITH NUMPY

The world of arrays with NumPy
 Python, by default, comes with a data structure, such as List, which
can be utilized for array operations, but a Python list on its own is
not suitable to perform heavy mathematical operations, as it is not
optimized for it.
 NumPy is a wonderful Python package produced by Travis
Oliphant, which has been created fundamentally for scientific
computing.
 It helps handle large multidimensional arrays and matrices, along
with a large library of high-level mathematical functions to operate
on these arrays.

 A NumPy array would require much less memory to store the
same amount of data compared to a Python list, which helps in
reading and writing from the array in a faster manner.

1. Creating an Array
 A list of numbers can be passed to the following array function to create
a NumPy array object.
 A NumPy array object has a number of attributes, which help in giving
information about the array. Here are its important attributes:
 ndim: This gives the number of dimensions of the array.
 shape: This gives the size of each dimension of the array. The first
dimension of n_array has a size of 3 and the second dimension has a
size of 4. This can be also visualized as three rows and four columns.

 size: This gives the number of elements.
 dtype: This gives the datatype of the elements in the array.
 Itemsize: This gives the size (in bytes) of each element of a NumPy
array.
 data: This attribute is a buffer object that points to the start of the
NumPy array. However, this attribute isn’t used much because we
usually access the elements in the array using indices.
 Refer NumPyAttributes.py

2. Mathematical Operations
(i) Basic Mathematical Operations
 When you have an array of data, you would like to perform certain
mathematical operations on it.
 We will now discuss a few of the important ones (Refer NumPyMathOp.py)
 np.add(a,b)
 np.subtract(a, b)
 np.multiply(a, b)
 np.divide(a,b)
 np.remainder(a,b)
 np.mod(a,b)
 np.power(c,d)
 np.reciprocal(d)

(ii) Squaring an Array
 The following command raises each element to the power of 2 to
obtain this result:
>>> b = np.array( [ 1, 2, 3, 4])
>>> b**2
[1 4 9 16]

(iii) A trigonometric function performed on the array
(a) Numpy Trigonometric functions
(b) Inter-conversion between Degree and Radian values
(c) Determining angles from the trigonometric values
(d) Hypotenuse
(e) Hyperbolic Functions

(a) Numpy Trigonometric functions
 numpy.sin() function: Calculates the sine component for the array
values.
 numpy.cos() function: Calculates the cosine component for the
array values.
 numpy.tan() function: Calculates tangent value for the array data
elements.
 Refer NumPyTrig.py

(b) Inter-conversion between Degree and Radian values
 While performing trigonometric operations in any language, we
come across situations wherein we feed the need to convert
degrees to radians and vice-versa.
 For the same, NumPy offers us with Universal functions:
 deg2rad: Converts degree value of an angle to radians.
 rad2deg: Converts radian angle to degree.
 Refer DegreeRadian.py

(c) Determining angles from the trigonometric values
 In the form of reverse engineering, we now feed the below
functions with trigonometric values and try to get the angle values
from them.
 arcsin() function: Calculates the angle value from the sine values.
 arccos() function: Calculates the angle value from the cosine
values.
 arctan() function: Calculates the angle value from the tangent
values.
 Refer DetermineAngles.py

(d) Hypotenuse
 With numpy.hypot() function, we can calculate the hypotenuse
value according to the Pythagoras’ standards by providing the
function with the base and height values.
 𝑐 = 𝑎2 + 𝑏2
Syntax:
numpy.hypot(base,height) function
 Refer HypotenuseExample.py

(e) Hyperbolic functions
 NumPy provides us with the below functions to calculate the
hyperbolic trigonometric values for the given values:
 numpy.sinh() function: Calculates the hyperbolic sine value for the
array values.
 numpy.cosh() function: Calculates the hyperbolic cosine value for
the array values.
 numpy.tanh() function: Calculates the hyperbolic tangent value for
the array values.
 Refer HyperbolicFunctions.py

(iv) Conditional Operations
Indexing NumPy elements using conditionals
 NumPy elements can be indexed using conditionals. The syntax to filter
an array using a conditional is array_name[conditional].
 The returned array will contain only the elements for which the
conditional evaluates to True.
NumPy element-wise logical operations
 NumPy Arrays support element-wise logical operations, returning new
Arrays populated with False or True based on their evaluation.
 Refer Conditionals.py

(v) Matrix Multiplication
 There are three main ways to perform NumPy matrix multiplication:
 np.dot(array a, array b): returns the scalar or dot product of two arrays.
 np.matmul(array a, array b): returns the matrix product of two arrays.
 np.multiply(array a, array b): returns the element-wise matrix
multiplication of two arrays.
 Refer NumPyMul.py

Indexing:
(i) Select a single element
(a) One dimensional array
(b) Two dimensional arrays
(c) Three or more dimensional arrays
(ii) Counting backwards with negative indexes
(a) One dimensional
(b) Two dimensional
(c) Three dimensional
(iii) Combining positive and negative indexes

Indexing
 Array indexing is the same as accessing an array element.
 You can access an array element by referring to its index number.
 The indexes in NumPy arrays start with 0, meaning that the first
element has index 0, and the second has index 1 etc.

 The indexes of a one-dimensional numpy array start at 0. This
means that the first element would have the index 0. The second
element would have the index 1, the third element the index 2 and
so on.
 Let’s say, the number 7 is to be printed (which is the second
element). It is obtained by indexing the array “arr” with a 1 in
square brackets.

(b) Two dimensional array
 To get a single element from a two dimensional array, two indexes
should be provided.
 The first index is always along the axis surrounded by the least
amount of brackets.

 To get for example the number 5 from this array, you would have
to index the array with the first and then the second index.
 If think of 2D arrays organized in columns, you can think of the
first index selecting the row and the second index selecting the
column.

 For three or more dimensional arrays, one index for each
dimension should be provided.
 The first index always selects the element inside the most outer
square brackets. By this logic you can figure out the order of
indexes in any arbitrary array.

 Let’s say number 10 has to be retrieved from this array. In thought,
start with the full array and select the part containing the number
you want, throwing away the rest.

 So, to print the number 10 in this array, Use the indexes 1,2,0.

(ii) Counting backwards with negative indexes
 You can provide negative Indexes to count backwards in the array.
The index of the last index is -1, the index of the second last
element is -2 and so on.

(c) Three dimensional array

(iii) Combining positive and negative indexes
 It is possible to combine positive and negative indexes to select an
element in an array. For example, if the number 5 is to be printed
from the following array, it can be indexed with -2 as first index
and 2 as second index.

Slicing:
(b) Two dimensional arrays
(ii) Slicing with negative indexes
(iii) Combining slicing and single indexes

Slicing
 In NumPy array, Slicing is basically the way to extract a range of
elements from an array.
 In NumPy, slicing in the array is performed in the same way as it is
performed in the python list.
 In simpler words, if you have an array of say 100 elements, and
you want to pick only a section of the values, then we can perform
slicing and get the required set of values from the complete
ndarray

 To slice a one dimensional array, a start and an end number is to be
provided separated by a semicolon (:). The range then starts at the
start number and one before the end number.

 When the whole array is to be obtained from the start until the
element with index 3, It could be written as:

 Similarly, to get from the index 1 all the way to the end of the
array, It could be written without providing a slicing end.

 To print the full array, index with a colon only. For 1 dimensional
arrays, it does not make sense to print the whole array in this
fashion, but rather to print the array directly by using: print(arr).

 When a 2D array is sliced, it is imagined that the result is the
intersection between the selected rows (first index) and
columns(second index).

 When only the first index is given to a 2D array, it gives back a
whole row. For example print(arr[1,:]) would be the same as
print(arr[1]).

 Slicing for three or more dimensional arrays follows the same logic
as for 2D arrays, but it cannot be imagined in terms of rows and
columns.

 Slicing 3D or more dimensional arrays in the following fashion.
Let’s start at the most outer brackets and select from start to end
according to the first indexes. Then go a level of brackets deeper
and select from start to end according to the second indexes.

(ii) Slicing with negative indexes
 When slicing with negative indexes, the slice starts at the start and
ends one element before the end, like with positive indexes.
 So for example if I want to print(arr[-4:-1]) the last element to be
printed has index -2.

(iii) Combining slicing and single indexes
 Please note, that when single indexes and slicing is used at the
same time, dimensions will be lost. More specifically, you loose the
dimension where you use the single index. Let’s consider the
following example:

 The third dimension will be reduced. It makes sense because, the
brackets surrounding the most inner segments are not needed for
only one element and numpy will remove them. The resulting
array will be 2D.

4. Shape Manipulation
 Shape manipulation is a technique by which we can manipulate
the shape of a NumPy array and then convert the initial array into
an array or matrix of required shape and size.
 This may include converting a one-dimensional array into a matrix
and vice-versa and finding transpose of the matrix by using
different functions of the NumPy module.

(i) Change shape
(a) Flattening: Returns a copy of an array collapsed into one dimension
(b) Ravel: Returns a flattened one-dimensional array. A copy is made only if
needed.
(c) Reshaping: Gives a new shape to an array without changing its data
(d) Add a dimension: It is used to increase the dimension of the existing array.
(ii) Change size
(a) Use copies when enlarging: np.resize(a, shape)
(b) Use zeros when enlarging: a.resize(shape)

(iii) Combination of arrays
(a) Existing dimension: np.concatenate((a1, a2), axis=0)
(b) New dimension: np.stack((a1, a2), axis=0)
(c) Insertion: np.insert(a, index, vals, axis=None)
(iv) Shrinkage
(a) Splitting: np.split(a, index, axis=0)
(b) Deleting: np.delete(a, index, axis=None)
(v) Repetition
(a) Tiling: np.tile(a, repetitions)
(b) Repeating: np.repeat(a, repetitions, axis=None)

Array shape
One dimensional arrays
 In NumPy, an array has a specific shape. When we create an array
with np.array, numpy automatically infers the shape. Let’s create a
one-dimensional array.
 We can print the shape of the array by typing:.
 The shape of this array would be:

Two dimensional arrays
 When creating two dimensional arrays, we have to use double
brackets.
 We can print the shape of the array by typing:
 The shape of this array would be:

 The shape of the array is: (number of rows, number of columns).
Or in other words (first index, second index).
 To understand this thing with first index, second index a bit better:
Imagine the whole array stretched out like this.

 When we index the array the following way:
 We apply the first index (1) :
 Then the second index (2) :

Three dimensional arrays
 We can create a three dimensional array by using three levels of
brackets.

 We then have a first, a second and a third index.

(a) ravel():
 Returns a flattened one-dimensional array. A copy is made only if needed.
 Return only reference/view of original array.
 If you modify the array, you will notice that the value of original array also
changes.
 Ravel is faster than flatten() as it does not occupy any memory.
 Ravel is a library-level function.
(i) Change shape

(b) flatten() :
 Returns a copy of an array collapsed into one dimension.
 Return copy of original array.
 If you modify any value of this array value of original array is not affected.
 Flatten() is comparatively slower than ravel() as it occupies memory.
 Flatten is a method of a ndarray object.

(c) Reshaping:
 There are two thought steps in the reshaping process.
 The first step is to unroll the array to a straight line and the second
is to roll it back up into the new specified shape.

np.reshape
 There are two thought steps in the reshaping process.
 The first step is to unroll the array to a straight line and the second
is to roll it back up into the new specified shape.

 What is the order in which the elements get unrolled and rolled
into the new shape?
 There are 3 different orders in which we can do this and we can
specify which one we want to use.
 They are as follows: C, F, A

order = ‘C’
 The C actually stands for the programming language C. This is the
default order and if we type:
 Then the array “arr“ get’s reshaped into shape (3,4). And the order
would be the C order. So it would be the same as:
 With the C order, we both unroll and roll back up with the last
index changing fastest and the first index changing slowest.

 For a 2 dimensional array, we unroll the array with the last
(second) index changing fastest. And we roll back up with the last
(second) index changing fastest.

 The whole process can also be seen in the following animation:

 For a 3 dimensional array, we unroll the array with the last (third)
index changing fastest. And we roll back up with the last (third)
index changing fastest.

order = ‘F’
 The F actually stands for the programming language Fortran.
 To use this order, we have to specify it, for example:
 In the Fortran order, we unroll by changing the first index fastest,
the second index the last index changing slowest.

 For a 2 dimensional array, we have the first index changing fastest
and the second index slowest:

 For a three dimensional numpy array, the first index changes
fastest and the third the slowest.

order = ‘A’
 order = ‘A’, reshapes the either in C order or in Fortran order,
depending on how the array is stored in memory.
 If it is stored in memory, like in the C programming language, then
order = ‘A’ will reshape using C order.
 If the array is stored in memory like in the Fortran programming
language, then it will reshape using the fortran order.
 This could potentially speed up your code, but the result is not
predictable.

Unrolling in Fortran order and reshaping in C order
 We can use the np.ravel function to unroll an array in Fortran
order and np.reshape to reshape the unrolled array in C order.

 The same reshaping as animation:

Unrolling in C order and reshaping in F order
 We just ravel in C order and reshape in F order, this should be
straight forward, but here is an animation, so that you can actually
see it.

-1 in np.reshape
 We can use -1 in a shape in np.reshape. -1 is a placeholder and
automatically takes the right value so that the input and output
shapes end up matching.
 This is especially helpful if we write a function and we don’t know
the exact dimensions of the input array are, but we know for
example, that the output should have 2 columns.
 But note that only one value at a time can be replaced by -1. So, we
have to know all but one dimension of the output array..

 As an example, consider we have three different arrays:
 when we type:
 Then -1 takes the value 6 (rows). Since arr1 has 12 elements and 2
times 6 equals 12.

 when we type:
 Then -1 takes the value 3 (rows). Since arr2 has 6 elements and 2
times 3 equals 6.
 when we type:
 Then -1 also takes the value 3 (rows). Since arr3 has 6 elements and
2 times 3 equals 6

(d) Adding a Dimension
 The numpy.newaxis method is an alias for the None, which is used
for array indexing in Python.
 The most straightforward use of the numpy.newaxis is to add a
new dimension to a NumPy array in Python.
 For example, converting a 1D array into a 2D array, converting a
2D array into a 3D array, and so on.
 We can also convert a 1D array to either a row matrix or a column
matrix with the numpy.newaxis in Python.

(a) Use copies when enlarging:
 The resize() function is used to create a new array with the
specified shape.
 If the new array is larger than the original array, then the new
array is filled with repeated copies of a.
 Syntax:
numpy.resize(a, new_shape)
(ii) Change Size

(b) Use zeros when enlarging:
 Here we are trying to resize the array of that shape which is type
of out of bound values.
 But numpy handles this situation to append the zeros when
values are not existed in the array.
 Syntax:
a.resize(shape)
 Refer ChangeSize.py

(a) Existing dimension: np.concatenate((a1, a2), axis=0 or 1or None)
 The concatenate() is a function from the NumPy package. This function
essentially combines NumPy arrays together.
 This function is basically used for joining two or more arrays of the same
shape along a specified axis. There are the following things which are
essential to keep in mind:
1. NumPy's concatenate() is not like a traditional database join. It is like
stacking NumPy arrays.
2. This function can operate both vertically and horizontally. This means we
can concatenate arrays together horizontally or vertically.
(iii) Combination of arrays

(b) New dimension: np.stack((a1, a2), axis=0 or -1)
 The stack() function is used to join a sequence of arrays along a new axis.
 The axis parameter specifies the index of the new axis in the dimensions of
the result.
 For example, if axis=0 it will be the first dimension and if axis=-1 it will be the
last dimension.

(c) Insertion: np.insert(a, index, vals, axis=None)
 The np.insert() is a numpy library function that inserts values in the input
array along the given axis and before a given index.
 If not defined, then the input array is flattened first.
 a represents input array
 index represents index before which value is to be inserted.
 vals represents values to be inserted into a
 axis represents axis along which to insert values.

Arrays with Numpy, Computer Graphics

(a) Splitting: np.split(a, index, axis=0)
 This function divides the array into subarrays along a specified axis. The
function takes three parameters.
 a represents input array.
 index represents the number of equal sized subarrays to be created from the
input array.
 axis is 0 by default.
(iv) Shrinkage

(b) Deleting: np.delete(a, index, axis= 1 or 0 or None)
 The delete() function returns a new array with sub-arrays along an axis
deleted. For a one dimensional array, this returns those entries not returned
by arr[index].
 a represents inputarray.
 index indicates which sub-arrays to remove..
 axis is flattened by default.

(a) Tiling: np.tile(a, repetitions)
 The numpy.tile() function constructs an array by repeating the parameter ‘a’
the number of times as specified by the ‘repetitions’ parameter.
 repetitions represents the number of repetitions of a along each axis.
(v) Repetition

(b) Repeating: np.repeat(a, repetitions, axis=None)
 The repeat() function is used to repeat elements of an array..
 repetitions The number of repetitions for each element. repeats is broadcasted
to fit the shape of the given axis.
 axis represents axis along which to repeat values. By default, use the flattened
input array, and return a flat output array.

1. Introduction to Computer Graphics
2. Python Turtle Graphics
3. Computer Generated Art
4. Introduction to Matplotlib
5. Graphing with Matplotlib pyplot
6. Graphical User Interfaces
7. The wxPython GUI Library
8. Events in wxPython User Interfaces
9. PyDraw wxPython Example Application
COMPUTER GRAPHICS

1. Introduction to Computer Graphics
(i) Introduction
(ii) Background
(iii) The Graphical Computer Era
(iii) Interactive and Non-Interactive Graphics
(iv) Pixels
(v) Bit Map Versus Vector Graphics
(vi) Buffering
(vii) Python and Computer Graphics

(i) Introduction
 Computer Graphics to include the creation of Graphical User Interfaces (or
GUIs), graphs and charts such as bar charts or line plots of data, graphics in
computer games (such as Space Invaders or Flight Simulator) as well as the
generation of 2D and 3D scenes or images.
 We also use the term to include Computer Generated Art.
 A Graphical User Interface (GUI) can capture the essence of an idea or a
situation, often avoiding the need for a long passage of text or textual
commands.
 It is also because a picture can paint a thousand words; as long as it is the
right picture.

 In many situations where the relationships between large amounts of
information must be conveyed, it is much easier for the user to assimilate this
graphically than textually.
 Similarly, it is often easier to convey some meaning by manipulating some
system entities on screen, than by combinations of text commands.
 For example, a well-chosen graph can make clear information that is hard to
determine from a table of the same data.

(ii) Background
 Every interactive software system has a Human Computer Interface, whether
it be a single text line system or an advanced graphic display.
 It is the vehicle used by developers for obtaining information from their
user(s), and in turn, every user has to face some form of computer interface in
order to perform any desired computer operation.
 Historically computer systems did not have a Graphical User Interface and
rarely generated a graphical view.
 These systems from the 60s, 70s and 80s typically focussed on numerical or
data processing tasks.

 They were accessed via green or grey screens on a text-oriented terminal. There
was little or no opportunity for graphical output.
 However, during this period various researchers at laboratories such as
Stanford, MIT, Bell Telephone Labs and Xerox were looking at the possibilities
that graphic systems might offer to computers.
 Indeed, even as far back as 1963 Ivan Sutherland showed that interactive
computer graphics were feasible with his Ph.D. thesis on the Sketchpad
system.

(iii) The Graphical Computer Era
 Graphical computer displays and interactive graphical interfaces became a
common means of human–computer interaction during the 1980s. Such
interfaces can save a user from the need to learn complex commands.
 They are less likely to intimidate computer naives and can provide a large
amount of information quickly in a form which can be easily assimilated by
the user.
 The widespread use of high-quality graphical interfaces (such as those
provided by the Apple Macintosh and the early Windows interface) led many
computer users to expect such interfaces to any software they use.

 Indeed, these systems paved the way for the type of interface that is now
omnipresent on PCs, Macs, Linux boxes, tablets and smart phones etc.
 This graphical user interface is based on the WIMP paradigm (Windows,
Icons, Menus and Pointers) which is now the prevalent type of graphical user
interface in use today.
 The main advantage of any window-based system, and particularly of a
WIMP environment, is that it requires only a small amount of user training.
 There is no need to learn complex commands, as most operations are available
either as icons, operations on icons, user actions (such as swiping) or from
menu options and are easy to use. (An icon is a small graphic object that is
usually symbolic of an operation or of a larger entity such as an application
program or a file).

 In general, WIMP based systems are simple to learn, intuitive to use, easy to
retain and straightforward to work with.
 These WIMP systems are exemplified by the Apple Macintosh interface (see
Goldberg and Robson as well as Tesler), which was influenced by the
pioneering work done at the Palo Alto Research Center on the Xerox Star
Machine.
 It was, however, the Macintosh which brought such interfaces to the mass
market, and first gained acceptance for them as tools for business, home and
industry.
 This interface transformed the way in which humans expected to interact with
their computers, becoming a de facto standard, which forced other
manufacturers to provide similar interfaces on their own machines, for
example Microsoft Windows for the PC.

 This type of interface can be augmented by providing direct manipulation
graphics. These are graphics which can be grabbed and manipulated by the
user, using a mouse, to perform some operation or action.
 Icons are a simple version of this, the “opening” of an icon causes either the
associated application to execute or the associated window to be displayed.

(iv) Interactive and Non-Interactive Graphics
 Computer graphics can be broadly subdivided into two categories:
 Non-Interactive Computer Graphics
 Interactive Computer Graphics
 In Non-Interactive Computer Graphics (aka Passive Computer Graphics) an image is
generated by a computer typically on a computer screen; this image can be viewed
by the user (however they cannot interact with the image).
 Examples of non-interactive graphics includes Computer Generated Art in which an
image is generated using the Python Turtle Graphics library.
 Such an image can be viewed by the user but not modified. Another example might
be a basic bar chart generated using MatPlotLib which presents some set of data.

 Interactive Computer Graphics by contrast, involve the user interacting with
the image displayed in the screen in some way, this might be to modify the
data being displayed or to change they way in which the image is being
rendered etc.
 It is typified by interactive Graphical User Interfaces (GUIs) in which a user
interacts with menus, buttons, input field, sliders, scrollbars etc.
 However, other visual displays can also be interactive. For example, a slider
could be used with a MatplotLib chart.
 This display could present the number of sales made on a particular date; as
the slider is moved so the data changes and the chart is modified to show
different data sets.

 Another example is represented by all computer games which are inherently
interactive and most, if not all, update their visual display in response to some
user inputs.
 For example, in the classic flight simulator game, as the user moves the
joystick or mouse, the simulated plane moves accordingly, and the display
presented to the user updates.

(v) Pixels
 A key concept for all computer graphics systems is the pixel. Pixel was
originally a word formed from combining and shortening the words picture
(or pix) and element.
 A pixel is a cell on the computer screen. Each cell represents a dot on the
screen. The size of this dot or cell and the number of cells available will vary
depending upon the type, size and resolution of the screen.
 For example, it was common for early Windows PCs to have a 640 by 480
resolution display (using a VGA graphics card).
 This relates to the number of pixels in terms of the width and height. This
meant that there were 640 pixels across the screen with 480 rows of pixels
down the screen. By contrast todays 4K TV displays have 4096 by 2160 pixels.

 The size and number of pixels available affects the quality of the image as
presented to a user. With lower resolution displays (with fewer individual
pixels) the image may appear blocky or poorly defined; whereas with a higher
resolution it may appear sharp and clear.
 Each pixel can be referenced by its location in the display grid. By filling a
pixels on the screen with different colours various images/displays can be
created. For example, in the following picture a single pixel has been filled at
position 4 by 4:

 A sequence of pixels can form a line, a circle or any number of different
shapes. However, since the grid of pixels is based on individual points, a
diagonal line or a circle may need to utilise multiple pixels which when
zoomed may have jagged edges.
 For example, the following picture shows part of a circle on which we have
zoomed in:
 Each pixel can have a colour and a transparency associated with it. The range
of colours available depends on the display system being used.
 For example, mono chrome displays only allow black and white, whereas a
grey scale display only allows various shades of grey to be displayed.

 On modern systems it is usually possible to represent a wide range of colours
using the tradition RGB colour codes (where R represents Red, G represents
Green and B represents Blue).
 In this encoding solid Red is represented by a code such as [255, 0, 0] whereas
solid Green is represented by [0, 255, 0] and solid Blue by [0, 0, 255].
 Based on this idea various shades can be represented by combination of these
codes such as Orange which might be represented by [255, 150, 50].
 This is illustrated below for a set of RGB colours using different red, green and
blue values:

 In addition, it is possible to apply a transparency to a pixel. This is used to
indicate how solid the fill colour should be.
 The above grid illustrates the effect of applying a 75%, 50% and 25%
transparency to colours displayed using the Python wxPython GUI library.
 In this library the transparency is referred to as the alpha opaque value.
 It can have values in the range 0–255 where 0 is completely transparent and
255 is completely solid.

(vi) Bit Map Versus Vector Graphics
 There are two ways of generating an image/display across the pixels on the
screen. One approach is known as bit mapped (or raster) graphics and the
other is known as vector graphics.
 In the bit mapped approach each pixel is mapped to the values to be
displayed to create the image.
 In the vector graphics approach geometric shapes are described (such as lines
and points) and these are then rendered onto a display.
 Raster graphics are simpler, but vector graphics provide much more
flexibility and scalability.

(vii) Buffering
 One issue for interactive graphical displays is the ability to change the display
as smoothly and cleanly as possible.
 If a display is jerky or seems to jump from one image to another, then users
will find it uncomfortable.
 It is therefore common to drawn the next display on some in memory
structure; often referred to as a buffer.
 This buffer can then be rendered on the display once the whole image has been
created.

 For example, Turtle Graphics allows the user to define how many changes
should be made to the display before it is rendered (or drawn) on to the screen.
 This can significantly speed up the performance of a graphic application. In
some cases, systems will use two buffers; often referred to as double buffering.
 In this approach one buffer is being rendered or drawn onto the screen while
the other buffer is being updated.
 This can significantly improve the overall performance of the system as
modern computers can perform calculations and generate data much faster
than it can typically be drawn onto a screen.

(viii) Python and Computer Graphics
 Python Turtle Graphics library: Generating computer graphics
 MatPlotLib library: used to generate charts and data plots such as bar charts,
scatter graphs, line plots and heat maps etc.
 Python GUIs libraries: used to create GUIs using menus, fields, tables etc.

2. Python Turtle Graphics
(i) Introduction
(ii) The Turtle Graphics Library
(a) The Turtle Module
(b) Basic Turtle Graphics
(c) Drawing Shapes
(d) Filling Shapes
(iii) Other Graphics Libraries
(iv) 3D Graphics
(a)PyOpenGL

(i) Introduction
 Python is very well supported in terms of graphics libraries.
 One of the most widely used graphics libraries is the Turtle Graphics library.
 It is straight forward to use, and it is provided by default with the Python
environment (and this you do not need to install any additional libraries to use
it).

(ii) The Turtle Graphics Library
(a) The Turtle Module
 This provides a library of features that allow what are known as vector
graphics to be created.
 Vector graphics refers to the lines (or vectors) that can be drawn on the screen.
The drawing area is often referred to as a drawing plane or drawing board and
has the idea of x, y coordinates.
 The Turtle Graphics library is intended just as a basic drawing tool; other
libraries can be used for drawing two, and three-dimensional graphs (such as
MatPlotLib) but those tend to focus on specific types of graphical displays.

 The idea behind the Turtle module (and its name) derives from the Logo
programming language from the 60s and 70s that was designed to introduce
programming to children.
 It had an on-screen turtle that could be controlled by commands such as
forward (which would move the turtle forward), right (which would turn the
turtle by a certain number of degrees), left (which turns the turtle left by a
certain number of degrees) etc.
 This idea has continued into the current Python Turtle Graphics library where
commands such as turtle.forward(10) moves the turtle (or cursor as it is now)
forward 10 pixels etc.
 By combining together these apparently simple commands, it is possible to
create intricate and quiet complex shapes.

(b) Basic Turtle Graphics
 Although the turtle module is built into Python 3 it is necessary to import the module
before you use it:.
import turtle
 There are in fact two ways of working with the turtle module; one is to use the classes
available with the library and the other is to use a simpler set of functions that hide
the classes and objects.
 The TurtleScreen class is the parent of all screen implementations used for whatever
operating system you are running on.
 If you are using the functions provided by the turtle module, then the screen object is
initialised as appropriate for your operating system. This means that you can just
focus on the following functions to configure the layout/display such as this screen
can have a title, a size, a starting location etc.

The key functions are:
 setup(width, height, startx, starty) Sets the size and position of the main
window/screen. The parameters are:
 width—if an integer, a size in pixels, if a float, a fraction of the screen;
default is 50% of screen.
 height—if an integer, the height in pixels, if a float, a fraction of the screen;
default is 75% of screen.
 startx—if positive, starting position in pixels from the left edge of the
screen, if negative from the right edge, if None, center window horizontally.
 starty—if positive, starting position in pixels from the top edge of the
screen, if negative from the bottom edge, if None, center window vertically.

 title(titlestring) sets the title of the screen/window.
 exitonclick() shuts down the turtle graphics screen/window when the use
clicks on the screen.
 bye() shuts down the turtle graphics screen/window.
 done() starts the main event loop; this must be the last statement in a turtle
graphics program.
 speed(speed) the drawing speed to use, the default is 3. The higher the value
the faster the drawing takes place, values in the range 0–10 are accepted.

 turtle.tracer(n = None) This can be used to batch updates to the turtle graphics
screen. It is very useful when a drawing become large and complex. By setting
the number (n) to a large number (say 600) then 600 elements will be drawn in
memory before the actual screen is updated in one go; this can significantly
speed up the generation of for example, a fractal picture. When called without
arguments, returns the currently stored value of n.
 turtle.update() Perform an update of the turtle screen; this should be called at
the end of a program when tracer() has been used as it will ensure that all
elements have been drawn even if the tracer threshold has not yet been
reached.
 pencolor(color) used to set the colour used to draw lines on the screen; the
color can be specified in numerous ways including using named colours set as
‘red’, ‘blue’, ‘green’ or using the RGB colour codes or by specifying the color
using hexadecimal numbers.

 fillcolor(color) used to set the colour to use to fill in closed areas within drawn
lines.
The direction in which the cursor is pointing can be altered using several
functions including:
 right(angle) Turn cursor right by angle units.
 left(angle) Turn the cursor left by angle units.
 setheading(to_angle) Set the orientation of the cursor to to_angle. Where 0 is
east, 90 is north, 180 is west and 270 is south.
You can move the cursor (and if the pen is down this will draw a line) using:
 forward(distance) move the cursor forward by the specified distance in the
direction that the cursor is currently pointing. If the pen is down, then draw a
line.

 backward(distance) move the cursor backward by distance in the opposite
direction that in which the cursor is pointing.
And you can also explicitly position the cursor:
 goto(x, y) move the cursor to the x, y location on the screen specified; if the
pen is down draw a line. You can also use steps and set position to do the
same thing.
 setx(x) sets the cursor’s x coordinate, leaves the y coordinate unchanged.
 sety(y) sets the cursor’s y coordinate, leaves the x coordinate unchanged.

It is also possible to move the cursor without drawing by modifying whether the
pen is up or down:
 penup() move the pen up—moving the cursor will no longer draw a line.
 pendown() move the pen down—moving the cursor will now draw a line in
the current pen colour.
The size of the pen can also be controlled:
 pensize(width) set the line thickness to width. The method width() is an alias
for this method.

It is also possible to draw a circle or a dot:
 circle(radius, extent, steps) draws a circle using the given radius. The extent
determines how much of the circle is drawn; if the extent is not given then the
whole circle is drawn. Steps indicates the number of steps to be used to drawn
the circle (it can be used to draw regular polygons).
 dot(size, color) draws a filled circle with the diameter of size using the
specified color.
 Refer SampleWindow1.py
 In the above example the cursor moves forward 50 pixels then turns 90°
before repeating these steps three times. The end result is that a square of 50 ×
50 pixels is drawn on the screen. Note that the cursor is displayed during
drawing (this can be turned off with turtle.hideturtle() as the cursor was
originally referred to as the turtle).

(c) Drawing Shapes
 Of course, you do not need to just use fixed values for the shapes you draw,
you can use variables or calculate positions based on expressions etc.
 For example, the following program creates a sequences of squares rotated
around a central location to create an engaging image.
 In this program two functions have been defined, one to setup the screen or
window with a title and a size and to turn off the cursor display.
 The second function takes a size parameter and uses that to draw a square.

 The main part of the program then sets up the window and uses a for loop to
draw 12 squares of 50 pixels each by continuously rotating 120° between each
square.
 Note that as we do not need to reference the loop variable, we are using the ‘_’
format which is considered an anonymous loop variable in Python.

(d) Filling Shapes
 It is also possible to fill in the area within a drawn shape.
To do this we can use the begin_fill() and end_fill() functions:
 begin_fill() indicates that shapes should be filled with the current fill colour,
this function should be called just before drawing the shape to be filled.
 end_fill() called after the shape to be filled has been finished. This will cause
the shape drawn since the last call to begin_fill() to be filled using the current
fill colour.
 filling() Return the current fill state (True if filling, False if not).

(iii) Other Graphics Libraries
 PyQtGraph: The PyQtGraph library is pure Python library oriented towards
mathematics, scientific and engineering graphic applications as well as GUI
applications. For more information see http://www.pyqtgraph.org.
 Pillow: Pillow is a Python imaging library (based on PIL the Python Imaging
library) that provides image processing capabilities for use in Python. For
more information on Pillow see https://pillow.readthedocs.io/en/stable.
 Pyglet: pyglet is another windowing and multimedia library for Python. See
https://bitbucket.org/pyglet/pyglet/wiki/Home.

(iv) 3D Graphics
 There are 3D graphics libraries available for Python.
 Panda3D (https://www.panda3d.org)
 VPython (https://vpython.org)
 pi3d (https://pypi.org/project/pi3d).
 However, we will briefly look at the PyOpenGL library as this builds on the
very widely used OpenGL library.

(a) PyOpenGL
 PyOpenGL is an open-source project that provides a set of bindings (or
wrappings around) the OpenGL library.
 OpenGL is the Open Graphics Library which is a cross language, cross
platform API for rendering 2D and 3D vector graphics.
 OpenGL is used in a wide range of applications from games, to virtual reality,
through data and information visualisation systems to Computer Aided
Design (CAD) systems.
 PyOpenGL provides a set of Python functions that call out from Python to the
underlying OpenGL libraries.

 This makes it very easy to create 3D vector-based images in Python using the
industry standard OpenGL library.
 For a very simple examples of an image created using PyOpenGL,
 Refer PyOpenGLExample.py

3. Computer Generated Art
(i) Creating Computer Art
(ii) A Computer Art Generator
(iii) Fractals in Python
(a) The Koch Snowflake
(b) Mandelbrot Set

(i) Creating Computer Art
 Computer Art is defined as any art that uses a computer. It is the art that is
generated by a computer or more specifically a computer program.
 The following example, illustrates how in a very few lines of Python code,
using the Turtle graphics library, you can create images that might be
considered to be computer art.
 The following image is generated by a recursive function that draws a circle at
a given x, y location of a specified size. This function recursively calls itself by
modifying the parameters so that smaller and smaller circles are drawn at
different locations until the size of the circles goes below 20 pixels.
 Refer CircleGeneration.py

 There are a few points to note about this program. It uses recursion to draw
the circles with smaller and smaller circles being drawn until the radius of the
circles falls below a certain threshold (the termination point).
 It also uses the turtle.tracer() function to speed up drawing the picture
as 2000 changes will be buffered before the screen is updated.
 Finally, the colours used for the circles are changed at each level of recession;
a very simple approach is used so that the Red, Green and Blue codes are
changed resulting in different colour circles.
 Also, a line width is used to reduce the size of the circle outline to add more
interest to the image.

(ii) A Computer Art Generator
 As another example of how you can use Turtle graphics to create computer art,
the following program randomly generates RGB colours to use for the lines
being drawn which gives the pictures more interest.
 It also allows the user to input an angle to use when changing the direction in
which the line is drawn.
 As the drawing happens within a loop even this simple change to the angle
used to draw the lines can generate very different pictures.
 Refer RandomRGBColor.py

(iii) Fractals in Python
 Within the arena of Computer Art fractals are a very well-known art form.
Factrals are recurring patterns that are calculated either using an iterative
approach (such as a for loop) or a recursive approach (when a function calls
itself but with modified parameters).
 One of the really interesting features of fractals is that they exhibit the same
pattern (or nearly the same pattern) at successive levels of granularity. That is,
if you magnified a fractal image you would find that the same pattern is being
repeated at successively smaller and smaller magnifications.
 This is known as expanding symmetry or unfolding symmetry; if this
replication is exactly the same at every scale, then it is called affine self-
similar.

 Fractals have their roots in the world of mathematics starting in the 17th
century, with the term fractal being coined in the 20th century by
mathematician Benoit Mandelbrot in 1975.
 One often cited description that Mandelbrot published to describe geometric
fractals is “a rough or fragmented geometric shape that can be split into parts,
each of which is (at least approximately) a reduced-size copy of the whole”.
 One example of a fractal often used in computer art is the Koch snowflake,
while another is the Mandelbrot set.

(a) The Koch Snowflake
 The Koch snowflake is a fractal that begins with equilateral triangle and then
replaces the middle third of every line segment with a pair of line segments
that form an equilateral bump.
 This replacement can be performed to any depth generating finer and finer
grained (smaller and smaller) triangles until the overall shape resembles a
snowflake.
 The following program can be used to generate a Koch snowflake with
different levels of recursion. The larger the number of levels of recursion the
more times each line segment is dissected.

 Running the simple draw_koch() function with different depths makes it
easy to see the way in which each side of a triangle can be dissected into a
further triangle like shape.
 This can be repeated to multiple depths giving a more detailed structured in
which the same shape is repeated again and again.
 Refer KochSnowFlake.py

(b) Mandelbrot Set
 Probably one of the most famous fractal images is based on the Mandelbrot set.
 The Mandelbrot set is the set of complex numbers c for which the function z * z + c
does not diverge when iterated from z = 0 for which the sequence of functions
(func(0), func(func(0)) etc.) remains bounded by an absolute value.
 The definition of the Mandelbrot set and its name is down to the French
mathematician Adrien Douady, who named it as a tribute to the mathematician
Benoit Mandelbrot.
 Mandelbrot set images may be created by sampling the complex numbers and
testing, for each sample point c, whether the sequence func(0), func(func(0)) etc.
ranges to infinity (in practice this means that a test is made to see if it leaves some
predetermined bounded neighbourhood of 0 after a predetermined number of
iterations).

 Treating the real and imaginary parts of c as image coordinates on the
complex plane, pixels may then be coloured according to how soon the
sequence crosses an arbitrarily chosen threshold, with a special color (usually
black) used for the values of c for which the sequence has not crossed the
threshold after the predetermined number of iterations (this is necessary to
clearly distinguish the Mandelbrot set image from the image of its
complement).
 Refer Mandelbrot.py

4. Introduction to Matplotlib
(i) Introduction
(ii) Matplotlib
(iii) Plot Components
(iv) Matplotlib Architecture
(a) Backend Layer
(b) The Artist Layer
(c) The Scripting Layer

(i) Introduction
 Matplotlib is a Python graphing and plotting library that can generate a variety
of different types of graph or chart in a variety of different formats.
 It can be used to generate line charts, scatter graphs, heat maps, bar charts, pie
charts and 3D plots. It can even support animations and interactive displays.
 An example of a graph generated using Matplotlib is given below. This shows a
line chart used to plot a simple sign wave.
 Refer SignWave.py

 Matplotlib is a very flexible and powerful graphing library. It can support a
variety of different Python graphics platforms and operating system
windowing environments.
 It can also generate output graphics in a variety of different formats including
PNG, JPEG, SVG and PDF etc.
 Matplotlib can be used on its own or in conjunction with other libraries to
provide a wide variety of facilities.
 One library that is often used in conjunction with Matplotlib is NumPy which
is a library often used in Data Science applications that provides a variety of
functions and data structures (such as n-dimensional arrays) that can be very
useful when processing data for display within a chart.
 However, Matplotlib does not come prebuilt into the Python environment; it
is an optional module which must be added to your environment or IDE.

(ii) Matplotlib
 Matplotlib is a graph plotting library for Python. For simple graphs Matplotlib
is very easy to use, for example to create a simple line graph for a set of x and y
coordinates you can use the matplotlib.pyplot.plot function.
 Refer SimpleGraph.py
 In this example, the plot() function takes a sequence of values which will be
treated as the y axis values; the x axis values are implied by the position of the
y values within the list.
 Thus, as the list has six elements in it the x axis has the range 0–6. In turn as the
maximum value contained in the list is 3.75, then the y axis ranges from 0 to 4.

(iii) Plot Components
 Although they may seem simple, there are numerous elements that comprise a
Matplotlib graph or plot.
 These elements can all be manipulated and modified independently.
 It is therefore useful to be familiar with the Matplotlib terminology associated
with these elements, such as ticks, legends, labels etc.
 The elements that make up a plot are illustrated below:

The diagram illustrates the following elements:
 Axes: An Axes is defined by the matplotlib.axes.Axes class. It is used to
maintain most of the elements of a figure namely the X and Y Axis, the Ticks,
the Line plots, any text and any polygon shapes.
 Title: This is the title of the whole figure.
 Ticks (Major and Minor): The Ticks are represented by the class
matplotlib.axis.Tick. A Tick is the mark on the Axis indicating a new
value. There can be Major ticks which are larger and may be labeled. There
are also minor ticks which can be smaller (and may also be labelled).
 Tick Labels (Major and Minor): This is a label on a Tick.

 Axis: The maplotlib.axis.Axis class defines an Axis object (such as an X
or Y axis) within a parent Axes instance. It can have formatters used to format
the labels used for the major and minor ticks. It is also possible to set the
locations of the major and minor ticks.
 Axis Labels (X, Y and in some cases Z) These are labels used to describe the
Axis.
 Plot types such as line and scatter plots. Various types of plots and graphs are
supported by Matplotlib including line plots, scatter graphs, bar charts and
pie charts.
 Grid This is an optional grid displayed behind a plot, graph or chart. The grid
can be displayed with a variety of different line styles (such as solid or dashed
lines), colours and line widths.

(iv) Matplotlib Architecture
 The Matplotlib library has a layered architecture that hides much of the
complexity associated with different windowing systems and graphic outputs.
 This architecture has three main layers, the Scripting Layer, the Artist Layer
and the Backend Layer.
 Each layer has specific responsibilities and components.
 For example, the Backend is responsible for reading and interacting with the
graph or plot being generated.

 In turn the Artist Layer is responsible for creating the graph objects that will be
rendered by the Backend Layer.
 Finally, the Scripting Layer is used by the developer to create the graphs.

(a) Backend Layer
 The Matplotlib backend layer handles the generation of output to different
target formats.
 Matplotlib itself can be used in many different ways to generate many different
outputs.
 Matplotlib can be used interactively, it can be embedded in an application (or
graphical user interface), it may be used as part of a batch application with
plots being stored as PNG, SVG, PDF or other images etc.
 To support all of these use cases, Matplotlib can target different outputs, and
each of these capabilities is called a backend; the “frontend” is the developer
facing code.

 The Backend Layer maintains all the different backends and the programmer
can either use the default backend or select a different backend as required.
 The backend to be used can be set via the matplotlib.use() function. For
example, to set the backend to render Postscript use:
matplotlib.use(‘PS’) this is illustrated below:
import matplotlib
if 'matplotlib.backends' not in sys.modules:
matplotlib.use('PS')
import matplotlib.pyplot as pyplot

 It should be noted that if you use the matplotlib.use() function, this must
be done before importing matplotlib.pyplot.
 Calling matplotlib.use()after matplotlib.pyplot has been imported
will have no effect. Note that the argument passed to the matplotlib.use()
function is case sensitive.
 The default renderer is the ‘Agg’ which uses the Anti-Grain Geometry C++
library to make a raster (pixel) image of the figure. This produces high quality
raster graphics based images of the data plots.
 The ‘Agg’ backend was chosen as the default backend as it works on a broad
selection of Linux systems as its supporting requirements are quite small;
other backends may run on one particular system, but may not work on
another system.

 This occurs if a particular system does not have all the dependencies loaded
that the specified Matplotlib backend relies on.

The Backend Layer can be divided into two categories:
 User interface backends (interactive) that support various Python windowing
systems such as wxWidgets, Qt, TK etc.
 Hardcopy Backends (non interactive) that support raster and vector graphic
outputs.
 The User Interface and Hardcopy backends are built upon common
abstractions referred to as the Backend base classes.

(b) The Artist Layer
 The Artist layer provides the majority of the functionality that you might
consider to be what Matplotlib actually does; that is the generation of the plots
and graphs that are rendered/ displayed to the user (or output in a particular
format).

 The artist layer is concerned with things such as the lines, shapes, axis, and
axes, text etc. that comprise a plot.
 The classes used by the Artist Layer can be classified into one of the following
three groups; primitives, containers and collections:
 Primitives are classes used to represent graphical objects that will be drawn
on to a figure's canvas.
 Containers are objects that hold primitives. For example, typically a figure
would be instantiated and used to create one or more Axes etc.
 Collections are used to efficiently handle large numbers of similar types of
objects.
 Although it is useful to be aware of these classes; in many cases you will not
need to work with them directly as the pyplot API hides much of the detail.
However, it is possible to work at the level of figures, axes, ticks etc. if
required.

(c) The Scripting Layer
 The scripting layer is the developer facing interface that simplifies the task of
working with the other layers.

 Note that from the programmers point of view, the Scripting Layer is
represented by the pyplot module. Under the covers pyplot uses module-
level objects to track the state of the data, handle drawing the graphs etc.
 When imported pyplot selects either the default backend for the system or the
one that has been configured; for example via the matplotlib.use()
function.
 It then calls a setup() function that:
 creates a figure manager factory function, which when called will create a
new figure manager appropriate for the selected backend,
 prepares the drawing function that should be used with the selected
backend,
 identifies the callable function that integrates with the backend mainloop
function,
 provides the module for the selected backend.

 The pyplot interface simplifies interactions with the internal wrappers by
providing methods such as plot(), pie(), bar(), title(),
savefig(), draw() and figure() etc.
 Most of the examples presented in the next chapter will use the functions
provided by the pyplot module to create the required charts; thereby hiding
the lower level details.

(i) Introduction
(ii) The pyplot API
(iii) Line Graphs
(a) Coded Format Strings
(iv) Scatter Graph
(a) When to Use Scatter Graphs
(v) Pie Charts
(a) Expanding Segments
(b) When to Use Pie Charts

(vi) Bar Charts
(a) Horizontal Bar Charts
(b) Coloured Bars
(c) Stacked Bar Charts
(d) Grouped Bar Charts
(vii) Figures and Subplots
(viii) 3D Graphs

(i) Introduction
 In this chapter we will explore the Matplotlib pyplot API.
 This is the most common way in which developers generate different types of
graphs or plots using Matplotlib.

(ii) The pyplot API
 The purpose of the pyplot module and the API it presents is to simplify the
generation and manipulation of Matplotlib plots and charts.
 As a whole the Matplotlib library tries to make simple things easy and complex things
possible.
 The primary way in which it achieves the first of these aims is through the pyplot
API as this API has high level functions such as bar(), plot(), scatter() and
pie() that make it easy to create bar charts, line plots, scatter graphs and pie charts.
 One point to note about the functions provided by the pyplot API is that they can often
take very many parameters; however most of these parameters will have default
values that in many situations will give you a reasonable default behaviour/ default
visual representation.

 You can therefore ignore most of the parameters available until such time as
you actually need to do something different; at which point you should refer to
the Matplotlib documentation as this has extensive material as well as
numerous examples.
 It is of course necessary to import the pyplot module; as it is a module within
the Matplotlib (e.g. matplotlib.pyplot) library. It is often given an alias
within a program to make it easier to reference. Common alias for this module
are pyplot or plt.
 A typical import for the pyplot module is given below:
import matplotlib.pyplot as pyplot

 The pyplot API can be used to
 construct the plot,
 configure labels and axis,
 manage color and line styles,
 handles events/allows plots to be interactive,
 display (show) the plot.

(iii) Line Graphs
 A Line Graph or Line Plot is a graph with the points on the graph (often
referred to as markers) connected by lines to show how something changes in
value as some set of values (typically the x axis) changes; for example, over a
series to time intervals (also known as a time series).
 Time Series line charts are typically drawn in chronological order; such charts
are known as run charts.
 The following chart is an example of a run chart; it charts time across the
bottom (x axis) against speed (represented by the y axis).
 Refer RunChart.py

 The first thing that this program does is to import the matplotlib.pyplot
module and give it an alias of pyplot (as this is a shorter name it makes the
code easier to read).
 Two lists of values are then created for the x and y coordinates of each marker or plot
point.
 The graph itself is then configured with labels being provided for the x and y axis
(using the pyplot functions xlabel() and ylabel()). The title of the graph is
then set (again using a pyplot function).
 After this the x and y values are then plotted as a line chart on the graph. This is done
using the pyplot.plot() function. This function can take a wide range of
parameters, the only compulsory parameters being the data used to define the plot
points.

 In the above example a third parameter is provided; this is a string ‘bo-’.
 This is a coded format string in that each element of the string is meaningful to
the pyplot.plot() function. The elements of the string are:
 b - this indicates the colour to use when drawing the line; in this case the letter ‘b’
indicates the colour blue (in the same way ‘r’ would indicate red and ‘g’ would
indicate green).
 o - this indicates that each marker (each point being plotted) should be represented
by a cirlce. The lines between the markers then create the line plot.
 ‘–’ - This indicates the line style to use. A single dash (‘-’) indicates a solid line,
where as a double dash (‘–’) indicates a dashed line.
 Finally the program then uses the show()function to render the figure on the screen;
alternatively savefig()could have been used to save the figure to a file.

(a) Coded Format Strings
 There are numerous options that can be provided via the format string, the
following tables summarises some of these:
 The following colour abbreviations are supported by the format string:

 Different ways of representing the markers (points on the graph) connected by
the lines are also supported including:

 Finally, the format string supports different line styles:
 Some examples of formatting strings:
 ‘r’ red line with default markers and line style.
 ‘g-’ green solid line.
 ‘–’ dashed line with the default colour and default markers.
 ‘yo:’ yellow dotted line with circle markers.

(iv) Scatter Graph
 A Scatter Graph or Scatter Plot is type of plot where individual values are
indicated using cartesian (or x and y) coordinates to display values.
 Each value is indicated via a mark (such as a circle or triangle) on the graph.
They can be used to represent values obtained for two different variables; one
plotted on the x axis and the other plotted on the y axis. An example of a scatter
chart with three sets of scatter values is given below.
 In this graph each dot represents the amount of time people of different ages
spend on three different activities.
 Refer ScatterGraph.py

 In the above example the plot.scatter()function is used to generate the
scatter graph for the data defined by the riding, swimming and sailing tuples.
 The colours of the markers have been specified using the named parameter c.
 This parameter can take a string representing the name of a colour or a two
dimensional array with a single row in which each value in the row represents
an RGB color code.
 The marker Indicates the marker style such as ‘o’ for a circle, a ‘^’ for a triangle
and ‘*’ for a star shape.
 The label is used in the chart legend for the marker.

 Other options available on the pyplot.scatter()function include:
 alpha: indicates the alpha blending value, between 0 (transparent) and 1
(opaque).
 linewidths: which is used to indicate the line width of the marker edges.
 edgecolors: indicates the color to use for the marker edges if different from
the fill colour used for the marker (indicates by the parameter ‘c’).

(a) When to Use Scatter Graphs
 A useful question to consider is when should a scatter plot be used? In general
scatter plats are used when it is necessary to show the relationship between two
variables.
 Scatter plots are sometimes called correlation plots because they show how two
variables are correlated.
 In many cases a trend can be discerned between the points plotted on a scatter
chart (although there may be outlying values).
 To help visualise the trend it can be useful to draw a trend line along with the
scatter graph. The trend line helps to make the relationship of the scatter plots
to the general trend clearer.

 The following chart represents a set of values as a scatter graph and draws the
trend line of this scatter graph. As can be seen some values are closer to the
trendline than others.

 The trend line has been created in this case using the numpy function
polyfit().
 The polyfit() function performs a least squares polynomial fit for the data it
is given. A poly1d class is then created based on the array returned by
polyfit().
 This class is a one-dimensional polynomial class. It is a convenience class, used
to encapsulate “natural” operations on polynomials.
 The poly1d object is then used to generate a set of values for use with the set
of x values for the function pyplot.plot().
 Refer TrendLine.py

(v) Pie Charts
 A Pie Chart is a type of graph in which a circle is divided into sectors (or
wedges) that each represent a proportion of the whole.
 A wedge of the circle represents a category’s contribution to the overall total. As
such the graph resembles a pie that has been cut into different sized slices.
 Typically, the different sectors of the pie chart are presented in different colours
and are arranged clockwise around the chart in order of magnitude.
 However, if there is a slice that does not contain a unique category of data but
summarises several, for example “other types” or “other answers”, then even if
it is not the smallest category, it is usual to display it last in order that it does
not detract from the named categories of interest.

 The following chart illustrates a pie chart used to represent programming
language usage within a particular organisation.

 The pie chart is created using the pyplot.pie()function.
 The pyplot.pie()function takes several parameters, most of which are
optional. The only required parameter is the first one that provides the values
to be used for the wedge or segment sizes.
 The following optional parameters are used in the above example:
 The labels parameter is an optional parameter that can take a sequence of
strings that are used to provide labels for each wedge.
 The autopct parameter takes a string (or function) to be used to format the
numeric values used with each wedge.

 The counterclockwise parameter. By default wedges are plotted counter
clockwise in pyplot and so to ensure that the layout is more like the
traditional clockwise approach the counterclock parameter is set to
False.
 The startangle parameter. The starting angle has also been moved 90°
using the startangle parameter so that the first segment starts at the top
of the chart.
 Refer PieChart.py

(a) Expanding Segments
 It can be useful to emphasis a particular segment of the pie chart by exploding
it; that is separating it out from the rest of the pie chart.
 This can be done using the explode parameter of the pie()function that
takes a sequence of values indicating how much a segment should be exploded
by.
 The visual impact of the pie chart can also be enhanced in this case by adding a
shadow to the segments using the named shadow boolean parameter. The
effect of these are shown below:

(b) When to Use Pie Charts
 It is useful to consider what data can be/should be presented using a pie chart.
In general pie charts are useful for displaying data that can be classified into
nominal or ordinal categories.
 Nominal data is categorised according to descriptive or qualitative information
such as program languages, type of car, country of birth etc.
 Ordinal data is similar but the categories can also be ranked, for example in a
survey people may be asked to say whether they classed something as very
poor, poor, fair, good, very good.

 Pie charts can also be used to show percentage or proportional data and
usually the percentage represented by each category is provided next to the
corresponding slice of pie.
 Pie charts are also typically limited to presenting data for six or less categories.
 When there are more categories it is difficult for the eye to distinguish between
the relative sizes of the different sectors and so the chart becomes difficult to
interpret.

(vi) Bar Charts
 A Bar Chart is a type of chart or graph that is used to present different discrete
categories of data.
 The data is usually presented vertically although in some cases horizontal bar
charts may be used. Each category is represented by a bar whose height (or
length) represents the data for that category.
 Because it is easy to interpret bar charts, and how each category relates to
another, they are one of the most commonly used types of chart.
 There are also several different common variations such as grouped bar charts
and stacked bar charts.

 The following is an example of a typical bar chart. Five categories of
programming languages are presented along the x axis while the y axis
indicates percentage usage. Each bar then represents the usage percentage
associated with each programming language.

 The chart is constructed such that the lengths of the different bars are
proportional to the size of the category they represent.
 The x-axis represents the different categories and so has no scale.
 In order to emphasise the fact that the categories are discrete, a gap is left
between the bars on the x-axis.
 The y-axis does have a scale and this indicates the units of measurement.
 Refer BarChart.py

(a) Horizontal Bar Charts
 Bar charts are normally drawn so that the bars are vertical which means that
the taller the bar, the larger the category.
 However, it is also possible to draw bar charts so that the bars are horizontal
which means that the longer the bar, the larger the category.
 This is a particularly effective way of presenting a large number of different
categories when there is insufficient space to fit all the columns required for a
vertical bar chart across the page.
 In Matplotlib the pyplot.barh()function can be used to generate a
horizontal bar chart:

 In this case the only line of code to change from the previous example is:
pyplot.barh(index, sizes, tick_label = labels)
 Refer BarHChart.py

(b) Coloured Bars
 It is also common to colour different bars in the chart in different colours or
using different shades. This can help to distinguish one bar from another. An
example is given below:

 The colour to be used for each category can be provided via the color
parameter to the bar()(and barh()) function.
 This is a sequence of the colours to apply. For example, the above coloured bar
chart can be generated using:
pyplot.bar(index, sizes, tick_label=labels, color=('red’,
'green', 'blue', 'yellow', 'orange'))
 Refer ColouredBars.py

(c) Stacked Bar Charts
 Bar Charts can also be stacked. This can be a way of showing total values (and
what contributes to those total values) across several categories.
 That is, it is a way of viewing overall totals, for several different categories
based on how different elements contribute to those totals.
 Different colours are used for the different sub-groups that contribute to the
overall bar.
 In such cases, a legend or key is usually provided to indicate what sub-group
each of the shadings/colours represent. The legend can be placed in the plot
area or may be located below the chart.

 For example, in the following chart the total usage of a particular programming
language is composed of its use in games and web development as well as data
science analytics.

 From this figure we can see how much each use of a programming language
contributes to the overall usage of that language.
 Refer StackedBarChart.py
 One thing to note from this example is that after the first set of values are
added using the pyplot.bar()function, it is necessary to specify the bottom
locations for the next set of bars using the bottom parameter. We can do this
just using the values already used for web_usage for the second bar chart;
however for the third bar chart we must add the values used for web_usage
and data_science_usage together (in this case using a for list
comprehension).

(d) Grouped Bar Charts
 Finally, Grouped Bar Charts are a way of showing information about different
sub-groups of the main categories. In such cases, a legend or key is usually
provided to indicate what sub-group each of the shadings/colours represent.
 The legend can be placed in the plot area or may be located below the chart.For
a particular category separate bar charts are drawn for each of the subgroups.
 For example, in the following chart the results obtained for two sets of teams
across a series of lab exercises are displayed.
 Thus each team has a bar for lab1, lab2, lab3etc. A space is left between each
category to make it easier to compare the sub categories.

 Notice in the above program that it has been necessary to calculate the index
for the second team as we want the bars presented next to each other.
 Thus the index for the teams includes the width of the bar for each index point,
thus the first bar is at index position 1.35, the second at index position 2.35 etc.
 Finally the tick positions must therefore be between the two bars and thus is
calculated by taking into account the bar widths.
 Refer GroupedBarChart.py

 This program generates the following grouped bar chart:

(vii) Figures and Subplots
 A Matplotlib figure is the object that contains all the graphical elements
displayed on a plot. That is the axes, the legend, the title as well as the line plot
or bar chart itself. It thus represents the overall window or page and is the top,
out graphical component.
 In many cases the figure is implicit as the developer interacts with the pyplot
API; however the figure can be accessed directly if required.
 The matplotlib.pyplot.figure() function generates a figure object. This
function returns a matplotlib.figure.Figure object. It is then possible to
interact directly with the figure object. For example it is possible to add axes to
the figure, to add sub plots to a graph etc.

 Working directly with the figure is necessary if you want to add multiple
subplots to a figure.
 This can be useful if what is required is to be able to compare different views of
the same data side by side. Each subplot has its own axes which can coexist
within the figure.
 One or more subplots can be added to a figure using the
figure.add_subplot()method. This method adds an Axes to the figure as
one of a set of one or more subplots.
 A subplot can be added using a 3-digit integer (or three separate integers)
describing the position of the subplot. The digits represent the number of rows,
columns and the index of the sub plot within the resulting matrix.

 Thus 2, 2, 1 (and 221) all indicate that the subplot will take the 1st index within
a two by two grid of plots. In turn 2, 2, 3 (223) indicates that the sub plot will be
at index 3 which will be row 2 and column 1 within the 2 by 2 grid of plots.
 Where as 2, 2, 4 (or 224) indicates that the plot should be added as at index 4 or
the fourth subplot within the grid (so position 2 by 2) etc.
 For example, the following figure illustrates four subplots presented within a
single figure. Each subplot is added via the figure.add_subplot() method.
 Refer FiguresSubplots.py

(viii) 3D Graphs
 A three-dimensional graph is used to plot the relationships between three sets of
values. In a three-dimensional graph as well as the x and y axis there is also a z axis.
 The following program creates a simple 3D graph using two sets of values generated
using the numpy range function. These are then converted into a coordinate matrices
using the numpy meshgrid() function.
 The z axis values are created using the numpy sin() function. The 3D graph surface
is plotted using the plot_surface() function of the futures axes object.
 This takes the x, y and z coordinates. The function is also given a colour map to use
when rendering the surface (in this case the Matplotlib cool to warm colour map is
used).

 One point to note about three dimensional graphs is that they are not
universally accepted as being a good way to present data. One of the maxims of
data visualization is keep it simple/keep it clean. Many consider that a three-
dimensional chart does not do this and that it can be difficult to see what is
really being shown or that it can be hard to interpret the data appropriately.
 For example, in the above chart what are the values associated with any of the
peaks? This is difficult to determine as it is hard to see where the peaks are
relative to the X, Y and Z axis.
 Many consider such 3D charts to be eye candy; pretty to look at but not
providing much information. As such the use of a 3D chart should be
minimised and only used when actually necessary.
 Refer ThreeDGraphs.py

6. Graphical User Interfaces
(i) Introduction
(ii) GUIs and WIMPS
(iii) Windowing Frameworks for Python
(a) Platform-Independent GUI Libraries
(b) Platform-Specific GUI Libraries

(i) Introduction
 A Graphical User Interface can capture the essence of an idea or a situation,
often avoiding the need for a long passage of text.
 Such interfaces can save a user from the need to learn complex commands.
They are less likely to intimidate computer users and can provide a large
amount of information quickly in a form which can be easily assimilated by the
user.
 The widespread use of high-quality graphical interfaces has led many
computer users to expect such interfaces to any software they use.
 Most programming languages either incorporate a Graphical User Interface
(GUI) library or have third party libraries available.

 Python is of course a cross platform programming language and this brings in
additional complexities as the underlying operating system may provide
different windowing facilities depending upon whether the program is
running on Unix, Linux, Mac OS or Windows operating systems.

(ii) GUIs and WIMPS
 GUIs (Graphical User Interfaces) and WIMP (Windows, Icons, Mice and Pop-
up Menus) style interfaces have been available within computer systems for
many years, but they are still one of the most significant developments to have
occurred.
 These interfaces were originally developed out of a desire to address many of
the perceived weaknesses of purely textual interfaces.
 The textual interface to an operating system was typified by a peremptory
prompt. In Unix/Linux systems for example, the prompt is often merely a
single character such as %, > or $, which can be intimidating. This is true even
for experienced computer users if they are not familiar with the Unix/Linux
family of operating systems.

 For example, a user wishing to copy a file from one directory to another might
have to type something like:
> cp file.pdf ~otheruser/projdir/srcdir/newfile.pdf
 This long sequence needs to be entered with no mistakes in order to be
accepted.
 Any error in this command will cause the system to generate an error message
which might or might not be enlightening.
 Even where systems attempt to be more “user friendly’’ through features like
command histories, much typing of arrow keys and filenames is typically
needed.

 The main issue on both input and output is one of bandwidth. For example, in
situations where the relationships between large amounts of information must
be described, it is much easier to assimilate this if output is displayed
graphically than if it is displayed as a tables of figures.
 On input, combinations of mouse actions can be given a meaning that could
otherwise only be conveyed by several lines of text.
 WIMP stands for Windows (or Window Managers), Icons, Mice and Pop-up
menus.
 WIMP interfaces allow the user to overcome at least some of the weaknesses of
their textual counterparts—it is possible to provide a pictorial image of the
operating system which can be based on a concept the user can relate to, menus
can be used instead of textual commands and information in general can be
displayed graphically.

 The fundamental concepts presented via a WIMP interface were originally
developed at XEROX’s Palo Alto Research Center and used on the Xerox Star
machine but gained much wider acceptance through first the Apple Macintosh
and then IBM PC implementations of WIMP interfaces.
 Most WIMP style environments use a desktop analogy (although this is less
true of mobile devices such as phones and tablets):
 the whole screen represents a working surface (a desktop)
 graphic windows that can overlap represent sheets of paper on that
desktop,
 graphic objects are used for specific concepts, for example filing cabinets for
disks or a waste bin for file disposal (these could be regarded as desk
accessories),
 various application programs are displayed on the screen, these stand for
tools that you might use on your desktop.

 In order to interact with this display, the WIMP user is provided with a mouse
(or a light pen or a touch sensitive screen), which can be used to select icons
and menus or to manipulate windows.
 The software basis of any WIMP style environment is the window manager. It
controls the multiple, possibly overlapping windows and icons displayed on
the screen.
 It also handles the transfer of information about events which occur in those
windows to the appropriate application and generates the various menus and
prompts used.
 A window is an area of the graphic screen in which a page or piece of a page of
information may be displayed; it may display text, graphics or a combination of
both.

 These windows may be overlapping, and associated with the same process, or
they may be associated with separate processes. Windows can generally be
created, opened, closed, moved and resized.
 An icon is a small graphic object that is usually symbolic of an operation or of a
larger entity such as an application program or a file. The opening of an icon
causes either the associated application to execute or the associated window to
be displayed.
 At the heart of the users ability to interact with such WIMP based programs is
the event loop.
 This loop listens for events such as the user clicking a button or selecting a
menu item or entering a text field. When such an event occurs it triggers the
associated behaviour (such as running a function linked with a button).

(iii) Windowing Frameworks for Python
 Python is a cross platform programming language. As such Python programs
can be written on one platform (such as a Linux box) and then run on that
platform or another operating system platform (such as Windows or Mac OS).
 This can however generate issues for libraries that need to be available across
multiple operating system platforms.
 The area of GUIs is particularly an issue as a library written to exploit features
available in the Microsoft Windows system may not be available (or may look
different) on Mac OS or Linux systems.
 Each operating system that Python runs on may have one or more windowing
systems written for it and these systems may or may not be available on other
operating systems.

 This makes the job of providing a GUI library for Python that much more
difficult.
 Developers of Python GUIs have taken one of two approaches to handle this:
 One approach is to write a wrapper that abstracts the underlying GUI
facilities so that the developer works at a level above a specific windowing
system’s facilities. The Python library then maps (as best it can) the facilities
to the underlying system that is currently being used.
 The other approach is to provide a closer wrapping to a particular set of
facilities
 on the underlying GUI system and to only target systems that support those
facilities.

(a) Platform-Independent GUI Libraries
 Tkinter. This is the standard built-in Python GUI library. It is built on top of the
Tcl/Tk widget set that has been around for very many years for many different
operating systems. Tcl stands for Tool Command Language while Tk is the
graphical user interface toolkit for Tcl.
 wxPython. wxWidgets is a free, highly portable GUI library. Its is written in
C++ and it can provide a native look and feel on operating systems such as
Windows, Mac OS, Linux etc. wxPython is a set of Python bindings for
wxWidgets.
 PyQT or PySide both of these libraries wrap the Qt toolkit facilities. Qt is a
cross platform software development system for the implementation of GUIs
and applications.

(b) Platform-Specific GUI Libraries
 PyObjc is a Mac OS specific library that provides an Objective-C bridge to the
Apple Mac Cocoa GUI libraries.
 PythonWin provides a set of wrappings around the Microsoft Windows
Foundation classes and can be used to create Windows based GUIs.

7. The wxPython GUI Library
(i) The wxPython Library
(a) wxPython Modules
(b) Windows as Objects
(c) A Simple Example
(ii) The wx.App Class
(iii) Window Classes
(iv) Widget/Control Classes
(v) Dialogs
(vi) Arranging Widgets Within a Container
(vii) Drawing Graphics

(i) The wxPython Library
 The wxPython library is a cross platform GUI library (or toolkit) for Python.
 It allows programmers to develop highly graphical user interfaces for their
programs using common concepts such as menu bars, menus, buttons, fields,
panels and frames.
 In wxPython all the elements of a GUI are contained within top level windows
such as a wx.Frame or a wx.Dialog.
 These windows contain graphical components known as widgets or controls.
These widgets/controls may be grouped together into Panels (which may or
may not have a visible representation).

 Thus, in wxPython we might construct a GUI from:
 Frames which provide the basic structure for a window: borders, a label and
some basic functionality (e.g. resizing).
 Dialogs which are like Frames but provide fewer border controls.
 Widgets/Controls that are graphical objects displayed in a frame. Some other
languages refer to them as UI components. Examples of widgets are buttons,
checkboxes, selection lists, labels and text fields.
 Containers are component that are made up of one or more other
components (or containers). All the components within a container (such as a
panel) can be treated as a single entity.
 Thus a GUI is constructed hierarchically from a set of widgets, containers and
one or more Frames (or in the case of a pop up dialog then Dialogs).

 This is illustrated below for a window containing several panels and widgets:

 Windows such as Frames and Dialogs have a component hierarchy that is used
(amongst other things) to determine how and when elements of the window
are drawn and redrawn.
 The component hierarchy is rooted with the frame, within which components
and containers can be added.
 The above figure illustrates a component hierarchy for a frame, with two
container Panels and a few basic widgets/ui components held within the
Panels.
 Note that a panel can contain another sub panel with different widgets in.

(a) wxPython Modules
 The wxPython library is comprised of many different modules. These modules
provide different features from the core wx module to the html oriented
wx.html and wx.html2 modules. These modules include:
wx which holds the core widgets and classes in the wx library.
wx.adv that provides less commonly used or more advanced widgets and
classes.
wx.grid contains widgets and classes supporting the display and editing of
tabular data.

 wx.richtext consists of widgets and classes used for displaying multiple
text styles and images.
 wx.html comprises widgets and supporting classes for a generic html
renderer.
 wx.html2 provides further widget and supporting classes for a native html
renderer, with CSS and javascript support.

(b) Windows as Objects
 In wxPython, Frames and Dialogs as well as their contents are instances of
appropriate classes (such as Frame, Dialog, Panel, Button or
StaticText).
 Thus, when you create a window, you create an object that knows how to
display itself on the computer screen. You must tell it what to display and then
tell it to show its contents to the user.
 You create a window by instantiating a Frame or Dialog object.
 You define what the window displays by creating a widget that has an
appropriate parent component. This adds the widget to a container, such as a
type of panel or a frame.

 You can send messages to the window to change its state, perform an
operation, and display a graphic object.
 The window, or components within the window, can send messages to other
objects in response to user (or program) actions.
 Everything displayed by a window is an instance of a class and is potentially
subject to all of the above.
 wx.App handles the main event loop of the GUI application

(c) A Simple Example
 An example of creating a very simple window using wxPython is given below.
The result of running this short program is shown here for both a Mac and a
Windows PC:
 Refer SimpleWindow.py

 The program also creates a new instance of the Application Object called
wx.App().
 Every wxPython GUI program must have one Application Object. It is the
equivalent of the main() function in many non-GUI applications as it will run
the GUI application for you. It also provides default facilities for defining
startup and shutdown operations and can be subclassed to create custom
behaviour.
 The wx.StaticText class is used to create a single (or multiple) line label. In
this case the label shows the string ‘Hello Python’. The StaticText object is
constructed with reference to its parent container.
 This is the container within which the text will be displayed. In this case the
StaticText is being displayed directly within the Frame and thus the frame
object is its containing parent object.

 In contrast the Frame which is a top-level window, does not have a parent
container.
 Also notice that the frame must be shown (displayed) for the user to see it. This
is because there might be multiple different windows that need to be shown (or
hidden) in different situations for an application.
 Finally, the program starts the applications’ main event loop; within this loop
the program listens for any user input (such as requesting that the window is
closed).

(ii) The wx.App Class
 The wx.App class represents the application and is used to:.
 start up the wxPython system and initialise the underlying GUI toolkit,
 set and get application-wide properties,
 implement the native windowing system main message or event loop, and to
dispatch events to window instances.
 Every wxPython application must have a single wx.App instance. The creation
of all of the UI objects should be delayed until after the wx.App object has been
created in order to ensure that the GUI platform and wxWidgets have been
fully initialised.
 It is common to subclass the wx.App class and override methods such as
OnPreInit and OnExit to provide custom behaviour. This ensures that the
required behaviour is run at appropriate times.

 The methods that can be overridden for this purpose are:
 OnPreInit, This method can be overridden to define behaviour that should
be run once the application object is created, but before the OnInit method
has been called.
 OnInit This is expected to create the applications main window, display that
window etc.
 OnRun, This is the method used to start the execution of the main program.
 OnExit, This can be overridden to provide any behaviour that should be
called just before the application exits.
 As an example, if we wish to set up a GUI application such that the main frame
is initialised and shown after the wx.App has been instantiated then the safest
way is to override the OnInit() method of the wx.App class in a suitable
subclass.

 The method should return True of False; where True is used to indicate that
processing of the application should continue and False indicates that the
application should terminate immediately (usually as the result of some
unexpected issue).
 It is also possible to override the OnExit() to clean up anything initialised in
the OnInit() method.

 The inheritance hierarchy for these classes is given below for reference:

(iii) Window Classes
 The window or widget container classes that are commonly used within a
wxPython application are:
 wx.Dialog A Dialog is a top level window used for popups where the user
has limited ability to interact with the window. In many cases the user can
only input some data and/or accept or decline an option.
 wx.Frame A Frame is a top level window whose size and position can be
set and can (usually) be controlled by the user.
 wx.Panel Is a container (non top level window) on which controls/widgets
can be placed. This is often used in conjunction with a Dialog or a Frame to
manage the positioning of widgets within the GUI.

 As an example of using a Frame and a Panel, the following application creates
two Panels and displays them within a top level Frame.
 The background colour of the Frame is the default grey; while the background
colour for the first Panel is blue and for the second Panel it is red.
 The resulting display is shown below: (Refer SampleWindow.py)

 The SampleFrame is a subclass of the wx.Frame class; it thus inherits all of the
functionality of a Top Level Frame (window).
 Within the __init__() method of the SampleFrame the super classes
__init__() method is called.
 This is used to set the size of the Frame and to give the Frame a title. Note that
the Frame also indicates that it does not have a parent window.
 When the Panel is created it is necessary to specify the window (or in this case
Frame) within which it will be displayed. This is a common pattern within
wxPython.
 Also note that the SetSize method of the Panel class also allows the position
to be specified and that the Colour class is the wxPython Colour class.

(iv) Widget/Control Classes
 Although there are very many widgets/controls available to the developer, the
most commonly used include:
 wx.Button/wx.ToggleButton/wx.RadioButton These are widgets
that provide button like behaviour within a GUI.
 wx.TextCtrl This widget allows text to be displayed and edited. I can be a
single line or multiple line widget depending upon configuration.
 wx.StaticText Used to display one or more lines of read-only text. In
many libraries this widgets is known as a label.
 wx.StaticLine A line used in dialogs to separate groups of widgets. The
line may be vertical or horizontal.
 wx.ListBox This widget is used to allow a user to select one option from a
list of options.

 wx.MenuBar/wx.Menu/wx.MenuItem. The components that can be used
to construct a set of menus for a User Interface.
 wx.ToolBar This widget is used to display a bar of buttons and/or other
widgets usually placed below the menubar in a wx.Frame.
 The inheritance hierarchy of these widgets is given below. Note that they all
inherit from the class Control (hence why they are often referred to as
Controls as well as Widgets or GUI components).

(v) Dialogs
 The generic wx.Dialog class can be used to build any custom dialog you
require. It can be used to create modal and modeless dialogs:
 A modal dialog blocks program flow and user input on other windows until
it is dismissed.
 A modeless dialog behaves more like a frame in that program flow
continues, and input in other windows is still possible.
 The wx.Dialog class provides two versions of the show method to support
modal and modeless dialogs. The ShowModal() method is used to display a
modal dialog, while the Show() is used to show a modeless dialog.

 As well as the generic wx.Dialog class, the wxPython library provides
numerous prebuilt dialogs for common situations. These pre-built dialogs
include:
 wx.ColourDialog This class is used to generate a colour chooser dialog.
 wx.DirDialog This class provides a directory chooser dialog.
 wx.FileDialog This class provides a file chooser dialog.
 wx.FontDialog This class provides a font chooser dialog.
 wx.MessageDialog This class can be used to generate a single or multi-line
message or information dialog. It can support Yes, No and Cancel options. It
can be used for generic messages or for error messages.
 wx.MultiChoiceDialog This dialog can be used to display a list of strings
and allows the user to select one or more values for the list.
 wx.PasswordEntryDialog This class represents a dialog that allows a
user to enter a one-line password string from the user.

 wx.ProgressDialog If supported by the GUI platform, then this class will
provide the platforms native progress dialog, otherwise it will use the pure
Python wx.GenericProgressDialog. The wx.GenericProgressDialog
shows a short message and a progress bar.
 wx.TextEntryDialog This class provides a dialog that requests a one-line
text string from the user.
 Most of the dialogs that return a value follow the same pattern. This pattern
returns a value from the ShowModel() method that indicates if the user
selected OK or CANCEL (using the return value wx.ID_OK or wx.ID_CANCEL).
The selected/entered value can then be obtained from a suitable get method such
as GetColourData() for the ColourDialog or GetPath() for the
DirDialog.

(vi) Arranging Widgets Within a Container
 Widgets can be located within a window using specific coordinates (such as 10
pixels down and 5 pixels across). However, this can be a problem if you are
considering cross platform applications, this is because how a button is
rendered (drawn) on a Mac is different to Windows and different again from
the windowing systems on Linux/Unix etc.
 This means that different amount of spacing must be given on different
platforms. In addition, the fonts used with text boxes and labels differ between
different platforms also requiring differences in the layout of widgets.
 To overcome this wxPython provides Sizers. Sizers work with a container such
as a Frame or a Panel to determine how the contained widgets should be laid
out. Widgets are added to a sizer which is then set onto a container such as a
Panel.

 A Sizer is thus an object which works with a container and the host windowing
platform to determine the best way to display the objects in the window. The
developer does not need to worry about what happens if a user resizes a window
or if the program is executed on a different windowing platform.
 Sizers therefore help to produce portable, presentable user interfaces. In fact, one
Sizer can be placed within another Sizer to create complex component layouts.
 There are several sizers available including:
 wx.BoxSizer This sizer can be used to place several widgets into a row or
column organisation depending upon the orientation. When the BoxSizer is
created the orientation can be specified using wx.VERTICAL or
wx.HORIZONTAL.

 wx.GridSizer This sizer lays widgets out in a two-dimensional grid. Each
cell within the grid has the same size. When the GridSizer object is created it is
possible to specify the number of rows and columns the grid has. It is also
possible to specify the spacing between the cells both horizontally and
vertically.
 wx.FlexGridSizer This sizer is a slightly more flexible version of the
GridSizer. In this version not all columns and rows need to be the same size
(although all cells in the same column are the same width and all cells in the
same row are the same height).
 wx.GridBagSizer is the most flexible sizer. It allows widgets to be
positioned relative to the grid and also allows widgets to span multiple rows
and/or columns.
 To use a Sizer it must first be instantiated. When widgets are created they should
be added to the sizer and then the sizer should be set on the container.
 Refer SampleApp.py

(vii) Drawing Graphics
 The wxPython library provides its own facilities for generating cross platform
graphic displays using lines, squares, circles, text etc. This is provided via the
Device Context.
 A Device Context (often shortened to just DC) is an object on which graphics
and text can be drawn.
 It is intended to allow different output devices to all have a common graphics
API (also known as the GDI or Graphics Device Interface). Specific device
contexts can be instantiate depending on whether the program is to use a
window on a computer screen or some other output medium (such as a
printer).

 There are several Device Context types available such as wx.WindowDC,
wx.PaintDC and wx.ClientDC
 The wx.WindowDC is used if we want to paint on the whole window
(Windows only). This includes window decorations.
 The wx.ClientDC is used to draw on the client area of a window. The client
area is the area of a window without its decorations (title and border).
 The wx.PaintDC is used to draw on the client area as well but is intended to
support the window refresh paint event handling mechanism.
 Note that the wx.PaintDC should be used only from a wx.PaintEvent
handler while the wx.ClientDC should never be used from a wx.PaintEvent
handler.

 Whichever Device Context is used, they all support a similar set of methods that
are used to generate graphics, such as:
 DrawCircle(x, y, radius)Draws a circle with the given centre and
radius.
 DrawEllipse (x, y, width, height)Draws an ellipse contained in the
rectangle specified either with the given top left corner and the given size or
directly.
 DrawPoint (x, y)Draws a point using the color of the current pen.
 DrawRectangle (x, y, width, height) Draws a rectangle with the
given corner coordinate and size.
 DrawText (text, x, y) Draws a text string at the specified point, using
the current text font, and the current text foreground and background colours.
 DrawLine (pt1, pt2)/DrawLine (x1, y1, x2, y2) This method
draws a line from the first point to the second.

 It is also important to understand when the device context is refreshed/redrawn.
For example, if you resize a window, maximise it, minimise it, move it, or modify
its contents the window is redrawn. This generates an event, a PaintEvent.
 You can bind a method to the PaintEvent (using wx.EVT_PAINT) that can be
called each time the window is refreshed.
 This method can be used to draw whatever the contents of the window should
be. If you do not redraw the contents of the device context in such a method than
whatever you previously drew will display when the window is refreshed.
 Refer DrawGraphics.py

8. Events in wxPython User Interfaces
(i) Event Handling
(ii) Event Definitions
(iii) Types of Events
(iv) Binding an Event to an Event Handler
(v) Implementing Event Handling
(vi) An Interactive wxPython GUI

(i) Event Handling
 Events are an integral part of any GUI; they represent user interactions with the
interface such as clicking on a button, entering text into a field, selecting a
menu option etc.
 The main event loop listens for an event; when one occurs it processes that
even (which usually results in a function or method being called) and then
waits for the next event to happen.
 This loop is initiated in wxPython via the call to the MainLoop() method on
the wx.App object.

 This raises the question ‘what is an Event?’. An event object is a piece of
information representing some interaction that occurred typically with the GUI
(although an event can be generated by anything).
 An event is processed by an Event Handler. This is a method or function that is
called when the event occurs.
 The event is passed to the handler as a parameter.
 An Event Binder is used to bind an event to an event handler.

(ii) Event Definitions
 It is useful to summarise the definitions around events as the terminology used
can be confusing and is very similar:
 Event represents information from the underlying GUI framework that
describes something that has happened and any associated data. The specific
data available will differ depending on what has occurred. For example, if a
window has been moved then the associated data will relate to the window’s
new location. Where as a CommandEvent generated by a selection action
from a ListBox provides the item index for the selection.
 Event Loop the main processing loop of the GUI that waits for an event to
occur. When an event occurs the associated event handler is called.

 Event Handlers these are methods (or functions) that are called when an
event occurs.
 Event Binders associate a type of event with an event handler. There are
different event binders for different types of event. For example, the event
binder associated with the wx.MoveEvent is named wx.EVT_MOVE.

 The relationship between the Event, the Event Handler via the Event Binder is
illustrated below:
 The top three boxes illustrate the concepts while the lower 3 boxes provide a
concrete example of binding a Move_Event to an on_move() method via the
EVT_MOVE binder.

(iii) Types of Events
 There are numerous different types of event including:
 wx.CloseEvent used to indicate that a Frame or Dialog has been closed.
The event binder for this event is named wx.EVT_CLOSE.
 wx.CommandEvent used with widgets such as buttons, list boxes, menu
items, radio buttons, scrollbars, sliders etc. Depending upon the type of
widget that generated the event different information may be provided. For
example, for a Button a CommandEvent indicates that a button has been
clicked where as for a ListBox it indicates that an option has been selected,
etc. Different event binders are used for different event situations. For
example, to bind a command event to a event handler for a button then the
wx.EVT_BUTTON binder is used; while for a ListBox a wx.EVT_LISTBOX
binder can be used.

 wx.FocusEvent This event is sent when a window’s focus changes (loses
or gains focus). You can pick up a window gaining focus using the wx.
EVT_SET_FOCUS event binder. The wx.EVT_KILL_FOCUS is used to bind
an event handler that will be called when a window loses focus.
 wx.KeyEvent This event contains information relating to a key press or
release.
 wx.MaximizeEvent This event is generated when a top level window is
maximised.
 wx.MenuEvent This event is used for menu oriented actions such as the
menu being opened or closed; however it should be noted that this event is
not used when a menu item is selected (MenuItems generate
CommandEvents).

 wx.MouseEvent This event class contains information about the events
generated by the mouse: this includes information on which mouse button
was pressed (and released) and whether the mouse was double clicked etc.
 wx.WindowCreateEvent This event is sent just after the actual window is
created.
 wx.WindowDestoryedEvent This event is sent as early as possible during
the window destruction process.

(iv) Binding an Event to an Event Handler
 An event is bound to an Event Handler using the Bind() method of an event
generating object (such as a button, field, menu item etc.) via a named Event
Binder.
 For example:
button.Bind(wx.EVT_BUTTON,self.event_handler_method)

(v) Implementing Event Handling
 There are four steps involved in implementing event handling for a widget or
window, these are:
1. Identify the event of interest. Many widgets will generate different events
in different situations; it may therefore be necessary to determine which
event you are interested in.
2. Find the correct Event Binder name, e.g. wx.EVT_CLOSE, wx.EVT_MOVE
or wx.EVT_BUTTON etc. Again you may find that the widget you are
interested in supports numerous different event binders which may be used
in different situations (even for the same event).
3. Implement an event handler (i.e. a suitable method or function) that will be
called when the event occurs. The event handler will be supplied with the
event object.
4. Bind the Event to the Event Handler via the Binder Name using the Bind()
method of the widget or window.

 To illustrate this we will use a simple example.
 We will write a very simple event handling application. This application will
have a Frame containing a Panel. The Panel will contain a label using the
wx. StaticText class.
 We will define an event handler called on_mouse_click() that will move
the StaticText label to the current mouse location when the left mouse
button is pressed. This means that we can move the label around the screen.
 To do this we first need to determine the widget that will be used to generate
the event. In this case it is the panel that contains the text label. Having done
this we can look at the Panel class to see what events and Event Bindings it
supports. It turns out that the Panel class only directly defines support for
NavigationKeyEvents. This is not actually what we want; however the
Panel class extends the Window class.

 The Window class supports numerous event bindings, from those associated
with setting the focus (wx.EVT_SET_FOCUS and wx.EVT_KILL_FOCUS) to
key presses (wx.EVT_KEY_DOWN and wx.EVT_KEY_UP) as well as mouse
events.
 There are however numerous different mouse event bindings. These allow left,
middle and right mouse button clicks to be picked up, down clicks to be
identified, situations such as the mouse entering or leaving the window etc.
 However, the binding we are interested in for a MouseEvent is the
wx.EVT_LEFT_DOWN binding; this picks up on the MoueEvent when the left
mouse button is pressed (there is also the wx.EVT_LEFT_UP binding which
can be used to pick up an event that occurs when the left mouse button is
released).

 We now know that we need to bind the on_mouse_click() event handler to
the MouseEvent via the wx.EVT_LEFT_DOWN event binder, for example:
self.panel.Bind(wx.EVT_LEFT_DOWN, self.on_mouse_click)
 All event handler methods takes two parameters, self and the mouse event.
Thus, the signature of the on_mouse_click() method is:
def on_mouse_click(self, mouse_event):
 The mouse event object has numerous methods defined that allow information
about the mouse to be obtained such as the number of mouse clicks involved
(GetClickCount()), which button was pressed (GetButton()) and the
current mouse position within the containing widget or window
(GetPosition ()). We can therefore use this last method to obtain the
current mouse location and then use the SetPosition(x, y) method on
the StaticText object to set its position.

 Refer MouseClick.py
 When this program is run; the window is displayed with the ‘Hello’
StaticText label in the top left hand corner of the Frame (actually it is added
to the Panel, however the Panel fills the Frame in this example). If the user then
clicks the left mouse button anywhere within the Frame then the ‘Hello’ label
jumps to that location.

(vi) An Interactive wxPython GUI
 In this application we have a text input field (a wx.TextCtrl) that allows a user
to enter their name. When they click on the Enter button (wx.Button) the
welcome label (a wx.StaticText) is updated with their name. The ‘Show
Message’ button is used to display a wx.MessageDialog which will also contain
their name.
 The initial display is shown below for both a Mac and a Windows PC, note that
the default background colour for a Frame is different on a Windows PC than
on a Mac and thus although the GUI runs on both platforms, the look differs
between the two:

 If the user enters their name in the top TextCtrl field, for example ‘Phoebe’,
then when they click on the ‘Enter’ button the welcome label changes to
‘Welcome Phoebe’:
 If they now click on the ‘Show Message’ button then the wx.MessageDialog
(a specific type of wx.Dialog) will display a welcome message to Phoebe:
 Refer InteractiveGUI.py

9. PyDraw wxPython Example Application
(i) Introduction
(ii) The PyDraw Application
(iii) The Structure of the Application
(a) Model, View and Controller Architecture
(b) PyDraw MVC Architecture
(c) Additional Classes
(d) Object Relationships
(iv) The Interactions Between Objects
(a) The PyDrawApp
(b) The PyDrawFrame Constructor
(c) Changing the Application Mode
(d) Adding a Graphic Object

(v) The Classes
(a)The PyDrawConstants Class
(b) The PyDrawFrame Class
(c) The PyDrawMenuBar Class
(d) The PyDrawToolBar Class
(e) The PyDrawController Class
(f) The DrawingModel Class
(g) The DrawingPanel Class
(h) The DrawingController Class
(i) The Figure Class
(j) The Square Class
(k) The Circle Class
(l) The Line Class
(m) The Text Class

(i) Introduction
 This chapter builds on the GUI library presented in the last two chapters to
illustrate how a larger application can be built.
 It presents a case study of a drawing tool akin to a tool such as Visio etc.

(ii) The PyDraw Application
 The PyDraw application allows a user to draw diagrams using squares, circles,
lines and text.
 At present there is no select, resize, reposition or delete option available
(although these could be added if required).
 PyDraw is implemented using the wxPython set of components as defined in
version 4.0.6.

 When a user starts the PyDraw application, they see the interface shown above
(for both the Microsoft Windows and Apple Mac operating systems).
 Depending on the operating system it has a menu bar across the top (on a Mac
this menu bar is at the Top of the Mac display), a tool bar below the menu bar
and a scrollable drawing area below that.

 The first button on the tool bar clears the drawing area. The second and third
buttons are only implemented so that they print out a message into the Python
console, but are intended to allow a user to load and save drawings.
 The tool bar buttons are duplicated on the menus defined for the application,
along with a drawing tool selection menu, as shown below:

(iii) The Structure of the Application
 The user interface created for the PyDraw application is made up of a number
of elements (see below): the PyDrawMenuBar, the PyDrawToolbar containing
a sequence of buttons across the top of the window, the drawing panel, and the
window frame (implemented by the PyDrawFrame class).

 The following diagram shows the same information as that presented above,
but as a containment hierarchy, this means that the diagram illustrates how one
object is contained within another. The lower-level objects are contained within
the higher-level objects.

 It is important to visualize this as the majority of wxPython interfaces are built
up in this way, using containers and sizers.
 The inheritance structure between the classes used in the PyDraw application is
illustrated below. This class hierarchy is typical of an application which
incorporates user interface features with graphical elements.

(a) Model, View and Controller Architecture
 The application adopts the well-established Model-View-Controller (or MVC)
design pattern for separating out the responsibilities between the view element
(e.g. the Frame or Panel), the control element (for handling user input) and the
model element (which holds the data to be displayed).
 This separation of concerns is not a new idea and allows the construction of
GUI applications that mirror the Model-View-Controller architecture.
 The intention of the MVC architecture is the separation of the user display,
from the control of user input, from the underlying information model as
illustrated below.

 There are a number of reasons why this separation is useful:
 reusability of application and/or user interface components,
 ability to develop the application and user interface separately,
 ability to inherit from different parts of the class hierarchy.
 ability to define control style classes which provide common features
separately from how these features may be displayed.

 This means that different interfaces can be used with the same application,
without the application knowing about it.
 It also means that any part of the system can be changed without affecting the
operation of the other.
 For example, the way that the graphical interface (the look) displays the
information could be changed without modifying the actual application or how
input is handled (the feel).
 Indeed, the application need not know what type of interface is currently
connected to it at all.

(b) PyDraw MVC Architecture
 The MVC structure of the PyDraw application has a top-level controller class
PyDrawController and a top-level view class the PyDrawFrame (there is no
model as the top level MVC triad does not hold any explicit data itself). This is
shown below:
 At the next level down there is another MVC structure; this time for the
drawing element of the application. There is a DrawingController, with a
DrawingModel and a DrawingPanel (the view) as illustrated below:

 The DrawingModel, DrawingPanel and DrawingController classes
exhibit the classic MVC structure.
 The view and the controller classes (DrawingPanel and
DrawingController) know about each other and the drawing model,
whereas the DrawingModel knows nothing about the view or the controller.
 The view is notified of changes in the drawing through the paint event.

(c) Additional Classes
 There are also four types of drawing object (of Figure): Circle, Line, Square
and Text figures. The only difference between these classes is what is drawn
on the graphic device context within the on_paint() method. The Figure
class, from which they all inherit, defines the common attributes used by all
objects within a Drawing (e.g. point representing an x and y location and size).

 The PyDrawFrame class also uses a PyDrawMenuBar and a PyDrawToolBar
class. The first of these extends the wx.MenuBar with menu items for use
within the PyDraw application. In turn the PyDrawToolBar extends the
wx.ToolBar and provides icons for use in PyDraw.
 The final class is the PyDrawApp class that extends the wx.App class.

(d) Object Relationships
 However, the inheritance hierarchy is only part of the story for any object-
oriented application. The following figure illustrates how the objects relate to
one another within the working application.

 The PyDrawFrame is responsible for setting up the controller and the
DrawingPanel.
 The PyDrawController is responsible for handling menu and tool bar user
interactions.
 This separates graphical elements from the behaviour triggered by the user.
 The DrawingPanel is responsible le for displaying any figures held by the
DrawingModel.
 The DrawingController manages all user interactions with the
DrawingPanel including adding figures and clearing all figures from the
model. The DrawingModel holds list of figures to be displayed.

(iv) The Interactions Between Objects
 We have now examined the physical structure of the application but not how
the objects within that application interact.
 In many situations this can be extracted from the source code of the application
(with varying degrees of difficulty).
 However, in the case of an application such as PyDraw, which is made up of a
number of different interacting components, it is useful to describe the system
interactions explicitly.

 The diagrams illustrating the interactions between the objects use the following
conventions:
 a solid arrow indicates a message send,
 a square box indicates a class,
 a name in brackets indicates the type of instance,
 numbers indicate the sequence of message sends.
 These diagrams are based on the collaboration diagrams found in the UML
(Unified Modelling Language) notation.

(a) The PyDrawApp
 When the PyDrawApp is instantiated the PyDrawFrame in created and
displayed using the OnInit() method. The MainLoop() method is then
invoked. This is shown below:
class PyDrawApp(wx.App):
def OnInit(self):
""" Initialise the GUI display""“
frame = PyDrawFrame(title='PyDraw’)
frame.Show()
return True
# Run the GUI application
app = PyDrawApp()
app.MainLoop()

(b) The PyDrawFrame Constructor
 The PyDrawFrame constructor method sets up the main display of the UI
application and also initialises the controllers and drawing elements. This is
shown below using a collaboration diagram:

 The PyDrawFrame constructor sets up the environment for the application.
 It creates the top level PyDrawController. It creates the DrawingPanel and
initialises the display layout. It initialises the menu bar and tool bar.
 It binds the controllers menu handler to the menus and centers itself.

(c) Changing the Application Mode
 One interesting thing to note is what happens when the user selects an option
from the Drawing menu.
 This allows the mode to be changed to a square, circle, line or text.
 The interactions involved are shown below for the situation where a user
selects the ‘Circle’ menu item on the Drawing menu (using a collaboration
diagram):

 When the user selects one of the menu items the command_menu_handler
() method of the PyDrawController is invoked.
 This method determines which menu item has been selected; it then calls an
appropriate setter method (such as set_circle_mode() or
set_line_mode() etc.). These methods set the mode attribute of the
controller to an appropriate value.

(d) Adding a Graphic Object
 A user adds a graphic object to the drawing displayed by the DrawingPanel
by pressing the mouse button.
 When the user clicks on the drawing panel, the DrawingController
responds as shown below:

 The above illustrates what happens when the user presses and releases a mouse
button over the drawing panel, to create a new figure.
 When the user presses the mouse button, a mouse clicked message is sent to
the DrawingController, which decides what action to perform in response
(see above). In PyDraw, it obtains the cursor point at which the event was
generated by calling the GetPosition() method on the mouse_event.
 The controller then calls its own add() method passing in the current mode
and the current mouse location. The controller obtains the current mode (from
the PyDrawController using the method callback provided when the
DrawingController is instantiated) and adds the appropriate type of figure
to the DrawingModel.
 The add() method then adds a new figure to the drawing model based on the
specified mode.

(v) The Classes
 Note that the code imports the wx module from the wxPython library, e.g.
import wx

(a) The PyDrawConstants Class
 The purpose of this class is to provide a set of constants that can be referenced
in the remainder of the application.
 It is used to provide constants for the IDs used with menu items and toolbar
tools.
 It also provides constants used to represent the current mode (to indicate
whether a line, square, circle or test should be added to the display).

class PyDrawConstants:
LINE_ID = 100
SQUARE_ID = 102
CIRCLE_ID = 103
TEXT_ID = 104
SQUARE_MODE = 'square'
LINE_MODE = 'line'
CIRCLE_MODE = 'circle'
TEXT_MODE = 'Text'

(b) The PyDrawFrame Class
 The PyDrawFrame class provides the main window for the application. Note
that due to the separation of concerns introduced via the MVC architecture, the
view class is only concerned with the layout of the components:
class PyDrawFrame(wx.Frame):
""" Main Frame responsible for the layout of the UI.""“
def __init__(self, title):
super().__init__(None, title=title, size=(300, 200))
# Set up the controller
self.controller = PyDrawController(self)
# Set up the layout fo the UI
self.vertical_box_sizer = wx.BoxSizer(wx.VERTICAL)
self.SetSizer(self.vertical_box_sizer)

# Set up the menu bar
self.SetMenuBar(PyDrawMenuBar())
# Set up the toolbar
self.vertical_box_sizer.Add(PyDrawToolBar(self),wx.ID_ANY,
wx.EXPAND | wx.ALL, )
# Setup drawing panel
self.drawing_panel = DrawingPanel(self,self.controller.get_mode)
self.drawing_controller = self.drawing_panel.controller
# Add the Panel to the Frames Sizer
self.vertical_box_sizer.Add(self.drawing_panel, wx.ID_ANY,
wx.EXPAND | wx.ALL)
# Set up the command event handling for the menu bar and tool bar
self.Bind(wx.EVT_MENU, self.controller.command_menu_handler)
self.Centre()

(c) The PyDrawMenuBar Class
 The PyDrawMenuBar class is a subclass of the wx.MenuBar class which defines the
contents of the menu bar for the PyDraw application.
 It does this by creating two wx.Menu objects and adding them to the menu bar.
Each wx.Menu implements a drop down menu from the menu bar. To add
individual menu items the wx. MenuItem class is used.
 These menu items are appended to the menu. The menus are themselves
appended to the menu bar. Note that each menu item has an id that can be
used to identify the source of a command event in an event handler.
 This allows a single event handler to deal with events generated by multiple
menu items.

class PyDrawMenuBar(wx.MenuBar):
def __init__(self):
super().__init__()
fileMenu = wx.Menu()
newMenuItem = wx.MenuItem(fileMenu, wx.ID_NEW, text="New",
kind=wx.ITEM_NORMAL)
newMenuItem.SetBitmap(wx.Bitmap("new.gif"))
fileMenu.Append(newMenuItem)
loadMenuItem = wx.MenuItem(fileMenu, wx.ID_OPEN, text="Open",
loadMenuItem.SetBitmap(wx.Bitmap("load.gif"))
fileMenu.Append(loadMenuItem)
fileMenu.AppendSeparator()
saveMenuItem = wx.MenuItem(fileMenu, wx.ID_SAVE,text="Save",
saveMenuItem.SetBitmap(wx.Bitmap("save.gif"))

fileMenu.Append(saveMenuItem)
fileMenu.AppendSeparator()
quit = wx.MenuItem(fileMenu, wx.ID_EXIT,'&QuittCtrl+Q’)
fileMenu.Append(quit)
self.Append(fileMenu, '&File’)
drawingMenu = wx.Menu()
lineMenuItem=wx.MenuItem(drawingMenu,
PyDraw_Constants.LINE_ID,text="Line", kind=wx.ITEM_NORMAL)
drawingMenu.Append(lineMenuItem)
squareMenuItem = wx.MenuItem(drawingMenu,
PyDraw_Constants.SQUARE_ID,text="Square",
drawingMenu.Append(squareMenuItem)
circleMenuItem = wx.MenuItem(drawingMenu,
PyDraw_Constants.CIRCLE_ID,text="Circle",kind=wx.ITEM_NORMAL)

drawingMenu.Append(circleMenuItem)
textMenuItem = wx.MenuItem(drawingMenu,
PyDraw_Constants.TEXT_ID, text="Text", kind=wx.ITEM_NORMAL)
drawingMenu.Append(textMenuItem)
self.Append(drawingMenu, '&Drawing')

(d) The PyDrawToolBar Class
 The DrawToolBar class is a subclass of wx.ToolBar. The classes constructor
initialises three tools that are displayed within the toolbar.
 The Realize()method is used to ensure that the tools are rendered
appropriately.
 Note that appropriate ids have been used to allow an event handler to identify
which tools generated a particular command event.
 By reusing the same ids for related menu items and command tools, a single
handler can be used to manage events from both types of sources.

class PyDrawToolBar(wx.ToolBar):
def __init__(self, parent):
super().__init__(parent)
self.AddTool(toolId=wx.ID_NEW, label="New",
bitmap=wx.Bitmap("new.gif"),
shortHelp='Open drawing’,
self.AddTool(toolId=wx.ID_OPEN, label="Open",
bitmap=wx.Bitmap("load.gif"),
shortHelp='Open drawing’,
self.AddTool(toolId=wx.ID_SAVE, label="Save",
bitmap=wx.Bitmap("save.gif"),
shortHelp='Save drawing’,
self.Realize()

(e) The PyDrawController Class
 This class provides the control element of the top-level view.
 It maintains the current mode and implements a handler that can handle events
from menu items and from the tool bar tools.
 An id is used to identify each individual menu or tool which allows a single
handler to be registered with the frame.
 Refer Page No. 112

(f) The DrawingModel Class
 The DrawingModel class has a contents attribute that is used to hold all the
figures in the drawing. It also provides some convenience methods to reset the
contents and to add a figure to the contents.
class DrawingModel:
def __init__(self):
self.contents = []
def clear_figures(self):
self.contents = []
def add_figure(self, figure):
self.contents.append(figure)

 The DrawingModel is a relatively simple model which merely records a set of
graphical figures in a List.
 These can be any type of object and can be displayed in any way as long as they
implement the on_paint() method.
 It is the objects themselves which determine what they look like when drawn.

(g) The DrawingPanel Class
 The DrawingPanel class is a subclass of the wx.Panel class. It provides the
view for the drawing data model.
 This uses the classical MVC architecture and has a model (DrawingModel), a
view (the DrawingPanel) and a controller (the DrawingController).
 The DrawingPanel instantiates its own DrawingController to handle mouse
events.
 It also registers for paint events so that it knows when to refresh the display.

(h) The DrawingController Class
 The DrawingController class provides the control class for the top level
MVC architecture used with the DrawingModel (model) and DrawingPanel
(view) classes.
 In particular it handles the mouse events in the DrawingPanel via the
on_mouse_click() method. It also defines an add method that is used to
add a figure to the DrawingModel (the actual figure depends on the current
mode of the PyDrawController).
 A final method, the clear() method, removes all figures from the drawing
model and refreshes the display.

(i) The Figure Class
 The Figure class (an abstract superclass of the Figure class hierarchy) captures
the elements which are common to graphic objects displayed within a drawing.
 The point defines the position of the figure, while the size attribute defines
the size of the figure. Note that the Figure is a subclass of a wx.Panel and
thus the display is constructed from inner panels onto which the various figure
shapes are drawn.
 The Figure class defines a single abstract method on_paint(dc) that must be
implemented by all concrete subclasses. This method should define how the
shape is drawn on the drawing panel.

(j) The Square Class
 This is a subclass of Figure that specifies how to draw a square shape in a
drawing. It implements the on_paint() method inherited from Figure.
class Square(Figure):
def __init__(self, parent, pos, size):
super().__init__(parent=parent,pos=pos, size=size)
def on_paint(self, dc):
dc.DrawRectangle(self.point, self.size)

(k) The Circle Class
 This is another subclass of Figure. It implements the on_paint() method
by drawing a circle. Note that the shape will be drawn within the panel size
defined via the Figure class (using the call to super).
 It is therefore necessary to see the circle to fit within these bounds. This means
that the size attribute must be used to generate an appropriate radius.
 Also note that the DrawCircle() method of the device context takes a point
that is the centre of the circle so this must also be calculated.

(l) The Line Class
 This is another subclass of Figure.
 In this very simple example, a default end point for the line is generated.
 Alternatively, the program could look for a mouse released event and pick up
the mouse at this location and use this as the end point of the line.

(m) The Text Class
 This is also a subclass of Figure. A default value is used for the text to display;
however, a dialog could be presented to the user allowing them to input the
text they wish to display:
class Text(Figure):
def __init__(self, parent, pos, size):
super().__init__(parent=parent, pos=pos,
size=wx.Size(size, size))
def on_paint(self, dc):
dc.DrawText(text='Text', pt=self.point)

References
1. Madhavan, S.(2015). Mastering Python for Data Science. Packt Publishing Ltd.
2. Hunt, J. (2019). Advanced Guide to Python 3 Programming. Springer.
3. Slicing, https://towardsdatascience.com/slicing-numpy-arrays-like-a-ninja-e4910670ceb0
4. Reshaping,https://towardsdatascience.com/np-reshape-in-python-39b4636d7d91

Arrays with Numpy, Computer Graphics

Recommended

More Related Content

Similar to Arrays with Numpy, Computer Graphics (20)

More from Prabu U (20)

Recently uploaded (20)

Arrays with Numpy, Computer Graphics