You can grab the code for this demo from GitHub.

There’s not a lot to say that the demo doesn’t show, it’s all terribly easy to set up.  A minimal example requires a droppable area, e.g. a <div> tag to be on the page with the following JavaScript.

$("#dropbox").html5Uploader({
    name: "myfile",
    postUrl: "/Home/Upload"
}

The options specify the name of the form field when it’s POSTed and the URL of the script to POST to. From there you can extend the funkyness by listening for the wide range of events that get bubbled up.  These let you show previews of the files you’re uploading, show progress bars, let people know when the upload is complete or provide helpful errors when things go wrong.

All in all, it’s super sexy and really easy to get started with!

Dave pointed me to the fact that Google have given their App Store a bit of a facelift. As he points out – “to say that it had a ‘hint of iTunes app store’ is possibly an understatement” – but he’s also right, it’s pretty well put together and always worth spending a bit of time poking around..

From Adam – a neat little Gem which implements scheduled background tasks in Ruby. “It provides a simple way to specify any number of jobs on easily customisable schedules. It can call into other Ruby functions in your code, perform rake tasks or execute arbitrary command line commands.”

Liam “Apple” Gladdy gave me this: a sexy little iOS-app-screen-like web GUI in coffeescript - Now I find I need to go and look up what “coffeescript” is…

And from me – this utterly awesome video/sound piece: “Entire Musical Compositions Made from Just One Line of Code“. Totally tremendous on sooo many levels :-)

Setting up code coverage reports with Simplecov

I first looked at rcov, however, as soon as you run it, you get a lovely warning telling you that Ruby 1.9 support is experimental and that the results aren’t guaranteed to be correct! So I quickly moved on and found simplecov which has full support for 1.9.

To get started, add the gem to your gemfile:

gem 'simplecov'

Then run a ‘bundle install’ to grab the gem and set stuff up.  Next we need to hook simplecov into our tests.  Simplecov works with a range of test frameworks, so, depending on your framework of choice, the next instruction varies slightly.  If you’re using RSpec like me you need to open spec_helper.rb, if you’re running the default Rails test tools find test_helper.rb or if you’re using Cucumber find env.rb (other frameworks will have a similar initialization file).

At the very top of your helper file, enter

require 'simplecov'
SimpleCov.start do
end

Now, whenever you run your test suite, code coverage will be calculated and a fancy report will be available to view in coverage/index.html.  How easy was that!

We’re not done quite yet though, there are a few tweaks we can make to improve things further.  First up, we don’t want to include all of the stuff around the edge of a Rails app, for example, the config dir.  We can filter these bits out by adding some rules inside the initialisation block.

require 'simplecov'
SimpleCov.start do
  add_filter '/spec/'
  add_filter '/config/'
  add_filter '/lib/'
  add_filter '/vendor/'
end

I’ve included the /spec/ folder to be clear that I dont want coverage metrics run on my tests. If you re-run your test suite you should now see slightly cleaner results. simplecov has a powerful filtering engine that lets you define far more complex rules than these. For example, you can exclude short files that only have a couple of lines.

Our next tweak will be to make use of simplecov groups. Groups let you group together similar file types so that you can view them separately. In the example below you can see how I’ve set up groups for Models, Controllers, Views, Mailers and Helpers.

require 'simplecov'
SimpleCov.start do
  add_filter '/spec/'
  add_filter '/config/'
  add_filter '/lib/'
  add_filter '/vendor/'

  add_group 'Controllers', 'app/controllers'
  add_group 'Models', 'app/models'
  add_group 'Helpers', 'app/helpers'
  add_group 'Mailers', 'app/mailers'
  add_group 'Views', 'app/views'
end

Again, this only touches the surface of what you can do with simplecov. You can create far more complex rules to slice and dice your codebase as you wish.

There is one final tweak which you may find helpful, especially as your codebase grows. Running coverage metrics is SLOW! Much slower than just executing the test suite. So, you might not want to always run your coverage analysis – especially if you’re using a tool like autotest to re-run the tests every time the file system changes.

To make running coverage conditional, we’ll check for an environment variable before initialising simplecov.

SimpleCov.start do
  # rules here
end if ENV["COVERAGE"]

Now I can run coverage on demand by specifying the COVERAGE environment variable

$ COVERAGE=true bundle exec rake spec

However, autotest decided it wanted to re-run my tests over and over again, even if I hand’t saved a file in my project.  This had me very confused for quite a while until some Googling led me to ‘autotest -v’ which shows you which files had changed.  The culprit: test.log.

Excluding log files from autotest

The workaround for this is pretty simple.  In your project root directory create a .autotest file.  Inside, put

Autotest.add_hook :initialize do |autotest|
  %w{.git .svn .hg .DS_Store ._* vendor tmp log doc}.each do |exception|
    autotest.add_exception(exception)
  end
