Other Input Methods Pre-Lab Lecture 4 1

Revisit 2  Pre-Lab 3 – Animation  Boundary Information  Layer Concept  Animation algorithm  Next Position Calculation  Data and Image object  Moving Out of Boundary  Lab 3  Shooting out a list of Bullets  Shrinking the Time Left Bar  Generating the target balloon and moving down

Overview of Lab 4 3 INPUT PROCESSOUTPUT Touch on Screen Tilt Device Tutorial 4 Part 1 Part 2 Part 3

Input method 4  Now, we can control  The movement of the user Image through the Left or Right Button  The Bullets Shooting through the Shoot Button  In fact, iPhone is well-known of the following two kinds of input method which will be discussed in this Pre-Lab Lecture  Touches and Gestures Detection  Device Tilting

Touch Event vs Action on UI Component 5  Similarity  Both of them involve the finger touches on the screen  Differences  If the finger touches on the screen which has a UI component, and this UI component can apply action, then this becomes an action to the UI component  e.g., Press a button activates the “Touch Up Inside”action on the left button in Tutorial 1 Part 3.  Otherwise, this becomes a touch event to the screen view  i.e., We can only know some basic information like  The point touches by the finger on the screen view  How many points currently touched on the screen view  By interpreting these basic information, some sophisticated touches actions and gestures can be detected.

Touches Actions and Gestures 6  Touches Actions and Gestures  Tapping  Single Tap – touch a single point of the screen once  Double Tap – touch a single point of the screen twice  Multitouch  Touch several points on the screen simultaneously  Dragging  Touch on a certain UI component and move the center of the UI component  Swipping  Moving on the screen to the right or left to represent next page/prev  Zooming In or Out  Moving two fingers towards or outwards to represent zoom in or zoom out gesture

Tapping – Single Tap 7 Screen View Touch point on screen Touch a Single Point on the Screen

Tapping – Double Taps and Multi Taps 8 Screen View First Touch point on screen Second Touch point on screen Double Taps: Touch a Single Point on the Screen twice within a short period of time Multiple Taps: Taps more than twice are possible to be detected

MultiTouches 9 Screen View Touch point 1 MultiTouches: It is possible to detect more than one touch on the screen simultaneously Touch point 2

Dragging 10 Screen View Dragging: Touches on a certain UI component (cannot apply action type) and move to other place on the screen together with the UI component

Swipping 11 Screen View Swipping: Touches on a certain point on the screen and move to other place Usually, moving right is used to represent the gesture of next page, and moving left is used to represent the gesture of previous page

Zooming in/out 12 Screen View Zooming in: Two fingers touch on the screen simultaneously and move towards each other. This is to represent the gesture that we would like to zoom in to look more detail on the image Zooming out: Two fingers touch on the screen simultaneously and move outwards

Basic Touches Event Handlers 13  Traditionally, iPhone SDK does not provide any method for interpreting the touches actions and gestures  They only provide three basic methods for handling three different stages of touches events  Touches Began  This method will be invoked ONCE when the finger first touches on the screen every time  Touches Moved  This method will be invoked CONTINUOUS when the finger moves on the screen  Touches Ended  This method will be invoked ONCE when the finger leaves the screen

Part 1A - Touch Events Test 14  Basically, the iPhone app can handle three basic touch events when you implement the following methods inside the view controller  TouchesBegan Method  TouchesMoved Method  TouchesEnded Method  We will then discuss how to interpret several common touches actions from these touches events  Single Tap on Screen  Moving on the Screen  Double Taps on the Screen  Two Touches on the Screen

Basic Touches Method 15 // Touches Began Method -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ Began”); } // Touches Moved Method -(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{ Moved”); } // Touches Ended Method -(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ Ended”); }

Example Situation 1 – Single Tap on Screen 16 TouchesBegan TouchesEnded Finger touches the screen Finger leaves the screen

Example Situation 2 – Moving on the screen 17 TouchesBegan TouchesEnded Finger touches the screen Finger leaves the screen TouchesMoved Finger moves on the screen

Information provided by a touch event 18  Within each touch event method, you can request it to give you some more detail information  How many touches currently identified on the screen  The touch point of each touch on the screen  How many times a certain point is touch consecutively

