Samsung Electronics

S Pen SDK 2.0.1 Tutorial

with Sample Code

Page | 1
Contents
1. Introducing the S-Pen SDK ..................................................................................................... 4
1-1. About the S-Pen SDK ................................................................................................... 4
1-2. Packages in the S-Pen SDK .......................................................................................... 4
2. Setting up the S-Pen SDK ....................................................................................................... 5
2-1. The S-Pen SDK ............................................................................................................. 5
2-2. Installing the S-Pen Library to an Android project ...................................................... 5
3. Getting Started with the Sample Code .................................................................................. 6
3-1. Sample Code: Example 1 ............................................................................................ 6
3-2. The CanvasView Class ................................................................................................. 8
3-2-1. Initializing the CanvasView .............................................................................. 8
3-2-2. Changing the mode for the CanvasView ......................................................... 9
3-2-3. The Undo/Redo operations in the CanvasView............................................. 10
3-2-4. Saving/Loading Drawings .............................................................................. 12
3-2-5. Zooming In and Out ....................................................................................... 13
3-2-7. Setting the Background ................................................................................. 15
3-3. The SettingView Class ............................................................................................... 15
3-3-1. Initializing the SettingView ............................................................................ 15
3-3-2. Set the SettingView to the CanvasView ........................................................ 16
3-3-3. Showing/Closing the SettingView ................................................................. 16
3-3-4. Making Sure That the Settingview on the Screen is Being Viewed ............... 17
3-3-5. Pen/Eraser SettingView ................................................................................. 18
3-4. The PenSettingInfo Class ........................................................................................... 19
3-4-1. Initializing the PenSettingInfo........................................................................ 19
3-4-2. Using the OnSettingInfoChangedListener listener ........................................ 19
3-4-3. Replacing the CanvasView’S-PenSettingInfo with a Custom Object ............. 20
3-5. The SCanvasView Class ............................................................................................. 20
3-5-1. Initializing the SCanvasView .......................................................................... 20
3-5-2. Basic Animation Functions ............................................................................ 21
3-5-3. Using onPlayCompleteListener ...................................................................... 23
3-5-4. Using onPlayProgressChangeListener ........................................................... 24
3-5-5. Adding Text to the Canvas ............................................................................. 24
3-5-6. Adding Images to the Canvas ........................................................................ 26
3-5-7. Using the onSelectChangeListener Listener .................................................. 26
3-5-8. Using onFileProcessingProgressListener ....................................................... 27
3-5-9. Background Settings ...................................................................................... 28
3-5-10. Scratch effect ............................................................................................... 29
3-5-11. Adding Additional Information to the Canvas ............................................. 30

Page | 2
Copyright

Copyright 2012 Samsung Electronics Co. Ltd. All Rights Reserved.

Though every care has been taken to ensure the accuracy of this document, Samsung
Electronics Co. Ltd. cannot accept responsibility for any errors or omissions or for any loss
occurred to any person, whether legal or natural, from acting, or refraining from action, as a
result of the information contained herein. Information in this document is subject to
change at any time without obligation to notify any person of such changes.
Samsung Electronics Co. Ltd. may have patents or patent pending applications, trademarks
copyrights or other intellectual property rights covering subject matter in this document.
The furnishing of this document does not give the recipient or reader any license to these
patents, trademarks copyrights or other intellectual property rights.
No part of this document may be communicated, distributed, reproduced or transmitted in
any form or by any means, electronic or mechanical or otherwise, for any purpose, without
the prior written permission of Samsung Electronics Co. Ltd.
The document is subject to revision without further notice.
All brand names and product names mentioned in this document are trademarks or
registered trademarks of their respective owners.
For more information, please visit http://developer.samsung.com

Page | 3
S-Pen SDK 2.0.1 Tutorial
with Sample Code
This document provides S-Pen installation instructions, a tutorial, and sample code to help
developers make the most of the S-Pen SDK. For detailed information about how to use the
S-Pen SDK APIs, please refer to the API in the Documents directory of the SDK.

This document consists of an introduction and the basic installation method for the S-Pen
SDK and describes the API functions through simple sample code. Information on
configuring and constructing the basic Android development environment is not included.

