G52GUI Course

1
G52GUI Course

• Guoping Qiu

2
The Course

• The principles of interactive software
• Architectures
• Windowing Models
• Widgets
• Event Driven Programming
• Layout and Display
• Primitive Graphics
• The practice of interactive software
• Development of Interactive Applications
• Knowledge of JAVA Swing

3
Supporting Material

• Principles of Interactive Systems
• Dan Olsen
• PDF for full book available on-line
• Course website
• www.cs.nott.ac.uk/qiu/Teaching/G52GUI/
• Dan Olsen BYU
• http//icie.cs.byu.edu/cs456/CS456.html
• Practice of Interactive Systems Development
• Java Swing Tutorial
• http//java.sun.com/docs/books/tutorial/uiswing/

4
Assessment

• Course is 100 Coursework Assessment
• Set of simple examples given out during lectures
• One substantial individual project and one
  semester long group project
• Working code demonstrating good design of
  interactive application
• Support Document
• Principles of the deign and construction
• User Manual
• Strategy for user evaluation of the application
• Coursework and submission dates will be published
  in the course web page
• Labs Examples
• Labs support to course will act as surgeries for
  the assessed coursework
• You will be expected to download , run and extend
  the code provided in the Swing Tutorial as part
  of your learning

5
Input/output devices

• Input Output
• Early days connecting wires lights on display
• paper tape punch cards paper
• keyboard teletype

6
Input/output devices

• Input Output
• Today keyboard scrolling glass teletype
• cursor keys character terminal
• mouse bit-mapped screen
• microphone audio

7
Input/output devices

• Input Output
• Now data gloves suits head-mounted displays
• Soon? Gesture/Handwriting ubiquitous computing
• natural language autonomous agents
• cameras multimedia

8
Input/output devices

• Input
• Now
• Soon?

Gesture Recognition
Gaming with gesture recognition
9
Input/output devices

• Output
• Now
• Soon?

Interactive display
http//www.gizmowatch.com/entry/top-15-interactive
-display-technologies/
10
Input/output devices

• Output
• Now
• Soon?
• Eyewear displays

11
Input/output devices

• The lesson
• keyboards terminals are just artifacts of
  todays technologies
• new input/output devices will change the way we
  interact with computers

12
History of Interfaces
From ImageShack web site //www.imageshack.us
original source unknown
13
Eniac (1943)

• A general view of the ENIAC, the world's first
  all electronic numerical integrator and computer.

From IBM Archives.
14
History of HCIMark I (1944)

• The Mark I paper tape readers.

From Harvard University Cruft Photo Laboratory.
15
History of HCIIBM SSEC (1948)

• From IBM Archives.

16
Stretch (1961)

• A close-up of the Stretch technical control
  panel.

• From IBM Archives.

17
Ivan Sutherlands SketchPad-1963 PhD
Sophisticated drawing package
From http//accad.osu.edu/waynec/history/images/i
van-sutherland.jpg
18
Introduced many ideas/concepts core to todays
interfaces

• hierarchical structures defined pictures and
  sub-pictures
• object-oriented programming master picture with
  instances
• constraints specify details which the system
  maintains through changes
• icons small pictures that represented more
  complex items
• copying both pictures and constraints
• input techniques efficient use of light pen
• world coordinates separation of screen from
  drawing coordinates
• recursive operations applied to children of
  hierarchical objects

From http//accad.osu.edu/waynec/history/images/i
van-sutherland.jpg
19
The First Mouse (1964)
http//sloan.stanford.edu/MouseSite/Archive/patent
/Mouse.html
20

• Xerox PARC, mid-70s

21

• Xerox PARC, mid-70s

• Alto computer, a personal workstation
• local processor, bit-mapped display, mouse
• Modern graphical interfaces
• text and drawing editing, electronic mail
• windows, menus, scroll bars, mouse selection, etc
• Local area networks (Ethernet) for personal
  workstations
• could make use of shared resources

22
History of HCICommercial machines Xerox
Star-1981

• First commercial personal computer designed for
  business professionals
• First comprehensive GUI used many ideas developed
  at Xerox PARC
• familiar users conceptual model (simulated
  desktop)
• promoted recognizing/pointing rather than
  remembering/typing
• property sheets to specify appearance/behaviour
  of objects
• what you see is what you get (WYSIWYG)
• small set of generic commands that could be used
  throughout the system
• high degree of consistency and simplicity
• modeless interaction
• limited amount of user tailorability

23
Xerox Star

• Birth of the Desktop

24
Apple Lisa (1983)

• based upon many ideas in the Star
• predecessor of Macintosh,
• commercial failure

http//fp3.antelecom.net/gcifu/applemuseum/lisa2.h
tml
25
Interaction Principles
INTERFACE
26
Interaction Principles
27
Interaction Principles
Feedback Loop Fast feedback gives the impression
of direct manipulation
28
Simple example

• How do set the temperature in a heating control
• Increase temperature
• Decrease temperature
• Display the temperature

29
Speech interface
INTERFACE
30
Output
31
Input
32
Input
33
The window elf

• Tangible interface used moving an elf

ELF
34
(No Transcript)
35
(No Transcript)
36
Programming the Interface

• hierarchical structures of components or widgets
• object-oriented programming representing each
  component
• Event based input through mouse and keyboard
• Focus on the development of a windows based
  applications.

37

70
-
38

70
-
BUTTONPRESSED
39

70
-
BUTTONPRESSED
Temp Temp1
40

70
-
BUTTONPRESSED
Temp Temp1
41

70
-
71
BUTTONPRESSED
Temp Temp1
42

70
-
71
71
BUTTONPRESSED
Temp Temp1
43

71
-
71
71
BUTTONPRESSED
Temp Temp1
44

71
-
71
71
-BUTTONPRESSED
45

71
-
71
71
BUTTONPRESSED
Temp Temp-1
46

71
-
71
70
BUTTONPRESSED
Temp Temp-1
47

71
-
70
70
BUTTONPRESSED
Temp Temp1
48

71
-
70
70
BUTTONPRESSED
Temp Temp1
49
Implementing the interface

• Two main elements need coded in order to build
  the interface
• The hierarchy of components
• Made up of swing components
• The behaviour for each of the elements making up
  the interface
• Java code associated with each screen element

50
The interface components

70
-
51
If Temp lt 80 Temp Temp 1
Value to be shown is Temp

70
-
If Temp gt 60 Temp Temp - 1
The Behaviour Associated with Each Component
52
Next Step - Implementation

• Read chapter 1 in conjunction with these slides
• Java code for the temp controller Implemented in
  Swing available on website
• Download and run it
• Please Read in Conjunction with Swing Tutorial
• Consider why this is different from the sketch
• Next Step is to work through an similar example
  in Swing
• Prepare by reading Swing Tutorial and Chapter 3,4
  of the Olsen text.