AILW: Adding a Touch of Liveliness

WatchKit Series

I have been working on putting the finishing touches on the WatchKit app for Pedometer++. The watch app (like its iPhone counterpart) is a simple goal-based dashboard for your daily step counts as measured by the M7/8 motion chip. Once I finished the basic functionality I ended up with this:

It works, does the job, but ultimately felt rather flat. Especially for an app that you will likely only spend a moment checking. It just didn’t seem like a particularly engaging experience.

The answer to improving that turned out to be adding a touch of liveliness into the opening experience. WatchKit doesn’t have the capability to do the typical animations that we’ve grown used to on iOS. We are spoiled there with CoreAnimation and how easily I can just say “animate this view from here to there.”

On the Watch all animation must be done with pre-rendered images. In much the same way as a cell animator would draw a moving character, we must generate an image for each frame of our animation. They are then displayed in sequence by the Watch to provide the desired effect.

After a bit of work I ended up with this:

The result feels more engaging and appealing visually. The whole thing isn’t long (just 0.5 seconds) but makes the experience of opening the app significantly less jarring. That subtle change though makes a big difference. I doubt many users would be able to articulate the difference but I’m sure they’d feel it.

I suspect these little touches will go a long way in differentiating a WatchKit app. Since doing anything lively takes significant effort the apps that go that extra mile will likely stand out.

How that works

I don’t have a lot of experience with doing this kind of manual animation so it took a lot of trial and error to find the right approach.

Before I explain exactly how I ended up doing it, here is the same animation slowed down and with a white background. This makes it much easier to see what is going on.

Each bar on the graph is represented by an image of a single color. To achieve the appearance of them growing I needed for that color to slowly fill up the bar from the bottom.

I used a great project called FlipBook1 by James Frost to do the actual rendering. This project provides a straightforward mechanism for recording the individual frames of a CoreAnimation based animation. You setup a normal UIView to animate however you’d like and then have FlipBook render and save as PNG each individual frame.

Once I had generated the required images (237 in all) I then needed to make the non colored portions of the images transparent. That way they can get blended with the background group. I did this by using ImageMagick to replace black with transparency2.

for i in *.png ; do convert "$i" -transparent black "${i}" ; done

From there it was just a question of coordinating the animation to occur when the data for the display is loaded.

  1. Somewhat amusingly this is the first Swift I’ve ever written.

  2. To come up with this command I still reference this tweet, probably the most useful 140 characters I’ve ever seen on Twitter.

David Smith

AILW: Spring Forward Event Announced

WatchKit Series

Apple has begun sending out invitations for a media event on March 9th. It is a pretty reasonable assumption that this will be the event where we get more specific details about the Watch and its launch.

The timing of the event is intriguing and perhaps slightly telling. Tim Cook has said that the Watch will begin shipping “in April”.

March 9th is 3.5 weeks from April 1st. I doubt Apple would be holding the event this soon if they weren’t expecting to ship in very early April.

If “in April” actually meant “end of April” an event this early would seem to forestall the excitement of the launch.

The earliest possible date is April 1st. Apple was founded on that date in 1976, so it isn’t crazy to think they’d pick that. Though the logistics of launching on a Wednesday are a bit awkward, so if they didn’t go the sentimental route then that first weekend (3rd/4th) seems very likely now.

This is making me feel a bit more pressure to get my WatchKit apps ready. I still think that March 20 is a reasonable deadline but now I’m less confident that it won’t be a bit before that.

Opens Xcode, puts on headphones, gets back to work.

David Smith

AILW: Prettier Status Bar Trick

WatchKit Series

I was doing some work today thinking through the screenshots for my WatchKit Apps1. While tools like Bezel are great for generating lovely looking marketing shots I ran into an issue with the status bar of my apps.

The status bar shown in the Simulator includes the charging indicator (green lightning bolt). I believe the intention of this is to make the Simulator show the shortest possible title space. Which I suppose makes some sense for testing purposes, but can lead to truncated text which is less than ideal for a marketing image.

I started off thinking that I would need to photoshop these out and rebuild the entire status bar, but getting the text size, weight and alignment perfect would have been a bit tedious. I then wondered if I could change the time format to avoid the issue entirely.

Turns out you can. If you go into the Settings app on the iOS Simulator and change the Region to the United Kingdom you get a better status bar text (i.e. Settings > General > Language & Region > Region > United Kingdom). This will display the time in 24-hour format (without AM/PM).

I could either then use this image directly or if I want to remove the lightning bolt in photoshop, now it is just a very simple fill operation:

This method isn’t perfect. I still don’t know if my title will show fully on device if the customer chooses to display times with AM/PM labels. I suspect it will (at least on the 42mm device), but I won’t know for sure until I have actual hardware to try it out on.

It is probably worth noting that all of Apple’s marketing materials show times without AM/PM and show the time as 10:092. Following their lead on this is likely a reasonable plan.

  1. We don’t actually know if there will be a separate place in iTunes Connect for Watch screenshots, but either way I’m expecting to need them for marketing materials.

  2. There is a great explanation of why they likely chose this time here.

David Smith