Individual Programming Assignment 3

From CS 160 User Interfaces Sp10

Jump to: navigation, search



Imagine yourself as an amateur painter who wants to put his/her iPhone to good use when it comes to sketching or painting. In short, try to please the artist in you. In this assignment you will build a painting application that supports a few different kinds of gestures and let the user create artwork.

The purpose of the assignment is to introduce you to tab-based controls and some basic drawing and (multi-touch) event-handling on the iPhones.

You will submit both your source code and a narrated video of the interface running in the iPhone simulator.


This assignment expects you to hit a few points:

  • Create a tab-based application.
  • Create an iPhone app that recognizes, at a minimum, touch and stroke gestures. (You can implement more, for example pinching, swivel)
  • Respond to these touch events by drawing on the screen.
  • Make your stroke drawing tool multi-touch aware so you can paint with multiple fingers simultaneously.

A possible way to solve this problem is:

  • Make a tab-based app, where the first view accepts tap events and draws a standard shape (like a circle, square or a triangle) on the screen. The shape should be centered on the point of the screen that was touched.
  • The second view accepts strokes and draw lines along the path of the stroke.
  • Both the views should have a functionality to clear the canvas.

This is by no means a brilliant design. You are free to design your own app provided that it has at least the functionality as enumerated above. Suggestions for improvement are:

  • Include a zoomable canvas using pinch gestures in one view
  • Include a tool palette to change stroke width and color, or to change default shape.

Grading criteria

Up to 20 points will be given if your application compiles, runs, contains the functionality as detailed in the instructions, and you have submitted a narrated video.

Up to 10 extra points will be given if you implement additions that make the application more usable or more aesthetically pleasing. For example, you can implement the following:

  • Allow users to select various kinds of shapes (triangles, circles, rectangles etc) they could draw.
  • Allow the user to select colors they want to use to draw.
  • Implementing additional gestures like pinch, swivel etc.

Sample Screenshots

File:dots.jpg File:strokes.jpg

Submission Instructions

Create a Wiki Page for this assignment

Edit your user page created in Assignment 1 to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProgrammingAssignment3-FirstNameLastName|Programming Assignment 3]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload a zip file for the source code and a mov file for the screencast (described below), and in the wiki page, describe any extra credit functionality you implemented and want us to review.

