Overlaying application version on top of your icon

I've just returned from NSConference #5, there were many good talks there, but my favourite one was the one about Flipboard development tools/setup by Evan Doll.

Especially how they add version information on top of the icons.
Unfortunately they didn't share it with us.

So I wrote my own.

What we will be overlaying ?

I've decided that 3 parts of information should be enough:

  • version number
  • branch name
  • short commit hash

Version number

We can extract version number straight from our application .plist file by using PlistBuddy tool:

version=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_FILE}"`

PS. You could extract any plist entry with this tool, just change CFBundleVersion to different key (show raw keys in Xcode)

Branch and short commit hash

git command line tool offers rev-parse command which let's you both of those variables:

commit=`git rev-parse --short HEAD`
branch=`git rev-parse --abbrev-ref HEAD`

How to overlay it ?

ImageMagic is my go-to tool for playing with images from command line, it offers crazy amount of functions.

Make sure to install ImageMagick and ghostscript (fonts) first, you can use brew to simplify process:

brew install imagemagick
brew install ghostscript

We can use convert function, by specifing caption parameter imagemagick will layout our text on top of image, we also setup alignment to bottom and default height.

convert -background '#0008' -fill white -gravity center -size ${width}x40 \
    caption:"${version} ${branch} ${commit}" \
    ${base_file} +swap -gravity south -composite  "${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${target_file}"

Setting it up in Xcode project

There are few steps we need to take in order to set this up as part of Xcode build:

  1. Rename your Icon* files (where * is @2x, -568h etc.) to Icon_base*, e.g. Icon@2x_base.png
  2. Add run script for your target under Build Phases
  3. Paste this code:
commit=`git rev-parse --short HEAD`
branch=`git rev-parse --abbrev-ref HEAD`
version=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_FILE}"`

function processIcon() {
    export PATH=$PATH:/usr/local/bin
    base_file=$1
    base_path=`find ${SRCROOT} -name $base_file`

    if [[ ! -f ${base_path} || -z ${base_path} ]]; then
        return;
    fi

    target_file=`echo $base_file | sed "s/_base//"`
    target_path="${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${target_file}"

    if [ $CONFIGURATION = "Release" ]; then
    cp ${base_file} $target_path
    return
    fi

    width=`identify -format %w ${base_path}`

    convert -background '#0008' -fill white -gravity center -size ${width}x40\
    caption:"${version} ${branch} ${commit}"\
    ${base_path} +swap -gravity south -composite ${target_path}
}

processIcon "Icon_base.png"
processIcon "Icon@2x_base.png"
processIcon "Icon-72_base.png"
processIcon "Icon-72@2x_base.png"

Conclusion

Few things about final script:

  • I've added support for skipping icons that don't exist, no need to change script contents.
  • I'm using sed to strip _base string from file name.
  • For release build we don't want to overlay our development info.
  • Xcode likes messes up path resolution, so I've added usr/local/bin to it for this terminal lifetime.

Now run your project and you should see this:
{{< photo src="/2013/03/Icon.png" width="114" height="114" >}}

Sample project on GitHub

You've successfully subscribed to Krzysztof Zabłocki
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.