XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

All Aboard AJAX, HTML Canvas, and the Supertrain
by Dave Hoover | Pages: 1, 2, 3, 4, 5, 6

Now I'll update the client side to display the hotspots. Because hotspot status changes much less frequently than train status, I'll use a separate window.setInterval to poll for hotspot data once an hour.

docroot/redwood.html


...
<script type="text/javascript">
  ...
  var hotspots = []
  var canvas = undefined

  if ($("redwood").getContext) {
    canvas = $("redwood").getContext("2d")
    window.setInterval(updateCanvas, 1000 * 2)
    window.setInterval(updateHotspots, 1000 * 60 * 60)
    updateCanvas()
    updateHotspots()
  }

  function updateHotspots() {
    new Ajax.Request("/train/hotspots",
                     { onComplete: function(request) {
                         hotspots = eval(request.responseText)
                       }
                     })
  }

  function updateCanvas() {
    new Ajax.Request("/train/line",
                     { onComplete: function(request) {
                         var jsonData = eval(request.responseText)
                         if (jsonData == undefined) { return }
                         clearScreen()
                         jsonData.each(function(data) {
                           trains[data.track].update(data.location)
                         })
                         drawTracks()
                         drawHotspots()
                       }
                     })
  }
  ...
  function drawHotspots() {
    hotspots.each(function(hotspot) {
      tracks[hotspot.track].drawHotspot(hotspot.location)
    })
  }

  function Track(y) {
    ...
    this.hotspotRadius = 6
    this.hotspotColor = "red"
    this.drawHotspot = drawHotspot
  }
  ...
  function drawHotspot(location) {
    canvas.moveTo(location, this.y)
    canvas.beginPath()
    canvas.fillStyle = this.hotspotColor
    canvas.arc(location, this.y, this.hotspotRadius, 0, Math.PI, false)
    canvas.closePath()
    canvas.fill()
  }
  ...
</script>
...

Figure 7
Figure 7.

That completes the proof of concept! My customer from the State of Washington is satisfied and has asked me to hook the TrainSpotter class into the production messaging service for a test run against the real Woodinville-Redmond Supertrain line. If all goes well, I'm going to have a lot of work to do...

Resources



1 to 2 of 2
  1. Very cool stuff
    2006-01-20 00:04:14 harleyrana
  2. JavaScript Deja vu
    2006-01-19 10:33:03 Taylor Cowan
1 to 2 of 2