All Aboard AJAX, HTML Canvas, and the Supertrain
Apple's Safari browser introduced the canvas HTML element, allowing web developers to create two-dimensional drawings using a simple JavaScript API. With the recent release of Firefox 1.5, canvas took a significant step toward the mainstream (canvas is currently being considered for inclusion in HTML 5). Unfortunately, Microsoft holds most of the cards in this game, meaning that it could be a long time before they release a canvas-friendly version of Internet Explorer. In the meantime, though, the Web 2.0 revolution continues, and I believe that for applications that can sacrifice IE users, the canvas element is an untapped resource, particularly in light of the emergence of JavaScript libraries that provide simple interfaces to XMLHttpRequest. I dabbled with canvas and XHR, and I was impressed. (The irony that canvas and XHR come respectively from Apple and Microsoft should not be overlooked.) :-)
My first exploration into combining canvas and AJAX was an experiment to clone Thinkmap's Visual Thesaurus using HTML, JavaScript, and the WordNet database (on the server side). I ran into some of the limitations of canvas, specifically its inability to handle text. But I also discovered some of its strengths, particularly its simplicity and how well it plays with AJAX. You can view my experiment at awordlike.com.
The Supertrain
In this article I'm going to walk through a less complex experiment, using canvas to graphically represent the real-time state of a fictional railway system (download example files). I'm not going to deconstruct the details of the JavaScript and Ruby code; there are better and more comprehensive resources available if you need to get up to speed with these languages (see the Resources section). OK. Let's get to it:
The State of Washington has finally completed its Supertrain, a public light-rail system that has solved the Seattle area's horrendous traffic problems. Part of the Supertrain infrastructure is a software system that informs the Supertrain command center of the whereabouts of the various trains. The team of developers that built this software did an exceptional job on the back end, providing a message-based system that allows anyone in the network to listen for train status events. Unfortunately, they didn't put much focus on the front end of the system, providing their users with a text-based web page that requires a manual browser refresh to view the latest state of the system. I have been asked to write a new front end that dynamically and graphically represents the status of each Supertrain line. The State of Washington has asked me to do this for just one of their Supertrain lines initially, as a proof of concept. Before I can start working with AJAX and canvas on the client side, I need a way to poll a train line's status via a web server. I like to take small steps, so I'll start by getting Ruby's WEBrick up and running as soon as possible, mounting a closure and a docroot.
server.rb
require 'webrick'
include WEBrick
server = HTTPServer.new( :Port => 8053 )
server.mount("/", HTTPServlet::FileHandler, "./docroot")
server.mount_proc("/train/line") do |request, response|
response['Content-Type'] = "text/plain"
response.body = "toot, toot"
end
trap("INT") { server.shutdown }
server.startIf you execute this script (ruby server.rb) and point your browser to http://localhost:8053/train/line, you should see:
Figure 1.
