CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course...
Transcript of CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course...
![Page 1: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/1.jpg)
CS 696 Mobile Phone Application DevelopmentFall Semester, 2010
Doc 20 2D Graphics & TouchNov 9, 2010
Copyright ©, All rights reserved. 2010 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.
![Page 2: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/2.jpg)
References
2
Beginning iPhone 3 Development, Mark & LaMarche, Chapters 12 & 13
Stanford iPhone Course CS193P, Winter 2010, Lecture 5
![Page 3: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/3.jpg)
Graphics
3
Quartz 2D (Core Graphics)OpenGL ES (3D graphics)Core Animation
![Page 4: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/4.jpg)
Views
4
Draws content
Handles events
Subclass of UIResponder
Views arranged hierarchicallyevery view has one superviewevery view has zero or more subviews
![Page 5: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/5.jpg)
UIWindow
5
Views live inside of a window
UIWindow is a view
One UIWindow for an iPhone app
![Page 6: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/6.jpg)
Structures & Functions
6
CGPointlocation in space: { x , y }
CGSizedimensions: { width , height }
CGRectlocation and dimension: { origin , size }
CGPointMake (x, y)
CGSizeMake (width, height)
CGRectMake (x, y, width, height)
![Page 7: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/7.jpg)
Quartz 2D Coordinates
7
(0,0)x
y
![Page 8: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/8.jpg)
Frame & Bounds
8
Both give location & size of View
FrameIn superview coordinatesComputed
BoundsIn local coordinates
320
480
90
100
View B
View A100, 100
View A framesize: 320 x 480origin: 0, 0
View A boundssize: 320 x 480origin: 0, 0
View B framesize: 90 x 100origin: 100, 100
View B boundssize: 90 x 100origin: 0, 0
![Page 9: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/9.jpg)
Frame
9
320
480
View B
View A
Smallest rectangle that contains view
![Page 10: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/10.jpg)
Center
10
320
480
90
100
View B
View A100, 100
Given in superview's coordinates
View B Center145, 150
![Page 11: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/11.jpg)
Painter's Model
11
Drawing Order matters
![Page 12: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/12.jpg)
CGContext
12
All drawing on CGContext
RGBA color
Paths, lines, ellipse, rectangle
Patterns
Shadows
Images
Gradients
Layers
![Page 13: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/13.jpg)
Example Project
13
Add UIView in UIBuilder
Create subclass of UIBuilder
Set class of UIView in View to your subclass
In subclass override
- (void)drawRect:(CGRect)rect
![Page 14: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/14.jpg)
Drawing
14
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextMoveToPoint(context, 0.0f, 0.0f); CGContextAddLineToPoint(context, 100.0f, 100.0f); CGContextStrokePath(context); CGRect circleBoundry = CGRectMake(50, 90, 20,20); CGContextSetLineWidth(context, 4); CGContextAddEllipseInRect(context, circleBoundry); CGContextDrawPath(context, kCGPathStroke); CGRect elipseBoundry = CGRectMake(50, 150, 20,30); CGContextAddEllipseInRect(context, elipseBoundry); CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor); CGContextDrawPath(context, kCGPathFill);
CGContextSetRGBFillColor (context, 1, 0, 0, 1); CGContextFillRect (context, CGRectMake (0, 360, 200, 100 )); CGContextSetRGBFillColor (context, 0, 0, 1, .5); CGContextFillRect (context, CGRectMake (0, 260, 100, 200));}
![Page 15: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/15.jpg)
15
Touch Events
![Page 16: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/16.jpg)
16
Responders
Event is sent to view it occurs in
If it does not handle event it is passed on tosuper view (or controller)
![Page 17: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/17.jpg)
Responder methods
17
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
touches contains on UITouch object for each finger on screen
![Page 18: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/18.jpg)
UITouch
18
Getting the Location of Touches – locationInView: – previousLocationInView: view (property) window (property)
Getting Touch Attributes tapCount (property) timestamp (property) phase (property)
Getting a Touch Object’s Gesture Recognizers gestureRecognizers (property)
Phases UITouchPhaseBegan UITouchPhaseMoved UITouchPhaseStationary UITouchPhaseEnded UITouchPhaseCancelled
![Page 19: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/19.jpg)
UIEvent
19
Getting the Touches for an Event – allTouches – touchesForView: – touchesForWindow:
Getting Event Attributes timestamp (property)
Getting the Event Type type (property) subtype (property)
Getting the Touches for a Gesture Recognizer – touchesForGestureRecognizer:
Types UIEventTypeTouches UIEventTypeMotion UIEventTypeRemoteControl
Subtypes UIEventSubtypeNone UIEventSubtypeMotionShake UIEventSubtypeRemoteControlPlay UIEventSubtypeRemoteControlPause etc.
![Page 20: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/20.jpg)
Example
20
Track user's finger on screen
Draw circles on touch events
Circles get bigger the get older
When user stops touching circles fade
![Page 21: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/21.jpg)
Project Setup
21
One UIView in view
Its class is Touch
#import <Foundation/Foundation.h>
@interface TouchView : UIView { CGPoint points[100]; int numberOfPoints; float alpha;}
- (void) fade;@end
![Page 22: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/22.jpg)
Drawing Circles
22
@implementation TouchView- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(context,
[UIColor colorWithRed: 1.0 green: 0 blue: 0.0 alpha:alpha].CGColor); CGContextSetLineWidth(context, 1);
for (int k=0;k < numberOfPoints;k++) { int size = 4*(numberOfPoints - k + 1); CGRect circleBoundry = CGRectMake(points[k].x - size/2,points[k].y - size/2, size,size); CGContextAddEllipseInRect(context, circleBoundry); CGContextDrawPath(context, kCGPathStroke); }}
![Page 23: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/23.jpg)
First Touch
23
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { numberOfPoints = 0; alpha = 1.0; CGPoint location = [[touches anyObject] locationInView: self]; points[numberOfPoints++] = location; }
![Page 24: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/24.jpg)
Moving
24
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { if (numberOfPoints > 99) { return; } CGPoint location = [[touches anyObject] locationInView: self]; points[numberOfPoints++] = location; [self setNeedsDisplay];}
![Page 25: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/25.jpg)
Touch Ends
25
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { [self fade];}
![Page 26: CS 696 Mobile Phone Application Development Fall Semester ...touch.pdf · Stanford iPhone Course CS193P, Winter 2010, Lecture 5. Graphics 3 Quartz 2D (Core Graphics) OpenGL ES (3D](https://reader034.fdocuments.net/reader034/viewer/2022042123/5e9e77b0d02eba613f23c0f5/html5/thumbnails/26.jpg)
fading
26
- (void) fade { if (alpha <= 0.01) { alpha = 0.0; [self setNeedsDisplay]; return; }; alpha = alpha * 0.92; [self setNeedsDisplay]; [self performSelector:@selector(fade) withObject:nil afterDelay:0.2];}
We will see a better way to do the fading with Core Animation