Longer Spinning & Blurring

I can't tell you how many times I've been asked lately how to do the "UrbanSpoon Effect".

Note: There is a newer version of this code available here.

Now, I have no idea exactly how the folks at UrbanSpoon did their application, but they did it well. I don't have time for a full tutorial right now, or to do a full implementation of the effect, but in the process of helping somebody in a forum, I did write a little sample application that shows the basic theory of how to make your UIPickerView go round and round for longer.

As I said, this project nowhere near as polished as what UrbanSpoon does - I cheated on the blurring because I hit some bugs while porting my NSImage convolution kernel code to work with UIImage and I don't have the time to debug something that gnarly right now. My "blur" is just a double resize - down then back up. It's really just interpolation, but it sorta makes it blurry. I probably wouldn't use that method of blurring in a real application but, then again, I'd be getting paid for a real application.



This application does support using the accelerometer to start the spin. In order to make the picker view spin longer, I subclassed UIPickerView. My subclass had exactly one method. This is an undocumented method that returns the duration of the spin, so you just return the number of seconds you want your spin to go for:

#import "JLPickerView.h"

@implementation JLPickerView
- (double)scrollAnimationDuration
{
    return 5.0;
}
@end

The other key thing to note in this application is that my UIPickerViewDataSource lies about how many rows each component has. I have a constant called kRowMultiplier. I take the count of the array that corresponds to a particular component, and I multiply it by kRowMultiplier. This value is currently set to 100, so if the array that feeds a component has ten items, my datasource lies and says there are a thousand, and then it just keeps feeding the same ten items over and over in the same order by calculating the actual row in the array to use:

int actualRow = row%[[self arrayForComponent:component] count];

This creates a component with the same values repeated over and over.

When the view first appears, I load arrays with views containing both the blurred and unblurred data. You don't want to be programmatically blurring the values over and over when the spin happens, so we do it once and store the values in arrays. I then set the component's row to a value in the middle. This means that the user will never see the blank rows above and below the real values, which helps create the illusion of endless spinning.

[picker selectRow: [component1Data count] * (kRowMultiplier / 2) inComponent:0 animated:NO];

Now, when a value is selected in the picker, I do a bait-and-switch back to the middle. I move the component to the same value they're currently on, but back in the middle of the wheel. This way, no matter what happens, they'll never see the blank rows at the top or bottom. Since I'm moving them to the same value and the surrounding values are the same, and I tell it not to animate the change, the user has no idea it has happened.

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    NSArray *componentArray = [self arrayForComponent:component];
    int actualRow = row%[componentArray count];
    
    int newRow = ([componentArray count] * (kRowMultiplier / 2)) + actualRow;
    [picker selectRow:newRow inComponent:component animated:NO];
    
}

Finally, when the spin button is pressed, or the user shakes the phone, I calculate a random number for each component. This number is a value between 0 and the size of the array minus 1. This tells me what the new, randomly selected value will be. Then I move the components (again, without animating) to the corresponding row near the top or bottom of the dial, and then animate to the selected value at the other end of the wheel.

- (IBAction)spin
{   
    if (! isSpinning)
    {
        // Calculate a random index in the array
        spin1 = arc4random()%[component1Data count];
        spin2 = arc4random()%[component1Data count];
        spin3 = arc4random()%[component1Data count];    
        
        // Put first and third component near top, second near bottom
        [picker selectRow:([picker selectedRowInComponent:0]%[component1Data count]) + [component1Data count] inComponent:0 animated:NO];
        [picker selectRow:(kRowMultiplier - 2) * [component2Data count] + spin2 inComponent:1 animated:NO];
        [picker selectRow:([picker selectedRowInComponent:2]%[component3Data count]) + [component3Data count] inComponent:2 animated:NO];
        
        // Spin to the selected value
        [picker selectRow:(kRowMultiplier - 2) * [component1Data count] + spin1 inComponent:0 animated:YES];
        [picker selectRow:spin2 + [component2Data count] inComponent:1 animated:YES];
        [picker selectRow:(kRowMultiplier - 2) * [component3Data count] + spin3 inComponent:2 animated:YES];
        
        isSpinning = YES;
        
        // Need to have it stop blurring a fraction of a second before it stops spinning so that the final appearance is not blurred.
        [self performSelector:@selector(stopBlurring) withObject:nil afterDelay:4.7];
    }
}

