Graphical User Interfaces

Using Python `tkinter`

Dr Ian Cornelius

Hello

Hello (1)

Learning Outcomes

Understand the concept of GUI and their purpose in Python
Demonstrate knowledge on how to use GUI widgets in a body of work

Graphical User Interfaces

Graphical User Interfaces (1)

Graphical User Interfaces is often abbreviated to GUI
Helps a user to interact with the software through the use of visual indicators
To-date you have created applications that are procedural in pattern
- i.e. it follows a series of steps in a pre-determined pattern
GUIs are different to Command-Line Interfaces (CLI)
- a CLI will perform a series of tasks in a pre-determined order
- a GUI will wait for a series of inputs from the user
  - any tasks performed are in control by the user

graph LR;
    id0(start) --> id1((S1)) --> id2((S2)) --> id3((S3)) --> id4(end);

The term graphical user interface(s) is often abbreviated to GUI due to the long nature and tediousness of having to repeatedly say “graphic user interface”. They are commonly used to assist users by providing an interface, so they can interact with the software through a form of visual indicators.

As ethical hackers and cybersecurity enthusiasts, you may be accustomed to performing alot of your work through a command-line driven interface. However, there are some users out there who prefer a graphical representation, as they find it easier to switch between things.

To date, you have generally created applications/scripts that are written in a procedural manner, that is that they follow a series of steps in a pre-determined manner. This may have been mitigated by the use of a menu-driven system provided in the command-line interface, but generally a lot of the work just runs through the code sequentially.

For example, consider the diagram on the screen. We have our start state, and we transition to S1 which could be asking the user for an input. Once the input has been received, we move onto state S2 which will do some processing of the data. Once the processing has been completed, we can finally move onto state S3 which will format out data, and once this has finished we have finished our script execution.

Graphical User Interfaces (2)

Event Driven Programming

Event driven programming is where a program reacts to events
An event has some sort of action that is associated to it
- the order and frequency of an event is unpredictable
Event driven programming does not have a predefined sequence of actions to be performed
- nor does it have a pre-defined end

graph LR;
    id0(start) --> id1((S1)) <--> id2((S2)) <--> id3((S3));
    id1((S1)) <--> id5((S4));
    id5((S4)) <--> id2((S2));
    id3((S3)) --> id4(end);
    id2((S2)) --> id4(end);
    id5((S4)) --> id4(end);

GUIs operate under the guise of event driven programming, and this is where a program will react to events that are being actioned. For example, when a user clicks on a button and a certain task is performed. It is only performed when the user interacts with the button.

An event will have some sort of action that will be associated to it, and the order and frequency of an event is often considered to be unpredictable as we do not know when the event will be called by the user and how often. With this type of programming, there is no predefined sequence of events or actions to be performed.

Let’s consider our diagram on the screen, we can see that we have our start state that leads into state S1. However, from this state we could transition to S2 or S4 depending upon the nature of what is being done, or what the user clicks. However, if we go to S4 we reached the end state, whereas S2 could transition to the end state or to another state known as S3. Therefore, it is entirely by choice in how we can reach the end state; there is no sequential transition to it.

Graphical User Interfaces (3)

GUI Programming

GUIs consist of the following structure:
- a selection of icons and widgets displayed to the user, organised inside a window
- functions that will process user and application events
- association of user events with specific functions
- an infinite conditional statement to process user events
Python does not support GUI or event driven programming natively
GUIs are implemented using an additional library
- i.e. tkinter, PySide, and wxPython

Full List of Additional GUI Libraries

When it comes to creating a GUI, there is a key structure that you need to follow. For example, a typical GUI would often be compromised of a selection of icons and widgets which are displayed to the user, these will often be organised inside a window.

Functions will exist that will process both user and application events. For example, if a user was to click on a button widget then some event/function will be performed. This leads into my third bullet point that user events must be associated with a specific set of functions. Finally, you will also want to consider using an infinite conditional statement, i.e. while True to listen for and process user events.

When it comes to creating a GUI interface in Python, there is no native method of doing so. Therefore, external libraries are required to construct a GUI interface. Luckily, for every Python installation, there is an included library to assist you with this, and that is tkinter… more on this shortly. However, tkinter is not the only library this is available. There are other such as PySide and wxPython that are available. I have included a link to a full list of additional Python GUI libraries that are available if you wish to use an alternative to tkinter.