end

require "autotest/growl"
require "autotest/fsevent"

That little snippet will exclude a bunch of files that you don’t want autotest to care about. The two requires at the bottom are needed for the awesome Growl integration :)

sb.AppendFormat("function {0}(args) { return false; }", someVariable);

The problem, of course, is that you can’t use the characters { or } inside a format string for String.Format() as they are special characters used to identify variables, as I have done in the example with the use of {0}.

The solution is actually fairly straightforward but not immediately obvious.  My first thought was to escape the special characters using the standard “\” , for example:

sb.AppendFormat("function {0}(args) \{ return false; \}", someVariable);

But that code generated the same FormatException.  After a little while I gave up and read the documentation (remember kids, always RTFM!) for the answer.  The code I wanted was:

sb.AppendFormat("function {0}(args) {{ return false; }}", someVariable);

Instead of using “\” as an escape character, you double up the special characters {{ or }}.  Easy.  When you know how.

Re-Writing the ASP.NET PostBack URL

So, what do we do about this?  We use the ASP.NET Control Adapter framework to change the way the action attribute of our <form> tag is rendered.  This doesn’t require you to change any code on any pages, we are simply overriding a part of the standard ASP.NET page rendering pipeline which serves all pages.

To get started we need two things:

1. A .browser file in the /App_Browsers directory of your application
2. A class which inherits ControlAdapter to do the work.

First up, lets look at the contents of the browser file.  I’m calling mine Form.browser.

<browsers>
    <browser refID="Default">
        <controlAdapters>
            <adapter controlType="System.Web.UI.HtmlControls.HtmlForm"
                     adapterType="Storm.ControlAdapters.FormRewriteControlAdapter" />
        </controlAdapters>
    </browser>
</browsers>

In this file we are registering a new control adapter for the HtmlForm Control.  My adapter is in Storm’s common library for easy reuse across projects.

Next, lets take a look at the FormRewriteControlAdapter

    using System.Web;
    using System.Web.UI;

    /// <summary>
    /// Used to rewrite the form action attribute when using URL re-writing to the
    /// RawUrl so we don't get in a big mess!
    /// </summary>
    public class FormRewriteControlAdapter : System.Web.UI.Adapters.ControlAdapter
    {
        /// <summary>
        /// Override the render method
        /// </summary>
        /// <param name="writer">The text writer</param>
        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(new RewriteFormHtmlTextWriter(writer));
        }
    }

There’s nothing terribly exciting here – we are inheriting System.Web.UI.Adapters.ControlAdapter and then simply call the base Render method with a custom TextWriter implementation.  So let’s move on and take a look inside the TextWriter and see how the magic happens:

    /// <summary>
    /// The internal text writer to use in FormRewriteControlAdapter
    /// </summary>
    public class RewriteFormHtmlTextWriter : HtmlTextWriter
    {
        /// <summary>
        /// Initializes a new instance of the RewriteFormHtmlTextWriter class
        /// </summary>
        /// <param name="writer">Html text writer</param>
        public RewriteFormHtmlTextWriter(HtmlTextWriter writer)
            : base(writer)
        {
            this.InnerWriter = writer.InnerWriter;
        }

        /// <summary>
        /// Initializes a new instance of the RewriteFormHtmlTextWriter class
        /// </summary>
        /// <param name="writer">An IO text writer</param>
        public RewriteFormHtmlTextWriter(System.IO.TextWriter writer)
            : base(writer)
        {
            this.InnerWriter = writer;
        }

        /// <summary>
        /// Do the actual attribute writing of the action attribute
        /// </summary>
        /// <param name="name">The name of the attribute</param>
        /// <param name="value">The value of the attribute</param>
        /// <param name="fEncode">Dont know</param>
        public override void WriteAttribute(string name, string value, bool fEncode)
        {
            if (name.Equals("action"))
            {
                var context = HttpContext.Current;

                if (context.Items["ActionAlreadyWritten"] == null)
                {
                    // Set the action to the raw url
                    value = context.Request.RawUrl;
                    context.Items["ActionAlreadyWritten"] = true;
                }
            }

            base.WriteAttribute(name, value, fEncode);
        }
    }

The key part here is the WriteAttribute method. This is called for each attribute that appears on the <form> tag.  First we check to see if we are working on the ‘action’ attribute and then check that we haven’t already written it.  Now we get to the good part.  We grab the RawUrl of the request – this should contain the Url that was first requested by the browser (i.e. our nice, clean re-written Url) – and overwrite the value parameter.  We then call the base WriteAttribute method with the new value and the ASP.NET rendering pipeline takes care of the rest.

Thanks to Scott Guthrie for getting me started fixing this!  If you’re working in VB.NET, Scott provided a sample project.

