1 Lecture 4: Output Models, Structured Graphics & Display PostScript Brad Myers Advanced User Interface Software

2 Drawing Operation Lots of parameters control the drawing of objects. X drawline has at least: 1.Window in which to draw 2.X1 3.Y1 4.X2 5.Y2 6.relative-p 7.line-width 8.draw function 9.background-color 10.foreground-color 11.cap style 12.line style (solid, dashed, double-dashed) 13.dash pattern 14.dash offset 15.stipple bitmap 16.stipple origin X 17.stipple origin Y 18.clip mask 19.plane mask (for drawing on specific planes)

3 Models for Parameters Two basic models: 1. Graphics package stores the state: Set Pen color, width, etc. Draw object Used by Macintosh, Display PostScript, etc. Example (pseudo code): SetColor(Red) MoveTo(70, 30) DrawTo(70, 200) + Fewer parameters to calls + Don't have to set properties don't care about - Interrupts, multi-processing, may result in unexpected settings

4 Models for Parameters, cont. 2. Each operation supplies full parameters Example: DrawLine(70,30,70,200, Red,......) X uses a "graphics context" to store them all, so not regular parameters to functions Amulet uses Am_Style objects Issue: Am_Red used as fill style vs. line style

5 Java model Parameters stored in the “graphics” object More like global model, since rarely create new graphics objects – just reuse the standard one and pass it around

6 Structured Graphics Saves a list of all the graphical objects Edit the screen by editing the saved list Also called "display list" or "retained object model" Provided by many toolkits and graphics packages early vector displays CORE (~1977), GKS (1985), PHIGS (1988) Optional in InterViews, CLIM, etc. Required in Amulet, Garnet, Rendezvous, etc.

7 Structured Graphics, cont. Advantages: Simpler to program with: don't call "draw" and "erase" Automatic refresh of windows when uncovered, etc. Automatic redisplay of objects when change and also of other overlapping objects

8 Structured Graphics Can Support Ability to support: high-level behaviors like move, grow, cut/copy/paste, etc. high-level widgets like selection handles constraints among objects automatic layout grouping: "Groups" in Garnet automatic PostScript printing tutors and monitors external scripting,...

9 Structured Graphics Disadvantages Disadvantages: Significant space penalties objects take up to 1000 bytes each imagine a scene with 40,000 dots (200x200 fat bits) Time penalties redisplay doesn't take advantage of special properties of data: regularity non-overlapping

10 Amulet and Garnet Videos Brad A. Myers, Dario Giuse, Andrew Mickish, Brad Vander Zanden, David Kosbie, Richard McDaniel, James Landay, Matthew Goldberg, and Rajan Parthasarathy. “The Garnet User Interface Development Environment.” Technical Video Program of the CHI'94 conference. SIGGRAPH Video Review, Issue 97, no. 13. ACM, ISBN Brad A. Myers, Richard G. McDaniel, Robert C. Miller, Alan Ferrency, Ellen Borison, Andrew Faulring, Andy Mickish, Patrick Doane, and Alex Klimovitski, “The Amulet User Interface Development Environment”. 8 minute video. Technical Video Program of the CHI'97 conference. ACM,

11 Redisplay Algorithms Redisplay everything each time Most appropriate for small numbers of objects, and if drawing is really quick compared to computation Used on the Macintosh and many others Used by Amulet Used by homework 2 May add clipping region and/or double-buffering

12 Redisplay only the affected areas of the screen Requires computing what areas are affected Garnet: 1.keep track of objects that change any "interesting" slot 2.compute the bounding box of all these changed objects in their old and new locations 3.assert this as the clipping region (must not self-intersect; Garnet uses 2 regions) 4.erase the area 5.go through objects from top-to-bottom, back to front draw those which overlap the bounding box for step 4: goes through all top level aggregates, and any children of the aggregates that intersect (recursively) Other techniques: quad trees

13 Issue: Anti-Aliasing Can’t assume clipping regions will work Can draw outside of the bounding boxes Mac OS X uses anti-aliasing and seems to redraw lots of windows

14 Optimizing Redraw Special additions in Garnet; not in Amulet "Fast-redraws" declared by the programmer objects drawn with XOR on top of other objects those that have a solid color behind them (nothing in front) so can be erased with a rectangle or by redrawing with the background color When change, have to be erased using old values No bounding boxes, no intersections, etc. "Virtual aggregates" only pretend to allocate storage for elements provide table and arbitrary layouts

15 Optimizing Redraw “Glyphs” in InterViews Calder, P.R. and Linton, M.A. “Glyphs: Flyweight Objects for User Interfaces,” in Proceedings UIST'90: ACM SIGGRAPH Symposium on User Interface Software and Technology Snowbird, Utah: pp Don't include position information, etc. so very small Much of the layout retained by the aggregate (computed as needed) Object can be reused in many places: e.g.: the letter "a" Used for a text editor Issue: why is location special? What about red vs. blue "a"s?

16 Display PostScript Used by NeXT, Galaxy PostScript™ developed by Adobe Systems Inc. to describe documents for printing Display PostScript™ is PostScript adapted for drawing on the screen Machine independent graphics model: colors are always full color coordinates are always in physical units (point, inch) Global graphics state containing all the parameters Coordinates from lower-left, in points

17 Display Postscript, cont. Drawing model: Define a "path" = any arbitrary shape or collection of shapes Then "stroke" or "fill" the path with current settings So all the "drawing" operations, actually add a primitive to the current path Note similarities to Java 2D model! Real PostScript is pure postfix (stack) language: moveto lineto dup dup sum arc stroke Display PostScript and Galaxy have C procedures with normal syntax: vdrawMoveTo(20, 40); vdrawLineTo(60, 80); vdrawArc(60, 80, 30, 45, 2*45); vdrawStroke();

18 Display Postscript, cont. Uses 2-D "transformation matrices" to control scaling, rotation, and translation. "Homogeneous coordinate matrices" allow all three to be combined in one matrix. Postscript represents matrix as: a b 0 c d 0 = [a b c d tx ty] tx ty 1

19 Display PDF used in OS-X Display-PDF Successor to Display Postscript Used in Macintosh OS X