Friday, December 23rd, 2005

Ajaxify your Canvas

Category: Canvas

Dave Hoover has written up a nice tutorial on combining ajax techniques with Canvas in Canvas, Ajax, and 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 (live example). 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. 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 on the whereabouts of their 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 onto 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 each active trains’ progress along its 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 collect train events from the server-side. For this proof-of-concept, I’ll use Ruby’s WEBrick web server to expose these events via HTTP. I like to take small steps, so I’ll start by getting WEBrick up and running as soon as possible, mounting a closure and an HTML page.

Posted by Dion Almaer at 9:52 am
Comment here

+++--
3.8 rating from 8 votes

Comments Here »

Comments feed

Leave a comment

You must be logged in to post a comment.