Inspiration

For about two weeks now I've been working on a small home-automation project.

The inspiration came from few cool YouTube video, and in particular that one:


I'm not particularly fan of Star Trek, but the idea of controlling all the audio and video system from a touch screen using some fancy interface kind of resonated with my inner-geek.

So, what's this home-automation concept anyway?

The home-automation concept

Well, if you push it to the limits, it is about making your house "smarter", which mostly means you can control the power consumption, detect water leaks in the utility room, automatically regulate the temperature depending of the time of the day and your planning, start the coffee machine so it is ready when you wakeup, call the local police station if an intruder is detected, etc, etc...

There's a whole industry¹ out there ready to provide wireless cameras, power-grid based transmitters and controllers, security and temperature sensors, smart appliances of all kinds... basically if you can think about something in this domain, it probably exist.

So now, my idea was not to do a full home-automation, if only because it would be overkill for both my small apartment and my wallet. No, what I wanted to do was to have the possibility to replace all my remote controls by one central system connected to a server able to control the whole audio and video equipment, start and stop video streaming from the media center, and then build on that to add small things like gadgets to show the weather forecast, the departure time of the next metro, the latest news headlines, etc... perfectly doable, absolutely pointless, and so by definition something I absolutely needed to give a try at!

The motivation

Of course I have my reasons for trying that: I wanted to invest some time in improving my web-programming skills: Let's face it, Defence Force was written in 1997 in good old HTML 3.2 transitional, entirely built as static HTML made from tables, and without any CSS, database back-end, javascript or php.

So this was the perfect project to motivate me: The control interface had to be practical and nice looking, had to work on computers as well as mobile devices, the real-time nature of the whole thing required some scripting as well.

I'm going to detail another day about how to control the electronic equipment, today I'm only going to show how to display when the next metro is arriving.

Json and the metronautes

I guess I started this project at a particularly awesome time.

Not one week had elapsed after the moment I decided I wanted to show on my screen the metro arrival time, that Trafikanten² decided to provide a web API to access free of charge all the data they use for their main website and stops! Not only that, but they decided in a way that is actually practical and very easy to use.

All the information is available on the Trafikanten Labs page, but since apparently some people have been struggling about how to use it, I'm going to explain you now how to do it. It's very simple, an you can almost copy-paste the code :)

This concept is very simple.

The API is basically just an URL to call, and in return you get some data formatted in JSON format³.

If you add a special ?jsoncallback=xxxx parameter at the end of the URL, the data returned will instead be a variant called JSONP (padded JSON), which is just exactly looking like a javascript function call (using xxxx as the function name).

Given this information, all you have to do is to find in the documentation the parameters you need to pass to get the data you want, and write the correct javascript function to process the result.

<script>
function parseResponse(array)
{
   // Parse the data
}
</script>

<script 
   type="text/javascript" 
   src="http://api-test.trafikanten.no/RealTime/GetRealTimeData/3011940?
   jsoncallback=parseResponse">
</script>

Then all you have to do is to interpret the data, which is of course dependent on what you requested. In this particular example I requested the real time traffic data for the metro stop Grorud (id 3011940⁴).

The complete code

Here is the complete html code you can use directly to show the results

function convertDate(stringDate)
{
   var convertedDate=stringDate
   convertedDate=new Date(parseInt(stringDate.substr(6))); 
   return convertedDate
}

function showEntry(entry)
{
  document.write("Line "+entry['PublishedLineName']+" to "
      +entry['DestinationName']+"<br>")

  var aimedTime   =convertDate(entry['AimedArrivalTime'])
  var expectedTime=convertDate(entry['ExpectedArrivalTime'])
  document.write("Arrival time - Normal:"+aimedTime.toLocaleTimeString())
  if (expectedTime.toLocaleTimeString()!=aimedTime.toLocaleTimeString())
  {
    document.write(" - Probable: "+expectedTime.toLocaleTimeString())
  }
}

function parseResponse(array)
{
  for (var i in array) 
  {
    showEntry(array[i])
  }
}

Please excuse the quality of the code, it's the first time I write javascript, hopefully I will manage to write better code when I understand a bit better how the whole language works.

Hope this helped!

---