Tuesday, April 8th, 2008

JS Time Machine

Category: Component, JavaScript, UI

Kristian Thornley had a unique requirement for displaying data change overtime and thought that he would build a Mac Leopard JS Time Machine.

JavaScript Time Machine

Kristian told us that “currently the effect suffers if the data in the panels are too detailed and I will probably set up some event handlers e.g. onScale preScale postScale which could trigger Ajax calls and preload data a bit like Livegrid.”

Posted by Dion Almaer at 9:31 am

-1031 rating from 29 votes


Comments feed TrackBack URI

hey, now that’s cool!

One thing i was wondering about it:

Is the checkerboard sopposed to represent a “data view” of some sort? if so, you’ve only got 7 checkerboards, but 8 items.

unless item 8 (i’m guessing 8 is the oldest data) is blank because there was no data at the time

Comment by jaimz — April 8, 2008

Ouch, the markup could really be improved, also the width of the images should be set to 100%

Comment by Mathieu \'p01\' Henri — April 8, 2008

Its still experimental. Internal scaling of the panels would be best if they were allowed to scale themselves as stated with width=”100%” but how would this work with text?. In the real time machine only the current and immediately behind panels are rendered this would increase performance and minimize the requirement to scale the interior.

Perhaps this could be better rendered in canvas but having never explored that route I don’t know I might have to read up on the work of Christian Effenberger, Mr Canvas to see if this can be done :)

BTW It is quite a good browser benchmark tool at the moment :)

Comment by thornleyk — April 8, 2008

If you also want text, why not using SVG ? after all that’s what it’s meant for : Scalable Vector ( and Text ) Graphics.

Comment by p01 — April 8, 2008

This is pretty cool. Is it just me, or does Apple come up with some cool, usable(worth copying in the web) UI stuff?

I would agree with the markup being kinda rough and it seems like the the panels behind the first one are just cut off by width and height, and not scaled down.

Great reproduction none the less.

Comment by emehrkay — April 9, 2008

Leave a comment

You must be logged in to post a comment.