From CS160 User Interfaces Fa06

Due: before class on Oct 18, 2006

10 Points

Contents 1 Overview 2 Requirements 3 Deliverables 4 Grading Guidelines 4.1 Functional Requirements (8 Points) 4.2 Comments (1 Point) 4.3 Design (1 Point) 5 Submission 5.1 Uploading Images 5.2 Add Link to Your Group's Page 5.3 Add Link to Your Finished Assignment 6 Help 6.1 Getting started 6.2 330 Soda lab machines 6.3 Printing your paper interface 6.4 Problem with starting the pen server 6.5 Find the COM port for your Anoto Bluetooth service 6.6 Compiling the Toolkit 6.7 The inkWell problem 6.8 Andrew Hao - Oct 13, 2006 02:59:54 pm 6.9 Bluetooth connection on lab machines 6.10 Oh noes! Eclipse can't find the main type!!!

Overview

The goal of this assignment is to help you become more familiar with the R3 toolkit before you begin coding your project idea. In this assignment you will use R3 to develop a simple Map application. You will complete this assignment as a group.

Requirements

Your application should allow a user to mark a route on a map using the Anoto Pen and determine the distance of that route based on the map's scale. There are two parts to this application, the paper user interface and the corresponding graphical user interface.

• The paper side: the paper interface, should show an image of a map rendered appropriately with Anoto patterns. This image can be a cropped screen shot from your favorite mapping site or some other image of a map (as long as it has a scale).
  You will also need to provide an appropriate means for letting the user set the scale of the map. One way to do this is to have a paper "button" that when tapped, lets the user trace over the scale on the map image. You then use the length of the stroke to determine the scale factor from pixels to meters. For example, if the stroke is 100 pixels long and the scale corresponds to 500 meters, then the scale factor is 1 pixel to 5 meters. But remember, your user is interacting with the paper interface, so it probably makes more sense to report the scale to the user in terms of inches to meters (or whatever units the map uses). R3 uses a conversion of 94 pixels to 1 inch.
  Here's an example of a possible paper interface. It's pretty bare and doesn't have instructions for the user. Think about what they need to know to use this interface!

• The GUI side: the GUI should mimic the layout of the paper design. In particular, it should display the same map image used in the paper interface and show the routes marked by the user. The GUI should also show the scale factor being used and the distance of the route the user marked. Following good design practices, you probably also want something in your GUI that will let the user know what state the UI is in (eg if the scale has been set) and what mode he/she is in (eg setting the scale, marking the map).

With respect to design, make sure that your interface is usable. We're not expecting you to do extensive iterative design and formal user testing, but it's good to show your app to at least one person outside the group.

We shall be providing you with substantial start up code for this assignment. In particular, much of the Swing side of the application is provided. You will only need to implement selected methods or blocks of code. The start up code can be downloaded [here]. The code is heavily commented. Comment blocks that begin with "\\YOUR JOB" describes the functionalities that you will need to add. Also, pay attention to comment blocks that begin with "\\HINT" and "\\NOTE".

Deliverables

You will submit the following:

• the source code (not the .class files)
• any data files (eg the map image file) needed for your app
• the PDF of your paper interface
• a readme file with:
  • group name
  • names of group members
  • instructions for building and running the code. For example, is there anything we need to configure or packages we need to include outside of R3.
  • any issues or comments.

Link your files to your group's wiki page so we can download it. Only a single submission is needed per group.

Grading Guidelines

Functional Requirements (8 Points)

• Printable paper interface (1 point)
• A way to set the scale (2 points)
• Showing the user's paper marks in the GUI (2 points)
• Distance calculation and display in the GUI (2 points)
• Feedback features on the GUI (eg UI state, scale factor) (1 point)

A precondition for any points in this part of the grade is code that compiles and runs. :) We should be able to use your code to print out a paper interface and use it with your GUI.

Comments (1 Point)

Please document your code!

Design (1 Point)

Remember, we'll be approaching your interface as new users (and you won't be there to tell us what to do!). So keep good design principles in mind when laying out your paper interface and GUI. They don't have to be perfect, but remember to try your interface with at least one user outside your group.

Submission

Uploading Images

To upload images to the wiki, first create a link for the image of the form [[Image:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image first, and then subsequently create a link to it on your wiki page.

Add Link to Your Group's Page

Edit your group's page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[HelloWorldMap-Group:ExampleGroup|Hello World Map]]

Again replace ExampleGroup with your group's name. Look at Group:ExampleGroup for an example. Then click on the link and enter the information about your assignment. Be sure to clearly address everything mentioned in the writing guidelines above.

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it here with your group name as the title link. The wiki syntax will look like this: *[[HelloWorldMap-Group:ExampleGroup|Group:ExampleGroup]]. Hit the edit button for this section to see how I created the link for the ExampleGroup.

• Group:ExampleGroup
• Group:GeoPhoto
• Group:ET
• Group:KMAT
• Group:S.E.K.S.
• Group:4Corners
• Group:GGiD
• Group:Melody
• Group:Team42
• Group:BluJay
• Group:O
• Group:BigBrother
• Group:J. S. & Associates
• Group:PollPrecision
• Group:Jigsaw
• Group:The Anototators

Help

Getting started

The first place to look is Ron's documentation, which is fairly comprehensive.

You can find the R3 Toolkit here.

Here are some files that are more of a pain to find: Java Comm 2.0 Java Advanced Imaging

330 Soda lab machines

• Where is Eclipse?
  • It's in the C:\temp directory (we didn't do it!). Feel free to make shortcuts.

• Using your Bluetooth adapter
  • 1) Try plugging the BT adapter in both USB ports
    • a) If the BT icon in the system tray turns from red to white, you've plugged into the right USB port
    • b) If a second BT icon shows up, plug into the other USB port

