Archive for the ‘Javascript’ Category.

Battle Canvas

After doing some more research I did actually find three virtual tabletops that work in the browser: Flash-based Battle Map, RPGtonight and AjaxVTT. The last one seems to be a dead project. There seem to be at least one more Flash based application in development that might provide VT functionality. Battle Map is just what the name says, a bare bones map for putting some markers on. RPGtonight looks to be a pretty full featured VT. I found these from Battlegrounds, which offers lots of links to computer aided table top role playing. As far as I can tell, none of them use the canvas tag.

I have never done anything with the canvas tag myself, so I started doing a little research. To start with, I created a little canvas with a grid, put a marker on it and placed a draggable area effect on it. The canvas API is pretty limited, consisting of basically just drawing functions. It is nice that it offers support for alpha blending, which makes it trivial to draw the area effect in my sample. Drag and drop required doing hit testing and erasing and redrawing everything on movement. Would be nice to get a library to do this kind of thing.

Mozilla offers a great canvas tutorial, and the WHATWG spec has the details. I got the idea for the drag and drop from this blog.

Here’s the beginnings of my Battle Canvas.


I recently installed the Firebug extension, and I must say I am impressed. I have used the predecessors of it (DOM Inspector) but Firebug combines several related tools (LiveHTTPHeaders, Venkman and Web Developer) and improves on them, making a seamless super tool for web developers.

Good job, Joe!

CaltrainJS 0.2 – Caltrain Schedule

After I had released CaltrainPy 0.2 I started thinking about making a web version. I now have CaltrainJS 0.2 running. Ironically it seems to work OK everywhere except where I most want it to work: Internet Explorer Mobile. The Javascript and CSS support in that browser leaves much to be desired.

There are some refinements I could do for other browsers, like putting the schedule in a scrollable box so that the header would stay in place, but I put that work on hold until I get it working in IE Mobile. (I did have the scrollable area working reasonably well in Firefox.)

Update: I resorted to using innerHTML to (re)write the complete table on each update, since modifying a table dynamically in IE Mobile does not seem to be possible. Marked it CaltrainJS 0.2.1.

Update 2: I just released 0.3 to update to the March 3, 2008 schedules, and fixed the AM/PM bugs.