Real Time PC Availability

Another recent addition to City’s website is a page displaying real time PC availability for computer rooms in Northampton Square.

This first iteration allows students to see at a glance where they can find an available PC at any given time – a feature especially useful during busy periods in the academic calendar.

There are plenty of iterative improvements we would like to make in the coming months, top of the list is making the information easier to access on a mobile device (please add any suggestions you may have in the comments below).

This post-slash-tutorial will explain a little bit about how we built it.

Tools: JavaScript, PHP, Squiz Matrix, Highcharts.js

LabStats and Matrix

The IT Service Desk use an application called LabStats to manage Northampton Square’s computer rooms and handily this application has a simple API that returns real time information about PC availability as xml.

We needed a bit more information about the computer rooms themselves to build something useful and the logical place to store this information was in our CMS, Squiz Matrix.

As part of our domain driven approach to structuring data about the University on the web, we created a page for each computer room. A computer room is a “thing” and so it has a url and associated metadata describing itself – in this case we store information like address, geolocation and a unique ID which we can use to marry the information with the LabStats data.

Using an asset listing we generated an xml feed of this data and with some PHP magic mashed it up with the live xml data from the LabStats API.

This PHP wrapper script returns JSONP data (allowing us to make cross domain ajax calls) for all computers rooms but also accepts a LabStats ID as a parameter – so it can return data about a single room.

Highcharts

On the computer rooms availability page we asynchronously load the excellent JavaScript charting library highcharts.js. On page load we grab the JSON data from our PHP script (either all available data or single room data, depending on which page you are on) and do some simple processing to separate the series data into the number of “available” and “busy” PCs for each room.

The parsed data is then pumped in as a config option to a new highcharts chart object (highcharts.js has an insane amount of customisation options – check out the API reference).

Because the chart needed to update with the latest availability information every minute, we added a function which is called from the chart’s load event. This function makes a call to our PHP script every minute to get the latest data and then uses the series update method to redraw the data.

To avoid mixing up our callbacks (e.g. if an ajax request takes over minute to return) the function recursively calls itself from the ajax complete function (heavily inspired by Eric Hynds recursive setTimeout pattern).

loopsiloop = function () {
    setTimeout(function () {
        chart.showLoading("loading real time data");
        $.ajax({
            url : src,
            cache: false,
            crossDomain : true,
            data : ajaxData,
            dataType : "jsonp",
            success: function (data) {
                //parse new data
                var chartData = parseData(data);

                //update column series
                chart.series[0].setData(chartData.available, false);
                chart.series[1].setData(chartData.inUse);
                
                //update subtitle
                chart.setTitle(null, { text: 'Updated at <b>' + chartData.date[4] + ':' + chartData.date[5] +  '</b> today'});
                chart.hideLoading();
                delay = 60000;
            },
            error: function () {
                //up the delay
                delay = 100000;
            },
            complete: function () {
                loopsiloop(); // recurse
            }
        });
    }, delay);
},

And there you have it, you may notice the chart on the plasma screens around the campus - I hope you find it useful and will keep you updated on future improvements and new features.