Drawing directions with canvas and JavaScript

7 April 2010, 22:34

One of the debug pages that I work with regularly is a HTML page full of tables of statistics. Some of the statistics are ranges for wind directions. My workmate commented that he would like some indication of the direction in words (like “N” for north), as constantly calculating if 230 is closer to 180 or 270 is unnecessarily tiresome. I thought about it for a while and thought, surely there must be a way using HTML/JavaScript to actually visually represent these ranges. Then one could easily look at a row of statistics and see if the numbers were swinging westerly or easterly.

First I tried poking around to see if anyone had done anything similar. I couldn’t find anything, although I found plenty of clocks. Close but no cigar.

With a bit more reading I realised I could do it quite directly and elegantly using the famed canvas element in HTML5. Which, you know, is here now. So, let’s see…

After some clicking…

I’m sure there are other fancy things that one could do, like putting coloured lines to indicate the start and end direction (in case your directions go backwards), and maybe putting an image in the background with a “N” at the top, just in case you are prone to forgetting. But I am pretty happy with the couple of hours work to get these looking as they do.

The screenshots are from an example page I put together to put up on Bitbucket: canvasdirections. You can look at or download the JavaScript from there. Is there something I can do so the HTML page can be viewed directly in the Bitbucket web interface? I couldn’t figure out how to do that.

It’s my first time using Bitbucket. I started using Mercurial at work for my own little projects a couple of months ago. I’ve used Bazaar for my little projects at home in the past, and I’ve been reasonably impressed with Launchpad, but Bitbucket seems to have a lot of fans so I doubt I will mind too much. I am not sure which I will end up using. This time I just happened to reach for hg. It would be nice if Bitbucket knew about having multiple email addresses, but then, it would be nice if bzr was smarter about symlinks, so hey, you can’t have everything.

tags: , , ,



Subscribe to comments on this post: rss / atom

Commenting is closed for this article.