QuartzTestView.h

An object QuartzTestView is a new view we are creating.

We will set an object of this class to be the view used by our view controller.

#import <UIKit/UIKit.h>
#import "Constants.h"

@interface QuartzTestView : UIView {
	CGPoint firstTouch;
	CGPoint lastTouch;
	UIColor *currentColor;
	ShapeType shapeType;
	UIImage *drawImage;
	BOOL useRandomColor;
}
@property CGPoint firstTouch;
@property CGPoint lastTouch;
@property (nonatomic, retain) UIColor *currentColor;
@property ShapeType shapeType;
@property (nonatomic, retain) UIImage *drawImage;
@property BOOL useRandomColor;
@end

As this class is going to respond to touch events we have properties for the start and current location of touch.
As we will support multiple colors we have a property for the currentColor and another for whether to use a random color; we will draw different shapes so have for the current shape. We also have a property that we will use to hold an image resource that we will also be able to draw.

QuartzTestView.m

Here is the implementation of QuartzTestView. The drawRect method is where we override the base UIView ways of drawing things. We also have code to handle touch events (when they start, end and how they change).


#import "QuartzTestView.h"
#import "UIColor-Random.h"


@implementation QuartzTestView

@synthesize firstTouch;
@synthesize lastTouch;
@synthesize currentColor;
@synthesize shapeType;
@synthesize drawImage;
@synthesize useRandomColor;

//we're using initWithCoder as we are loading the view from a nib
// and so init and initWithFrame will never be called
-(id)initWithCoder:(NSCoder *)coder
{
    if((self = [super initWithCoder:coder])) {
        self.currentColor = [UIColor redColor];
        self.useRandomColor = NO;
    if(drawImage == nil)
        self.drawImage = [UIImage imageNamed:@"myphoto.png"];
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect 
{
    CGContextRef context = UIGraphicsGetCurrentContext();
	
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, currentColor.CGColor);
    CGContextSetFillColorWithColor(context, currentColor.CGColor);

    CGRect currentRect = CGRectMake(
        (firstTouch.x > lastTouch.x) ? lastTouch.x : firstTouch.x,
        (firstTouch.y > lastTouch.y) ? lastTouch.y : lastTouch.y,
        fabsf(firstTouch.x - lastTouch.x), 
        fabsf(firstTouch.y -lastTouch.y));
    switch (shapeType)
    {
        case kLineShape:
           CGContextMoveToPoint(context, firstTouch.x, firstTouch.y);
           CGContextAddLineToPoint(context, lastTouch.x, lastTouch.y);
           CGContextStrokePath(context);
        break;

        case kRectShape:
           CGContextAddRect(context, currentRect);
           CGContextDrawPath(context, kCGPathFillStroke);
        break;

        case kEllipseShape:
           CGContextAddEllipseInRect(context, currentRect);
           CGContextDrawPath(context, kCGPathFillStroke);
        break;

        case kImageShape: {
           CGFloat horizontalOffset = drawImage.size.width/2;
			
           CGFloat verticalOffset = drawImage.size.width/2;
           CGPoint drawPoint = CGPointMake(lastTouch.x - horizontalOffset, 
               lastTouch.y - verticalOffset);
           [drawImage drawAtPoint:drawPoint];
        break;
        }
        default:
        break;
    }
}

// Basic idea for touch handlers is to store in fields the touch info and redraw
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
    if(useRandomColor)
        self.currentColor = [UIColor randomColor];
    UITouch *touch = [touches anyObject]; //touches recieves all 
                                          //finger presses we just need one
    firstTouch = [touch locationInView:self]; //store touch start info
    lastTouch = [touch locationInView:self];

    [self setNeedsDisplay]; // redraw view
}
- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"hi there, this method does nothing");
}
	
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{	
    UITouch *touch = [touches anyObject];
    lastTouch = [touch locationInView:self];
    [self setNeedsDisplay]; // redraw view	
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    lastTouch = [touch locationInView:self];
    [self setNeedsDisplay]; // redraw view	
}

- (void)dealloc 
{
    [currentColor release];
    [drawImage release];
    [super dealloc];
}

