I’ve been busy working on the graphics for my iPhone application.  I started working on generating icons for my UITabBar and ran into lots of problems.  How do you create these icons?

I started with a grayscale image figuring it looked similar to what I saw in other applications.  I ended up with a gray square when I used. it.  Next I tried to use an image with a palette and a transparent color and that worked a little better.  But I seemed to be limited to on/off, no shades of gray.

The documentation says the image “is typically 30 x 30 points” and “alpha values in the source image are used to create the unselected and select images – opaque values are ignored”.  What does that mean?

I did a little research on PNG images and found that they can have an alpha channel and that the value for this channel could be 8 bits.  So now I needed to take my grayscale image and turn it into an image with an alpha channel.  I tried a couple of simpler image editors but couldn’t find the right combination of operations to make it work.

Then I remembered I had ImageMagick installed on my development machine (since I also do Ruby on Rails and am using the excellent Paperclip plugin).  I found that from the command line I could get ImageMagick to create a mask from my image and then use that mask to add an alpha channel to my image.

Here is what I did:

First, I generate a mask with the following command line:

convert run.png -alpha Off -negate run_mask.png

This takes my source image (run.png) and instructs ImageMagick to strip out any existing alpha channel, negate the image (flip black to white) and save the result (run_mask.png).

Next we need to apply this mask as an alpha channel.  We use the following command line:

convert run.png run_mask.png -alpha Off -compose Copy_Opacity -composite run_icon.png

This takes the source image (run.png) and the mask (run_mask.png), strips any existing alpha channel, composes a new image using the Copy_Opacity operation (this is the secret ingredient) and composites it all into a new image (run_icon.png).

Here is the source image, the generated mask and the final icon image.

run.png
run_mask.png
run_icon.png

I’ll be speaking at the Where 2.0 conference in San Jose, California.  I’ll be covering the concepts of how CellGuided can guide users from place to place without requiring a GPS capable device.  Be sure to stop by and check it out!

While developing CellGuided I found that a single page load was causing many hits on my web server.  I verified this by using the Network Timeline available in Safari.

You can enable this in Safari by accessing the Advanced Tab in the Safari preferences and checking “Show Develop menu in menu bar”. This will make a “Develop” menu appear under which you can choose “Show Network Timeline”.

The results of one of the pages on the CellGuided website is shown below:

Notice there are 3 different CSS files being requested and 14 different Javascript files.  Each of these is a separate round trip on the network from the browser to the server.  This delays the loading of the page in the browser.  In addition, it causes many requests to be sent to your server.

Here is the code to include the stylesheets and javascript files from my Rails application layout:

        <%= stylesheet_link_tag 'basic', 'redbox', 'stars' %>
        <%= javascript_include_tag 'prototype', 'scriptaculous', 'effects', 'dragdrop', 'controls', 'fabtabulous', 'redbox', 'application' %>

As you can see, each of the CSS and Javascript files are listed here.  By default, Rails will generate HTML that specifies each of these as a separate link or script tag.  Here is the relevant part from the HTML generated:

<link href="/stylesheets/basic.css?1228521008" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/redbox.css?1219727784" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stars.css?1228259425" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js?1199423234" type="text/javascript"></script>
<script src="/javascripts/effects.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/controls.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/fabtabulous.js?1219335620" type="text/javascript"></script>
<script src="/javascripts/redbox.js?1219731184" type="text/javascript"></script>
<script src="/javascripts/application.js?1219813302" type="text/javascript"></script>

Wouldn’t it be nice to specify that all these files be concatenated together and delivered as a single file?  Rails has exactly this feature and it is very simple to enable.  Just add a “cache” parameter to the tags as below:

        <%= stylesheet_link_tag 'basic', 'redbox', 'stars', :cache => 'cache/all' %>

        <%= javascript_include_tag 'prototype', 'scriptaculous', 'effects', 'dragdrop', 'controls', 'fabtabulous', 'redbox', 'application', :cache => 'cache/all' %>

This will cause the CSS files to be “cached” as a single file.  The same will happen for the Javascript files.  When rendering the HTML, the link and script tags will now look like:

<link href="/stylesheets/cache/all.css?1228521008" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/cache/all.js?1229984592" type="text/javascript"></script>

The Network Timeline now looks like this:

One note of caution.  This requires your configuration file to have the following set correctly:

config.action_controller.perform_caching  = false

By default, this is set to false in your development environment and is true in the production environment.  This is nice as the files will remain separate for development purposes but be combined when running in production.