XML.com: All Aboard AJAX, HTML Canvas, and the Supertrain

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.

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

Share your experience in our forums.
(* You must be a member of XML.com to use this feature.)
Comment on this Article

Titles Only

Newest First

Very cool stuff
2006-01-20 00:04:14 harleyrana [Reply]

Once this is ready for serious use its going to open up alot of great new possibilities. Im just hoping all the coolness doesnt just get used for fancy animated ads but for real user interfaces.

JavaScript Deja vu
2006-01-19 10:33:03 Taylor Cowan [Reply]

Dave Hoover shows us how AJAX doesn't really work in all browsers, in spite of it being based on "open standards".
- JavaScript Deja vu
  2006-01-20 06:51:20 dave.hoover [Reply]
  
  Ajax works in tons of browsers. It's the canvas element that is only supported in Safari and Firefox. It's an important distiction, maybe I should have been clearer about it.