1. Introducing the S-Pen SDK

1-1. About the S-Pen SDK
The S-Pen SDK provides drawing libraries to facilitate the development of drawing
applications.

1-2. Packages in the S-Pen SDK

The S-Pen SDK consists of the following packages:
 Documentation: Includes all S-Pen SDK related documents.
 Library: Includes the S-Pen SDK libraries.
 Examples: Features the S-Pen SDK-based sample code.

Page | 4
2. Setting up the S-Pen SDK
2-1. The S-Pen SDK
The following components are required to create the Android Project in Eclipse necessary
to use the S-Pen SDK. For information about how to download and install them, please
refer to the associated links.
 JDK : Java SE Development Kit
http://www.oracle.com/technetwork/java/javase/downloads/index.html
 Android SDK
http://developer.android.com/sdk/index.html
 IDE : Eclipse
http://www.eclipse.org/downloads/

2-2. Installing the S-Pen Library to an Android project

1. Download the S-Pen SDK from http://developer.samsung.com/android/spen.sdk.
2. In Eclipse, create a new Android Project.
3. From the Project View, right-click on your new project and create a new folder
named libs.
4. From the S-Pen SDK, under the lib folder, there should be the file libspen20.jar.
5. Copy and paste the libspen20.jar file into the libs folder you created in step #3.
6. In Eclipse, add the libspen20.jar file to the build path.
7. Click OK. The Properties dialog box appears. Click OK again.
The libspen20.jar file is now installed in your project.

Page | 5
3. Getting Started with the Sample Code
3-1. Sample Code: Example 1
The SDK sample code in Example 1 demonstrates the basic S-Pen APIs.

[Figure 02] Sample Code: The Result of Example 1.

The Example #1 sample code generates a screen with buttons in the top pane and a canvas
area in the bottom pane. The buttons in the top pane perform the following functions:
 pen – Switches to the pen function or opens the pen settings popup window in pen
mode.
 erase – Switches to the eraser function or opens the eraser settings popup window
in eraser mode.
 undo – Cancels a drawing operation.
 redo – Performs the last canceled drawing again.

The canvas area in the bottom pane of the screen shows what the user has drawn on the
screen.

CanvasView and SettingView are S-Pen API classes used in Example 1’s sample code.
For more detailed information on the available APIs, please refer to the API reference
documents in the Documentation directory of the SDK.

Page | 6
Below is the layout for Example 1.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffffff">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/settingBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="pen"
android:layout_weight="1"/>

<Button
android:id="@+id/eraseBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="erase"
android:layout_weight="1"/>

<Button
android:id="@+id/undoBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="undo"
android:layout_weight="1"/>

<Button
android:id="@+id/redoBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="redo"
android:layout_weight="1"/>
</LinearLayout>

<FrameLayout
android:id="@+id/canvas_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

Page | 7
 <com.samsung.sdraw.CanvasView
android:id="@+id/canvas_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/smemo_bg" />

<com.samsung.sdraw.SettingView
android:id="@+id/setting_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</FrameLayout>
</LinearLayout>

[Code 01] Example1_main.xml

The layout in the execution screen consists of the button area in the top pane and the
canvas area in the bottom pane. Note that the S-Pen SDK’s View of the CanvasView and
SettingView are included in the bottom pane of the screen.

3-2. The CanvasView Class

The CanvasView class inherits the view and performs the drawing canvas functions. If
you allocate the CanvasView to the activity, the drawing canvas is available on the
screen. Users can erase drawings, change the default line color, thickness, or transparency,
and save or load a drawing.

3-2-1. Initializing the CanvasView

To use the CanvasView, you allocate the CanvasView from the layout using the
findViewById method in the source code.

mCanvasView = (CanvasView) findViewById(R.id.canvas_view);

[Code 02] Initialization of the CanvasView

Page | 8
The sample code above allows you to draw on the screen.

[Figure 03] Results of Drawing on the CanvasView.

3-2-2. Changing the mode for the CanvasView

