Tablet Pen Overview

Scribe Pen API Advanced Sample Code

This set of sample code illustrates using advanced functionality of the HTC Scribe pen and integrating it with common development frameworks.

PenSignature Demo - uses pressure and velocity data, sends a signed image to a server.

Pen App Launcher Demo - registers application to be included in the system HTC Scribe pen menu.

HTC Pen and Unity 3D - reacts to pen button presses in the Unity 3D game framework.

HTC Scribe Pen and Titanium - react to pen input in the Titanium app framework.

HTC Scribe Pen and PhoneGap / Capture - react to pen input in the PhoneGap / Capture app framework.

PenSignature Demo Download

This demo demonstrates using the rich data provided by the HTC Scribe pen to for signatures. Running the app presents some content, in this case a local HTML page, that the user can sign. Data about the signature such as pressure and velocity can then be graphed. An image of the content with the signature on it can also be saved or uploaded.

Here is what the app looks like after a user has signed the content:

The layout for the signing activity, draw_signature.xml, uses a FrameLayout to overlap an HtcPaintingView on top of a WebView. This allows the content of the WebView to be shown while still allowing the user to visibly write on top of it using the pen:

<FrameLayout
    a:id="@+id/content"
    a:layout_width="match_parent"
    a:layout_height="0px"
    a:layout_weight="1"    
    >
    <WebView
        a:id="@+id/document_view"
        a:layout_width="match_parent"
        a:layout_height="match_parent"
        />                
    <com.htc.painting.engine.HtcPaintingView
        a:id="@+id/paintingView"
        a:layout_width="match_parent"
        a:layout_height="match_parent"
        />
</FrameLayout> 

To examine the signature data, pressure data is extracted using the HTC APIs:

final List<Stroke> strokes = paintingView.getStrokesFromReqGroup(0, false);
final float[] strokePointsPressure = new float[strokePointCount];
int strokePointsPressureIndex = 0;
for ( Stroke stroke : strokes ) {
    for ( MotionPoint point : stroke.getMotionPoints() ) {
        if ( 0 != point.getActionPressure() ) {
            // Pressure data is provided in a range from 0 to 1.0.
            strokePointsPressure[strokePointsPressureIndex++] = point.getActionPressure();
        }
    }
} 

The graphed pressure data looks like this:

The app also demonstrates how to upload images of the signed content to a server. This is done using the Apache HttpClient class to upload an image in the same manner as if the app were a web browser uploading a file. The client side code for this looks like this:

HttpClient httpClient = new DefaultHttpClient();
String destinationUrl = SERVER_LOCATION + SERVER_UPLOAD_PATH;
Log.i(TAG, "POST to " + destinationUrl);
HttpPost postRequest = new HttpPost(destinationUrl);
MultipartEntity reqEntity = new MultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE);
ByteArrayOutputStream bos = new ByteArrayOutputStream();
bitmapBeingUploaded.compress(CompressFormat.JPEG, 90, bos);
byte[] data = bos.toByteArray();
ByteArrayBody bab = new ByteArrayBody(data, "pensignaturedemo.jpg");
reqEntity.addPart("file", bab);
postRequest.setEntity(reqEntity);
HttpResponse response = httpClient.execute(postRequest); 

An example server for receiving the uploaded image is available in the PenSignatureServer demo. Uploaded signatures are listed by the server like this:

Pen App Launcher Demo Download

This sample code demonstrates adding your application to the HTC Scribe pen app launcher menu. This is a menu of applications that pops up when the pen button on the device is tapped:

To add your application to this menu, add this intent-filter element to the Activity you want started by the menu to your application's AndroidManifest.xml:

<intent-filter >
    <action android:name="android.intent.action.PEN_APPLICATION_LAUNCHER" />
</intent-filter> 

The pen menu will then update to display your application the next time the device is restarted.

HTC Pen and Unity 3D Download

This sample code demonstrates using the HTC Scribe pen with the Unity 3D game engine. The Unity 3D game engine is a cross platform game engine, enabling quick development of high quality, cross platform games. The engine supports running Android specific code via a plugin mechanism. This sample code is a plugin that acts on the HTC Scribe pen being pressed to the screen with the first button or second button pressed. The first button is used to trigger the same action as the menu button on the device. The second button is used to trigger the same action as the back button on the device.

The plugin is installed by placing the HtcPenAndUnity3d.jar and AndroidManifest.xml file from the root directory of this project into the Plugins/Android directory in the Unity project:

The AndroidManifest.xml file specifies that Unity should use an extension to the UnityPlayerActivity class that it usually uses to run the game called HtcPenAndUnity3dActivity:

<activity android:name="com.htc.sample.pen.unity.HtcPenAndUnity3dActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation"
    >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity> 

This extension calls classes to detect the presence of pen events and translate them into other events:

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    // If the current device supports the pen feature...
    if ( PenFeatureDetector.hasPenEvent(this) ) {
        // Then let the translator do something with it.
        PenEventTranslator.translateTouchEvent(this, ev);
    }
    // Pass all events on - treats of motion of pen just like finger.
    return super.dispatchTouchEvent(ev);
} 