`tkinter` Module

`tkinter` Module (1)

For this module, you will be introduced to tkinter
- a GUI module that is pre-installed with Python
- an abbreviation for TK Inteface
Requires loading the library/module tkinter to be used

import tkinter

tkinter is a platform independent package that consists of a variety of GUI elements
- e.g. button, label, menu, frame etc.
- the GUI elements are often referred to as widgets
Provides an object-oriented interface to the GUI toolkit

For the purpose of this module, and the development of GUIs, we shall be using the tkinter library. As I have said beforehand, you are free to use an alternative library/module if you wish to do so. However, the onus is upon you to learn how to use the library and limited support will be provided in lab sessions.

Handy for us, the tkinter module is preinstalled when you install the Python interpreter on your system. Therefore, in order to use the library it is a simple task of importing it. The library is platform-agnostic, meaning that it can work on various operating systems such as macOS, Linux and Windows. It consists of a variety of different GUI elements such as: buttons, labels, menus and frames etc. These elements are referred to as widgets.

tkinter is a useful module, as it provides a method of building a GUI following an object-oriented methodology.

`tkinter` Module (2)

`tkinter` Widgets i

The module consists of 15 widgets to aid in building a GUI

Widget	Description
Button	Displays a button in your application.
Canvas	Enables you to draw shapes, such as lines, circles and rectangles.
Check Button	Can be used to display a number of options as a checkboxes. The user is able to select multiple options at a time.
Entry	Displays an input field for a single line of text. Allows a user to enter data.
Frame	This is a container, and is where all other widgets will be organised.
List Box	Provides a list of options to a user.

`tkinter` Module (3)

`tkinter` Widgets ii

Widget	Description
Menu	Provides a method to display various commands to the user. The commands themself are stored in a Menu Button.
Menu Button	Used to create a menu in your application.
Message	Displays an input field to display multi-line text.
Radio Button	Displays a number of options to the user as a radio button. The user can only select one option at a time.

`tkinter` Module (4)

`tkinter` Widgets iii

Widget	Description
Scale	Used to display a slider to the user.
Scrollbar	Provides scrolling capability to various widgets, i.e. list-boxes and messages.
Text	Can be used for the user to insert multi-lines of text to the user.

`tkinter` Module (5)

`tkinter` Widgets iv

Widget	Description
Top Level	Used to provide a separate window container.
Spin Box	Displays a fixed number of values to the user for selection.
Paned Window	A container that may contain any number of panes that are arranged horizontally or vertically.
Label Frame	A simple container that acts as a spacer or container for complex layouts.
Message Box	Enables the developer to display messages to the user.

`tkinter` Module (6)

Each widget will consist of an attribute
- an attribute is an underlying method/function of a widgets instance
There are a standard list of attributes available for each widget:
1. Dimensions
2. Colours
3. Fonts
4. Anchors
5. Relief Styles
6. Bitmaps

`tkinter` Module (7)

Dimensions

A variety of dimensions for a widget can be described using different units
- a dimension could be: length, width, height etc.
If a dimension of a widget is set as an integer, it is assumed to be in pixels
A particular measurement type can be set by using a string literal

Measurement Type	Example
Centimeter	`"1c"`
Inch	`"1i"`
Millimeter	`"10mm"`

`tkinter` Module (8)

Colours

Specifying colours can be achieved in one of two ways:
1. Use a string to specify the red, green and blue (RGB) values in hexadecimal
2. Use a locally defined color name

Method 1: Hexadecimal Values

Strings are used to define the red, green and blue (RGB) values in a hexadecimal format
- #rgb four bits per colour, i.e. #fff is white
- #rrggbb eight bits per colour, i.e. #000000 is black
- #rrrgggbbb twelve bits per colour, i.e. #000fff000 is green

Method 2: Defined Colour Name

Locally defined names for a colour can be used
- i.e. 'white', 'black', 'red', 'green'

`tkinter` Module (9)

Fonts

Specifying a font can be done in one of two ways

Method 1: Tuple Format

Tuples can be used to store the font family, size and formatting style

# 0                 # 1         # 2
('Helvetica',       '16',       'bold underline')

Index	Definition
0	Defines to the font family
1	Defines the font size
2	Defines to the formatting of the text

Our third attribute is the font attribute, and with this attribute we can specify the following:

font family
font size
and, the formatting style, i.e. will it be bold, italic or underlined?

