S Pen SDK_2.01

Copyright © 1995-2012 SAMSUNG All rights reserved

S Pen SDKTHE BEGINNING OF YOUR BRAND NEW APP DEVELOPMENT

Burnham Greeley (extended by Dariusz Koc)Samsung Platform Evangelist


1. What is S Pen? 2. How to use the S Pen SDK?

2.1 Overview2.2 CanvasView and SettingView2.3 SCanvasView2.4 Animation

3. Conclusion

LET’S DIVE TO THE S PEN SDK!



01 WHAT IS S PEN?



IS THERE SOME-THING MISSING?

1 WHAT IS S PEN?


1 WHAT IS S PEN?

Pointing and line drawing precisely1

NOW, HERE IS THE NEW S PEN

Detecting the long-range pressure level2No additional power consumption3Launching memo add instantly with double touches4


1 WHAT IS S PEN?

S PEN COMPO-NENTS

PEN TIP

SIDEBUTTON


1 WHAT IS S PEN?

USING S PEN SDK COMPONENTSYOU CAN DEVELOP BRAND NEW APPLICATION


02 HOW TO USE THE S PEN SDK?



CONTENTS OF SDK


Dev Guide SampleApplication

libspen.jar


ADD THE JAR FILE TO THE PROJECT


Libraries Add External JARs libspen.jarJava Build Path

Java Build Path

Libraries

libspen.jarAdd External JARs…


SUPPORTING A STYLUS/PEN IN DIFFER-ENT ANDROID VERSIONS