@end

QuartzTestViewController.h

The view controller class is responsible for handler events from the two segmented controls. To do this we have methods changeColor and changeShape.

#import <UIKit/UIKit.h>

@interface QuartzTestViewController : UIViewController {
    IBOutlet UISegmentedControl *colorControl;
}

@property (nonatomic, retain) UISegmentedControl *colorControl;
-(IBAction)changeColor:(id)sender;
-(IBAction)changeShape:(id)sender;
@end

We have an IBOutlet for the color segmented control, because when someone is drawing an image they can't select a color for the image so we turn off the color segmented control. Thus, we need a reference to it to do this.

QuartzTestViewController.m

The implementation of changeColor and changeShape is pretty straightforward:

#import "QuartzTestViewController.h"
#import "QuartzTestView.h"
#import "UIColor-Random.h"
#import "Constants.h";

@implementation QuartzTestViewController

@synthesize colorControl;

- (IBAction)changeColor:(id)sender {
    UISegmentedControl *control = sender;
    NSInteger index = [control selectedSegmentIndex];
	
    QuartzTestView *quartzView = (QuartzTestView *)self.view;
	
    switch (index)
    {
        case kRedColorTab:
           quartzView.currentColor = [UIColor redColor];
           quartzView.useRandomColor = NO;
        break;
        case kBlueColorTab:
           quartzView.currentColor = [UIColor blueColor];
           quartzView.useRandomColor = NO;
        break;
        case kYellowColorTab:
           quartzView.currentColor = [UIColor yellowColor];
           quartzView.useRandomColor = NO;
        break;
        case kGreenColorTab:
           quartzView.currentColor = [UIColor greenColor];
           quartzView.useRandomColor = NO;
        break;
        case kRandomColorTab:
           quartzView.useRandomColor = YES;
        break;
        default:
        break;
    }
}

- (IBAction)changeShape:(id)sender {
    UISegmentedControl *control = sender;
    [(QuartzTestView *)self.view setShapeType:[control selectedSegmentIndex]];
    if([control selectedSegmentIndex] == kImageShape)
        colorControl.hidden = YES;
    else
        colorControl.hidden = NO;
}

- (void)viewDidLoad {
    [super viewDidLoad];
}



- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
}


- (void)dealloc {
    [colorControl release];
    [super dealloc];
}

@end

QuartzTestViewController.xib

To complete the project we open QuartzTestViewController.xib in interface builder, we click on the view then switch to the identity inspector and make sure the class of the view is changed from UIView to QuartzTestView.
We drag out two segmented controls.
For the color one, in the control attributes we set that it has five segments and then give labels for each segment.
For the shape one, in the control attributes we set that it has four segments and then give labels for each segment.
We drag out a Navigation bar and place it at the top of the screen and we draw out a toolbar and place it at the bottom of the screen.
We delete the button on the latter and then draw our two segmented controls to the appropriate bars.
Finally, we hook-up the segmented control IBOutlet of the file's owner to the color segmented control; and we hook up the valueChanged methods of the two segmented controls to the appropriate shapeChanged or colorChanged of the file's owners.

Using Locations and the Accelerometer

We will build an iPhone app with three labels: one with the current location, one with the current heading, and one accelerometer info.
To start we make a new view-based application.
We make sure to add to the list of frameworks the CoreLocation.framework.
If you don't do this, in the linking phase of your project you will get mysterious undefined symbols.

SensorTestsViewController.h

The header file for our sensor text project basically imports CoreLocations and sets up the outlets and properties of our three labels.

Notice we promise that our controller has methods

- (void) locationManager: (CLLocationManager *)manager 
	didUpdateToLocation: (CLLocation *)newLocation fromLocation: (CLLocation *)oldLocation ;

- (void) locationManager:(CLLocationManager *)manager 
		didUpdateHeading: (CLHeading *)newHeading ;

