EEC-492/693/793 iPhone Application Development Lecture 18 Wenbing Zhao & Nigamanth Sridhar 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Outline Accelerometer Core Graphic and Quartz 2D Assignment: Build the Ball app in chapter 15 Challenge: add the touch feature Build the Draw app for CG drawing 11/28/2018 EEC492/693/793 - iPhone Application Development

What Are Accelerometers? Measure changes in force Y direction: opposite of coordinate system 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Kinds of Orientation Physical orientation How is the device positioned? Interface orientation Where is the status bar? 11/28/2018 EEC492/693/793 - iPhone Application Development

Getting the Physical Orientation UIDevice class Start notifications beginGeneratingDeviceOrientationNotifications Get Orientation // delivered to registered observers UIDeviceOrientationDidChangeNotification orientation property Stop notifications endGeneratingDeviceOrientationNotifications 11/28/2018 EEC492/693/793 - iPhone Application Development

Getting the Interface Orientation UIApplication class statusBarOrientation property Defines interface orientation, not device orientation UIViewController class interfaceOrientation property - (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Shake Detection UIEvent type @property(readonly) UIEventType type; @property(readonly) UIEventSubtype subtype; UIEventTypeMotion UIEventSubtypeMotionShake - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event; - (void)motionCancelled:(UIEventSubtype)motion withEvent:(UIEvent *)event; - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event; - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event {   if (event.type == UIEventSubtypeMotionShake) {     //Your code here   } } 11/28/2018 EEC492/693/793 - iPhone Application Development

Getting the Raw Accelerometer Data Part of the UIKit framework Delivers 3-axis data Configurable update frequency (approx 10–100Hz) Delegate-based event delivery Classes UIAccelerometer UIAcceleration Protocol UIAccelerometerDelegate 11/28/2018 EEC492/693/793 - iPhone Application Development

Configuring the Accelerometer: Starting the event delivery - (void)enableAccelerometerEvents { UIAccelerometer* theAccel = [UIAccelerometer sharedAccelerometer]; theAccel.updateInterval = 1/50; // 50 Hz theAccel.delegate = self; } Event delivery begins as soon as you assign the delegate 11/28/2018 EEC492/693/793 - iPhone Application Development

Defining Your Delegate Object: Processing the accelerometer data - (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration { // Get the event data UIAccelerationValue x, y, z; x = acceleration.x; y = acceleration.y; z = acceleration.z; // Process the data... } Only one delegate per application Delivered asynchronously to main thread 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Configuring the Accelerometer: Choosing an appropriate update frequency System range is approximately 10–100Hz Frequency should be based on need Determine the minimum frequency for your needs Don’t update too frequently Target ranges Game input: 30–60 Hz Orientation detection: 10–20 Hz 11/28/2018 EEC492/693/793 - iPhone Application Development

Disabling Event Delivery: Stopping the event delivery - (void)disableAccelerometerEvents { UIAccelerometer* theAccel = [UIAccelerometer sharedAccelerometer]; theAccel.delegate = nil; } 11/28/2018 EEC492/693/793 - iPhone Application Development

CoreGraphics and Quartz 2D UIKit offers very basic drawing functionality UIRectFill(CGRect rect); UIRectFrame(CGRect rect); CoreGraphics: Drawing APIs CG is a C-based API, not Objective-C CG and Quartz 2D drawing engine define simple but powerful graphics primitives Graphics context Transformations Paths Colors Fonts Painting operations 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Graphics Contexts All drawing is done into an opaque graphics context Draws to screen, bitmap buffer, printer, PDF, etc. Graphics context setup automatically before invoking drawRect: Defines current path, line width, transform, etc. Access the graphics context within drawRect: by calling (CGContextRef)UIGraphicsGetCurrentContext(void); Use CG calls to change settings Context only valid for current call to drawRect: Do not cache a CGContext! 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development CG Wrappers UIColor Convenience for common colors Easily set the fill and/or stroke colors when drawing UIColor *redColor = [UIColor redColor]; [redColor set]; // drawing will be done in red UIFont Access system font Get font by name UIFont *font = [UIFont systemFontOfSize:14.0]; [myLabel setFont:font]; 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Drawing Custom Views - (void)drawRect:(CGRect)rect -[UIView drawRect:] does nothing by default If not overridden, then backgroundColor is used to fill Override - drawRect: to draw a custom view rect argument is area to draw Should never call drawRect: directly Call –(void)setNeedsDisplay instead! 11/28/2018 EEC492/693/793 - iPhone Application Development

Simple drawRect: Example Draw a solid color and shape - (void)drawRect:(CGRect)rect { CGRect bounds = [self bounds]; [[UIColor grayColor] set]; UIRectFill (bounds); CGRect square = CGRectMake (10, 10, 50, 100); [[UIColor redColor] set]; UIRectFill (square); [[UIColor blackColor] set]; UIRectFrame (square); } 11/28/2018 EEC492/693/793 - iPhone Application Development

Drawing More Complex Shapes Common steps for drawRect: are Get current graphics context Define a path Set a color Stroke or fill path Repeat, if necessary 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development CGPath CoreGraphics paths define shapes Made up of lines, arcs, curves and rectangles Creation and drawing of paths are two distinct operations Define path first, then draw it CGContext CGPath CGContextMoveToPoint CGPathMoveToPoint CGContextAddLineToPoint CGPathAddLineToPoint CGContextAddArcToPoint CGPathAddArcToPoint CGContextClosePath CGPathCloseSubPath 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Path Example - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor grayColor] set]; UIRectFill ([self bounds]); CGContextBeginPath (context); CGContextMoveToPoint (context, 75, 10); CGContextAddLineToPoint (context, 10, 150); CGContextAddLineToPoint (context, 160, 150); CGContextClosePath (context); [[UIColor redColor] setFill]; [[UIColor blackColor] setStroke]; CGContextDrawPath (context, kCGPathFillStroke); } 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Drawing Text & Images You can draw UIImages in -drawRect: - [UIImage drawAtPoint:(CGPoint)point] - [UIImage drawInRect:(CGRect)rect] - [UIImage drawAsPatternInRect:(CGRect)rect] You can draw NSString in -drawRect: - [NSString drawAtPoint:(CGPoint)point withFont:(UIFont *)font] 11/28/2018 EEC492/693/793 - iPhone Application Development

EEC492/693/793 - iPhone Application Development Build Two Apps 11/28/2018 EEC492/693/793 - iPhone Application Development