S Pen SDK - 2.01

S Pen SDK THE BEGINNING OF YOUR BRAND NEW APP DEVELOPMENT
Burnham Greeley (extended by Dariusz Koc) Samsung Platform Evangelist
Copyright 1995-2012 SAMSUNG All rights reserved
LETS DIVE TO THE S PEN SDK!
1. What is S Pen? 2. How to use the S Pen SDK? 2.1 Overview 2.2 CanvasView and SettingView 2.3 SCanvasView 2.4 Animation 3. Conclusion
01
WHAT IS S PEN?
1 WHAT IS S PEN?
IS THERE SOMETHING MISSING?
1 WHAT IS S PEN?
NOW, HERE IS THE NEW S PEN 1

Pointing and line drawing precisely Detecting the long-range pressure level No additional power consumption
2
3 4
Launching memo add instantly with double touches
1 WHAT IS S PEN?
S PEN COMPONENTS
PEN TIP
SIDE BUTTON
1 WHAT IS S PEN?
USING S PEN SDK COMPONENTS YOU CAN DEVELOP BRAND NEW APPLICATION
02
HOW TO USE THE S PEN SDK?
2 HOW TO USE THE S PEN SDK?
CONTENTS OF SDK
libspen.jar
Dev Guide
Sample Application
ADD THE JAR FILE TO THE PROJECT