CanvasView provides 2 modes: pen and eraser. Pen mode is used for general pen
drawings on the screen and eraser mode is used for erasing figures drawn on the screen.
Change the CanvasView mode using the changeModeTo method as follows. When
the CanvasView is initialized, the default mode is Pen mode.

mCanvasView.changeModeTo( CanvasView.PEN_MODE );// Pen mode

// Eraser Mode
mCanvasView.changeModeTo( CanvasView.ERASER_MODE );

[Code 03] Switching to Pen or Eraser Mode

Page | 9
3-2-3. The Undo/Redo operations in the CanvasView
Redo or undo the drawing on the CanvasView with single instructions:

mCanvasView.undo(); // Undo
mCanvasView.redo(); // Redo

[Code 04] Undo/Redo

The undo and redo operations are executed through the undo and redo methods of the
CanvasView in the click event listeners of the corresponding buttons. The maximum
number for the undo or redo operations is currently 30.

[Figure 04] The Undo Function

Page | 10
Identify the availability of the undo and redo operations using the isUndoable and
isRedoable methods, and enable or disable the buttons accordingly.

mUndoBtn.setEnabled( mCanvasView.isUndoable());
// Check Undoable

mRedoBtn.setEnabled( mCanvasView.isRedoable());
// Check Redoable

[Code 05] Changing the Status of the Buttons Depending on the Availability of Undo
and Redo Operations.

Page | 11
Additionally, you can set up the OnHistoryChangeListener listener, which is the
drawing event listener for the CanvasView. It can identify if the undo or redo operation is
available through the listener.

mCanvasView.setOnHistoryChangeListener(historyChangeListener);
// Set the Listener for the CanvasView

private CanvasView.OnHistoryChangeListener
historyChangeListener = new
CanvasView.OnHistoryChangeListener()
{
@Override
public void onHistoryChanged( boolean bUndoable,
boolean bRedoable)
{

mUndoBtn.setEnabled(bUndoable); // Check Undoable

mRedoBtn.setEnabled(bRedoable); // Check Redoable

}
};

[Code 06] Identifying if the Undo or Redo Operation is Available Through

OnHistoryChangeListener.

3-2-4. Saving/Loading Drawings

To save and load drawings use the getData and setData methods of the
CanvasView. ExampleUtils in the following sample code is the class used to save a
drawing as a file. This is not included as part of the SDK, and therefore should be manually
developed by developers. You can find a sample implementation in the full Example1 code.

// Save
public boolean saveCanvas()
{
byte[] buffer = mCanvasView.getData();

if( buffer == null )

return false;

String savePath = mFolder.getPath() + "/" +

ExampleUtils.getUniqueFilename( mFolder,
"image", SAVED_FILE_EXTENSION);

Page | 12
 if( ExampleUtils.writeBytedata(savePath, buffer))
return true;
else
return false;
}

// Load
public boolean loadCanvas( String filename )
{
String loadPath = mFolder.getPath() + "/"
+ fileName;

byte[] buffer
= ExampleUtils.readBytedata(loadPath);

if( buffer == null )

return false;

mCanvasView.setData(buffer);

return true;
}

[Code 07] Implementation of Saving and Loading a Drawing

3-2-5. Zooming In and Out

The drawing screen of the CanvasView can be zoomed in/out from 1x to 50x. The
SPen_Example_ZoomPan sample application shows how to use this feature (you can find
the full code in Example 5 of the S-Pen SDK).

mCanvasView.zoomTo( 2 );
//Enlarge the view 2 times, compared to the original size

mCanvasView.zoomTo( 1 );
//Go back to the image’s original size

[Code 08] Zooming In and Out

Page | 13
 [Figure 05] Zooming in

3-2-6. Panning
Pan across the drawing screen of the CanvasView by specifying the x and y coordinates.
The SPen_Example_ZoomPan sample application shows how to use this feature.

// Move the canvas 10 pixels up

mCanvasView.panBy(0, 10);

//Move the canvas 10 pixels down

mCanvasView.panBy(0, -10);

//Move the canvas 10 pixels left

mCanvasView.panBy(10, 0);

//Move the canvas 10 pixels right

mCanvasView.panBy(-10, 0);

[Code 09] Panning Across the Drawing Screen