- (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error ;

to handle location and heading info, we implement the interface CLLocationManagerDelegate; to promise that our controller has methods

- (void)accelerometer:(UIAccelerometer *)accelerometer 
		didAccelerate:(UIAcceleration *)acceleration;

to handle accelerometer info, we implement the interface UIAccelerometerDelegate.

#import <UIKit/UIKit.h>
#import <CoreLocation/CoreLocation.h>

@interface SensorTestsViewController : UIViewController <CLLocationManagerDelegate, 
	UIAccelerometerDelegate> {
	IBOutlet UILabel *locationLabel;
	IBOutlet UILabel *headingLabel;
	IBOutlet UILabel *accelerometerLabel;
	CLLocationManager *locationManager;
}
@property (retain, nonatomic) UILabel *locationLabel;
@property (retain, nonatomic) UILabel *headingLabel;
@property (retain, nonatomic) UILabel *accelerometerLabel;

@end

SensorTestsViewController.xib

We add three labels and play with their colors so that the UI of our app looks like:
I also changed the line breaks property for the label data to character wraps.
Finally, I control dragged from File's Owner to each of the labels to hook up the outlets.

SensorTestsViewController.m

Here is our implementation file:

#import "SensorTestsViewController.h"

@implementation SensorTestsViewController

@synthesize locationLabel;
@synthesize headingLabel;
@synthesize accelerometerLabel;

- (void) viewDidLoad {

	locationManager = [[CLLocationManager alloc] init];
	
	locationManager.delegate = self;
	
	locationManager.desiredAccuracy = kCLLocationAccuracyBest;

	[locationManager startUpdatingLocation];	
	[locationManager startUpdatingHeading];

	UIAccelerometer *accelerometer = [UIAccelerometer sharedAccelerometer];
	accelerometer.delegate = self;
	accelerometer.updateInterval = 1.0f/60.0f; /* how many times a second to send
           acclerometer updates. Shouldn't do too fast or battery dies. */
}

- (void) locationManager: (CLLocationManager *)manager 
	didUpdateToLocation: (CLLocation *)newLocation fromLocation: (CLLocation *)oldLocation {


	NSString *loc = [[NSString alloc] initWithFormat:@"My Coordinates: %@",
					   newLocation.description];
	locationLabel.text = loc;
	
	[loc release];
}

- (void) locationManager:(CLLocationManager *)manager 
		didUpdateHeading: (CLHeading *)newHeading {

	NSString *head = [[NSString alloc] initWithFormat:@"My Heading: %@",
					 newHeading.description];
	headingLabel.text = head;
	
	[head release];
}

- (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error {
	if ([error code] == kCLErrorDenied) {
		[locationManager stopUpdatingLocation];
	}
}

- (void)accelerometer:(UIAccelerometer *)accelerometer 
		didAccelerate:(UIAcceleration *)acceleration {
	NSString *head = [[NSString alloc] initWithFormat:@"Acceleration: X:%f Y:%f Z:%f",
					  acceleration.x, acceleration.y, acceleration.z];
	accelerometerLabel.text = head;
	
	[head release];	
}
- (void)didReceiveMemoryWarning {
	// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
	
}

- (void)viewDidUnload {
}


- (void)dealloc {
	[locationLabel release];
	[locationManager release];
    [super dealloc];
}

@end

Remarks

If you look at the code, in viewDidLoad I start the locationManager to send update events of the location and heading to the current heading. If this were a better app I would maybe have a toggle that sent the stopUpdatingLocation and stopUpdatingHeading messages to the locationManager at some point.
In the CLLocationManagerDelegate methods we implement above I only use the description property of CLLocation and CLHeading. This is a nice handy dandy string summarizing the information that these classes provide; however, it is not necessarily the most convenient thing for other applications.
CLLocation has altitude, coordinate, course, speed, horizontalAccuracy, and verticalAccuracy properties from which more information can be more directly had.
For example, coordinate is a CLLocationCoordinate2D object which is a struct with two members longitude and latitude which give these values in degrees.
Similarly, CLHeading has properties headingAccuracy (max deviation degrees), magneticHeading, timestamp, trueHeading, x, y, and z.
x, y, and z are values between -128, and +128 and represent the deviation from the magnetic field lines about the vertical length of the phone, the horizontal length of the phone, and through the height of the phone.
UIAcceleration's x, y, z attributes measure the acceleration of the device in the horizontalwise, lengthwise, and height directions

Sensor App Running

Here is a screenshot of the sensor app running, this is an example of app which is better to test on an actual device:

Android Sensor's Revisited

We have already talked about how to use the LocationManager in Android.
To make an app that uses the Accelerometer, you should use the SensorManager class.
We will make a simple app to write the current accelerometer info in a TextView.

To begin here is what our apps only layout and string.xml file look like:

string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="xyz">Acceleration: X: Y: Z:</string>
    <string name="app_name">AccelerometerDemo</string>
</resources>

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/xyz"
    android:id="@+id/acceleration"
    />
</LinearLayout>

AcceleratorDemo.java

We use onCreate to set up the SensorManager and to get a Sensor object for our accelerometer.
We use onResume to register a listener for SensorEvents from the accerometer.
We use onPause to remove this listener.
Our activity itself implements SensorEventListener and to do this it needs to implement:
```
    public void onSensorChanged(SensorEvent event);
    public void onAccuracyChanged(Sensor arg0, int arg1);
```
We really only care about code in the former method.
The SensorEvent object we get has a values array which gives us the x, y, z directions of acceleration.

Here is the final code for AcceleratorDemo.java:

package org.pollett;

import java.util.List;

import android.app.Activity;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.widget.TextView;

public class AccelerometerDemo extends Activity implements SensorEventListener 
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
    	
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        accelerationLabel = (TextView )this.findViewById(R.id.acceleration);        

        manager = (SensorManager)getSystemService(SENSOR_SERVICE);
        List<Sensor> list = manager.getSensorList(Sensor.TYPE_ACCELEROMETER);
        if(list != null && list.size() > 0) {
            accelerometer = list.get(0);
        }

    }

    @Override
    public void onResume() 
    {
    	super.onResume();
    	if(accelerometer != null) 
    	{
            manager.registerListener(this, 
                accelerometer, SensorManager.SENSOR_DELAY_NORMAL);
    	}

    }
 
    @Override
    public void onPause() 
    {
    	super.onPause();
        if(accelerometer != null) 
    	{
    		manager.unregisterListener(this);
    	}  

    }
    
    public void onAccuracyChanged(Sensor arg0, int arg1) {

    }

    public void onSensorChanged(SensorEvent event) {
       accelerationLabel.setText("Acceleration X:" + event.values[0]
          + " Y:" + event.values[1]
          + " Z:" + event.values[2]);		
    }
    
    protected TextView accelerationLabel;
    protected SensorManager manager;
    protected Sensor accelerometer;    

}

