CMSC 498B: Developing User Interfaces - Spring 2005

Drawing Architectures

Drawing Architectures

Functions

  • objects with drawing order
  • position
  • selection
  • operations (delete, resize, open)
  • attributes (color, font, pen width, etc.)
    • How do you apply to multiple selection?
    • Do these attributes get stored in the base class, or in sub-classes?
  • redraw
  • pick
  • group

Interaction

  • click to select
  • marquee for multiple selection
  • shift/control-click for multiple selection
  • click-and-drag to drag
    • Some initial threshold movement is required before object starts moving
    • Cursor should stay on part of object that was clicked on
  • double-click to open (activate) object if not moved
  • manipulate control points

Data Structures

  • abitrary (i.e., asteroids)
  • list
  • hierarchy
  • table
  • text
  • rich text

Expense

  • storage
  • picking (hit detection)
  • rendering

Sample code

This code implements a basic arbitrary object drawing architecture with support for simple selection.

Java: Glyph.java   RectGlyph.java   Scene.java   Application.java
C#: DrawingObjects.zip

How would we:

  • Implement marquee selection? 
  • click-and-drag?
  • Animation?

Double Buffering

Without care, animated displays will flicker

Due to user seeing sequence of render actions - background cleared, then items drawn back to front

In Java, create offscreen buffer (or "back buffer").  Render onto that, and then copy entire back buffer to screen at once.  This eliminates flicker, and can be faster for some display hardware - but uses more memory.

Toolkits

Piccolo.NET - A zoomable structured object manager