Example: Touches Began Event 19 -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ // By invoking the allTouches method of event, which is provided by the touches method (i.e., touches began method in this case), a set of touches will be returned. // Note that the return type is NSSet, and it is just a convention of using allTouches as a variable to hold the set. You can definitely use our variable name.  NSSet * allTouches = [event allTouches]; // By invoking allObjects method of the allTouches, we will then get an NSArray holding the UITouch object // Note that UITouch can be regarded as the object which actually holds a specific touches information on the screen, e.g., the point that this touch occurs. In the following code, we are interested in the first object of the array.  UITouch * touch = [[allTouches allObjects] objectAtIndex:0];

Information that we may interest in 20 // Touch Point Location Information // By invoking the locationInView method of the UITouch, we can get the actual touch point location of this touch on our current screen view by using our current screen view as the input parameter, i.e., [self view]  CGPoint touchPoint = [touch locationInView:[self view]]; // Number of touches simultaneously on screen // Recall that allTouches is the variable holding the set of touches on the screen. // We can ask for how many touches occur on the screen by asking for its size directly  [allTouches count]; // Number of Consecutive Touches on a single point // Recall that touch is a variable referring to a specific touch information on the screen // We can invoke its tapCount method to get this information  [touch tapCount];

Example Situation 3 – Double Taps or Multi Taps 21  NSSet * allTouches = [event allTouches];  UITouch * touch = [[allTouches allObjects] objectAtIndex:0];  switch ([touch tapCount]){  case 2:{  a point 2 times screen”);  CGPoint touchPoint = [touch locationInView:[self view]];  %f, y: %f”, touchPoint.x, touchPoint.y);  } }

Example Situation 4 – Two or More Touches on Screen 22  NSSet * allTouches = [event allTouches];  switch([allTouches count]){  case 2:{  2 points on screen”);  UITouch * touch1 = [[allTouches allObjects] objectAtIndex:0];  CGPoint touchPoint1 = [touch1 locationInView:[self view]];  %f, y: %f”, touchPoint1.x, touchPoint1.y);  UITouch * touch2 = [[allTouches allObjects] objectAtIndex:1];  CGPoint touchPoint2 = [touch2 locationInView:[self view]];  %f, y: %f”, touchPoint2.x, touchPoint2.y);  }

Discussion on Multi-Touches Case 23  Please note that the order of the touch points is not fixed  Refer to the previous example,  (a) First touch point is “x:204, y:109”  (b) Second touch point is “x:276. y:211”  However, even if you touch the two same points again, it is possible for (a) to be second touch point, and (b) to be the first touch point.  i.e., the order is reverse

Simulating two touch points in iPhone Simulator 24  In iPhone simulator, single touch point is used by default.  To simulate two points, you can press OPTION when you move the mouse pointer on the screen view.

Part 1B - Double Taps to Shoot 25  Hints:  Now, when you press the shoot button, the bullet will be shot To support the new function  Add in a method “fireBullet” to handle all the bullet shooting situations. Invoke the method when  Press the Shoot Button  Double Taps on the screen

Part 2 – Touch Moved and Dragging Practice 26  Objective:  Allow the shooter to be dragged horizontally when the user touches on the image.  The orientation of the image can be changed by swiping outside the image.  Algorithm:  Detect the touch move position on screen  Check whether the touch falls on the image or not  If true  Handle the userImage move situation  If false  Handle the angle change situation  Problem:  Why Implement the function in TouchesMoved?  How to distinguish whether your finger falls on the image or not?  How to calculate the angle moved

Image Touch Detection Technique 27  Recall that to detect the touch location on the screen view  UITouch * touch = [[allTouches allObjects] objectAtIndex:0];  CGPoint touchPT = [touch locationInView:[self view]];  To check whether your finger touch falls on the image  touchPT.x > x1 and touchPT.x < x2  touchPT.y > y1 and touchPT.y <y2  Note that x2 = x1+width, y2 = y1+height (x1, y1) (x2, y1) (x1, y2) (x2, y2)