Creating an OpenGL ES Application

One easy place to get started is to create a new iPhone project and select OpenGL ES Game.
Currently, this shows two rotating cubes. We are going to describe the earlier demo they had for iPhone 4 using a shaded square.
This creates a first test application with a bouncing "rainbow" square in it.
The OpenGLAppDelegate code in this case loads the Window and View from MainWindow.xib
Sets up the Render Loop Timer.
In the case here, the Window has on it a EAGLView object.
The render loop timer is set up and started with
```
[glView startAnimation];
```
in appDidFinishLaunching

Our EAGLView

This class has three main methods: startAnimation, stopAnimation, drawView
It also has properties isAnimating and animationFrameInterval
EAGLView is actually a wrapper class for the C CoreAnimation CAEAGLLayer.
It has some methods: initWithCoder and layerClass which do some of the OpenGL set-up which derived from this wrapping.
It is in initWithCoder that a CAEAGLLayer and a ES2Renderer is created which we will actually use to do drawing.
The renderer is created with a line like:
```
renderer = [[ES2Renderer alloc] init];
```

startAnimation and drawView

Here is the boiler plate code for startAnimation:

- (void) startAnimation
{
   if (!animating)
   {
      if (displayLinkSupported)
      {
      // CADisplayLink is API new to iPhone SDK 3.1. Compiling against earlier versions will result in a warning, but can be dismissed
      // if the system version runtime check for CADisplayLink exists in -initWithCoder:. The runtime check ensures this code will
      // not be called in system versions earlier than 3.1.

      displayLink = [NSClassFromString(@"CADisplayLink") displayLinkWithTarget:self selector:@selector(drawView:)];
      [displayLink setFrameInterval:animationFrameInterval];
      [displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
      }
      else
      animationTimer = [NSTimer scheduledTimerWithTimeInterval:(NSTimeInterval)((1.0 / 60.0) * animationFrameInterval) target:self selector:@selector(drawView:) userInfo:nil repeats:TRUE];
		
      animating = TRUE;
    }
}

Notice the displayLink = and animationTimer = lines set that it will be the drawView method that is called to draw the scene.

Here is what drawView: looks like:

- (void) drawView:(id)sender
{
    [renderer render];
}

So drawView hooks us into our ES2Renderer object.

ES2Renderer rendering

The initWithCoder method described a couple slides back tries to set up an ES2Renderer object and if that fails defaults to an ES1Renderer object.
Each of these have .h and .m files in the project.
We will only look at the ES2Renderer code.
When the ES2Renderer was created, its init: method was called.

This is where the OpenGL set-up is initialized and looks like:

// Create an ES 2.0 context
- (id) init
{
  if (self = [super init])
  {
    context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
        
    if (!context || ![EAGLContext setCurrentContext:context] || ![self loadShaders])
    {
      [self release];
      return nil;
    }

    // Create default framebuffer object. The backing will be allocated for the current layer in -resizeFromLayer
    glGenFramebuffers(1, &defaultFramebuffer);
    glGenRenderbuffers(1, &colorRenderbuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, defaultFramebuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, colorRenderbuffer);
  }
	
  return self;
}

In our dealloc, we later have to endure that we get rid of our frame and render buffers.

render code

The code to render things should look reasonably familiar if you followed the Android examples...

- (void) render
{
    // Replace the implementation of this method to do your own custom drawing
    
    static const GLfloat squareVertices[] = {
        -0.5f, -0.33f,
         0.5f, -0.33f,
        -0.5f,  0.33f,
         0.5f,  0.33f,
    };
	
    static const GLubyte squareColors[] = {
        255, 255,   0, 255,
        0,   255, 255, 255,
        0,     0,   0,   0,
        255,   0, 255, 255,
    };
    
	static float transY = 0.0f;
	
	// This application only creates a single context which is already set current at this point.
	// This call is redundant, but needed if dealing with multiple contexts.
    [EAGLContext setCurrentContext:context];
    
	// This application only creates a single default framebuffer which is already bound at this point.
	// This call is redundant, but needed if dealing with multiple framebuffers.
    glBindFramebuffer(GL_FRAMEBUFFER, defaultFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    
    glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    
	// Use shader program
    glUseProgram(program);
	
	// Update uniform value
	glUniform1f(uniforms[UNIFORM_TRANSLATE], (GLfloat)transY);
	transY += 0.075f;	
	
	// Update attribute values
    glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, 0, 0, squareVertices);
    glEnableVertexAttribArray(ATTRIB_VERTEX);
    glVertexAttribPointer(ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, 1, 0, squareColors);
    glEnableVertexAttribArray(ATTRIB_COLOR);
    
	// Validate program before drawing. This is a good check, but only really necessary in a debug build.
	// DEBUG macro must be defined in your debug configurations if that's not already the case.
#if defined(DEBUG)
	if (![self validateProgram:program])
	{
		NSLog(@"Failed to validate program: %d", program);
		return;
	}
#endif
	
    // Draw
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
	
	// This application only creates a single color renderbuffer which is already bound at this point.
	// This call is redundant, but needed if dealing with multiple renderbuffers.
    glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER];
}

Translating from Android OpenGL to iPhone GL

Notice that the code in the last slide looks a lot like the kind of code we were doing with Android.

For instance,

glViewport(0, 0, backingWidth, backingHeight);

corresponds to the code we had in our Android application

gl.glViewport(0, 0, view.getWidth(), view.getHeight());

Basically, to go from the command in Android we had to something that will work in iPhone we only need to delete the gl. and realize that it is a C call.

Graphics/3D Graphics iPhone; Sensors

Outline

Introduction