1 / 52

G52GUI Course

Learn about principles of interactive software, development of interactive applications, history of interfaces, architectures, widgets, event-driven programming, and more. Explore input/output devices evolution and key milestones in human-computer interaction evolution.

bquick
Download Presentation

G52GUI Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. G52GUI Course Tom Rodden

  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/~tar/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 • Two substantial projects • Working code demonstrating good design of interactive appplication • Support Document • Principles of the deign and construction • User Manual • Strategy for user evaluation of the application • Coursework issues week 3 submission dates will be given in coursework • 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 Today keyboard scrolling glass teletype + cursor keys character terminal + mouse bit-mapped screen + microphone audio Soon? data gloves + suits head-mounted displays computer jewelry ubiquitous computing natural language autonomous agents cameras multimedia • The lesson • keyboards & terminals are just artifacts of today’s technologies • new input/output devices will change the way we interact with computers

  6. Input/output devices • Input Output Early days connecting wires lights on display paper tape & punch cards paper keyboard teletype Todaykeyboard scrolling glass teletype + cursor keys character terminal + mouse bit-mapped screen + microphone audio Soon? data gloves + suits head-mounted displays computer jewelry ubiquitous computing natural language autonomous agents cameras multimedia • The lesson • keyboards & terminals are just artifacts of today’s technologies • new input/output devices will change the way we interact with computers

  7. History of Interfaces From ImageShack web site //www.imageshack.us ; original source unknown

  8. Eniac (1943) • A general view of the ENIAC, the world's first all electronic numerical integrator and computer. From IBM Archives.

  9. History of HCIMark I (1944) • The Mark I paper tape readers. From Harvard University Cruft Photo Laboratory.

  10. History of HCIIBM SSEC (1948) • From IBM Archives.

  11. Stretch (1961) A close-up of the Stretch technical control panel. • From IBM Archives.

  12. Vannevar Bush (1945) • “As we may think” article in Atlantic Monthly • Identified the information storage and retrieval problem:new knowledge does not reach the people who could benefit from it • Foundations of Hypertext in the Memex System “publication has been extended far beyond our present ability to make real use of the record”

  13. Ivan Sutherland’s SketchPad-1963 PhD Sophisticated drawing package From http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg

  14. 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 From http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg

  15. The First Mouse (1964)

  16. 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

  17. 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 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

  18. X X X File Icon Folders Printer Xerox Star Birth of the Desktop

  19. Apple Lisa (1983) • based upon many ideas in the Star • predecessor of Macintosh, • commercial failure http://fp3.antelecom.net/gcifu/applemuseum/lisa2.html

  20. Interaction Principles INTERFACE

  21. Interaction Principles Input

  22. Interaction Principles Output

  23. Interaction Principles

  24. Interaction Principles Feedback Loop Fast feedback gives the impression of direct manipulation

  25. Simple example • How do set the temperature in a heating control • Increase temperature • Decrease temperature • Display the temperature

  26. Speech interface INTERFACE

  27. Output

  28. Input

  29. Input

  30. The window elf • Tangible interface used moving an elf ELF

  31. 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.

  32. + 70 -

  33. + 70 - + BUTTONPRESSED

  34. + 70 - + BUTTONPRESSED Temp =Temp+1

  35. + 70 - + BUTTONPRESSED Temp = Temp+1

  36. + 70 - 71 + BUTTONPRESSED Temp = Temp+1

  37. + 70 - 71 71 + BUTTONPRESSED Temp = Temp+1

  38. + 71 - 71 71 + BUTTONPRESSED Temp = Temp+1

  39. + 71 - 71 71 -BUTTONPRESSED

  40. + 71 - 71 71 + BUTTONPRESSED Temp = Temp-1

  41. + 71 - 71 70 + BUTTONPRESSED Temp = Temp-1

  42. + 71 - 70 70 + BUTTONPRESSED Temp = Temp+1

  43. + 71 - 70 70 + BUTTONPRESSED Temp = Temp+1

  44. 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

  45. JPanel 70 - + 70 - + JButton JText JButton Hierarchy of Components Hierarchy of Components SWING The interface components + 70 -

More Related