Page | 1

Samsung Electronics

S Pen SDK 2.0.1 Tutorial with Sample Code

Page | 2

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 | 3

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 | 4

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 | 5

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 | 6

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 | 7

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 | 8

<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 | 9

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 | 10

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 | 11

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 | 12

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 | 13

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 | 14

[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 | 15

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 | 16

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 | 17

[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 | 18

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 | 19

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 | 20

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 | 21

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 | 22

//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 | 23

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 | 24

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 | 25

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 | 26

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 | 27

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 | 28

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 | 29

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 | 30

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