Notes
Slide Show
Outline
1
How To Build a Sketch Based Interface
  • Tevfik Metin Sezgin
2
Consider This Device...
3
Our Vision
4
Our Model
  • The designer sketches with pen and paper
  • The observer interprets the sketch
  • The observer and designer interact
5
Demo
  • Conceptual mechanical design
  • Client
    • Low level sketch understanding
    • Recognize sketch as mechanical device
  • Server
    • Simulate the recognized device
6
How did we get here?
  • Low level sketch processing
  • Domain level recognition
  • Connection to existing design tools
7
Today’s goals
  • Learn to use the low level recognition toolkit
  • Learn how to build a simple sketching interface with the toolkit
  • Build your own interface to Xfig



  • And now, on to the Toolkit…
8
Toolkit functionality
  • Given a freehand stroke, generate a geometric primitive
    • Lines


    • Circles


    • Curves
9
The Toolkit doesn’t do…
  • Higher level recognition (i.e., can’t recognize squares, rectangles, domain specific shapes)
  • Gesture recognition


10
Terminology
11
Structure of an application
12
Package hierarchy
  • edu.mit.sketch.toolkit
    • Recognition related classes are here
  • edu.mit.sketch.geom
    • The geometry  package
  • edu.mit.sketch.ui
    • User interface related classes
13
Classes you will use most often
  • edu.mit.sketch.ui
    • SketchPanel
  • edu.mit.sketch.toolkit
    • StrokeData
    • SimpleClassifier


  • edu.mit.sketch.geom
    • GeneralPath
    • Polygon
    • Line
    • Ellipse
    • Point
    • Rectangle


  • Useful to skim:
    • edu.mit.sketch.ui.TicTacToe


14
edu.mit.sketch.ui
  • SketchPanel
    • extends javax.swing.JPanel
    • Gathers stroke data
    • Displays raw strokes as they are drawn
    • Has methods for adding and removing StrokeDataListeners
15
edu.mit.sketch.toolkit.StrokeData
  • This class holds and computes stroke related information such as points in the stroke, pen speed, curvature…
  • The constructor takes an array of points
  • SketchPanel creates this object after each mouse up event
16
edu.mit.sketch.toolkit.SimpleClassifier
  • Constructor takes a StrokeData object
  • Has a method int classify()
  • This method returns an int indicating the type of the approximation generated by the toolkit
  • Compare the result against the following using a switch statement
    • SimpleClassifier.LINE
    • SimpleClassifier.ELLIPSE
    • SimpleClassifier.POLYGON
    • SimpleClassifier.COMPLEX

17
edu.mit.sketch.toolkit.SimpleClassifier
  • One can also check for a particular type by
    • SimpleClassifier.isLine()
    • SimpleClassifier.isEllipse()
    • SimpleClassifier.isPolygon()
    • SimpleClassifier.isComplex()

18
edu.mit.sketch.toolkit.SimpleClassifier
  • Once the type is determined, the approximation can be accessed by
    • Line getLineApproximation()
    • Ellipse getEllipseApproximation()
    • Polygon getPolygonApproximation()
    • GeneralPath getComplexApproximation()
19
edu.mit.sketch.geom package
  • Line extends java.awt.geom.Line2D.Double
  • Ellipse extends java.awt.geom.Ellipse2D.Double
  • Polygon extends java.awt.Polygon (except must be closed explicitly)
  • Point extends java.awt.Point


  • GeneralPath extends java.lang.Object
    • Internally stores a java.awt.geom.GeneralPath  instance
  • Rectangle extends java.lang.Object
20
edu.mit.sketch.geom.GeneralPath
  • GeneralPath consists of a sequence of lines and curves
  • Curved portions are described by the end points (u, v) and two control points
21
Iterating over GeneralPath
  • PathIterator pi= general_path.getPathIterator( new AffineTransform() );


  • int   type           = 0;
  • float coefficients[] = new float[6];


  • while ( !pi.isDone() ) {
  • type = pi.currentSegment( coefficients );
  • switch ( type ) {
  • case pi.SEG_CUBICTO :
  • Util.printArray( coefficients, 6 );
  • break;


  • case pi.SEG_LINETO :
  • Util.printArray( coefficients, 2 );
  • break;
  • ...
  • default:
  • System.out.println( "Error" );
  • }


  • pi.next();
  • }


22
edu.mit.sketch.geom package cont’d.
  • GeneralPath, Line, Point, and Ellipse implement edu.mit.sketch.geom.GeometricObject
  • GeometricObjects are Paintable and Translatable
23
Putting it all together
24
How to get started
  • Compile
  • Try running TicTacToe
  • See how it uses the toolkit and the SimpleClassifier
  • Best strategy for understanding the control flow: find the handleStroke() method in TicTacToe.java
25
Final reminders
  • java 1.3
    • www.java.sun.com
  • Use the make facility
  • Things to watch out for
    • Make sure the class path is set up
    • There is a DLL for the windows platform
    • No static libraries for Unix or Linux

26
Resources
  • Javadoc documentation is included with toolkit
  • Questions: contact Metin Sezgin mtsezgin@ai.mit.edu