There are two methods of going about to do this, the first method uses a tuple which would store each of the above; and an example has been provided on the screen. The tuple consists of three indices, 0, 1 and 2 and each one of these refers to a particular font property. Index zero for example defines the family of the font style to be used, whilst index one defines the size of the font (in points) and finally, index three defines the style of our text; in this instance it will be bold, and underlined.

`tkinter` Module (10)

Fonts continued

Method 2: Font Objects

Font objects can be created using the tkFont module
Use the constructor of the Font class and a variety of options to change the formatting

Option	Definition
`family`	Defines the font family to be used as a string
`size`	Defines the font size
`weight`	`bold` for bold formatting, `normal` for standard formatting
`slant`	`italic` for italic formatting, `roman` for standard formatting
`underline`	`1` for underline formatting, `0` for no underline
`overstrike`	`1` for overline formatting, `0` for no over-strike

An example:

import tkFont
font1 = tkFont.Font(family='Helvetica', size=16, weight='bold', underline=1)

However, the font attribute can also be defined by using the tkFont module. This module uses an object-oriented approach for declaring the properties of a font, and uses the Font class, with a variety of arguments to change the formatting.

The list of arguments that can be used are provided in the table in the screen. You can see that you can adjust a variety of different things, such as the font family, size, weight and whether an underline or over-strike should be provided.

This method of setting the font is far more intuitive compared to the previous method as you have a few additional options available for changing the style of the text.

`tkinter` Module (11)

Anchors

Anchors are constants to control where items are positioned relative to their context
- i.e. an anchor can specify where a widget is located inside a frame
The constants are given as a compass point
- i.e. north is top and west is left

`tkinter` Module (12)

Relief Styles

Provides a simulated three-dimensional effect around the outside of a widget
The width of the borders are dependant upon the borderwidth option

`tkinter` Module (13)

Bitmaps

Bitmaps can be used to add icons to buttons etc.

Bitmap Value	Icon	Bitmap Value	Icon
`error`		`gray75`
`gray50`		`gray25`
`gray12`		`hourglass`
`info`		`questhead`
`question`		`warning`

Your own bitmap icons can also be used, using the file extension .xbm
Instead of using a string from the table above, provide a string with the following:
- @ symbol
- path to the bitmap file

@directory/file_name.xmb

Goodbye

Goodbye (1)

Questions and Support

Questions? Post them on the Community Page on Aula
Additional Support? Visit the Module Support Page
Contact Details:
- Dr Ian Cornelius, ab6459@coventry.ac.uk

Graphical User Interfaces

Using Python tkinter

Dr Ian Cornelius

Hello

Hello (1)

Learning Outcomes

Graphical User Interfaces

Graphical User Interfaces (1)

Graphical User Interfaces (2)

Event Driven Programming

Graphical User Interfaces (3)

GUI Programming

tkinter Module

tkinter Module (1)

tkinter Module (2)

tkinter Widgets i

tkinter Module (3)

tkinter Widgets ii

tkinter Module (4)

tkinter Widgets iii

tkinter Module (5)

tkinter Widgets iv

tkinter Module (6)

Widget Attributes i

tkinter Module (7)

Widget Attributes ii

Dimensions

tkinter Module (8)

Widget Attributes iii

Colours

Method 1: Hexadecimal Values

Method 2: Defined Colour Name

tkinter Module (9)

Widget Attributes iv

Fonts

Method 1: Tuple Format

tkinter Module (10)

Widget Attributes v

Fonts continued

Method 2: Font Objects

tkinter Module (11)

Widget Attributes vi

Anchors

tkinter Module (12)

Widget Attributes vii

Relief Styles

tkinter Module (13)

Widget Attributes viii

Bitmaps

Goodbye

Goodbye (1)

Questions and Support

Using Python `tkinter`

`tkinter` Module

`tkinter` Module (1)

`tkinter` Module (2)

`tkinter` Widgets i

`tkinter` Module (3)

`tkinter` Widgets ii

`tkinter` Module (4)

`tkinter` Widgets iii

`tkinter` Module (5)

`tkinter` Widgets iv

`tkinter` Module (6)

`tkinter` Module (7)

`tkinter` Module (8)

`tkinter` Module (9)

`tkinter` Module (10)

`tkinter` Module (11)

`tkinter` Module (12)

`tkinter` Module (13)