Computer Graphics

Graphical User Interfaces (GUIs)

Development Tools

What are Development tools? :

·        Tools that help a developer convert interface specifications into an interactive system and that support all phases of system refinement including prototypes, implementation, testing, maintenance, and enhancement

Conventional Development Tools

• Window Systems
  • Constrain each application or application component to a particular frame on the screen (the window)
•  Provide an:
  • Input model - user interaction sent to application as events
• Graphic model - output graphics
• Window management - window opened and closed, resized, moved, and iconified

• Presentation stype enforcement - e.g. X, Mac, Win XP, Win3.1

e.g. X Windows:

• Network-based - uses client-server architecture -Any Xapp, called a client, runs on any machine on the net
• Server process, which resides on workstation, mediates all usr input and display output
• Server translates person's input into X events and sends to appropriate client
• Client interprets events and sends graphics direct to server on how to update display

• Special client, called Window Manager, is responsible for overall look and feel

BUT:

• Windowing systems provide too low-level an abstraction for building an application

• Better - have toolkits, interface builders, user interface mgmt. Systems.

Toolkits - a variety of interface building blocks called widgets and language for putting together

e.g. Motif, Xview, Tk/Tcl , Java AWT (Swing), Python GUIs

·         Widgets - buttons, menus, sliders, scrollbars, text editors, canvases for graphics, terminal windows

·         Interfaces are built by using widgets, and programming languages (e.g Tk/Tcl)

·         Widget Limitations:

o        Widget sets are small and restrict interaction techniques

o        Widgets are good for creating control panels BUT poor for what is seen inside. (e.g. Tk/Tcl for visualization resorts to OpenGL for graphics)

o        Programming in an abstract language is not easy way for putting widgets together.

