Case Study: Petplan Live!

  //  Mark Ormesher

During my internship at Allianz Petplan I suggested that three unused display screens could be put to better use with a live performance dashboard. After producing design mocks, proposals and presentations, my idea was given the go-ahead and Petplan Live! was born.

The project turned out to be more challenging than expected, forcing me to make use of some very hacky solutions -- did you know you can store data in JavaScript comments?

Petplan Live! on GitHub

Technical Approach and Challenges

Storing Data in Comments

Reception

Technical Approach & Challenges

Plan A

My first plan was to use a Ruby backend together with the Dashing.io framework for the dashboard. Unfortunately this turned out to be a dead-end for me: getting a green-light for installing any new software would be a rough and uncertain road, most likely taking me past the end of my internship.

No problem; I can think of another way...

Plan B

Each of the three screens was to have a low-spec PC to drive it, so why not nominate one as a master to host the dashboard and the set up the others as slaves to read and display it? This master/slave arrangement would require nothing more than simple JavaScript and AJAX, so there would be nothing extra to install. Sorted, right? Nope. Getting approval to set up the network between the machines was going to take too long.

Okay, back to the drawing board...

Plan C

After a few more non-starter ideas, I finally arrived at a solution: the entire application (including data) could be stored in a protected folder on the networked drive, the data itself could be stored in JavaScript-readable text files, and to get around the AJAX/local files issue a combination of inline frames and cross-window messaging could provide continually updating data without reloading the page.

That'll work, and it's so hacky it's beautiful.

Storing Data in Comments

The aesthetics of the dashboard are nothing particularly exciting: vanilla HTML and CSS, consistency with the corporate branding, and a few jQuery plugins for the dials. Easy. The fun part was dealing with the data: how do you watch text files for updates and show live data, without reloading the page, when you can't use AJAX?

The answer: you get hacky. After trawling the web, I found that you can store data in JavaScript comments, allowing for a file that looks almost like plain text and not at all like code (if you ignore the first and last lines). The comment goes inside an anonymous function, then the toString() of that function goes through some regex to strip out the content you wanted. It's surprisingly easy:

var textFromComment = (function () {/*

All of this comment text will be stored in the variable above.
For the dashboard, I added some extra code to remove blank
lines, and lines starting with '--'.
That allowed me to give instructions right inside the file, like this:

-- Put the number for the stat below:
56

*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

Neat trick, right? You can see some example files using this technique in the data folder on GitHub - note the header and footers, and the instructions to staff.

Reception

Once I had the data flow down, everything else fell into place with relative ease. As well as the software I produced a user manual that detailed exactly how the board could be updated, and spent one-on-one time with each team leader, training them on how to use the board.

Soon enough, the dashboard was running live on three screens in the office and getting really positive reviews from the team. The team leaders were very impressed with their new-found power to disseminate real-time information, and Hayley Sangan (the deputy department manager), had this to say about my work:

Your most significant contribution was the dashboard, which has enabled us to engage our people in our KPIs with something considerably more exciting than a graph or a report. You've also left it so that we can update it easily and other areas of the business have already seen it and want to replicate it!

I was hugely impressed with your professionalism, work ethic and ability to engage people at various different levels ... I only wish you could have stayed longer!

Read Hayley's full reference