I set a variable called isSpinning so that I know whether to provide blurred or unblurred data to the spinner. I have the spin set for 5 seconds, so 4.7 seconds in the future, I set the value back to NO. This cause it to stop blurring a moment before the spinning stops. This is done so that the final words displayed will not be blurred.

You can download the sample project here.

One note, though: I have used a couple of undocumented, private methods in this project. I ordinarily shy away from doing that, but in the sake of getting this code out the door quickly, I did. I use one undocumented method for resizing the UIImage in order to create the fake blur effect, and another one to keep the picker from making sounds when I initially set the values because I don't want the user to realize I'm moving the picker - that would shatter the illusion. These are pretty subtle uses of undocumented methods so I doubt they'd get your application rejected, but they could. They're also not methods that are likely to change. But, again, they could - that's always a risk with undocumented methods, so caveat emptor - use at your own risk. If you want to play it safe, to a real motion blur and take out the calls to UIPickerView's setSoundsEnabled: method.

Read More

Another SQLite Library

I just learned of another library for using SQLite 3 from the iPhone called iPhoneLite3. It's still a pretty young project (classified as "alpha"), and takes a different approach than I did in sqlitepersistentobjects, but looks to be a project worth keeping an eye on.

Read More

Twittering iPhone Developer List

Tim Haines, the developer of the excellent BurnBall game, has started a list of iPhone developers who use Twitter. The last time I checked, there were over 100 iPhone devs on the list. If you have a Twitter account, go add yourself to the list. There is no minimum requirement and no test will be administered, it's just an informal list of people interested in iPhone development who also use Twitter.

D'oh, it helps if I include the link, doesn't it?

Read More

A Better Generic Date Picker

I've tweaked my generic date picker class so it matches, pixel-for-pixel, the date picker used by Apple's built-in apps like the Address Book (Contacts.app), and also fixed some bugs in the previous version.



Here is the code that implements it. Use is exactly the same as with the previous version.

Note: if you copied this before about 5:30pm EST, Friday January 23, 2009, you might want to re-copy it. There was a memory leak thanks to me forgetting to release the the date formatter instance.

DateViewController.h

/*
 DateViewController.h
 */

#import <UIKit/UIKit.h>

@protocol DateViewDelegate <NSObject>
@required
- (void)takeNewDate:(NSDate *)newDate;
- (UINavigationController *)navController;          // Return the navigation controller
@end

@interface DateViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
{
    UIDatePicker            *datePicker;
    UITableView             *dateTableView;
    NSDate                  *date;
    
    id <DateViewDelegate>   delegate;   // weak ref
}
@property (nonatomic, retain) UIDatePicker *datePicker;
@property (nonatomic, retain) UITableView *dateTableView;
@property (nonatomic, retain) NSDate *date;
@property (nonatomic, assign)  id <DateViewDelegate> delegate;
-(IBAction)dateChanged;
@end

DateViewController.m

/*
 DateViewController.m
 */
#import "DateViewController.h"

@implementation DateViewController
@synthesize datePicker;
@synthesize dateTableView;
@synthesize date;
@synthesize delegate;

-(IBAction)dateChanged
{
    self.date = [datePicker date];
    [dateTableView reloadData];
}
-(IBAction)cancel
{
    [[self.delegate navController] popViewControllerAnimated:YES];
}
-(IBAction)save
{
    [self.delegate takeNewDate:date];
    [[self.delegate navController] popViewControllerAnimated:YES];
}
- (void)loadView
{
    UIView *theView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.view = theView;
    [theView release];

    UITableView *theTableView = [[UITableView alloc] initWithFrame:CGRectMake(0.0, 67.0, 320.0, 480.0) style:UITableViewStyleGrouped];
    theTableView.delegate = self;
    theTableView.dataSource = self;
    [self.view addSubview:theTableView];
    self.dateTableView = theTableView;
    [theTableView release];
    
    UIDatePicker *theDatePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0.0, 200.0, 320.0, 216.0)];
    theDatePicker.datePickerMode = UIDatePickerModeDate;
    self.datePicker = theDatePicker;
    [theDatePicker release];
    [datePicker addTarget:self action:@selector(dateChanged) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:datePicker];
    

    
    
    UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc]
                                     initWithTitle:NSLocalizedString(@"Cancel", @"Cancel - for button to cancel changes")
                                     style:UIBarButtonItemStylePlain
                                     target:self
                                     action:@selector(cancel)];
    self.navigationItem.leftBarButtonItem = cancelButton;
    [cancelButton release];
    UIBarButtonItem *saveButton = [[UIBarButtonItem alloc]
                                   initWithTitle:NSLocalizedString(@"Save", @"Save - for button to save changes")
                                   style:UIBarButtonItemStylePlain
                                   target:self
                                   action:@selector(save)];
    self.navigationItem.rightBarButtonItem = saveButton;
    [saveButton release];
    
    self.view.backgroundColor = [UIColor groupTableViewBackgroundColor];
    
}