Java Build Path Libraries Add External JARs
Libraries Java Build Path libspen.jar Add External JARs
libspen.jar
SUPPORTING A STYLUS/PEN IN DIFFERENT ANDROID VERSIONS
.. @Override public 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.
3 if (osVer.startsWith("2.3")) {
metaEraserOn = 0x4000000 0x400; if((event.getMetaState() & metaEraserOn) != 0) { eraserOn = true; } 0x2000000 metaPenActiveOn = 0x200; if((event.getMetaState() & metaPenActiveOn) != 0) { penActiveOn = true; }
..

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 import import import import com.samsung.sdraw.CanvasView; com.samsung.sdraw.SDrawLibrary; com.samsung.sdraw.SettingView; com.samsung.sdraw.AbstractSettingView; 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 Add CanvasView and SettingView 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.CanvasView android: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> ..
CANVASVIEW AND Register the SettingView and SETTINGVIEW CanvasView that was identified
by the attribute from the XML
public class SampleActivity extends Activity { .. private CanvasView mCanvasView; private SettingView mSettingView; .. @Override public void onCreate ( Bundle savedInstanceState ) { .. mCanvasView = (CanvasView) findViewById(R.id.canvas_view); mSettingView = (SettingView) findViewById(R.id.setting_view); mCanvasView.setSettingView(mSettingView); ..
CANVASVIEW AND Register the SettingView to the SETTINGVIEW CanvasView

to enable user configuring (thickness, color, type, of pen and eraser)
public class SampleActivity extends Activity { .. @Override public 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
Simple OnBtnClick
public class SampleActivity extends Activity { .. @Override public 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(){ ..


Implement a click listener for setting and eraser buttons which will change current frawing mode
public class SampleActivity extends Activity { .. OnClickListener mBtnClickListener = new OnClickListener(){ @Override public 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 when a pen setting is changed
public class SampleActivity extends Activity { .. @Override public void onCreate ( Bundle savedInstanceState ) { .. mSettingView.setOnSettingChangeListener ( settingChangeListener ); ..

Implement this listener onPenTypeChange method public class SampleActivity extends Activity { .. @Override private 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 { .. @Override private 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 file And register click listener for this buttons
Simple OnBtnClick
public class SampleActivity extends Activity { .. @Override public 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(){ ... ..

Implement onHistoryChangeListener.
.. protected OnClickListener undoNredoBtnClickListener = new OnClickListener() { @Override public void onClick(View v) { if (v == mUndoBtn) { mCanvasView.undo(); onHistorychangeListener } 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 { .. @Override public 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
.. mCanvasView.zoomTo(mCurrZoomValue += 2); mCanvasView.zoomTo(mCurrZoomValue -= 2); ..
By specifying the x and y coordinates you can pan across the drawing
.. mCanvasView.panBy(x, y); ..
BACKGROUND SETTING
To set the background use setBackgrounfTemplate .. public void setBackgroundTemplete( Bitmap topBG, Bitmap middleBG, Bitmap bottomBG) ..
topBG The bitmap for top part background moddleBG The bitmap for middle part background bottomBG The bitmap for top bottom part background
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> .. <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=240dip" android:layout_height=320dip" android:layout_centerInParent="true" /> </FrameLayout>
SCANVASVIEW
Initialize SCanvasView exactly like CanvasView public class SampleActivity extends Activity { .. private SCanvasView mCanvasView; .. mCanvasView = (SCanvasView) findViewById(R.id.canvas_view); .. How to add Basic Data @Override public 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
.. 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); } "myExtraString" 123
SCANVASVIEW
How to play animation
Before animation starts - save data associated with thew drawing .. String sDataKey = mCanvasView.saveSAMMData(); .. Create Samsung Animation Memo library inside of SCanvasView Load SAMM cached Data file using sDataKey value returned from saveSAMMData() Set as animation mode Start animation 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); }
ANIMATION
Show animation from the drawing
USING THE S PEN SDK WITH THE ANDROID EMULATOR

Audio playback support: yes Audio recording support: yes Keyboard support: no SD Card support: yes Max VM application heap size:
SD Card support Audio recording support Keyboard support Max VM application heap size Audio playback support Device RAM size
For GB, at least 128 MB (256 MB is recommendet) For ICS, at least 128 MB (for WXGA800 - 256 MB)
256 512
Device RAM size:

For GB, at least 256 MB For ICS, at least 256 MB (for WXGA800 change 1024MB to 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. 2. 3. 4.
Add the view to be used to the layout xml file Register the CanvasView/SCanvasView and SettingView Register the SettingView to the CanvasView/SCanvasView 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.COM
To get the 2.0.1 version of S Pen SDK please visit http://developer.samsung.com/android/spen.sdk Discussion boards can be found on : http://developer.samsung.com/android by choosing Forums option.
THANK YOU.

S Pen SDK - 2.01

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

S Pen SDK - 2.01

Uploaded by

Copyright:

Available Formats

S Pen SDK THE BEGINNING OF YOUR BRAND NEW APP DEVELOPMENT

Burnham Greeley (extended by Dariusz Koc) Samsung Platform Evangelist

Copyright 1995-2012 SAMSUNG All rights reserved

LETS DIVE TO THE S PEN SDK!

Copyright 1995-2012 SAMSUNG All rights reserved

Copyright 1995-2012 SAMSUNG All rights reserved

IS THERE SOMETHING MISSING?

Copyright 1995-2012 SAMSUNG All rights reserved

NOW, HERE IS THE NEW S PEN 1

Launching memo add instantly with double touches

Copyright 1995-2012 SAMSUNG All rights reserved

Copyright 1995-2012 SAMSUNG All rights reserved

Copyright 1995-2012 SAMSUNG All rights reserved

HOW TO USE THE S PEN SDK?

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

ADD THE JAR FILE TO THE PROJECT

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

SUPPORTING A STYLUS/PEN IN DIFFERENT ANDROID VERSIONS

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

SUPPORTING A STYLUS/PEN IN DIFFERENT ANDROID VERSIONS

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

SUPPORTING A STYLUS/PEN IN DIFFERENT ANDROID VERSIONS

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

2 HOW TO USE THE S PEN SDK?

CANVASVIEW AND Add CanvasView and SettingView SETTINGVIEW

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

CANVASVIEW AND Register the SettingView to the SETTINGVIEW CanvasView

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

PEN AND ERASER POPUP WINDOWS

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

PEN AND ERASER SETTING POPUP WINDOWS

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

2 HOW TO USE THE S PEN SDK?

PEN AND ERASER SETTING POPUP WINDOWS

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

PEN AND ERASER SETTING POPUP WINDOWS

2 HOW TO USE THE S PEN SDK?

RESPONDING TO PEN SETTING CHANGE

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

RESPONDING TO PEN SETTING CHANGE

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

RESPONDING TO PEN SETTING CHANGE

2 HOW TO USE THE S PEN SDK?

UNDO & REDO OPERATIONS

Copyright 1995-2012 SAMSUNG All rights reserved

2 HOW TO USE THE S PEN SDK?

UNDO & REDO OPERATIONS