Angle Calculation Technique 28 P2 (x, y) P3 (x, y - 10) Artificial Point User Image Center Point Finger Touch Point P1 (x’, y’) Angle Can be Calculated For your simplicity, we implemented AngleCalculator.h and AngleCalculator.m Method find_angle returns the angle at p2 of the triangle formed by the three points by taking CGPoints p1, p2, p3 as input parameters. To make a CGPoint, you can use CGPointMake(float x, float y).

Image Angle Rotation 29  To change the angle of the userImage  We can rotate the userImage to the appropriate direction  // Rotate the view  CGAffineTransform transform = CGAffineTransformMakeRotation( ); .transform = transform;  Note that the angle of rotation refers to the angle start from the 0 no matter what the current angle of rotation is 0 0 angle of rotation

Input Method – Device Tilting 30  iPhone allows the application to detect device tilting through the taking of the accelerometer reading periodically  They provide accelerometer reading in three directions  X, Y, and Z  To simplify the case, we will only explain X and Y in the Pre-Lab  Accelerometer reading is bounded by (-1 < 0 < 1) depends on the degree you tilt the device  i.e., the larger the degree you tilt, the larger will be its absolute value. The maximum absolute value will be 1  We can use this to act as an another kind of input method to our application

Horizontal Position 31  This is the position in which the device is horizontally put on the desk  In this case,  X = 0, Y = 0  Suppose we rotate the device right

Right Rotation Position 32  This is the position in which the device is rotated to right on the desk  In this case,  X = 1, Y = 0  Suppose we rotate the device left this time

Left Rotation Position 33  This is the position in which the device is rotated to left on the desk  In this case,  X = -1, Y = 0  Suppose we rotate the device to vertical up position

Vertical Up Position 34  This is the position in which the device is rotated to vertical up position  In this case,  X = 0, Y = -1  Suppose we rotate the device to vertical upside down this time

Vertical Upside Down Position 35  This is the position in which the device is rotated to vertical upside down position  In this case,  X = 0, Y = 1

To conclude 36 +x -x -y +y

Recall: Screen View Orientation and Coordinate Representation 37 (0, 0) (480, 320) (480, 0) (0, 320) Landscape Mode (0, 0) (320, 0) (320, 480)(0, 480) Protriat Mode Coordinate System Changes when it changes from Protrait mode to landscape mode

Accelerometer Reading 38  However, this representation will not change even the orientation of the screen change +y +x Landscape Mode Home Button Protrait Mode +x -y -x +y -y -x

Part 3A - Detecting Device Tilting Event (UIAccelerometer Event) 39  Implement UIAccelerometer Delegate Protocol by changing the header of BallShootingViewController to  // This is to show that this view controller has implemented a method to handle the Accelerometer reading BallShootingViewController : UIViewController  Initialize the Accelerometer Reading with the update Interval by writing method initializationAccelerometer. Make sure you call this method in ViewDidLoad.  // Reset the Accelerometer  [[UIAccelerometer sharedAccelerometer] setDelegate:nil];  // Set the Accelerometer to take the reading every DEFAULT_TIMER_RATE second  [[UIAccelerometer sharedAccelerometer] setUpdateInterval:DEFAULT_TIMER_RATE];  // This is to tell the Accelerometer that the current view controller has implemented a method in handling when the reading is ready  [[UIAccelerometer sharedAccelerometer] setDelegate:self];

Part 3A - Detecting Device Tilting Event (UIAccelerometer Event) II 40  Implement the didAccelerate method in the view controller which will be invoked when accelerometer reading is ready  - (void) accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration{  // You can get the corresponding X, Y, Z reading by looking for acceleration.x, acceleration.y, and acceleration.z in the didAccelerate mehtod  x: %f, Accel y: %f, Accel z: %f", acceleration.x, acceleration.y, acceleration.z);  }  Note that you must load your application to the real device to test the results.

Part 3B – Tilting Device to Move User Image 41  In part 3B, we would like the student to implement the function  Tilt device to right hand side in landscape mode to move userImage to right  Tilt device to left hand side in landscape mode to move userImage to left  Hints:  Applying appropriate offset (obtained from the accelerometer Reading) to the center position of the userImage  Careful handling the Accelerometer Reading when tilting the device