GTK (http://www.gtk.org/  )

·        GTK+ is a multi-platform toolkit for creating graphical user interfaces.

·        Offering a complete set of widgets

·        GTK+ is suitable for projects ranging from small one-off projects to complete application suites.

GTK+ is based on three libraries developed by the GTK+ team:

• GLib is the low-level core library that forms the basis of GTK+ and GNOME. It provides data structure handling for C, portability wrappers, and interfaces for such runtime functionality as an event loop, threads, dynamic loading, and an object system.
• Pango is a library for layout and rendering of text, with an emphasis on internationalization. It forms the core of text and font handling for GTK+-2.0.

• The ATK library provides a set of interfaces for accessibility. By supporting the ATK interfaces, an application or toolkit can be used with such tools as screen readers, magnifiers, and alternative input devices.

e.g. GIMP (http://www.gimp.org/  )

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

PyUI (  http://pyui.sourceforge.net/ )

PyUI is a user interface library written entirely in the high-level language python.

·        Modular implementation that allows drawing and event input to be performed by pluggable "renderers".

o       Makes PyUI very portable and scalable.

·        Can run in environments from hardware accelerated 3D surfaces to regular desktop windows.

·        PyUI was originally targeted as a User Interface for games, but it has evolved into a more general UI toolkit with applicability outside of games.

Features:

·         A set of useful GUI widgets including buttons, list boxes, menus, and scrollbars

·         Windows with resizability and movability

·         An extensible event system for interacting with the user interface

·         An interactive python console window

·         Layout managers similar so the Java Swing layout managers

·         Portability and scalability

Interactive Builders - provide a direct manipulation of graphical and interface toolkits. Some are integrated into toolkit environment, e.g.

• NeXT interface builder
• Visual Basic
• XF builder for Tk/Tcl
• Glade for GTK
• Visual Tcl : http://vtcl.sourceforge.net/

• Visual Gipsy for Tcl : http://www.prs.de/int/products/vg/index.html

• Implementer selects a widget from a palette, places it on the screen, sets its attributes through form filling, or direct manipulation. Links made as callbacks that are written as procedures.
• Allows developers to test interfaces as they are being constructed.

• Also can build interface prototypes with Macromedia Director and HyperCard

Examples:

Glade - a User Interface Designer for GTK+ and GNOME (http://glade.gnome.org/ )

·        Glade is a free user interface builder for GTK+ and GNOME, released under the GNU GPL License.

·        User interfaces designed in Glade are saved as XML, and by using the libglade library these can be loaded by applications dynamically as needed.

·        By using libglade, Glade XML files can be used in numerous programming languages including C, C++, Java, Perl, Python, C#, Pike, Ruby, Haskell, Objective Caml and Scheme. Adding support for other languages is easy too.

 

Java GUI Builders

Swing Designer: http://www.swing-designer.com/

·        Implements WYSIWYG GUI editing by dragging and dropping composites, layouts and controls.

·        Implemented as a bi-directional tool - directly generates Java code which can be changed in the graphical editor or directly in source.

o       All changes made directly to the source code will be reflected in the graphical designer.

·NetBeans: http://www.netbeans.org/

·

JFormDesigner: http://www.jformdesigner.com/

FormLayoutMaker: http://formlayoutmaker.sourceforge.net/

·        FormLayoutMaker builds JGoodies Java forms

·        JGoodies Forms ( http://www.jgoodies.com/freeware/forms/index.html ) framework helps layout and implement elegant Swing panels quickly and consistently

·        FormLayoutMaker provides a WYSIWYG tool that enables developers to quickly layout Java screens using the JGoodies FormLayout layout manager.

·        The result is an xml file containing all of the constraints.

Foam http://www.computersinmotion.com/

User Interface Management Systems (UIMS) - better said as "user interface development environments."
Separate Applications into 3 modules:

• Presentation Graphics - output to screen.
• Dialog Control - how input is passed to Applications

• Application Interface - how interface hooks into application code

Good - Application and Interface separated
Bad - Hard for designer to separate two in practice

Novel Approaches to Developer tools

Garnet - System and Tools - comprehensive toolkit:

• Easy manipulation of graphical objects and behavior
• Can create and edit application specific graphical objects and predefined widgets
• All objects are defined in Opal graphical toolkit
  • Opal implemented atop KR - prototype instance object oriented system
• If prototype is edited - all objects changed
• Constraints
  • Constrain-based tooled that allows developer to specify relationships among components (therefore at runtime system makes sure changes in one object are made in others)
• Interactors
  • Separate look from feel allows many different styles of menus.
• Programming by demonstration (PBD)

  • Examples of the interface are created and then the program is generated.

Sample Applications of Garnet:
http://www.cs.cmu.edu/afs/cs/project/garnet/www/screen-shots/screen-shots.html

Amulet - Garnet's Successor
http://www.cs.cmu.edu/afs/cs/project/amulet/www/amulet-home.html

User interface development environment for C++ and is portable across X11 on all kinds of Unix (Sun, Dec, HP, SGI, Linux, NetBSD, etc.), Microsoft Windows 95 and NT, and the Macintosh.

• Amulet helps create graphical, interactive user interfaces.

• Amulet includes features designed to make creation of highly-interactive, graphical, direct manipulation user interfaces significantly easier employing:

• prototype-instance object model
• constraints
• high-level input handling including automatic undo
• built-in support for animation
• gesture-recognition

• full set of widgets.

Tools for Entire Development Cycle

• Toolkits should support
  • Interface specification
• Implementation

• Testing

Alternate Approach - instead of "artifact centered" of existing tools USE "semantically driven user interface design."

Semantic model - interface developed as a declarative description and model becomes a plan that is used to let the developer manipulate in a way that is appropriate to its stage in the lifecycle.

e.g. IBM's Interactive Transaction System (ITS)

• Action layer - implements semantics of application functions independent of interface.
• Dialog layer - interface is a set of logica; frames containing objects that define flow of control between frames and actions.
• Style rules - defines the presentation and behavior of interactive widgets.

• Style programs - implement actual widgets.

NOTE: Each layer corresponds to work roles of the development team members:

• Application programmer - works with action layer
• Application expert - composes dialog rules
• Style programmers - build style programs

• Graphic designers - compose style rules

Groupware Toolkits
Supports and augments group work where conventional toolkits do not work
e.g. Groupkit Project - University of Calgary
http://www.cpsc.ucalgary.ca/grouplab/projects/GroupKit.html

• Used to build real-time applications such as drawing tools, editors and meeting tools that are shared simultaneously among several users.

• Used for prototyping groupware, investigating multi-user architectures and interfaces, and as a CSCW teaching tool.

Example:

• Diagram at right and code below fully define a "Hello World" program written in GroupKit.

• When one person presses the hello button, all people in the conference see that person say hello!

Example:

SharedNotes is a system that allows people to create and manipulate both personal and public notes between three devices: a personal digital, assistant (PDAs, in this case the Palm Pilot), a large public display, and their office computer (which acts both as a personal device and a system for remote collaboration).

• The left figure shows how a person would see their personal and public information on their PDA, while the right figure shows how this same information is reflected in the public display.

• Essentially, people can work on their PDAs or computers for personal work, bring some or all of their work into a meeting using a public display, work on the public display either directly or indirectly through their PDAs, and walk away with a record of all public contributions.

GUI Prototyping

DENIM http://dub.washington.edu/denim/

·        DENIM is a system that helps web site designers in the early stages of design.

·        DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

eg. http://dub.washington.edu/denim/denim_daily_files/page149.html

Video      Talk

Paper Prototyping –

·        Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work." – Paper Prototyping

·        Paper prototyping can be used for virtually any type of human-computer interface – software, Web site, hand-held device, or even hardware.

·        Its purpose is to get quick feedback from users while the design is still (literally) "on the drawing board."

·        Some paper prototypes are hand-drawn, while others use printed-out screen shots.

http://www.paperprototyping.com/index.html - The Book

http://www.snyderconsulting.net/us-paper.pdf

Kit

http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp