A second look at Dare on the OWF Green Suburus, Yellow International Scouts, and Passats
Jul 28

new Kitt(); Componentizing the Kitt animation for eye-ball browser testing

JavaScript, Tech with tags: , , Add comments

Kitt of Knight Rider

Ever since Aaron Boodman uses the back and forth saw animation to demonstrate how the Gears WorkerPool can keep your UI responsive with the browser, I have used it for testing just that. It turns out the human eye is quite good at the “oh man look at how badly that jumps” kind of test.

To make it simple, I have componentized it, allowing you to drop in a kitt.js and a new Kitt() to be on your way.

Kitt Element

This is the minimum that you need to kick one off. The new Kitt will look for an element with the default id of ‘kitt’. Since it isn’t found, one is created and appended to the end of the body.

What about expanding this?

You can tell Kitt to do more, such as giving it an explicit id, colors to use, whether to use the automatic start and stop buttons, etc. Here is an example that turns off the buttons and programatically starts and stops the animation.

var evilkitt = new Kitt({id: 'evilkitt', animateBackgroundColor: 'red', hideButtons: true });
evilkitt.start();
setTimeout(function() { evilkitt.stop(); }, 6000);

With this simple little component at work, I can drop it in on the variety of performance testing work that I am doing more and more of these days (hopefully something to share one of these days).

Now, I need to make it use SoundManager2 and the sound of Kitt! ;)

For more information, check out the Google Code project that hosts the code.

One Response to “new Kitt(); Componentizing the Kitt animation for eye-ball browser testing”

  1. duecorda Says:

    Yes! It is impressive example to show what is and why worker pool, More than old example on gears samples.

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)