Upload Project

  • Your submitted project should include the full source code.
  • Do a Clean on your project (hit the broomstick icon, leave boxes checked, and hit clean).
  • Create a zip file of your project tree (in Finder: right-click the Folder, choose "Compress Foldername"). Rename the zip file to (e.g.,
  • Upload the zip file to the ProgrammingAssignment3-FirstNameLastName page you just created:
    • Create a new file link like this: [[]]
    • Save the page, then click on the File link you just created to upload the zip file.
  • You MUST submit a Screencast to earn any points for this assignment. Read the following section for details.

Create Screencast Video

  • What your screencast should contain:
    • Narrated walkthrough of the interface from the user's perspective
    • No implementation details
    • In the end, point out any extra credit points
    • Be CONCISE. Your video shouldn't be longer than 90 seconds for the basic functionality. You may use additional time to point out possible extra credit features.
    • Be prepared to do multiple takes or maybe write out a script first.
  • Running iShowU HD
    • Download iShowU HD
    • Open ~/Downloads/iShowU_HD_2.1.3.dmg
    • Open iShowU HD
    • Leave HD Pro selected and click "Use Demo".
    • For "Capture area" click Choose to select the window to capture (hitting the spacebar will allow you to switch between manually specifying the capture window and selecting an application window).
    • For "Output video" click the gear icon and choose Change size -> Same as capture size
    • For "Mouse mode" choose Fixed.
    • Click record
    • To finish recording, click on the iShowU HD icon near the top right of the menu bar and hit "Stop capture"
    • Your video will be stored in your ~/Movies/iShowU HD folder
    • Rename the mov file to (e.g.,
  • Upload the mov file to the ProgrammingAssignment3-FirstNameLastName page you just created:
    • Create a new file link like this: [[]]
    • Save the page, then click on the File link you just created to upload the mov file.
  • If your video's volume is too low, do an audio check:
    • The monitors in the lab have both speakers and a mic
    • In Apple -> System Preferences -> Audio, you can check the volume of sound output and input
  • "Example Screencast"

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[ProgrammingAssignment3-FirstNameLastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

QuickStart Guide

This programming assignment expects that you have completed the first two assignments and are by now fairly comfortable working with views and view controllers.

In order to create a tab-based application, create a new project in XCode and select a tab-based application. The application by default comes with two tabs, one of them is on the main window and the second one is in the SecondView.xib. Once you open the nib files in Interface Builder, you will have a better idea of how the application is organized.

Setting Up

Each view controller owns a view of class UIView. Previously you just used the default view and therefore did not have to mess with it. This time you will create custom views that subclass UIView. There are a few things you'll need to do to set up.

  • Setting up your view controllers:
    • The UIViewController is already specified for you for the FirstView, so you can go ahead and put your ui controls there in MainWindow.xib. Unlike previous assignments, you do not have a separate xib file for each view controller. You can create one if you choose to, but it is not necessary.
    • You will need to create a second view controller for the SecondView and associate it with the SecondView.xib.
      • You will have this view controller own the SecondView.xib. Therefore, when you open up SecondView.xib, you will want to click on File's Owner, and set its Class to the new view controller you created in the Identity tab of the Inspector.
      • Also, in your MainWindow.xib, you will want to click on the "Second" tab in your tab bar and specify its Class as the new view controller in the Identity tab of the Inspector.
  • Setting up custom UIViews for touch events and drawing:
    • Create custom UIViews (subclass of UIView) for each UIViewController.
    • Hook these up to your view controllers via the Interface Builder. Do this by clicking on the view area, where it initially says "First View Optionally move this view into a separate nib file...." and in the Identity tab of the Inspector, change the Class from UIView to your custom view.
    • Initialization code can go in -(void) awakeFromNib.

Touch Events

Now that everything is hooked up, we want to be able to process touch events. In your custom UIViews You can do this by implementing the following functions: touchesBegain:, touchesMoved:, and touchesEnded: Here is an overview on Event Handling.

NOTE: If you want your UIViews to accept more than one touch, you will have to check the "Multiple Touch" box via the View Attributes tab in the Inspector.


You will also want to implement - (void)drawRect:(CGRect)rect in your custom UIView to draw the shapes and/or strokes. For example, to draw a circle, put this in your drawRect: method: (Code I shamelessly took from here via a Google search.)

CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGContextSetRGBFillColor(contextRef, 0, 0, 1.0, 0.1); //EDIT: it appears that the rgb values are normalized from 0.0 to 1.0 and not 0 to 255.
CGContextSetRGBStrokeColor(contextRef, 0, 0, 1.0, 0.5);

// Draw a circle (filled)
CGContextFillEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));

// Draw a circle (border only)
CGContextStrokeEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));

NOTE: You never explicitly call drawRect:. Instead, whenever you want to refresh your view, call [view setNeedsDisplay]; where view is the UIView you want refreshed. Here is a short blurb on the drawing cycle.

Custom View

So after all that, the .m file of your view should at least look something like:

#import "MyView.h"

@implementation MyView

- (void) awakeFromNib
    //initialization code

- (void) drawRect: (CGRect)rect
    //drawing code

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    //process touches down event

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
    //process touches moved event

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
    //process touches ended event


Storing Touches

You will need a way to store touches for drawing. I recommend using NSMutableArrays. NSMutableArray is a subclass of NSArray. The difference is NSMutableArray allows you to add and remove objects, so you should use NSMutableArray. You can add any object type to an NSMutableArray. However, if you want to add a simple type, such as an int or a double or in this case the struct CGPoint, you have to encapsulate it in an Object. You can do this by using the NSValue object. Here is an example of adding a CGPoint to a NSMutableArray.

NSMutableArray *array = [[NSMutableArray alloc] init]; //creates an empty NSMutableArray
CGPoint point = CGPointMake(5.0, 3.2); //creates a CGPoint
[array addObject: [NSValue valueWithCGPoint: point]];

To then retrieve a CGPoint at index 5 of the array, you would do:

NSValue *value = [array objectAtIndex: 5];
CGPoint point = [value CGPointValue];

or as a single line:

CGPoint point = [[array objectAtIndex: 5] CGPointValue];

For additional information on accessing objects from an array, look at the documentation for NSArray. For adding and removing objects look at NSMutableArray. And yes, you CAN store an array within an array.

DO NOT store UITouches in the array. From the UITouch documentation:
"A UITouch object is persistent throughout a multi-touch sequence. You should never retain an UITouch object when handling an event. If you need to keep information about a touch from one phase to another, you should copy that information from the UITouch object."

Links to Finished Assignments

Add your submission below this line.

[add comment]
Personal tools