Project Resistance: Day 2

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.

Leave a Reply