• Save
MobiCom on Android: Touchscreens, MotionEvents, MotionEvent Cature in Touch Driving Drawings & Sprites, Development & Consumption of Touch Gestures, 2D Animation with Animation Lists
Upcoming SlideShare
Loading in...5
×
 

MobiCom on Android: Touchscreens, MotionEvents, MotionEvent Cature in Touch Driving Drawings & Sprites, Development & Consumption of Touch Gestures, 2D Animation with Animation Lists

on

  • 864 views

 

Statistics

Views

Total Views
864
Slideshare-icon Views on SlideShare
410
Embed Views
454

Actions

Likes
0
Downloads
0
Comments
0

44 Embeds 454

http://vkedco.blogspot.com 195
http://www.vkedco.blogspot.com 89
http://vkedco.blogspot.in 27
http://reader.aol.com 16
http://www.vkedco.blogspot.in 11
http://vkedco.blogspot.ca 11
http://www.vkedco.blogspot.ru 9
http://vkedco.blogspot.co.uk 7
http://vkedco.blogspot.de 7
http://vkedco.blogspot.sg 6
http://vkedco.blogspot.com.br 5
http://vkedco.blogspot.fr 5
http://vkedco.blogspot.co.il 5
http://www.vkedco.blogspot.co.uk 5
http://www.vkedco.blogspot.fr 3
http://vkedco.blogspot.ru 3
http://vkedco.blogspot.pt 3
http://translate.googleusercontent.com 3
http://vkedco.blogspot.it 3
http://vkedco.blogspot.com.au 3
http://vkedco.blogspot.com.ar 3
http://vkedco.blogspot.com.es 3
http://vkedco.blogspot.gr 2
http://www.vkedco.blogspot.tw 2
http://vkedco.blogspot.kr 2
http://www.vkedco.blogspot.de 2
http://www.vkedco.blogspot.it 2
http://www.vkedco.blogspot.kr 2
http://vkedco.blogspot.nl 2
http://vkedco.blogspot.mx 2
http://vkedco.blogspot.jp 2
http://vkedco.blogspot.co.nz 2
http://vkedco.blogspot.cz 1
http://www.vkedco.blogspot.nl 1
http://vkedco.blogspot.be 1
http://www.vkedco.blogspot.co.il 1
http://www.vkedco.blogspot.be 1
http://vkedco.blogspot.tw 1
http://www.vkedco.blogspot.gr 1
http://vkedco.blogspot.ie 1
http://vkedco.blogspot.ch 1
http://vkedco.blogspot.co.at 1
http://www.vkedco.blogspot.mx 1
http://vkedco.blogspot.sk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    MobiCom on Android: Touchscreens, MotionEvents, MotionEvent Cature in Touch Driving Drawings & Sprites, Development & Consumption of Touch Gestures, 2D Animation with Animation Lists MobiCom on Android: Touchscreens, MotionEvents, MotionEvent Cature in Touch Driving Drawings & Sprites, Development & Consumption of Touch Gestures, 2D Animation with Animation Lists Presentation Transcript

    • MobiCom on Android Touchscreens, MotionEvents, MotionEvent Capture in Touch Driving Drawings & Sprites, Development & Consumption of Touch Gestures, 2D Animation with Animation Lists Vladimir Kulyukinhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
    • Outline ● Touchscreens ● Motion Events ● Motion Event Capture and Touch Driving – Touch Driving Drawings – Touch Driving Sprites ● Development & Consumption of Touch Gestures ● 2D Animation with Animation Listshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Touchscreenshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Motivation ● Touch gestures are a viable input alternative, especially on the go ● Touchscreen – is a touch gesture consumption surface ● Recognition accuracy for many (not all) users are higher for touch gestures than for speech ● Unlike speech utterances, touch gestures preserve privacyhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Touchscreen ● Touchscreen is a surface (e.g., an electronic visual display) for detecting touches within a given area ● Touchscreen is made up of special materials that capture pressure inputs and translate them into digital data ● Digital data (x, y, pressure, etc) are passed to software that process them ● Some touchscreens require the use of a stylus ● Touchscreens are becoming a must for many personal digital assitants and increasingly many video gameshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Bits of History ● The concept of touchscreen is described by E.A. Johnson in 1965 ● Potential application in air traffic control systems proposed in 1968 ● First application developed at CERN (European Center for Nuclear Research) in 1973 ● In the 1980s several musical sampling and synthesis systems used light pen technology (Fairlight CMI, Fairlight CMI IIx) ● HP-150 built in 1983 is one of the first touchscreen computershttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Touchscreen Technologies ● Resistive: – touchscreen consists of two thin electric layers separated by thin space – voltage is applied to top layer and sensed by bottom one ● Surface acoustic wave (SAW): – utrasonic waves pass over touchscreen surface – when surface is touched a portion of the wave is absorbed – changes in waves register touch positions and send them to touch processor ● Capacitive: – Capacitance is the ability of a body to store electrical charge – Capacitive touchscreens consist of insulators (e.g., glass) coated with transparent conductors – Since human hand stores electrical charge, touching surface results in surfaces electrostatic field distortions used to capture touchs datahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Motion Eventshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • MotionEvent ● On Android, digital data from touchscreens as MotionEvent objects ● MotionEvent objects are created when the user touches the devices touchscreen ● MotionEvent objects are handled by the View.onTouchEvent() methodhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • MotionEvent Sequences ● When user places his/her finger, moves it (without lifting it up), and then lifts it up, a sequence of MotionEvent objects is generated ● Such sequences can be captured and used in touch gesture recognition ● Each MotionEvent object contains information on: 1) type of action captured (e.g., MotionEvent.ACTION_DOWN, MotionEvent.ACTION_UP, etc); 2) pressure value; 3) x and y coordinates; 4) time of eventhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • MotionEvent ● On Android, digital data from touchscreens as MotionEvent objects ● MotionEvent objects are created when the user touches the devices touchscreen ● As the bare minimum each MotionEvent object contains the x and y coordinates of the touch ● MotionEvent objects are handled by the View.onTouchEvent() methodhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • MotionEvent.getAction() ● MotionEvent.getAction() can be used to retrieve the type of action ● Examples: – MotionEvent.getAction() returns ACTION_DOWN when user touches screen – MotionEvent.getAction() returns ACTION_MOVE when user moves sideways – MotionEvent.getAction() returns ACTION_UP when user lifts his/her fingerhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • View.OnTouchListener ● Classes the receive touchscreen events must implement View.OnTouchListener ● Two main methods to handle MotionEvents are onTouch(View, MotionEvent) and onTouchEvent(MotionEvent) ● onTouch(View, MotionEvent) is used when one OnTouchListener handles MotionEvents from multiple viewshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • View.OnTouchListener ● If onTouch() or onTouchEvent() consumes a received MotionEvent and no other component should not about it, the method should return true ● If onTouch() or onTouchEvent() does not/cannot consume a received MotionEvent, it should return falsehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Touch Driving Drawingshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Problem Develop an application that draws a 3x3 Tic Tac Toe Board, 2 red circles, and 2 blue crosses. The user can touch drive circles and crosses on the screen. source code is herehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Screenshots Initial Screenshot Touch Driving a Circle Touch Driving a Crosshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Solution Outline ● Define a custom View object that extends the View class ● This custom View class (TicTacToeView.java) handles all touch events and does all drawing ● All basic board geometry is abstracted in a separate class (BoardGeometry.java)http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • X & Y Offsets X me is a MotionEvent MEs X c is a Circle X Offset final float me_x = me.getX(); final float me_x = me.getX(); y final float me_y = me.getY(); final float me_y = me.getY(); final int action = me.getAction(); final int action = me.getAction(); c.setActionDownX(c.getCurrentX()); MEs Y c.setActionDownX(c.getCurrentX()); c.setActionDownY(c.getCurrentY()); c.setActionDownY(c.getCurrentY()); c.setActionMoveOffsetX(me_x); c.setActionMoveOffsetX(me_x); c.setActionMoveOffsetY(me_y); c.setActionMoveOffsetY(me_y); Y Offsethttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Custom View: TicTacToeView <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <org.vkedco.mobappdev.draw_touch_drive_00001.TicTacToeView android:id="@+id/pntr" android:tag="Painter" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Object-Oriented Modeling ● BoardGeometry.java ● Shape.java ● Circle.java ● Cross.java ● TicTacToeView.javahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • TicTacToeView: Member Variables public class TicTacToeView extends View { // define background and foreground paints final Paint mBackgroundPaint; final Paint mForeCirclePaint; final Paint mForeCrossPaint; final Paint mForeBoardPaint; // define a BoardGeometry object final BoardGeometry mBoardGeometry; // define arrays of circles and crosses ArrayList<Circle> mCircles; ArrayList<Cross> mCrosses; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • TicTacToeView: Creation of Circles & Crosses public class TicTacToeView extends View { // placing circles and crosses to their start xs & ys private void createCircles() { mCircles = new ArrayList<Circle>(); mCircles.add(new Circle(30, 30, 20)); mCircles.add(new Circle(120, 30, 20)); } private void createCrosses() { mCrosses = new ArrayList<Cross>(); mCrosses.add(new Cross(30, 350, 20)); mCrosses.add(new Cross(120, 350, 20)); } }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Handling MotionEvents ● Get the x and y coordinates of a MotionEvent ME ● Find a circle closest to ME ● Find a cross closest to ME ● If the Euclidean distance from ME to the closest circle is smaller than the Euclidean distance from ME to the closest cross, then assume that the circle was touched and handle it; otherwise, assume that the cross was touched and handle ithttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • TicTacToeView: Handling MotionEvents public boolean onTouchEvent(MotionEvent event) { // 1. get the x and y of MotionEvent float x = event.getX(); float y = event.getY(); // 2. find circle closest to x and y Circle cr = findCircleClosestToTouchEvent(x, y); // 3. find cross closest to x and y Cross cx = findCrossClosestToTouchEvent(x, y); // 4. compute euclid distances to find which is // closer - circle or cross float dtcr = euclidDist(cr.getCurrentX(), cr.getCurrentY(), x, y); float dtcx = euclidDist(cx.getMidX(), cx.getMidY(), x, y); // 5. if distance to closest circle is smaller // handle the circle; otherwise, handle the cross if (dtcr < dtcx) { handleTouchedCircle(event, cr); } else { handleTouchedCross(event, cx); } return true; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • TicTacToeView: Handling Touched Circles private void handleTouchedCircle(MotionEvent me, Circle c) { final float me_x = me.getX(); final float me_y = me.getY(); final int action = me.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: c.setActionDownX(c.getCurrentX()); c.setActionDownY(c.getCurrentY()); c.setActionMoveOffsetX(me_x); c.setActionMoveOffsetY(me_y); break; case MotionEvent.ACTION_MOVE: case MotionEvent.ACTION_UP: c.setCurrentX(c.getActionDownX() + me_x - c.getActionMoveOffsetX()); c.setCurrentY(c.getActionDownY() + me_y - c.getActionMoveOffsetY()); break; case MotionEvent.ACTION_CANCEL: c.restoreStartPosition(); break; }}http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Drawing the Canvas ● Draw the background rectangle over the entire canvas ● Draw the Tic Tac Toe board (horizontal and vertical lines) ● Draw the circles ● Draw the crosses ● Invalidate the canvas object to force it to redrawhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • TicTacToeView: Canvas Drawing public void draw(Canvas canvas) { if ( mDrawingEnabled ) { final int width = canvas.getWidth(); final int height = canvas.getHeight(); // 1. draw background rectangle that covers the entire canvas canvas.drawRect(0, 0, width, height, mBackgroundPaint); // 2. draw board on the canvas drawBoard(canvas); // 3. draw red circles on canvas drawCirclesOnCanvas(canvas); // 4. draw blue crosses on canvas drawCrossesOnCanvas(canvas); // 5. force redraw invalidate(); } }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Touch Driving Spriteshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Problem Develop an application that displays 3 black chess pieces above and 3 white chess pieces below. The application allows the user to touch drive the black chess pieces down. If a black chess piece is driven close to a white chess piece, the white chess piece jumps on the black chess piece. The users objective is to touch drive the black pieces down. source code is herehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Screenshots Initial Screen Piece Capture End Game Restorationhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Sprites Black Bishop White Bishop Black King White King Black Knight White Knighthttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • ChessPiece public class ChessPiece { final Bitmap mBitmap; // image of chess piece float mStartX; // x of top left corner of bitmap float mStartY; // y of top left corner of bitmap float mCurrentX; // current x coordinate of ChessPiece float mCurrentY; // current y coordinate of ChessPiece float mActionDownX; // x coordinate of ChessPiece of an action down float mActionDownY; // y coordinate of ChessPiece of an action down float mActionMoveOffsetX; // x coordinate of a move action float mActionMoveOffsetY; // y coordinate of a move action float mEuclidDistThresh; // threshold to decide if motion event should be consumed // rest of code }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • ChessPiece Construction public ChessPiece(Resources res, int res_id, float dthresh, float start_x, float start_y) { mBitmap = BitmapFactory.decodeResource(res, res_id); mStartX = start_x; mStartY = start_y; mCurrentX = start_x; mCurrentY = start_y; mEuclidDistThresh = dthresh; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Development & Android of Touch Gestureshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Development of Touch Gestures ● You create your own gesture recognizer that captures and interprets a library of touch gestures ● You can also use the Android GestureBuilder application to develop a library of touch gestures ● The built gestures are saved on sdcard ● Each gesture receives a name and can be subsequently deleted or refinedhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Problem Use the Android GestureBuilder application to develop gestures for handwritten letters a, b, and c. Write an application that consumes the built gestures and toasts the names of recognized gestures. source code is herehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Develop & Save Touch Gestures 1. Start GestureBuilder 2. Draw a Gesture 3. Save ithttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Consumption of Touch Gestures ● To implement a touch gesture consumer (BuiltGesturesConsumer) – Create a directory /res/raw – Place the gestures file you build with the Android GestureBuilder into /res/raw – The main layout of the gesture consumer must be android.gesture.GestureOverlayView – The class that consumes gestures must implement OnGesturePerformedListenerhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • BuiltGesturesConsumer: Main Layout <?xml version="1.0" encoding="UTF-8"?> <android.gesture.GestureOverlayView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gestures" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gestureStrokeType="multiple" android:eventsInterceptionEnabled="true" android:orientation="vertical"> <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </android.gesture.GestureOverlayView>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • BuiltGesturesConsumer: Gesture Library // Class must implement OnGesturePerformedListener public class BuiltGesturesConsumerAct extends Activity implements OnGesturePerformedListener { // Gestures are saved in GestureLibrary private GestureLibrary mLibrary; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • BuiltGesturesConsumer: Gesture Library @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); this.setContentView(R.layout.main); // Load the gesture library from /res/raw/gestures mLibrary = GestureLibraries.fromRawResource(this, R.raw.gestures); if (!mLibrary.load()) { finish(); } GestureOverlayView gestures = (GestureOverlayView) findViewById(R.id.gestures); // Make this class to be the gesture listener gestures.addOnGesturePerformedListener(this); }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • BuiltGesturesConsumer: Gesture Consumption @Override public void onGesturePerformed(GestureOverlayView overlay, Gesture gesture) { // 1. get the predictions ArrayList<Prediction> predictions = mLibrary.recognize(gesture); // 2. make sure that there is at least one prediction if (predictions.size() > 0) { // 3. get the best prediction Prediction prediction = (Prediction) predictions.get(0); // 4. make sure the confidence score is > 1.0 if (prediction.score > 1.0) { // Show the letter Toast.makeText(this, prediction.name, Toast.LENGTH_SHORT).show(); }}}http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • 2D Animation with Animation Listshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Animation Lists ● Animation list is an XML specification of a list of bitmaps along with their display times (in milliseconds) ● Animation lists furnish a simple way to play animations as sequences of bitmaps ● The most time consuming part about using animation lists is the production of bitmaps (unless, of course, they are already available) ● Animation lists are XML files placed in /res/drawablehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Problem Develop an Android application, called TicTacToe2DAnimator, where animation lists are used to show 3 Tic-Tac-Toe plays: a win for X, a win for O, and a draw. Plays can be started via an options menu. Detailed blogpost is here Source code is herehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Screenshots 1. Initial Activity with Menu 2. Win for Xhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Animation List <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/o_wins_00" android:duration="500" /> <item android:drawable="@drawable/o_wins_01" android:duration="500" /> <item android:drawable="@drawable/o_wins_02" android:duration="500" /> <item android:drawable="@drawable/o_wins_03" android:duration="500" /> <item android:drawable="@drawable/o_wins_04" android:duration="500" /> <item android:drawable="@drawable/o_wins_05" android:duration="500" /> <item android:drawable="@drawable/o_wins_06" android:duration="500" /> <item android:drawable="@drawable/o_wins_07" android:duration="500" /> </animation-list>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Activity Layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/img_view_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background_green" android:contentDescription="@string/animation_list_content_description" /> </RelativeLayout>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Main Activity public class TicTacToe2DAnimatorAct extends Activity { ImageView mImgViewFrameAnimator = null; AnimationDrawable mAnimDraw = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.tic_tac_toe_2d_animator_activity); mImgViewFrameAnimator = (ImageView) this.findViewById(R.id.img_view_frame); mImgViewFrameAnimator.setBackgroundDrawable(null); } // rest of the code }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Starting Animations via Options Menu public boolean onMenuItemSelected(int featureId, MenuItem item) { switch ( item.getItemId() ) { case R.id.item_x_wins: animateTicTacToe_X_WINS(); return true; case R.id.item_o_wins: animateTicTacToe_O_WINS(); return true; case R.id.item_x_o_draw: animateTicTacToe_X_O_DRAW(); return true; } return true; }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • Starting and Stopping Animation Lists // This animation list plays an animation in which O wins void animateTicTacToe_O_WINS() { mImgViewFrameAnimator.setBackgroundResource(R.drawable.tic_tac_toe_o_wins_animation_list); mImgViewFrameAnimator.setVisibility(ImageView.VISIBLE); mAnimDraw = (AnimationDrawable) mImgViewFrameAnimator.getBackground(); if ( mAnimDraw.isRunning() ) mAnimDraw.stop(); mAnimDraw.start(); }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
    • References ● en.wikipedia.org/wiki/Touchscreen ● http://developer.android.com/reference/android/view/MotionEvent.html ● http://developer.android.com/reference/android/view/View.OnTouchListener.html ● http://en.wikipedia.org/wiki/Chess ● http://vkedco.blogspot.com/2012/12/mobappdev-2d-frame-animations-on-android.htmlhttp://www.youtube.com/vkedco www.vkedco.blogspot.com