Note that the move distance applied regardless of the zoom level. So if you move the
canvas by 1 pixel horizontally when the zoom level is 2x, it will only move by 1 pixel on the
screen (not 2 pixels).

Page | 14
3-2-7. Setting the Background
The background is divided into top, middle and bottom. To set a background for your
CanvasView, specify separate images for each part.

Bitmap topBg =
BitmapFactory.decodeResource( getResources(),
R.drawable.bg_top);
Bitmap middleBg =
BitmapFactory.decodeResource( getResources(),
R.drawable. bg_middle);
Bitmap bottomBg =
BitmapFactory.decodeResource( getResources(),
R.drawable.bg_bottom );

mCanvasView.setBackgroundTemplete
( topBg, middleBg, bottomBg );

[Code 10] Setting the Background

It is best to use images with the same width as the canvas. Otherwise, the images are
stretched to the width of the CanvasView while keeping the aspect ratio.

3-3. The SettingView Class

The SettingView class is a View to change the type, default color, thickness, and
transparency properties of the pen in the CanvasView. Depending on the
CanvasView mode, the pen or eraser settings popup window appears on the screen. By
locating the SettingView in the activity through the above layout and setting the
SettingView to the CanvasView when initializing the CanvasView, the two Views
are synchronized.

3-3-1. Initializing the SettingView

To use the SettingView, allocate the SettingView from the layout using the
findViewById method in the source code.

mSettingView = ( SettingView )
findViewById( R.id.setting_view );

[Code 11] Initializing the SettingView

Page | 15
3-3-2. Set the SettingView to the CanvasView
Connect the CanvasView with the SettingView so that the changes you make to
the pen settings in the SettingView are applied to the CanvasView. Do this using
the setSettingView method of the CanvasView.

// Set the SettingView to CanvasView

mCanvasView.setSettingView( mSettingView );

[Code 12] Setting the SettingView to the CanvasView

3-3-3. Showing/Closing the SettingView

To show the set SettingView, use the showView method. To close the
SettingView, use the closeView method.

// Show the Pen SettingView

mSettingView.showView( AbstractSettingView
.PEN_SETTING_VIEW );

// Show the Erase SettingView

mSettingView.showView( AbstractSettingView
.ERASER_SETTING_VIEW );

// Close the SettingView

mSettingView.closeView();

[Code 13] The SettingView Popup Operations

However, as you can see in the code of Example #1, you have to change the mode in
advance using the changeModeTo method of the ModeContext in the CanvasView
to show the proper settings popup window on the screen.

// Change the mode to Pen mode

mCanvasView.changeModeTo( CanvasView.PEN_MODE );

// Change the mode to Erase mode

mCanvasView.changeModeTo( CanvasView.ERASER_MODE );

[Code 14] Changing the CanvasView Mode

Page | 16
 [Figure 06] Pen/Eraser Mode Settings Popup Windows

3-3-4. Making Sure That the Settingview on the Screen is Being Viewed
To identify if the SettingView is being displayed on the screen, use the following
sample code using the isShown method. However, to determine if the settings popup
window is for pen or eraser mode, you must deliver the SettingView type as the
argument.

// Check if the Pen SettingView is shown

mSettingView.isShown( AbstractSettingView.PEN_SETTING_VIEW );

// Check if the Erase SettingView is shown

mSettingView.isShown
( AbstractSettingView.ERASER_SETTING_VIEW );

[Code 15] Identifying the Status of the Pen or the Erase Settings Popup Window

Page | 17
 3-3-5. Pen/Eraser SettingView
In the pen settings popup window, you can select one of the four pen types available (solid,
brush, pencil, highlighter) and set the color, thickness, and transparency of the chosen pen
type. The settings popup window provides a preview of the configured pen properties.

[Figure 07] The Pen and Eraser Settings Popup Windows

In the eraser settings popup window, adjust the eraser thickness and erase all the drawings
from the CanvasView using the Clear All button.