……..@Overridepublic void onTouchEvent (MotionEvent event) {…….. String osVer = Build.VERSION.RELEASE; boolean eraserOn = false; boolean penActiveOn = false; boolean fingerActiveOn = false;

int metaEraserOn = 0; int metaPenActiveOn = 0; ……..



To determine the type of tool:• In Gingerbread and and Honeycomb - use the ‘metaState’ attribute to.

if (osVer.startsWith("2.3")) {

metaEraserOn = 0x400;if((event.getMetaState() & metaEraserOn) != 0) {

eraserOn = true;}metaPenActiveOn = 0x200;if((event.getMetaState() & metaPenActiveOn) != 0) {

penActiveOn = true;}

……..

3

0x4000000

0x2000000




To determine the type of tool:• In Ice Cream Sandwich - use ‘MotionEvent.getToolType(int pointerIndex)’


if (osVer.startsWith("4")) {

if((event.getToolType(0) == MotionEvent.TOOL_TYPE_ERASER) {

eraserOn = true;}if(event.getToolType(0) ==

MotionEvent.TOOL_TYPE_STYLUS) {penActiveOn = true;

}if(event.getToolType(0) ==

MotionEvent.TOOL_TYPE_FINGER) {fingerActiveOn = true;

}}……..


PACKAGES TO IMPORT


Import com.samsung.sdraw.*Import com.samsung.spensdk.*packages to use S Pen features

import android.app.Activity;import android.os.Bundle;

import com.samsung.sdraw.CanvasView;import com.samsung.sdraw.SDrawLibrary;import com.samsung.sdraw.SettingView;import com.samsung.sdraw.AbstractSettingView;import com.samsung.sdraw.AbstractSettingView.SettingChangeListener;

import com.samsung.spensdk.SCanvasView;import com.samsung.spensdk.SCanvasView.OnPlayCompleteListener;import com.samsung.spensdk.SCanvasView.OnPlayProgressChangeListener;

public class SampleActivity extends Activity {


CANVASVIEW AND SET-TINGVIEW


Add ‘CanvasView’ and ‘SettingView’ to the layout XML file

……..<FrameLayout

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

<com.samsung.sdraw.CanvasViewandroid:id="@+id/canvas_view"android:layout_width="wrap_content"android:layout_height="wrap_content"

android:background="@drawable/my_bg_picture" /><com.samsung.sdraw.SettingView android:id="@+id/setting_view"android:layout_width="wrap_content"android:layout_height="wrap_content" /></FrameLayout>……..




Register the ‘SettingView’ and ‘CanvasView’ that was identifiedby the attribute from the XML

public class SampleActivity extends Activity {……..private CanvasView mCanvasView;private SettingView mSettingView;……..@Overridepublic void onCreate ( Bundle savedInstanceState ) {…….. mCanvasView = (CanvasView) findViewById(R.id.canvas_view); mSettingView = (SettingView) findViewById(R.id.setting_view);

mCanvasView.setSettingView(mSettingView); ……..




Register the ‘SettingView’ to the ‘CanvasView’ to enable user configuring (thickness, color, type, of pen and eraser)

public class SampleActivity extends Activity {……..@Overridepublic void onCreate ( Bundle savedInstanceState ) {…….. mCanvasView.setSettingView(mSettingView);……..


PEN AND ERASER POPUP WINDOWS


Add ‘settingBtn’ and ‘eraseBtn’ to the layout XML file

……..<Button

android:id="@+id/settingBtn"android:layout_width=" match_parent "android:layout_height="wrap_content"

android:text="Erase"android:layout_weight="1"

/><Button

android:id="@+id/eraserBtn"android:layout_width=" match_parent "android:layout_height="wrap_content"

android:text="Pen"android:layout_weight="1"

/>……..


PEN AND ERASER SETTING POPUP WINDOWS


Find and set view that was identified by the id attribute from the XML file

public class SampleActivity extends Activity {……..@Overridepublic void onCreate ( Bundle savedInstanceState ) {…….. mSettingBtn = (Button) findViewById(R.id.settingBtn); mEraserBtn = (Button) findViewById(R.id.eraserBtn);

mSettingBtn.setOnClickLitener(mBtnClickListener); mEraserBtn.setOnClickLitener(mBtnClickListener);……..}…….. protected OnClickListener mBtnClickListener = new

OnClickListener(){ ……..

Simple OnBtnClick




Implement a click listener for ‘setting’ and ‘eraser’ buttonswhich will change current frawing mode

public class SampleActivity extends Activity {……..OnClickListener mBtnClickListener = new OnClickListener(){

@Overridepublic void onClick ( View v ) {

if(v.getId() == mSettingBtn.getId()) penBtnClick();else if(v.getId() ==

mEraserBtn.getId()) eraserClick();

……..




Use showView() function to show setting View

private void penBtnClick ( View v ) { mCanvasView.changeModeTo (CanvasView.PEN_MODE); if(mSettingBtn.isSelected()) { if(mSettingView.isShown (AbstractSettingView.PEN_SETTING_VIEW)) mSettingView.closeView(); else mSettingView.showView(AbstractSettingView.PEN_SETTING_VIEW); } else { mSettingBtn.setSelected(true); mEraserBtn.setSelected(false); if(mSettingView.isShown(AbstractSettingView.ERASER_SETTING_VIEW)) mSettingView.closeView(); }} ……..


RESPONDING TO PEN SETTING CHANGE


Register listener for the handlers that are called whena pen setting is changed

public class SampleActivity extends Activity {……..@Overridepublic void onCreate ( Bundle savedInstanceState ) {……..mSettingView.setOnSettingChangeListener ( settingChangeListener );……..




Implement this listener – ‘onPenTypeChange’ methodpublic class SampleActivity extends Activity {……..@Overrideprivate AbstractSettingView.SettingChangeListener settingChangeListener = new SettingChangeListener() { @Override public void onPenTypeChanged ( int type ) { ……..

if(type == PenSettingInfo.PEN_TYPE_BRUSH) {…….. }

else if(type == PenSettingInfo.PEN_TYPE_PENCIL) {……}

else if(type == PenSettingInfo.PEN_TYPE_SOLID) {…….}

else if(type == PenSettingInfo.PEN_TYPE_HILIGHTER){…} }……..




Implement this listener – ‘settingChangeListener’

public class SampleActivity extends Activity {……..@Overrideprivate AbstractSettingView.SettingChangeListener settingChangeListener = new SettingChangeListener() { …….. @Override public void onColorChanged ( int rgb ) {…….. } @Override public void onClearAll ( ) {…….. } @Override public void onEraserWidthChanged ( int width ) { …….. } @Override public void onPenAlphaChanged ( int alpha ) { …….. } @Override public void onPenWidthChanged ( int width ) { …….. }……..


UNDO & REDO OPERATIONS


Add ‘undo button’ and ‘redo button’ to the layout XML file

……..<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"/>……..




Find and set view that was identified by the id attribute from the XML fileAnd register click listener for this buttons

public class SampleActivity extends Activity {……..@Overridepublic void onCreate ( Bundle savedInstanceState ) { mUndoBtn = (Button) findViewById(R.id.undoBtn);

mRedoBtn = (Button) findViewById(R.id.redoBtn); mUndoBtn.setOnClickLitener(undoNredoBtnClickListener); mRedoBtn.setOnClickLitener(undoNredoBtnClickListener);…….. }……..protected OnClickListener undoNredoBtnClickListener = new

OnClickListener(){ ...……..

Simple OnBtnClick




Implement ‘onHistoryChangeListener’.

onHistorychangeListener

……..protected OnClickListener undoNredoBtnClickListener = new

OnClickListener() {@Overridepublic void onClick(View v) { if (v == mUndoBtn) { mCanvasView.undo(); } else if (v == mRedoBtn) {

mCanvasView.redo(); } mUndoBtn.setEnabled(mCanvasView.isUndoable());

mRedoBtn.setEnabled(mCanvasView.isRedoable());}

}……..




Register ‘setOnHistoryChangeListener’ listener for the handler that is called when undo redo operation is executed.

public class SampleActivity extends Activity {……..@Overridepublic void onCreate ( Bundle savedInstanceState ) {……..

mCanvasView.setOnHistoryChangeListener(spriteChangeListener);

……..




Implement ‘onHistoryChange’ function from ‘CanvasView.OnHistoryChangeListener’ interface

public class SampleActivity extends Activity {……..public CanvasView.OnHistoryChangeListener spriteChangeListener =

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

mUndoBtn.setEnabled(bUndoable);mRedoBtn.setEnabled(bRedoable);

}}


SAVE & LOAD CANVAS


Use ‘getData’ and ‘setData’ methods to get and applies the entire image data on the CanvasView.

public class SampleActivity extends Activity {……..public void saveCanvas ( ) { …….. byte[] buffer = mCanvasView.getData(); ……..}……..public void loadCanvas ( String loadPath ) { …….. byte[] buffer = ExampleUtils.readBytedata(loadPath); …….. mCanvasView.setData(buffer); ……..}


CLASS PENSETTINGINFO


Manages the pen type settings Provides for each pen set & get methods for

color, thickness, transparency

Enables to change pen type

PenSettingInfo mPenSettingInfo;mPenSettingInfo = mCanvasView.getPenSettingInfo();……..mPenSettingInfo.setPenType(PenSettingInfo.PEN_TYPE_PENCIL);mPenSettingInfo.setPenType(PenSettingInfo.PEN_TYPE_MARKER);


ZOOM IN/OUT & PANNING


The drawing screen of the CanvasView can be zoomed into from 1x to 50x

Zoom In

Zoom Out

By specifying the x and y coordinates you can pan across the drawing

……..mCanvasView.zoomTo(mCurrZoomValue += 2);mCanvasView.zoomTo(mCurrZoomValue -= 2);……..

……..mCanvasView.panBy(x, y);……..


BACKGROUND SETTING


To set the background use ‘setBackgrounfTemplate

topBG – The bitmap for top part backgroundmoddleBG – The bitmap for middle part backgroundbottomBG – The bitmap for top bottom part background

……..public void setBackgroundTemplete(

Bitmap topBG, Bitmap middleBG, Bitmap bottomBG)……..


SCANVASVIEW


Class ‘SCanvasView’ inherits from class CanvasView

Provides animation playback function

Add BG data e.g. BG audio (Voice Recording or Audio File), BG color, Page Memo

Add Basic Data e.g. Attach file, set extra data (string or int), APP ID, TAG, set title


SCANVASVIEW


Add ‘SCanvasView’ to the layout XML file

……..<RelativeLayout

android:id="@+id/canvas_container"android:layout_width="match_parent"android:layout_height="match_parent"

android:layout_height=“#ffffffff"><com.samsung.spensdk.SCanvasView

android:id="@+id/canvas_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true" /></FrameLayout>……..

<RelativeLayoutandroid:id="@+id/canvas_container"android:layout_width="match_parent"android:layout_height="match_parent"

android:layout_height=“#ffffffff"><com.samsung.spensdk.SCanvasView

android:id="@+id/canvas_view"android:layout_width=“240dip"android:layout_height=“320dip" android:layout_centerInParent="true" /></FrameLayout>


SCANVASVIEW


Initialize ‘SCanvasView’ exactly like CanvasView

How to add Basic Data

public class SampleActivity extends Activity {……..private SCanvasView mCanvasView;……..mCanvasView = (SCanvasView) findViewById(R.id.canvas_view);……..

@Overridepublic boolean onOptionsItemSelected(Menu menu) { …….. mCanvasView.addTag("TagName"); mCanvasView.putExtra("KEY1_PUT_EXTRA", "myExtraString”); mCanvasView.putExtra("KEY2_PUT_EXTRA", 123);

SDataAttachFile attachData = new SDataAttachFile(); attachData.setFileData(strFilePath, "SPen Example Selected File"); mCanvasView.attachFile(attachData); ……..}


SCANVASVIEW


How to get Basic Data

123"myExtraString"

……..String Tags = mCanvasView.getTags();String myString = mCanvasView.getStringExtra("KEY1_PUT_EXTRA", null);int myInt = CanvasView.getIntExtra("KEY2_PUT_EXTRA", 0);

int nAttachFileNum = mCanvasView.getAttachedFileNum();for(int i=0; i<nAttachFileNum; i++) { SDataAttachFile attachData = mCanvasView.getAttachedFileData(i);}


SCANVASVIEW


Before animation starts - save data associated with thew drawing

Set as animation mode

How to play animation

Start animation

Create Samsung Animation Memo library inside of SCanvasView Load SAMM cached Data file using sDataKey value returned from saveSAMMData()

Public boolean OnWindowFocusChanged(boolean item) { super.onWindowFocusChanged(item);……..mAnimationCanvasView.createSAMMLibrary();mAnimationCanvasView.setAnimationMode(true);

Intent intent = getIntent();String sDataKey = intent.getStringExtra(EXTRA_VIEW_FILE_PATH);

if(mAnimationCanvasView.loadSAMMData(sDataKey)) {mAnimationCanvasView.doAnimationStart(true);

}

……..String sDataKey = mCanvasView.saveSAMMData();……..


ANIMATION


Show animation from the drawing


USING THE S PEN SDK WITH THE ANDROID EMULATOR


Audio playback support: yes

Audio recording support

Audio playback support

Audio recording support: yes

Keyboard support: no

Keyboard support

SD Card support: yes

SD Card support

Max VM application heap size:• For GB, at least 128 MB

(256 MB is recommendet) • For ICS, at least 128 MB (for WXGA800 - 256 MB)

Device RAM size:• For GB, at least 256 MB • For ICS, at least 256 MB

(for WXGA800 – change 1024MB to 512)

Max VM application heap size

Device RAM size 256 512


HISTORY OVERVIEW OF SPEN SDK


1. In 1.0 release (basic methods for drawings are supported):

Canvas, Pen Setting Popup window, Eraser Setting Popup Window, Other primitive methods for drawings.




2. In 1.5 release:

The PenSettingInfo class has been added, Zoom functions have been added for the CanvasView, Panning function for the CanvasView has been added, Background setting function for the CanvasView has been added.




3. In 2.0 release:

The SCanvasView Class inherited from CanvasView has been added, SAMM (Samsung Animated Multimedia Messaging) Library Class has been added Stroke and segmentation rendering have been enhanced, Undo function after clear all has been added, Adding image and text to the CanvasView.

4. In 2.1 release:

S Pen SDK has been updated to support AVD Emulator,


SUMMARY


1. Add the view to be used to the layout xml file2. Register the CanvasView/SCanvasView and SettingView3. Register the SettingView to the CanvasView/SCanvasView 4. Then you can control the pen and eraser settings popup and many other.


03 CONCLUSION




THE S PEN WILL BE ADOPTED FOR MORE DEVICES



DEVELOPER.SAMSUNG.COMTo get the 2.0.1 version of S Pen SDK please visithttp://developer.samsung.com/android/spen.sdk Discussion boards can be found on :http://developer.samsung.com/androidby choosing “Forums” option.


THANK YOU.


Chapter page #2

Documents

S Pen SDK_2.01