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.

Comments

[Mike]

Great stuff, Gavin. Love the site. My club also uses Sailwave and our website (www.CharlestonOceanRacing.org) is powered by DotNetNuke. Currently we just copy/paste the html into a new window, but I'm looking for a tighter integration. Seems like somebody out there (author of Sailwave?) could make a cool web service or other online scoring tool. The search continues :-)

[Gavin]

Thanks for your comments Mike. I noticed on the SailWave mailing list they are starting to discuss a web version. I was surprised to see the reaction from some folks who insist that the software be able to run on desktop machines with roughly the compute power of my toaster. The reasons being they need to work offline because they don't have internet access and they can't afford to upgrade their machines. Seems incredible to me that some clubs can't afford such internet access, but there you go. Some of the posters were suggesting building an open source solution based on Ruby, PHP or Python + MySql, but I don't agree with this approach either. Sure it would be web based, but it means that each club would have to host and administer their own version. What I'd love to see is a hosted version, with a focus on building great mobile apps to access it. Let's face it, internet access will be pretty much ubiquitous soon, if it isn't already, and the rate at which the power and capabilities of mobile devices are increasing is simply amazing. I think in a couple of years time we will see mobile devices taking over as the main way of interacting with the web. Running it as a hosted service means the costs would be minimal. I have built and run a couple of hosted services and a well written SaaS (Software as a Service) application would easily support thousands of clubs at a very small cost for the hosting infrastructure. In fact, I'd be willing to bet you could offer a service like this for free if you made it ad supported. I wonder if such a project exists, or is in the works right now?

[Ian]

I had been wanting to do this for Broxbourne Sailing Club and fiddling around for displaying just the table from Sailwave. I'm glad I came across this page as it saves me time stripping old Sailwave result pages. Thank you!

[tableau condos]

I have been wanting to do the Sailing Club as well . I am glad I found this page it saved me time too.. thanks for sharing...

[Colin Jenkins]

The platform independent version is ongoing. Sailwave is in fact pretty simple underneath and I'm using Javascript + jQuery to rewrite the app, then wrap it in Adobe Air to get local file access (write). This means it can then run on any computer and is web based.

[New Mexico Service Jane]

This post totally saved me extra time and effort! Thanks so much for sharing! :)