Understanding Output in a User Interface

1
Understanding Output in a User Interface
2
Agenda

• Questions
• CoWeb, Olsen reading
• Quick reading review
• Historical motivation

3
Quick Reading Review

• Output models
• vector, raster, region
• All about fonts
• family, size, style
• Leading, ascent, descent

4
Historical Motivation

• Who was Ivan Sutherland?
• Why was he important?

5
Changing the Bias of the UI

• Before
• read-eval loop computer in charge
• (glass) teletype all threads mixed
• Now
• notification/event-based user in charge
• windows separation of user threads

6
Example Windowing Systems

• The X Window System
• Macintosh Toolbox
• MS Windows
• NEWS
• Interviews
• NEXT

7
Elements of a Windowing System
See DFAB, Ch. 10

• Device abstraction
• Programming to the abstract terminal
• virtual display abstraction
• multiplex physical input devices
• Multiple application control
• The window
• Input focus determination
• Output control

8
Goals of window systems

• Limited resource management
• Applications and screen real estate
• User control of screen
• Uniformity of UI
• look and feel
• Application integration
• minimum cut and paste

9
A Hierarchy of Windows

• Most UIs are described as a collection of
  hierarchically ordered windows or elements
  (called interactors).
• Geometric relationships (containment, overlap)
  are important.

10
What Counts as a Window

• In theory
• Everything that is rendered
• In practice
• Distinguish between windows (to applications) and
  controls and other widgets

11
Output in Toolkits

• output is organized around the interactor tree
  structure
• each object has own behaviors states
• can draw itself
• can do other tasks
• knows own capabilities and those of children
• generic tasks are specialized to specific
  subclasses

12
Output Tasks in Toolkits

• 3 main tasks
• draw / redraw
• damage management
• layout

13
Drawing

• each object knows how to create its own
  appearance
• local drawing
• traverse interactor tree
• request children to draw themselves

14
Damaging Windows

• windows suffer damage when they are obscured
  then exposed (and when resized)

15
Damage Management

• each object report its own damage to its parent
• collect damaged region at top interactor level
• arrange for redraw of damaged areas at the top

16
Redrawing

• when damage occurs, system schedules a redraw
• need to first ensure that everything is in the
  right place and is the right size

17
Drawing issue

• can not size and position as we draw
• look of first child might depend on last childs
  size
• arbitrary dependencies
• may not follow redraw order
• need to compute layout prior to starting to draw

18
Layout Details

• later in the course
• often tree structured
• each object has a local layout

19
Issue larger input surface than output surface

• input target is vague with respect to who should
  process it
• next time

20
The End
21
Software models of output

• Abstracts away the hardware component
• Stroke (or vector) model
• Earliest imaging models abstracted early
  hardware vector refresh
• Pixel (or raster) model
• Region model

22
Vector model

• Advantages
• can freely apply mathematical xforms
• Scale rotate, translate
• Only have to manipulate endpoints
• Disadvantages
• limited / low fidelity images
• wireframe, no solids, no shading

23
Raster model

• Most systems provide model pretty close to raster
  display hardware
• integer coordinate system
• 0,0 typically at top-left with Y down
• all drawing primitives done by filling in pixel
  color values

24
Region model

• All drawing modeled as placing paint on a surface
  through a stencil
• Stencil modeled as closed curves (e.g., splines)
• Postscript model is based on this approach
• Dominant model for hardcopy, but not screen

25
Region model
return

• Advantages
• Resolution device independent
• does best job possible on avail HW
• Dont need to know size of pixels
• Can support full transformations
• rotate scale
• Disadvantages
• Slower
• Less and less of an issue
• But interactive response tends to be dominated by
  redraw time
• Much harder to implement

26
Fonts and drawing strings

• Font provides description of the shape of a
  collection of chars
• Shapes are called glyphs
• Plus information e.g. about how to advance after
  drawing a glyph
• And aggregate info for the whole collection

27
Fonts

• Typically specified by
• A family or typeface
• e.g., courier, helvetica, times roman
• A size (normally in points)
• Origin 72 per French inch (!)
• Actually 72.27 points per inch
• A style
• e.g., plain, italic, bold, bold italic

28
Reference point and baseline

• Each glyph has a reference point
• Draw a character at x,y, reference point will end
  up at x,y (not top-left)
• Reference point defines a baseline

29
Width advance width

• Each character has a bounding box width
• Each glyph also has an advance width
• Where reference point of next glyph goes along
  baseline

30
Ascent and descent

• Glyphs are drawn both above and below baseline
• Distance below descent of glyph
• Distance above ascent of glyph

31
Standard ascent and descent

• Font as a whole has a standard ascent and
  standard descent
• Also known as max ascent and max descent

32
Leading

• Leading space between lines of text
• Pronounce led-ing after the lead strips that
  used to provide it
• space between bottom of standard descent and top
  of standard ascent

33
Height

• Height of character or font
• ascent decent leading
• not standard across systems on some systems
  doesnt include leading (but does in AWT)

34
FontMetrics
return

• Objects that allow you to measure characters,
  strings, and properties of whole fonts
• for chars Strings
• also char and byte arrays
• for whole fonts