Technology in motion… the 24 hour surf-check challenge.
Usually you don’t expect to find the internet and technology closely tied to surfing, but a recent project saw that change for me at least.
One of my pet-projects at the moment is the information site for Beadnell Bay – http://www.beadnellbay.info.
On it Ive created a page specifically for the surf report that im providing for the area (http://www.beadnellbay.info/surf-check/), and Ive been looking for an efficient way of running the content.
Its really not that hard, you go to the beach, take a photo, go back to the office, upload the image to the web server, and hey-presto, you have a surf report. But, doing this every day will take up more tim than is ideal, and is very repetitive.
So how can we make the process more streamlined ? how can it be easier ?
I had tried a few ideas, and had searched for the best solution online, and the best I had come=up with was to use Yahoo Pipes to push the latest image from a Flickr group into the page. The pipe is here if you want a look -
http://pipes.yahoo.com/pipes/pipe.info?_id=tgsFay003hGYXDqQBR50VA.
However this is not really what I wanted. The images do not display large enough, and whilst its nice running it through Flickr, linking out to the set is not ideal.
Enter technology and the perfect solution.
Apple iPhone
Im already using my iPhone to take the photograph and push it to the Flickr group, so ideally I wanted was something as easy to use but with a btter web presentation.
Enter the right application, and a little bit of AJAX.
FTP Picture upload provides a simple and easy way to FTP any picture from your iPhone to the web server of your choice. With a little tweaking, it was up and running in 10 minutes and i had the right image on the server.
On the page I could now print the latest image as uploaded form my iPhone. Fantastic.
However the image being displayed could not be identified as recent. How where users to know that the shot was taken today ? or even this week ?
What I wanted was a script that could find out when the shot was taken and print that to the page, telling the users the image was recently updated.
JavaScript alone can not do this, but the helpful people at http://twitter.com/javascripthelp quickly pointed out that the XML Http Request can grab the Last Modified date from the header of any file on your server.
With that, I searched, found the right piece of JavaScript and then set it all in motion. (code is below).
The surf report image now displays, is enlargeable, and has the upload date and time printed next to it. And all automated via the iPhone.
Along with this, I post a text update via Twitter and you get a pretty decent surf report. 
****************** Example Code ******************
<script type=”text/javascript”>
var xmlhttp=false;
try
{
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”); /* for IE < 5 */
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (E)
{
xmlhttp = false;
}
}
/* mozilla & opera */
if (!xmlhttp && typeof XMLHttpRequest!=’undefined’)
{
xmlhttp = new XMLHttpRequest();
}
var upDated
function getUpdated(){
xmlhttp.open(”HEAD”, “MyPic.JPG”,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
upDated = xmlhttp.getResponseHeader(”Last-Modified”);
document.getElementById(”theDate”).innerHTML = upDated;
}
}
xmlhttp.send(null)
}
</script>
</head>
<body onload=”getUpdated();return false;”>
<img src=”MyPic.JPG” alt=”MBP_box” width=”500″ />
<br/>Picture updated on – <p id=”theDate”>Updating…</p>