Page | 18
3-4. The PenSettingInfo Class
The PenSettingInfo class manages the pen settings. It has methods for getting and
setting various pen/eraser parameters, such as width, alpha, color and pen type. It is used
internally by the CanvasView and SettingView, but you can also construct the
PenSettingInfo object manually, using a class constructor. The sample application
SPen_Example_PenSettingInfo shows how to use this class (you can find the full code in
Example #3 of the S-Pen SDK).

3-4-1. Initializing the PenSettingInfo

To use a PenSettingInfo object, you can either construct it manually with
a class constructor or initialize it with an existing object from the CanvasView.

mPenSettingInfo = mCanvasView.getPenSettingInfo();

[Code 16] Initialization of the PenSettingInfo

3-4-2. Using the OnSettingInfoChangedListener listener

You can listen for changes in your PenSettingInfo object with the
OnSettingInfoChangedListener.

mPenSettingInfo.setOnSettingInfoChangedListener
( mOnSettingInfoChangedListener );

[Code 17] Setting the OnSettingInfoChangedListener

This listener implements functions for changing the pen type, width, color and alpha.

PenSettingInfo.OnSettingInfoChangedListener

mOnSettingInfoChangedListener
= new PenSettingInfo.OnSettingInfoChangedListener()
{

@Override
public void onPenWidthChanged(int arg0, int arg1) {
… }

@Override
public void onPenTypeChanged(int arg0) { … }

@Override
public void onPenColorChanged(int arg0, int arg1)
{ … }

@Override

Page | 19
 public void onPenAlphaChanged(int arg0, int arg1) {
…
}

@Override
public void onEraserWidthChanged(int arg0) {
…
}
};

[Code 18] Implementation of the OnSettingInfoChangedListener

3-4-3. Replacing the CanvasView’S-PenSettingInfo with a Custom Object

Replace the PenSettingInfo object of the CanvasView and its corresponding
SettingView with a different PenSettingInfo object using the
setPenSettingInfo method.

mCanvasView. setPenSettingInfo( mPenSettingInfo );

[Code 19] Replacing the CanvasView’s PenSettingInfo with a Custom Object

3-5. The SCanvasView Class

The SCanvasView is a class extending CanvasView. It adds a lot of new functions,
enabling developers to animate drawings, record/play audio files etc. The new class also
supports special effects such as scratch, mosaic, blur, sketch, etc. It also inherits all the
methods of Canvas View.

SPen_Example_Animation demonstrates some of the new features of the 2.0.1 version of

the S-Pen SDK. For more information you can refer to the SPen_Example_Animation
source code.

3-5-1. Initializing the SCanvasView

To use the SCanvasView, you allocate the SCanvasView from the layout using the
findViewById method in the source code, exactly like in CanvasView.

mCanvasView = (SCanvasView) findViewById( R.id.canvas_view );

[Code 20] Initialization of the SCanvasView

Page | 20
3-5-2. Basic Animation Functions
When using the SCanvasView class, all canvas operations such as drawing and inserting
text and images are saved and can be viewed as an animation. To use this feature create a
SAMM library inside your SCanvasView.

// Create SAMM Library inside of SCanvasView

mCanvasView.createSAMMLibrary();

//Close SAMM Library

mCanvasView.closeSAMMLibrary();

[Code 21] Creating a SAMM Library

To view animations, switch to animation mode. In SCanvasView by default animation

mode is switched off, so that you are able to draw on the canvas (if animation mode is
turned on you cannot draw).
Before playing animation you can set canvas options using SOptionSCanvas class and
apply them to your canvas using the
setOption(SOptionSCanvas canvasOption) function. These options are
turning on/off background sound, setting repeating of background sound, audio valume
etc.

SOptionSCanvas canvasOption = new SOptionSCanvas();

canvasOption.mPlayOption
.setTransparentBGImageAnimation(false);

// BG Audio Play option

canvasOption.mPlayOption.setPlayBGAudio(true);

// BG Audio Play repeat option

canvasOption.mPlayOption.setRepeatBGAudio(false);

// Stop playing the BG Audio if playback of the SAMM

// animation is stopped
canvasOption.mPlayOption.setStopBGAudio(true);

// BG Audio volume
if(!canvasOption.mPlayOption.setBGAudioVolume(1.0f))
return;

//Animation speed
if(!canvasOption.mPlayOption
.setAnimationSpeed
(SOptionPlay.ANIMATION_SPEED_AUTO) )
return;
Page | 21
 //Apply options to SCanvasView
if(!mCanvasView.setOption(canvasOption))
return;

[Code 22] Setting Animation Options

For more options see the S-Pen API documentation for the SOptionPlay
And SOptionSAMM classes.

Now you can start playing your animation.

// Start Animation
mCanvasView.doAnimationStart();

[Code 23] Starting Animation

SPen_Example_Animation uses a separate activity to show animations. Figure 8 shows

sample animation phases.

[Figure 08] Animation playing

Page | 22
You can check the animation state by using the getAnimationState() function and
change it accordingly.

// Start or Pause Animation

void animationPlayOrPause()
{
int nAnimationState = mCanvasView.getAnimationState();

if(nAnimationState==SAMMLibConstants.ANIMATION_STATE_ON_STOP)
{
// Start Animation
mCanvasView.doAnimationStart();
}
else if( nAnimationState ==
SAMMLibConstants.ANIMATION_STATE_ON_PAUSED )
mCanvasView.doAnimationResume();
else if( nAnimationState ==
SAMMLibConstants.ANIMATION_STATE_ON_RUNNING )
mCanvasView.doAnimationPause();
}

[Code 24] Checking the Animation State

3-5-3. Using onPlayCompleteListener

onPlayCompleteListener is called when animation play is complete.

// Set the listener to execute when the animation is completed

mCanvasView.setOnPlayCompleteListener( mPlayComplete );

// Play complete callback listener

OnPlayCompleteListener mPlayComplete
= new OnPlayCompleteListener()
{
@Override
public void onPlayComplete() {
…
}
};

[Code 25] Using onPlayCompleteListener

Page | 23
3-5-4. Using onPlayProgressChangeListener
The onPlayProgressChangeListener is called when animation progress changes.
Its function onChangeProgress(int nProgress) gets the current animation
progress indicator in percent, from 0 to 100.

// Set the listener to execute when animation progress changes

mCanvasView.setOnPlayProgressChangeListener(mPlayProgressChange);

// Play progress change callback listener

OnPlayProgressChangeListener mPlayProgressChange
= new OnPlayProgressChangeListener()
{
@Override
public void onChangeProgress(int nProgress)
{
if( nProgress==0 )
mProgress.setVisibility(View.VISIBLE);
else if( nProgress==100 )
mProgress.setVisibility(View.GONE);

mProgress.setProgress(nProgress);
}
};

[Code 26] Using onPlayProgressChangeListener

3-5-5. Adding Text to the Canvas

To add text to the canvas, change the canvas mode to CanvasView.TEXT_MODE.

mCanvasView.changeModeTo( CanvasView.TEXT_MODE );

[Code 27] Switching to the Text Mode in Canvas

Page | 24
Tapping the canvas will open a scalable text box.

[Figure 09] Adding Text to the Canvas

To check the current canvas mode use the getMode() function

if( mCanvasView.getMode() != CanvasView.TEXT_MODE )

mCanvasView.changeModeTo(CanvasView.TEXT_MODE);

[Code 28] Checking the Current Canvas Mode

Page | 25
3-5-6. Adding Images to the Canvas
To add images to the canvas, create a SObjectImage object and add it to canvas with
the
insertSAMMImage( SObjectImage imgData,
boolean bSelectObject ) function.

RectF rectF = getDefaultRect();

//Create image object

SObjectImage sImageObject
= new SObjectImage();
sImageObject.setRect(rectF);
sImageObject.setImagePath(imagePath);

//Add image to canvas

mCanvasView.insertSAMMImage(sImageObject, true);

[Code 29] Adding Images to the Canvas

3-5-7. Using the onSelectChangeListener Listener

This listener is called when images or text are deselected.

// Set the listener for image/text diselecting

mCanvasView.setOnSelectChangeListener(objectSelectChangeListener);

// Select change listener

private OnSelectChangeListener objectSelectChangeListener
= new OnSelectChangeListener()
{
@Override
public void onSelectChanged()
{
…
}
};

[Code 30] Using the onSelectChangeListener Listener

Page | 26
3-5-8. Using onFileProcessingProgressListener
This listener monitors the progress of loading files. It has two functions:

 onChangeProgress(int nProgress) – for changes in loading progress

 onLoadComplete(boolean bLoadResult) – called when loading is complete.

// Set the listener for load progress

mCanvasView.setOnFileProcessingProgressListener
( mFileProgressChange );

// Progress Change Callback

OnFileProcessingProgressListener mFileProgressChange
= new OnFileProcessingProgressListener()
{
@Override
public void onChangeProgress(int nProgress) {
…
}

@Override
public void onLoadComplete(boolean bLoadResult) {

…
}
};

[Code 31] Using onFileProcessingProgressListener

Page | 27
3-5-9. Background Settings
There are a number of background settings you can use; for example, you can add a
memo to background.

SDataPageMemo pageMemo = new SDataPageMemo();

pageMemo.setText(tmpStr);

mCanvasView.setPageMemo(pageMemo, 0);

[Code 32] Adding a Page Memo

You can either set a specific background color or use an image from a file.

// Set white background

nSetColor = 0xFFFFFFFF;
mCanvasView.setBGColor(nSetColor);

//Set background from file

mCanvasView.setBGImagePath(strBGImagePath)

[Code 33] Setting Background

For animations you can set background audio.

//Set background audio

mCanvasView.setBGAudioFile(strBGAudioFileName);

//Clear background audio

mCanvasView.clearBGAudio();

[Code 34] Setting Background Audio

Page | 28
3-5-10. Scratch effect
To create a “scratch off” effect, where an image can be “scratched off” to reveal another
image, set the cover image with the setClearImageBitmap function.

mCanvasView1 = (SCanvasView) findViewById(R.id.canvas_view1);

mCanvasView1.createSAMMLibrary();

//Set pen to eraser mode

mCanvasView1.setEraserPenSetting(PenSettingInfo.MAX_PEN_WIDTH);

//Set clear image

mCanvasView1.setClearImageBitmap(null,
SAMMLibConstants.IMAGE_OPERATION_NONE,
SAMMLibConstants.OPERATION_LEVEL_MEDIUM);

[Code 35] The Scratch Effect

You can see a demo in the SPen_Example_Animation sample application by selecting

More/Scratch Effect Demo from the menu.

[Figure 10] Scratch Effect Demo

Page | 29
3-5-11. Adding Additional Information to the Canvas
You can also add other information to your canvas, such as title and tags.

mCanvasView.setTitle(title); //Set title

//Set extra data

mCanvasView.putExtra( AnimationFileTotalInfoShow.
EXTRA_SCANVAS_PUTEXTRA, text);
//Get extra data
String extra = mCanvasView.getStringExtra
( AnimationFileTotalInfoShow.EXTRA_SCANVAS_PUTEXTRA, null);

mCanvasView.addTag(tag); //Add tag

String[] tagArray = mCanvasView.getTags(); //Get tags
(mCanvasView.removeTag(tag); //Remove tag
[Code 36] Adding Basic Information to the Canvas

To attach files to the canvas:

SDataAttachFile attachData = new SDataAttachFile();

attachData.setFileData( strFileName,
"SPen Example Selected File");

[Code 37] Attaching Files to the Canvas

To list all the attached files, use the getAttachedFileData function:

// Make Attach File String

int nAttachFileNum = mCanvasView.getAttachedFileNum();

// Make Items for the alert dialog

mAlertItems = new AlertItem[nAttachFileNum];
for(int i=0; i<nAttachFileNum; i++){ SDataAttachFile attachData
= mCanvasView.getAttachedFileData(i);
if(attachData == null) {
Toast.makeText(mContext, "Attach Data(" + i + ")
is invalid", Toast.LENGTH_SHORT).show();
return; }
String strPath = attachData.getFilePath();
String strDescription = attachData.getFileDescription();
BitmapDrawable icon
= new BitmapDrawable(attachData.getFileIconBitmap());
}

[Code 38] Listing Files Attached to the Canvas

Page | 30