As you can see if you visit the WikiPedia page, it’s not a simple formula!  However, it is beautifully elegant and a very fast solution to the problem.

During the course of development we worked on two versions of the code. Our first iteration had the office co-ordinates stored in an SQL Server database, later we moved to keeping them in an in-memory List<T>. Below are both versions of the code to calculate the Haversine distance.

MS SQL Server

SELECT TOP 1 *, ( 3960 * acos( cos( radians( @custLat ) ) *
  cos( radians( Lat ) ) * cos( radians(  Lng  ) - radians( @custLng ) ) +
  sin( radians( @custLat ) ) * sin( radians(  Lat  ) ) ) ) AS Distance
FROM Offices
ORDER BY Distance ASC

@custLat and @custLng are the variable co-ordinates of the customer.  Lat and Lng are the fields of the database table in which we have stored the office co-ordinates.  The above code calculates the distance in miles, if you want the answer in kilometers you need to replace 3960 with 6371. This could be parameterised in a Stored Procedure if you were feeling adventurous – there are plenty of example of this on the web already.

C#

In the following C# example, we use a simple enum to specify the unit of distance. We also need to convert the latitude and longitude from degrees to radians. We created a simple extension method for the double type to do this conversion.

    /// <summary>
    /// Returns the distance in miles or kilometers of any two
    /// latitude / longitude points.
    /// </summary>
    /// <param name="pos1">Location 1</param>
    /// <param name="pos2">Location 2</param>
    /// <param name="unit">Miles or Kilometers</param>
    /// <returns>Distance in the requested unit</returns>
    public double HaversineDistance(LatLng pos1, LatLng pos2, DistanceUnit unit)
    {
        double R = (unit == DistanceUnit.Miles) ? 3960 : 6371;
        var lat = (pos2.Latitude - pos1.Latitude).ToRadians();
        var lng = (pos2.Longitude - pos1.Longitude).ToRadians();
        var h1 = Math.Sin(lat / 2) * Math.Sin(lat / 2) +
                      Math.Cos(pos1.Latitude.ToRadians()) * Math.Cos(pos2.Latitude.ToRadians()) *
                      Math.Sin(lng / 2) * Math.Sin(lng / 2);
        var h2 = 2 * Math.Asin(Math.Min(1, Math.Sqrt(h1)));
        return R * h2;
    }

    public enum DistanceUnit { Miles, Kilometers };

A simple helper class is used to pass around Longitude / Latitude co-ordinates:

    /// <summary>
    /// Specifies a Latitude / Longitude point.
    /// </summary>
    public class LatLng
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }

        public LatLng(){
        }

        public LatLng(double lat, double lng)
        {
            this.Latitude = lat;
            this.Longitude = lng;
        }
    }

To use the function to perform the search we grab an array of offices, loop over them calculating the distance to the customer and use LINQ to select the closest office.

    var Offices = GetMyOfficeList();
    for(int i = 0; i< Offices.Count; i++)
    {
        Offices[i].Distance = HaversineDistance(
                                coord,
                                new LatLng(Offices[i].Lat, Offices[i].Lng),
                                DistanceUnit.Miles);
    }

    var closestOffice = Offices.OrderBy(x => x.Distance).Take(1).Single();

Using the Google Maps API

Note: To make use of the example in the post you will need to sign-up for a free Google Maps API Key.

The following example is written in C#, but it can be converted to any language fairly trivially as we are actually only making an HTTP request and parsing the result.

We use a little helper class to hold a latitude/longitude co-ordinate.

public class LatLng
{
    public double Latitude {get;set;}
    public double Longitude {get;set;

    public LatLng(){
    }

    public LatLng(double lat, double lng)
    {
        this.Latitude = lat;
        this.Longitude = lng;
    }
}

We’ve packaged the function to get the co-ordinates in a helper class so that we can add extra Google Maps functionality if required. It also allows us to reuse the code across multiple projects as the API key is not hard coded.

    using System;
    using System.IO;
    using System.Net;
    using System.Web;
    using Storm.Common.Utils.Extensions;

    public class GoogleMaps
    {
        private string API_KEY = string.Empty;

        public GoogleMaps(string api_key)
        {
            this.API_KEY = api_key;
        }

        public void SetApiKey(string key)
        {
            if (key.IsNullOrEmpty())
            {
                throw new ArgumentException("API Key is invalid");
            }

            this.API_KEY = key;
        }

        /// <summary>
        /// Perform a geocode lookup of an address
        /// </summary>
        /// <param name="addr">The address in CSV form line1, line2, postcode</param>
        /// <param name="output">CSV or XML</param>
        /// <returns>LatLng object</returns>
        public LatLng GetLatLng(string addr)
        {
            var url = "http://maps.google.co.uk/maps/geo?output=csv&key=" +
                       this.API_KEY + "&q=" + HttpContext.Current.Server.UrlEncode(addr);

            var request = WebRequest.Create(url);
            var response = (HttpWebResponse)request.GetResponse();

            if (response.StatusCode == HttpStatusCode.OK)
            {

                var ms = new MemoryStream();
                var responseStream = response.GetResponseStream();

                var buffer = new Byte[2048];
                int count = responseStream.Read(buffer, 0, buffer.Length);

                while (count > 0)
                {
                    ms.Write(buffer, 0, count);
                    count = responseStream.Read(buffer, 0, buffer.Length);
                }

                responseStream.Close();
                ms.Close();

                var responseBytes = ms.ToArray();
                var encoding = new System.Text.ASCIIEncoding();

                var coords = encoding.GetString(responseBytes);
                var parts = coords.Split(",");

                return new LatLng(
                              Convert.ToDouble(parts[2]),
                              Convert.ToDouble(parts[3]));
            }

            return null;
        }
    }

Let’s talk through whats going on. First up, the boring bit:

        private string API_KEY = string.Empty;

        public GoogleMaps(string api_key)
        {
            this.API_KEY = api_key;
        }

        public void SetApiKey(string key)
        {
            if (key.IsNullOrEmpty())
            {
                throw new ArgumentException("API Key is invalid");
            }

            this.API_KEY = key;
        }

Here we have a private field to store the Maps API key required to issue a request. The key can be set either through the constructor or by using the SetApiKey() function.

Now lets see how we use this in the lookup function.

            var url = "http://maps.google.co.uk/maps/geo?output=csv&key=" +
                       this.API_KEY + "&q=" + HttpContext.Current.Server.UrlEncode(addr);

            var request = WebRequest.Create(url);
            var response = (HttpWebResponse)request.GetResponse();

First, we build the a URL which represents the request we want to make. The output param sets the format Google will return the results, here we have chosen CSV but you can also get JSON if you wish. Next we include our API key to identify ourselves. Finally, we pass the address we are searching for.

Using this URL we create a WebRequest and call GetResponse to fetch the page contents. Before we go any further we check that the result was returned successfully:

if (response.StatusCode == HttpStatusCode.OK)

Now we have another boring bit which reads the result of the web request into a byte array and converts the result into an ASCII encoded string

                var ms = new MemoryStream();
                var responseStream = response.GetResponseStream();

                var buffer = new Byte[2048];
                int count = responseStream.Read(buffer, 0, buffer.Length);

                while (count > 0)
                {
                    ms.Write(buffer, 0, count);
                    count = responseStream.Read(buffer, 0, buffer.Length);
                }

                responseStream.Close();
                ms.Close();

                var responseBytes = ms.ToArray();
                var encoding = new System.Text.ASCIIEncoding();

                var coords = encoding.GetString(responseBytes);

This string should look something like:

200,5,51.2268219,-2.4646913

We are interested in the 3rd and 4th values – the latitude and longitude. So, we split the string at the comma separator, create a new LatLng object and return the result:

        var parts = coords.Split(",");
        return new LatLng(Convert.ToDouble(parts[2]), Convert.ToDouble(parts[3]));

I hope this tutorial has proven useful and that you can go away and develop some cool apps!

The maths to convert an angle from degrees to radians is really quite simple:

(pi / 180) * angle

We can take this simple equation and create either a simple function, or a convenient extension method.

C# Function

    public double ConvertToRadians(double angle)
    {
        return (Math.PI / 180) * angle;
    }

C# Extension Method

    /// <summary>
    /// Convert to Radians.
    /// </summary>
    /// <param name="val">The value to convert to radians</param>
    /// <returns>The value in radians</returns>
    public static class NumericExtensions
    {
        public static double ToRadians(this double val)
        {
            return (Math.PI / 180) * val;
        }
    }

<MTSetVarBlock name="category"><MTEntryCategory></MTSetVarBlock>

<h3>Historic Data</h3>

<$MTSetVar name="year" value="0"$>

<MTEntries sort_order="descend" category="$category">

<MTIfNotEqual a="[MTEntryDate format='%Y']" b="[MTGetVar name='year']">
  <MTIfNotEqual a="[MTGetVar name='year']" b="0"></ul></MTIfNotEqual>
  <h4><$MTEntryDate format="%Y"$></h4><ul>
  <MTSetVarBlock name="year"><$MTEntryDate format="%Y"$></MTSetVarBlock>
</MTIfNotEqual>

<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>

</MTEntries>

This code sets a variable, $category, containing the name of the category associated with the current entry. It then selects all the entries in this category in descending date order. A $year variable then tracks the year of the last entry, printing out a heading when the year changes.