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

• Supertrain Example Files
• Canvas Tutorial
• Prototype JavaScript Framework
• Javascript
• Ruby
• WEBrick
• The Lightweight Visual Thesaurus
• Train images
• WordNet

---

---

2. Very cool stuff
   2006-01-20 00:04:14 harleyrana
4. JavaScript Deja vu
   2006-01-19 10:33:03 Taylor Cowan
• JavaScript Deja vu
  2006-01-20 06:51:20 dave.hoover