Sketch! A Drawing Application

Try out the demo.

  1. First, make sure you have a printer that's at least 600 dpi. Most modern laser printers can do the job.
  2. WARNING: This next step may slow down your machine. Using Adobe Reader (it's faster than Acrobat Pro), open data/Sketch/SketchUI_Patterned.pdf. Sometimes, Acrobat may hang, because it takes too long to render all the pattern. One trick I use is to zoom in a lot (or zoom out a lot) so that Acrobat renders more quickly. GSView tends to be more responsive when opening these complicated PDFs.
  3. If you zoom in, you will see the overlaid pattern.

  4. Print this PDF. If you can print the PDF without opening Acrobat, that'd be ideal, since Acrobat tries really hard to draw the pattern at interactive rates.

    Printing might take a while. A long while... do some situps while you wait. The reason it takes so long is that the pattern dots are PDF postscript circles... and there are LOTS of them. Your printer has to rasterize the PostScript code. Eww... Good thing you don't have to rasterize the PostScript.
  5. Pair your Nokia Pen with your PC, as described in the Streaming Tutorial. Your pen's streaming light should be blinking.
  6. Start the Sketch! application by Running the Java Application through Eclipse.
  7. On your printed page, you can draw on the main drawing area. The display on your monitor should say (in the status bar) that you have drawn N strokes on the page. When you are ready, draw a marking gesture UP in the marking menu area. This sends the drawing to the display.
  8. You can change colors by tapping the palette.
  9. You can undo by marking LEFT, and clear the screen by marking DOWN.


Let's walk through the design and coding of Sketch! All the files are already created, but here, we walk through the steps.

  1. We will walk through a demo of using the toolkit to create a simple paper-centric application, Sketch!.
  2. SketchUI.doc contains the user interface. I created it with Microsoft Word, and exported SketchUI.pdf using Word's Acrobat plugin.
  3. Check the main(...) function of It has three lines, two of which are commented out. To start adding regions to the PDF, make sure new Sketch(MODE_DESIGN_PDF); is the only line that is NOT commented out. Run the Sketch app.
  4. You should see the Acrobat Designer Launcher. It starts out gray, but if you drag a PDF to the gray area, it launches the Acrobat designer. To launch the designer, you must have Acrobat Pro installed on your system, along with our Acrobat plugin.

  5. Use the R3 Designer (Acrobat plugin) to add regions. Make sure you give each region a different name, so you can access and modify them later. We choose the name by right-clicking a region and setting the Author property to <TheRegion'sName>. Click the images below to see larger versions.

    Adding   Designer Name
  6. As you can see, currently the Designer only supports Rectangular regions. If you are interested in polygonal regions, file a feature request! =)
  7. When you are done designing the regions, click the purple Save Region Information button.

  8. Acrobat communicates the region information to our server, which saves the information to an XML file. You should see SketchUI.regions.xml once you are done.


  9. Now, save the PDF with your region annotations as a NEW file (e.g., SketchUI_WithRegions.pdf). If you overwrite the old file, your final patterned PDF will include all of your region annotations, making it look less cool.
  10. Go back to the main function and make sure new Sketch(MODE_RENDER_PDF); is the only line that is NOT commented out. Running the app will now render a new PDF file along with a new XML file, defining the pattern and pattern to sheet mapping.
  11. Finally, run the last line, new Sketch(MODE_RUN_APP);. Now, the Sketch! UI will pop up, and you will be able to interact with it using your printout.
  12. Clearly, you should not need to comment out lines of code every time you need to do something different with your app. In the next demo, I'll show you how to ask the PaperToolkit class to launch your app in an interactive fashion, so that you can decide between printing the PDF or running the real app at runtime.
  13. Let's take a look at the code in detail...
  14. <More to Come>
  15. ...
  16. We are done!

Ron B. Yeh
Stanford University