Pumpkinizer 1 year after!

by jegeblad

A few weeks ago I got contacted by a representative from O2 -- The company that sells the iPhone in the UK. He wrote to me that they wanted to do some marketing of Halloween Pumpkinizer if that was alright with me. Of course it was.

I had actually abandoned the idea of updating Pumpkinizer, but I thought this might be a good opportunity to do so after all. I could even make a few extra $.

Pumpkinizer differences

Reopening the old app I realized that it was quite horrible. I wrote it, heavily encouraged by my brother, under lots of time pressure over several evenings during a stressed visit to California last autumn. It took him many days to convince me to work on it, and looking at the end-result now, I probably shouldn't have done it.

I decided to devote 8 hours to perform a complete rewrite. I set a few rules for myself: Make a plan and follow it as much as possible. Reuse code from other apps if possible. Do not add new content except icons for the toolbar.

On toolbars
I am not a big fan of custom code, but I've never really liked Apple's UIToolbar and somehow I always end up developing my own custom. I have had different reasons for doing so. In the beginning I felt UIToolbar was too small (44 pixels). You cannot really add description for the tools -- It is either text or icons, however you can add balloons like Photogene does, or add the description to the icons either in the bitmap files or on the fly.

Lifecards has a context aware toolbar where the relevant portions scroll into place when needed and the icons rotate with the device orientation. I guess both things are more or less possible with UIToolbar. You can create a UIView wider than the screen, put the toolbar in it and scroll the relevant portions in and out. In general, since every part of UIKit is attached to a CALayer, I guess you can also rotate the individual tool buttons -- I've rotated UIWebviews and UITableViews simply by setting the layer transformation appropriately, so it must be possible.

With Pumpkinizer 2.0 I created a UIView wider than the screen and added UIButtons for each tool in it. The extra width allows me to have two sections in the toolbar -- One for the photo and one for the text. The appropriate section scrolls into place by animating the UIView. Using UIButtons gives me the ability to highlight a button when touched.
Toolbar in 2.0

To add toolbar descriptions, I hacked a bit. All the buttons are transparent and the icons are just drawn in the parent UIView. This felt like the easiest (but not prettiest) way to add tool descriptions. I also added a glossy look to the toolbar by drawing a png with alpha-channel ion top of the toolbar once everything else has been drawn.

I am still debating with myself over whether it made sense not to use Apple's toolbar this time around. The only reason I have is that adding tool-descriptions was just much easier this way.

A year ago, I built the toolbar with a CALayer with a delegate that handled all the drawing and custom handling of touches. A bit messy! But back then I felt that was the way...

Reusing code
I stole bits from Lifecards; Font, color and alignment panels for the text. Sharing facilities; Facebook, Twitter, email. Everything could just be copied over and worked almost instantly. They use protocols and delegates, so wiring up everything was just a matter of implementing the delegate methods -- A year ago I sent messages between objects without structure. The advantage of protocols is that you know instantly what to implement in the delegate. The process confirmed that the components had been correctly designed for reuse.

Handling text
The old Pumpkinizer was "Wizard" based. I.e. position photo -> write text -> preview -> save. With the new one I decided to integrate the text positioning more, so that once the user taps on the text tool, the view scrolls to the position of the text. I still think Apple's text drawing functions are somewhat limited, so I stole our custom textformatter from Lifecards -- Again a bit of code reuse.

Text is 1.1 and 2.0

Instructions
Instructions were missing in the original Pumpkinizer. This time around, I used a webview -- Something I felt was a massively heavy solution a year ago but I have become accustomed to it now, and it is an easy way to add formatted text.

Session saving
The old Pumpkinizer didn't save the current state if you exited it. The new one does. That means that if you get interrupted by a phone call, or something else, you can just return and continue working from where you left off.

Hints
I decided to add hints. A reviewer of Lifecards noted the hints in the top of the screen. I practically stopped implementing them in Lifecards, but I decided to experiment a bit here. Basically, I have a set of actions that will trigger a hint text in the top of the screen. The hint itself is implemented as a UILabel which is animated when triggered -- Couldn't be easier.

Conclusion
Despite the code reuse I still ended up spending about 10 hours in total. 2 more than I had planned for. The update was written in airports and other odd places and at weird times of day, so it is a bit hard to add it all up. I ended up changing the contents slightly, because my brother sent me some last minute images to use, so that took me a couple of extra hours. If it hadn't been for that, I would have finished in less than the planned time.

I think, it is always fun to revisit old projects and think about how you would do things differently today. It puts the experience you've gained into perspective. Apparently, it really does take some time to get used to a new platform! I don't know what happened to the O2 marketing, but I am crossing my fingers that something will happen.