My canvas experiment: spinner-meh-gic

After visiting this years full frontal conference in brighton I came back itching to play with some of the new HTML5 things. One of them being the 2D rendering <canvas> tag. During the HTML5 workshop hosted by Remy Sharp (@rem) we got to play with canvas, video, websockets, webworkers and so on. These will likely find their way into my work somewhere along the line but <canvas> was not a likely candidate. But now it might. Almost every one of our projects has an animated gif called spinner.gif (gues what that does). So I set out to replace this relic with something new: Spinner-meh-gic!

If you want to stop reading now you can find the code on github
And I’ve setup a local copy on my webserver as a demo

So how does it work? I’ve turned the spinner into a jQuery UI widget. If you want to create an instance of the spinner you simply do:

$( ".myElement" ).spinnerMehGic();

This will create the spinner with default settings but you can supply creation parameters as well:

$( ".myElement" ).spinnerMehGic( { partSize: 10 } );
// You can update the options after creation with:
$( ".myElement" ).spinnerMehGic( "setOptions",
    partSize: 10,
    gapSize: 20,
    spread: 360
} );

Options can be changed one at a time or all at once. With the options you should be able to create most circular spinners:
Some spinner styles for spinner-meh-gic

The full list of options can be found on the github wiki page.

So far I’m seeing that the CPU usage is about on par with the animated gif. However this canvas spinner can be placed anywhere with any size. It’s also not limited to 256 colors like the gif version. And with canvas hardware acceleration bound to increase it should only get better. The trick is to keep the redraw timer low to save cycles. My default is set to 120ms for each redraw. But feel free to play around with the settings.

So what about IE? Surely it doesn’t support this new age <canvas> tag…no it doesn’t. But through the magic of excanvas it can be shimmed into the browser. I’ve added excanvas support with my widget code and test page. IE9 should support <canvas> natively.

Posted in Javascript, jQuery, Projects | Leave a comment

Javascript type and Internet Explorer

Here’s a fun little discovery. I was working on a web application for the iPhone and the javascript includes were declared as follows:

<script src="lib/jquery-1.3.2.min.js" type="application/x-javascript">

I wanted to test a more generic XML handling pattern so I loaded one of the test pages in IE. Unfortunatly Internet Explorer doesn’t understand the application/x-javascript and doesn’t execute the code. Not even IE8 knew what to do with this type. So just stick with text/javascript or text/ecmascript I suppose.

Posted in Javascript | Leave a comment

Netbeans 6.5, Java 1.6 and Mac OSX

Had a lot of fun today trying to get my Netbeans to work on my MacBook. Apple tends to lag behind on Java versions and defaults to JDK1.5 to this very day. In order to use some plugins in Netbeans I needed Java 1.6 to work. At first I tried to set the global Java through the Java preferences application you can find in your utilities. This did not fix my issue since Netbeans ended up using 1.5 anyway. After some googling I stumbled across the following blog post:

What I found there fixed my netbeans without changing the default Java version on my Mac (which can mess up other java applications). What it boils down to is the following:

  1. Go to “/Applications/NetBeans/NetBeans”
  2. Edit “netbeans.conf”
  3. Change the “netbeans_jdkhome” to something like “netbeans_jdkhome=
Posted in Apple, Java, Netbeans | Leave a comment

Added old projects

I managed to find an old backup of the CowControl and FileMerger sites. I used those to (re)create their project pages. You can now find them on this website in an updated form. I’m still planning on adding the page links to the upper left corner of the site for easy access.

Posted in Website | Leave a comment

Hello world!

And another WordPress blog is added to the world wide web. This blog will focus on my live as a software developer. Any past, present and future projects should end up on here in one way or another.

Posted in Website | Leave a comment