Archive for the ‘iPhone’ Category

Project Resistance: Day 2

Tuesday, October 27th, 2009

Today I’ll attempt to flesh out the project by drawing the coloured bands onto the resistor image and allowing the user to change them with simple finger swipe gestures. This covers parts of day 2 and day 3 of the Windows Mobile variant of the project. We’ll get back to unit testing in a later day.

Drawing Coloured Bands

A UIScrollView control can be used to present a vertical list of colours which the user can swipe through with their finger. By sizing the control to be the height of the resistor and setting the “paging enabled” setting within Interface Builder, the UIScrollView will automatically snap to a “page” boundary, ensuring the user doesn’t leave the scroll view showing multiple colours.

By using the UIScrollView I get all the required gesture and finger swiping features for free without writing a single line of source code.

Modifying the graphic resources

The Windows Mobile version of the application has a set of graphic resources with each coloured band pre-rendered in each of its four possible positions. For example, here are the four resources used to render the colour green within each band.

Screenshot showing the 4 graphic resources used to draw green bands onto a resistor

Doing this provides less flexibility, as each time I want to introduce a new colour or change the size or shape of the resistor graphic I need to get all of the coloured bands redrawn by a graphic designer (I’m a developer, and don’t have an artistic bone in my body!). For this reason I’ve decided to take a different rendering approach within the iPhone application. I’ve updated the background resistor image to include areas with alpha transparency as demonstrated below:

Image showing resistor blank with transparent areas where each colour band should be located

The checker board pattern indicates areas which are transparent and will show what ever is placed underneath the graphic when it comes time to display it onscreen. Although hard to tell, the areas where the coloured bands go are only partially transparent, allowing them to shade things placed underneath to give a nice “rounded” effect.

By placing the rectangular UIScrollViews containing solid colours underneath this transparent image I automatically get the rounded and shaded effect. However now I only have one image for my graphic artist to create and tweak.

Diagram showing how images with alpha transparency can be composited together to form a single image

Another thing to note is that the UIImage control containing the resistor blank is positioned above the UIScrollView controls. However since the “user interaction enabled” checkbox is unchecked within Interface Builder this control won’t stop events such as finger presses from filtering down to the controls positioned underneath it. Not only is the graphic partially transparent, but it is also “invisible” with respect to user interaction.

Responding to selection changes

By handling the scrollViewDidEndDragging:willDecelerate: and scrollViewDidEndDecelerating: UIScrollViewDelegate messages I can detect the finger swipes and scrolling actions and determine when the user changes the selected colour of each band as follows:

- (void) band:(int)bandIndex didSelectColor:(int)colorIndex
  NSLog(@"Band %d selected colour at index %d", bandIndex, colorIndex);
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
  // called on finger up if user dragged. decelerate is true if it will continue moving afterwards
  if (!decelerate)
    [self band:scrollView.tag didSelectColor:scrollView.contentOffset.y / scrollView.bounds.size.height];
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
  // called when scroll view grinds to a halt
  [self band:scrollView.tag didSelectColor:scrollView.contentOffset.y / scrollView.bounds.size.height];

The UIScrollView control does all the gesture detection and scrolling animations behind the scenes, so the code is rather clean and logic free. At the moment this simply logs to the console a message similar to the following:

Band 3 selected colour at index 5

I’ll leave it for another day to hook this up to the model, which is yet to be added to the project etc…

Day 2 Summary

Screenshot showing Project Resistance running on the iPhone at the end of day 2By using the UIScrollView control to present a finger selectable list of colours, and being smart about the use of alpha transparency within my resistor graphic I have managed to get a fairly functional user interface with minimal (and easily maintainable) source code. All my layout and positioning can be done visually within Interface Builder without writing source code. As a comparison compare the current version of ResistorViewController.m against the equivalent ResistorView.cs.

It’s interesting to note that to date my source code only consists of application specific logic and very little rendering code, while Chris’s and Alex’s code base currently has a high percentage of source code dedicated to alpha transparency and the drawing of the resistor. In fact at this very moment they have discovered a graphic rendering quirk they currently need to investigate.

Project Resistance: Day 1

Tuesday, October 27th, 2009

Screenshot showing initial version of Project Resistance running on the iPhoneToday I did some of the preliminary work for Project Resistance. For the most part today was about setting up some infrastructure for the application, setting up source code repositories, file layouts and the like.

Creating a GitHub account

For this project I’ve decided to host the source code on GitHub. This seemed a more “iPhone” friendly location than Codeplex and gives me an excuse to try out Git. A distributed source code system I have not used before.

After signing up for a free account and following their instructions on creating an SSH key-pair to help verify my identity I was ready to create a new project repository by answering a few questions (such as name and homepage URL).

Since I don’t have Git installed on my machine I next downloaded and installed it via the Git OSX Installer. Once installed I needed to perform a small amount of configuration from the terminal.

git config --global "Christopher Fairbairn"
git config --global

With this out of the way I was ready to create a local git repository.

Creating a git repository

To create a new repository you simply create a new directory in a convenient location and execute the “git init” command within it.

mkdir Project-Resistance
cd Project-Resistance
git init

One benefit of a distributed source control system is that I can work against this local reposistory, committing changes and even branching the project without needing to be connected to a centralised server. This could come in handy as I tend to work in a number of environments without decent connectivity.

To test out git I decided to create a short README file that describes the purpose of the project. Once I had created the file in a text editor I needed to make git aware of it, and then finally commit the change to the repository with a short explanation of what I had done.

git add README
git commit -m 'added README file'

With all the changes committed locally, it was time to perform the really big smoke test and push the changes I had made up to the repository stored on github. I could achieve this by performing the following two commands from a terminal window.

git remote add origin
git push origin master

Stubbing out a project

Within XCode I created a new iPhone application by selecting the Tab Bar Application project template. I then added some of the graphic files as resources.

Unlike the Windows Mobile application which required a small amount of plumbing code to be developed in order to draw images with alpha transparency I was simply able to drag and drop the images onto my view within Interface Builder. The Cocoa Touch framework supports controls with transparency out of the box.

Within a couple of minutes I was displaying the alpha blended images within the iPhone Simulator.

Day 1 Summary

Today was relatively straight forward. The process to create a git repository on github was rather quick, and now that I have the git utility installed I could even have started the project without internet connectivity.

Likewise by using the Tab Bar Application project template within XCode I was able to get the main screen of the application looking pretty good without writing a single line of source code.

Luckily I was able to reuse many of the graphical assets commissioned by Chris Tacke on his first day, although eventually I’ll need to replace these to cope with the iPhone’s different screen resolution (480×320). Currently I’m stretching them. It will be interesting to see how Chris handles this situation himself, as the screen resolution and orientation of Windows Mobile devices can vary significantly.

Project Resistance – Developing an iPhone Application

Tuesday, October 27th, 2009

Screenshot of Windows Mobile version of Project ResistanceChris Tacke and Alex Feinman have started blogging about a new project called Project Resistance. The idea is to document the end to end experience of developing and selling a small utility application for the Windows Mobile platform. Along the way they’ll comment about their experiences, struggles and productivity wins etc. All the source code and related material will be available online as the project progresses.

The application is rather simple. It allows you to select colour bands on a resistor and will tell you the resistor’s resistance. See the Wikipedia entry on resistors if you have no idea what any of that means.

In light of my previous blog post and after talking to Chris Tacke, I’ve offered to follow his blog posts and create an iPhone variant of the application. It’ll be interesting to contrast the relative strengths and weaknesses of each platform, and how the App Store experience compares.

The first blog post I’ll make on the iPhone application will be covering signing up to to host the project’s source code.