WonderlandWhiteboard

Whiteboard Requirements

Basic Features

• freehand line
• straight line
• ellipse/circle
• rectangle/square
• text
• draw color
• fill color
• ability for multiple people to draw simultaneously
• ability to see remote pointers (telepointers) with associated names (Note: this is an app framework feature)

Advanced Features

• selection/edit shape
  • drawn shapes should be selectable and editable
  • can pick up shapes and move them around
  • lasso a region to select shapes
• copy/paste
• insert image
• fonts, font attributes (bold, italic, underline etc.)
• import/export
  • import images (png, jpg)
  • export in standard formats (jpg, png, svg, etc.)

Blue sky features

• Draw anywhere
  You don't open a rectangular app and draw on it, you should be able to draw anywhere in Wonderland:
  • in the "air"
  • on any surface - walls, floors become whiteboards
• Infinite whiteboard * whiteboard can grow infinitely * different users can draw in different parts of the infinite space and "visit" each other's spaces
• Shape recognition
  • 2D shapes can be "cleaned up" into precise geometric objects: sketch a rough square, convert to a straight-edged square
• Gesture recognition
  • scribble inside a region to fill it
  • sketch a shape and it transforms into a chair, table etc.
• Scripting support
  • ability to animate shapes (Lively Kernel integration?)
  • shapes have event -> action mappings (e.g., draw a square, make it behave like a button)
  • physics integration (gravity, springs, attractive/repulsive) forces (e.g., education: demonstrate Newton's laws, planetary orbits)
• 2D -> 3D
  • 2D shapes can be morphed into 3D objects
    • sketch a 2D square in the air and it inflates into a cube
    • draw a floor plan on the floor and it grows into a 3D building
    • sketch a 2D symbol for a chair and a 3D chair appears
    • draw a rectangle in a wall and turn it into a window
• Integration with web whiteboard
• Integration with physical whiteboard

Implementation options

Event based (current approach)

• PROs
  • current approach
  • deltas, small messages
  • could be extended to multi-user
  • same representation for new events and catching up (new users joining)
  • easy to erase

• CONs
  • Quite limiting. Requires one set colour and tool for app (not individual to user).
  • Saves a lot of information to recreate the state. Can take time and un-estimable heap.
  • This is not really the representation, but the way information is transferred, as DrawingSurface^? consists of BufferedImage^?.
  • Instead of recreating the state, may be better to save the BufferedImage^? on server and transfer that (Bitmap as above).

Bitmap Representation

• PROs
  • Fairly straight forward approach to recreate the behaviour of a real whiteboard.
  • Allows for basic geometric shapes, text and images.
  • Once added to the surface it is committed (cannot move/resize). Possible to copy a region, but what if the component overlaps others?
  • Provide undo support by reverting to a previous state?
  • General whiteboard eraser tool available (freely erase).

• CONs
  • Nothing novel.
  • Need to start from scratch.
  • Catchup requires alternative mechanism to avoid transferring bitmap in message

SVG w/ Batik

• PROs
  • Approach for drawing vector based graphics.
  • Geometric shapes, text and images.
  • Allows individual modifications, elements are separate. Grouping?
  • Save state as SVG file. Text-based, therefore small size?
  • Can also rasterize SVG to image format.
  • Many tools support import/export of SVG.
  • Include metadata, which is searchable?
  • SVG API already has events (such as click, etc.)

• CONs
  • doesn't completely simulate conventional whiteboard (no erase), not natural usage
  • No erase, but can provide bitmap-based freedraw (a la powerpoint)
  • start from scratch