To alter the behavior, import the HtcPenAndUnity3d project into Eclipse, change the Java code, and export the compiled classes into a new HtcPenAndUnity3d.jar to be copied into the Unity project.

HTC Scribe Pen and Titanium Download

This sample code demonstrates using the HTC Scribe pen with the Titanium framework. The Titanium framework allows writing mobile applications in JavaScript, which is then compiled into native code and published on multiple platforms. The Titanium framework allows running Android specific code via a module system. This sample code is a module that provides a way to check if the application is running on a device with the HTC Scribe pen and an Activity that can be started to read HTC Scribe pen data when that happens.

The included example Titanium project offers a button to start the HTC Scribe pen data capture screen. It checks if the HTC Scribe pen is available, and disables the button if it is not like in this screenshot of the application being run on a phone:

When run on a tablet, the same application leaves the button enabled:

This is done using the isHighLevelPenSdkSupported() method provided by the module.

var titaniumhtcpenmodule = require('com.htc.sample.pen.titanium');
window = Titanium.UI.createWindow({
    backgroundColor:'#47a',
    exitOnClose: true
});
var action = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.ACTION
});
action.addEventListener('click', function() {
    titaniumhtcpenmodule.launchPenCaptureActivity();
});
var supported = titaniumhtcpenmodule.isHighLevelPenSdkSupported();
action.enabled = supported;
action.title = "Start Pen Capture" 

The native Android HTC Scribe pen data capture screen Activity can then be started. This Activity just displays the current state of the HTC Scribe pen on the screen:

To modify the Java code that runs on Android devices, import the TitaniumHTCPenModuleAndroidComponent project into Eclipse, modify the code, and export the built classes as TitaniumHTCPenModuleAndroidComponent.jar into the lib directory of the TitaniumHTCPenModule project. This project can then be built as a Titanium module using the Titanium Ant build files and added to a Titanium app.

To use the module, it needs to be copied from the dist directory of the TitaniumHTCPenModule module project into the modules directory of the Titanium app. The Titanium app then needs to list the module in it's tiapp.xml file:

<modules>
    <module version="0.1">com.htc.sample.pen.titanium</module>
</modules> 

HTC Scribe Pen and Phone Gap / Capture Download

This sample code demonstrates using the HTC Scribe pen with the Phone Gap, now called Capture. Capture is a cross platform app development framework where developers write their apps in HTML and JavaScript. In this sample a plugin is used to provide Java code that runs only when the app is being run on Android devices. JavaScript in the Capture app can call the plugin to perform these functions:

  1. 1) Determine if the device being run on supports the HTC Scribe pen
  2. 2) Check if a recent JavaScript touchmove event was due to a pen, and if so the buttons that were held down and pressure used
  3. 3) Launch native Java code to display current pen data
  4. 4) Launch native Java code to show a painting surface and radial pen menu with many options

2) is useful for augmenting an existing Capture app to use pen input data as a shortcut. For example, pressure of the pen can be used to determine the thickness of a line. 3) uses the OpenSense SDK's low level pen event API to read data in a Java program. This approach is the most powerful, because you have access to all Android functionality, and determine the response to every piece of data sent from the pen. 4) Uses components the SDK provides, already written, for rich painting capability using the pen. It allows implementing painting, mark up, and signature applications quickly.

The CaptureScribePlugin Eclipse project in the ZIP file is a PhoneGap plugin that provides JavaScript APIs for the above functions. The CaptureScribeSample Eclipse project is an example PhoneGap app that uses the above plugin. The first button in the app starts an HTML5 Canvas element that uses JavaScript to allow painting. It reads in HTC Scribe pen data when available to augment the drawing experience, allowing the first button on the pen to change the color of the line being drawn, for example. The next two buttons launch native Java code designed to run only on devices with the OpenSense SDK. When run on a different device, like a phone, the buttons are disabled by JavaScript code that checks for HTC Scribe pen support using the plugin.

The application needs to reference the plugin in its res/xml/plugins.xml with a line like this:

<plugin name="PenPlugin" value="com.htc.sample.pen.phonegap.PenPlugin"/> 

The application can use provided methods from JavaScript like this:

document.addEventListener('deviceready', function() {

    var btn = document.getElementById("start-pen-capture");

    btn.onclick = function() {
        window.plugins.penPlugin.startPenCaptureActivity(
                function(r){printResult(r)},
                function(e){console.log(e)}
        );
    }

    btn.disabled=false;

}, true); 

Here is what the sample app looks like when started on a tablet with HTC Scribe pen support:

Here is the HTML5 Canvas sample with line size, color, and erasure capability using the HTC Scribe pen on a tablet:

Here is the HTC Scribe pen painting surface sample:

Here is the HTC Scribe pen event readout sample:

Here is what the sample app looks like when started on a phone:

Here is the HTML5 Canvas sample on a phone: