Gavin Terrill's Blog

Integrating SailWave Race Results with jQuery

Recently I was tasked with incorporating results from the popular sailing race result scoring software SailWave into our club's site - The National Yacht Club. Here is the approach I took.

While SailWave supports exporting HTML that you can customize, there were a couple of problems:

1. I didn't have access to the club's PC (SailWave is desktop software)
2. In the event the club upgrades their version I wanted to make sure my changes wouldn't get broken.

So, instead I decided that the uploads should use the out-of-the-box styling, and I would overwrite with my own CSS rules. All I needed to do was access the resulting .htm file that had been uploaded.

Reading the File

I asked the race committee to upload their files using a convention based on the date: YYYYMMDD.htm. I pull the data in asynchronously using the jQuery load function on document load:

$(document).ready(function() {
	$('#results').load('results/20090513.HTM #wrap');
});

The magic here is the '#wrap' part. This tells jQuery to filter the document that is being loaded based on an id. In this case, we only want the results table, which is conveniently exported inside a <div id="wrap"> tag by SailWave.

Styling the CSS

The standard HTML upload generates a semantically marked up HTML document. This makes it easy to style the results table to match your site colors. Here are the CSS rules for our site:

.hardleft {text-align: left; float: left; margin: 15px 0 0 25px;}
.hardright {text-align: right; float: right; margin: 15px 25px 0 0;}
table, caption {text-align: left; margin: auto; font-size: 1em; border-collapse: collapse; border: 1px #fff solid;}
table th {background-color: #d7d7c3;}
td, th, caption {padding: 4px; border: 2px #fff solid; vertical-align: top;}
caption {padding-left: 5px; text-align: center; border: 0; font-weight: bold;}
h1 {font-size: 1.5em; color: #9DA075;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}
p {text-align: center;}
th, {background-color: #aaf;}
.contents {text-align: left; margin-left: 20%;}
.race, .rank {text-align: center;}
.even {background-color: #e1e8f0;}
.odd {background-color: #edece3;}

Pretty straightforward really.

You can see an example here.

If you would like help incorporating this into your club's site please feel free to contact me and I'd be glad to help out.

Potential GPS + HUD Innovation Ideas for Boating

In my recent annual trip back to Australia, my brother went shopping for a GPS navigation device for his car. It was interesting to see the plethora of available options these days, including the ones that "speak" to you telling you that you just missed your turn for example. Indeed, even my latest blackberry has a GPS built in to it and I use it when sailing Argo III around Lake Ontario.

One thing that bothers me though is that using them while driving could be a serious distraction - worse than using a cell phone I'd suspect. However, the folks at Virtual Cable came up with this neat idea that should make navigation easier - have your navigation system plot a line on the windscreen using HUD technology that shows you what direction to drive (via springwise.com).

It would be cool to extend this idea to boats. You could:

• use information from your Radar to show nearby ships, perhaps making the ones you are on a collision course with colored red and flashing
• superimpose land mass outlines (i.e. where the coast line is) for low visibility environments - at night or in fog for example
• show where harbours and channels are, based on GPS coordinates
• plot an indicator over significant landmarks such as mountains showing their name and elevation
• incorporate forward looking sonar feedback (imagine seeing a whale spouting or a submerged cargo container as the icon).

Argo Restoration Update

I went out to visit Argo III on the weekend. Argo is a Dragon class sailing yacht ("the sailing man's Bugatti"), built in the fifties. I commissioned her restoration five years ago, and it looks like it will finally make it out of the shop and on to the lake this season. There are some pictures of her here.

She is quite a well known boat in Canadian yachting circles, having won the '72 Olympic trails. Somebody had dropped off a print of her sailing off Picton some 35 odd years ago. It looks remarkably modern. Back then, she was painted all over. I prefer the varnish look myself.