- (void)viewWillAppear:(BOOL)animated
{
    if (self.date != nil)
        [self.datePicker setDate:date animated:YES];
    else 
        [self.datePicker setDate:[NSDate date] animated:YES];
    
    [super viewWillAppear:animated];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (void)dealloc 
    {
    [datePicker release];
    [dateTableView release];
    [date release];
    [super dealloc];
}
#pragma mark -
#pragma mark Table View Methods
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    
    static NSString *DateCellIdentifier = @"DateCellIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:DateCellIdentifier];
    if (cell == nil) 
    {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:DateCellIdentifier] autorelease];
        cell.font = [UIFont systemFontOfSize:17.0];
        cell.textColor = [UIColor colorWithRed:0.243 green:0.306 blue:0.435 alpha:1.0];
    }
    
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat:@"MMMM dd, yyyy"];
    cell.text = [formatter stringFromDate:date];
    [formatter release];

    
    return cell;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;   
}
@end

Read More

Address Book UI Design Flaw

Apple provides classes to make it easy to let your user select somebody from their iPhone's address book (aka the Contacts application), or to add a new person to their address book. But in an exceptionally rare example of a complete UI miss on Apple's part, there is no easy way to let the user add a new contact when you are prompting them to select an existing person. You have to know beforehand whether they're going to select an existing person, or add a new one. You can't just give them a single + button in a table and easily do both.

Here's what the UI for selecting an existing person looks like:


So... why couldn't we just have the currently-blank left bar button item be an "add new contact" (+) button that dismisses the address book and presents the UI for adding a new person? Why make us go through two separate steps. I mean, not everybody knows exactly who is already in their address book off of the top of their head.

Anyway, I spent some time poking around the header files and the class-dump of the Address Book frameworks trying to see if I could implement this functionality myself, but I started getting way into the realm of disallowed private methods so, out of fear of getting my client's app rejected from the App Store, I gave up. My temporary solution is when the user cancels their selection, I prompt them with an Action Sheet to see if they want to add a new person since they didn't select find one from their address book. It's a little ugly, but better than cluttering up my interface with an additional button. Adding a contact is something people are, most of the time, going to do once, so I really don't want to lose the space to another button.

I opened an enhancement request on this: rdar://6517666

Read More

We got Slashdotted!

Our book got a very favorable review from the nice folks over at Slashdot. The so-called Slashdot-effect has driven our Amazon sales rank down to a new record low of #33.

Update: Over 24 hours later, and we're still hovering pretty consistently between #25 and #35 (we're #31 as I type this). Slashdot is my best friend right now.

Read More

Table View Color

Many of Apple's iPhone applications use a slate-blue color to denote non-editable text in a table view. You can see an example of this in the screenshot below from the Contact application. The text that tells you to "Add New Phone" here is the color I'm talking about:


Apple doesn't have a class method for getting this color, which is odd, since they do provide class methods for most commonly used system colors. You'd think, with how strictly they're enforcing the HIG lately, that they would. But they don't.

Anyway, you may know this, but in case you didn't (paging Captain Obvious), in the /Applications/Utilities/ folder on your Mac, there is a program called DigitalColor Meter, and it will give you the color value for any pixel on the screen. I used this to grab the correct RGB values from the Contacts application running in the simulator, which showed the RGB values for that blue color is:

Red:   0.243
Green: 0.306
Blue:  0.435

or if you prefer it in 8-bit designation:

Red:    81
Green: 102
Blue:  145

If you want to add this method to the More Colors Category I posted a few months back, the method would look like this:

+(id)tableCellNonEditableTextColor {vendColor(81, 102, 145);}

Or, you can just create it like this:

UIColor *thatTableTextColor = [UIColor colorWithRed:0.243 green:0.306 blue:0.435 alpha:1.0];

Read More