• Setting up your Eclipse workspace
  • Put your workspace (and therefore also R3) on your U: drive; there isn't enough space on your local profile
  • Click Windows->Preferences->Java->Installed JREs
    • Click the box for jre1.6.0

Printing your paper interface

• Printers that we know work
  • Soda 682 -> Color, print using GSView(needs after hours keycard access)
  • Soda 384 -> Black and White only, print using GSView
  • Soda 510 -> Black and White only, print using GSView
• If you try to print your PDF from Acrobat Reader, sometimes it hangs at around 90%. To get around this, after you create your PDF in R3, move it to your Unix space and run pdf2ps on it and then print the PS file. The conversion will take a long time (about 4 minutes for the Sketch UI), but the printing itself will be much faster.
• If printing from GSView, here's what you need to do to improve your pen's recognition of the dot pattern
  • Click Properties->Color->Settings
  • Change all the options from "black-only" to "4-colors"

Problem with starting the pen server

If you get the following (or some similar error) when you run your application:

PenStreamingConnection: Looking for COM5. Found {} Port COM5 not found. PenServer: Waiting for a java connection on port 11025... Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException at edu.stanford.hci.r3.pen.streaming.PenServer.startJavaServer(PenServer.java:163) at edu.stanford.hci.r3.pen.streaming.PenServer.startJavaServer(PenServer.java:146) at edu.stanford.hci.r3.pen.Pen.startLiveMode(Pen.java:176) at edu.stanford.hci.r3.pen.Pen.startLiveMode(Pen.java:161)

then there is a configuration problem with R3. R3 is defaulted to look for the bluetooth connection on COM5 and you can't programmatically specify a different port (ideally, it should detect the bluetooth connection automatically). But this is easy to fix: look under

edu.stanford.hci.r3.pen.streaming.PenServer

and find the declaration:

public static final String DEFAULT_SERIAL_PORT= "COM5";

change COM5 to whatever com port your bluetooth adapter is using. If you still find Java not being able to find the COM port then try the following:

1. Find the file javax.comm.properties which lives under <toolkit>\lib\comm, where <toolkit> is the path to where R3 is installed.
2. Copy the file
3. Navigate to your Java SDK directory (mine lives at C:\Program Files\Java\jdk1.6.0) and past it under <JavaSDK>\jdk1.6.0\lib

Find the COM port for your Anoto Bluetooth service

Right click the bluetooth icon on your system tray -> Local Services -> Find the service "ANOTO STREAMING" and find the COM port.

Compiling the Toolkit

To use the R3 Toolkit, you must have JDK6. You can download it from here. Make sure you have it installed properly. And of course, you will need to have downloaded the R3 toolkit; refer to Section 4 if you haven't done so.
Here is a list of the configurations that you will need to make in Eclipse to compile the R3 toolkit:

• First import the R3 toolkit into a project workspace
• Right click the toolkit -> Click Properties -> Click Java Build Path -> Click the Libraries Tab. There should be a list of libraries displayed under this tab. Scroll through the list until you find JRE System Library. If you see the version number [jre1.6.0] next to the library name, then you are done. If the version number isn't [jre_1.6.0], then remove the libary (click the library -> click the Remove button); click Add External Jar -> Navigate to the directory where JDK6 is installed (mine lives under C:\Program Files\Java\jdk1.6.0\jre) -> find and add jre1.6.x.jar
• You will also need to change the Compiler Compliance Level to at least JDK 5.0. If you haven't done so, following the following sequence of interactions:
  Right click the toolkit -> Click Java Compiler -> Click Java Build Path -> Click Enable Project Specific Settings -> Under Compiler compliance level change the existing version to 5.0.

The inkWell problem

The compiler will complain about the visibility of the inkWell object in the class CS160MapPanel. CS160MapPanel extends the InkPanel class in R3 but the inkWell field in InkPanel is set to private, meaning that we can directly access it CS160MapPanel (or in any subclass). To correct this, go to the InkPanel class and change the scope modifier from private to protected.

Andrew Hao - Oct 13, 2006 02:59:54 pm

Your compiler may complain of a dependency on the PaperHelloWorld project (this is only if you imported your project into Eclipse via an alternate method, and it thinks the .classpath file is its own). Right click on your CS160HelloWorld project, click to the "Properties" option. Click on the "Projects" tab and remove the dependency on PaperHelloWorld. You should be able to compile nicely.

(Now I haven't actually tried to see if this actually works, or if that PaperHelloWorld was actually required. Anybody know?

Comment: We tried removing the PaperHelloWorld and got the pdf creation to work, hopefully the rest works too but it's not runnable yet

Bluetooth connection on lab machines

It appears that bluetooth configurations are user account dependent, i.e. some of the configurations are associated with your profile. If you find the pen is refusing to connect to the bluetooth dongo by making this annoying buzz while the indicators flashing furiously in red, then please check/do the following:

1. Rigth click the bluetooth icon on the systems tray
2. Click Properties
3. Select the tab Local Services
4. If you don't see the local service named "ANOTO STREAMING" then add this service using the exact name. Make sure the service starts Automatically. Note the COM port number used by anoto - you will need to change the DEFAULT_SERIAL_PORT field in the PenServer class to this COM port.

Oh noes! Eclipse can't find the main type!!!

So there might be some issues when importing the starter code, since you have to rename the project from CS160HelloWorld to PaperHelloWorld. To do this properly:

• first import the starter code; the project will be named CS160HelloWorld
• go to the project properties and go to the build path
• in the tabs, remove any references to PaperHelloWorld
• after that, you can rename the project to PaperHelloWorld
• go back to build path and add PaperHelloWorld to the source list

---