6 GUI, but not messy!

Learning Objectives

  • Learn the meaning and significance of a GUI.
  • Learn to identify the important components of a GUI
  • Build a simple (non interactive!) GUI.

Learning Outcomes

Must Complete an annotated diagram detailing the main elements of a GUI. Copy and successfully run code creating a basic canvas (Level 5)

Should complete the above, and add more complex features to the GUI. (Level 5)

Could experiment with, and expand on features of the GUI above, changing the layout and format. (Level 6)

Keywords

Words to learn: GUI,  Interface, user-friendly,  console, WIMP.

Starter

Up to now, your programs have been very basic, as you have been interacting with a console.  This is a simple program which lets you type instructions into your computer.

This was originally the only way to communicate or interact with a home computer.

Click here to see an emulation of an early console-based computer operating system.

Let’s do a couple of simple tasks on this virtual computer running an early (1988) Microsoft operating system.

Type: mkdir myfiles
(This makes a new folder)

Now type: cd myfiles
(This opens  your new folder)

Now type: edit newfile.txt
(This creates a new text file and opens it in a word processor)

Now you can type some text into the word processor.  When you’ve done, you’ll want to save your file by pressing [alt] to access the menus, then using the arrow keys to navigate through the menu, and enter to select your choice.  Once done, you’ll need to open the menu again, and choose “Quit”

Now you can type: dir
(This will show you the contents of your current directory (this should be the file you’ve just made).

So, you’ve made a folder, opened it, made a text file, then looked inside the folder to see your new file.

Answer these questions:

  • How would this be different on a modern computer system?
  • Which method is quicker?
  • Which method is easiest?
  • What are the advantages of both methods?

Main

Ok,  We’ve seen that modern computers are intuitive and user-friendly (compared with their older counterparts) in part thanks to visual icons and instructions we can point at and select with a mouse pointer or similar. This type of control system is called a Graphical User Interface (GUI).

GUIs typically include:

  • Windows: regions of the screen used to display information
  • Icons: small pictures that are used to represent folders, software, etc.
  • Menus: lists of options the user can select from
  • A pointer: an arrow that can be moved around the screen and is used to select things

Because of this, a GUI used to be called a WIMP interface!!

GUIs will also include features like buttons, sliders, scrollbars, areas for text entry, and dialogues which pop-up under certain circumstances (like help information).

A lot of thought must go into designing a GUI.  After all, it is there to make life easier for the user.  A good user interface should:

  • be attractive and pleasing to the eye
  • allow the user to try out different options easily
  • be easy to use
  • use suitable colours for key areas
  • use words that are easy to understand aimed at the type of user
  • have help documentation

It should also consider the needs of the users. For example, young children are likely to prefer pictures to words and people with disabilities may benefit from particular input/output devices.

Task:

Choose from the following software:

  • Word
  • Photoshop
  • audacity (in ICT programs folder)
  • blender (in ICT programs folder)
  • Powerpoint

Open the program, take a screenshot of the interface, and carefully annotate it.

Back to Python!

Open python (IDLE), and DON’T start a new program.  This time, we’re going to type commands into the shell console directly. You’ll see the GUI build up little bit by little bit.

To begin type:
from tkinter import * 
and press enter … nothing happens!! Actually it does, behind the scenes. We’ve told Python that we want to use the “tkinter” GUI building commands.

win = Tk()
that’s better! a blank canvas, or window has appeared!  This has been saved to the variable “win”

let’s add buttons to the window…
b1 = Button(win, text=”Button One”)
b2 = Button(win, text=”Button Two”)
Again, nothing happens.  We’ve made the buttons, and tied them to the win canvas, but we haven’t said where to put them yet…

b1.pack()
b2.pack()
Make our buttons appear, as we add them to the first empty space on the canvas.It is a bit wasteful having each in its own row, so …

b2.pack(side=LEFT)
b1.pack(side=LEFT)

Should make the buttons appear side by side.  Squashed together? Try:

b1.pack(side=LEFT,padx=10)
b2.pack(side=LEFT,padx=10)

To add a little padding.

We don’t have much control over where the buttons appear.  We can make a grid though, and place our interface items in it, by saying which row/column we want to use.  Let’s make a new window…

win = Tk()
b1 = Button(win,text=”One”)
b2 = Button(win,text=”Two”)
b1.grid(row=0, column=0)
b2.grid(row=1, column=1)

Let’s add a label, to describe our button:

myLabel = Label(win, text=”This is a label”)
myLabel.grid(row=1,column=0)

Challenge:

Can you make the layout for the buttons on a simple calculator (numbers, symbols)? Take a screenshot when you finish, and stick it in your book!