1. G52GUI Course
Guoping Qiu
04/12/2018

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
04/12/2018

3. Supporting Material Principles of Interactive Systems
Dan Olsen
PDF for full book available on-line
Course website
Dan Olsen BYU
Practice of Interactive Systems Development
Java Swing Tutorial
04/12/2018

4. Assessment Course is 100% Coursework Assessment Labs & Examples
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
04/12/2018

5. Input/output devices Input Output
Early days connecting wires lights on display
paper tape & punch cards paper
keyboard teletype
04/12/2018

6. Input/output devices Input Output
Today keyboard scrolling glass teletype
+ cursor keys character terminal
+ mouse bit-mapped screen
+ microphone audio
04/12/2018

7. Input/output devices Input Output
Now data gloves + suits head-mounted displays
Soon? Gesture/Handwriting ubiquitous computing
natural language autonomous agents
cameras multimedia
04/12/2018

8. Input/output devices Input Now Soon? Gesture Recognition
Gaming with gesture recognition
04/12/2018

9. Input/output devices Output Now Soon? Interactive display
04/12/2018

10. Input/output devices
Output
Now
Soon?
Eyewear displays
04/12/2018

11. Input/output devices The lesson
keyboards & terminals are just artifacts of today’s technologies
new input/output devices will change the way we interact with computers
04/12/2018

12. History of Interfaces
04/12/2018
From ImageShack web site // ; original source unknown

13. Eniac (1943)
A general view of the ENIAC, the world's first all electronic numerical integrator and computer.
04/12/2018
From IBM Archives.

14. History of HCI Mark I (1944) The Mark I paper tape readers.
04/12/2018
From Harvard University Cruft Photo Laboratory.

15. History of HCI IBM SSEC (1948)
04/12/2018
From IBM Archives.

16. Stretch (1961) A close-up of the Stretch technical control panel.
From IBM Archives.
04/12/2018

17. Ivan Sutherland’s SketchPad-1963 PhD
Sophisticated drawing package
04/12/2018
From

18. Introduced many ideas/concepts core to today’s 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
04/12/2018
From

19. The First Mouse (1964)
Over the next 6 years, he created a team, acquired funding, and started implementing his vision. Along the way, he and
his group invented the mouse, but as we will see this is
only a small part of the complete project.
04/12/2018

20. Xerox PARC, mid-’70s
04/12/2018

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
04/12/2018

22. History of HCI Commercial machines: Xerox Star-1981
First commercial personal computer designed for “business professionals”
First comprehensive GUI used many ideas developed at Xerox PARC
familiar user’s 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
04/12/2018

23. X
Xerox Star
File Icon
Birth of the Desktop
Folders
Printer
04/12/2018

24. Apple Lisa (1983) based upon many ideas in the Star
predecessor of Macintosh,
commercial failure
04/12/2018

25. Interaction Principles
INTERFACE
04/12/2018

26. Interaction Principles
04/12/2018

27. Interaction Principles
Feedback Loop
Fast feedback gives the impression of direct manipulation
04/12/2018

28. Simple example How do set the temperature in a heating control
Increase temperature
Decrease temperature
Display the temperature
04/12/2018

29. Speech interface
INTERFACE
04/12/2018

30. Output
04/12/2018

31. Input
04/12/2018

32. Input
04/12/2018

33. The window elf
Tangible interface used moving an elf
ELF
04/12/2018

34. 04/12/2018

35. 04/12/2018

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.
04/12/2018

37. + 70 -
04/12/2018

38. + 70 -
+ BUTTON PRESSED
04/12/2018

39. + 70 -
+ BUTTON PRESSED
Temp =Temp+1
04/12/2018

40. + 70 -
+ BUTTON PRESSED
Temp = Temp+1
04/12/2018

41. + 70 - 71
+ BUTTON PRESSED
Temp = Temp+1
04/12/2018

42. + 70 - 71 71
+ BUTTON PRESSED
Temp = Temp+1
04/12/2018

43. + 71 - 71 71
+ BUTTON PRESSED
Temp = Temp+1
04/12/2018

44. + 71 - 71 71
-BUTTON PRESSED
04/12/2018

45. + 71 - 71 71
+ BUTTON PRESSED
Temp = Temp-1
04/12/2018

46. + 71 - 71 70
+ BUTTON PRESSED
Temp = Temp-1
04/12/2018

47. + 71 - 70 70
+ BUTTON PRESSED
Temp = Temp+1
04/12/2018

48. + 71 - 70 70
+ BUTTON PRESSED
Temp = Temp+1
04/12/2018

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
04/12/2018

50. 70 + - The interface components 70 - JPanel JText JButton
Hierarchy of Components
JText
JPanel
JButton
SWING + 70 -
04/12/2018

51. The Behaviour Associated with Each Component
If Temp < Temp = Temp+ 1
Value to be shown is Temp + 70 -
If Temp > Temp = Temp - 1
The Behaviour Associated with Each Component
04/12/2018

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.
04/12/2018