Animated Speedometer

[Dominic Warzok]

Hi together,

I want to build an animated speedometer with GWT but I have no idea where to
start.

I have visited the GWT showcase website and found some animation there.
But it is alway how to move a picture from one position to another, in my case I
need to rotate the needle, and not to move it from one position to another.

And I can't use Canvas because this website is for IE8 :-(

Any Ideas?

Thanks in advance
Dominic

[Jens]

Hmm IE8 does not support CSS3 rotate/transform/animation/transition and with pure JS I think you can't rotate a needle. 

There is something called ExplorerCanvas: http://code.google.com/p/explorercanvas/ that seems to provide canvas support in IE8 by converting canvas elements in IE to VML. I guess it is also used by http://www.htmldrive.net/items/demo/832/jQuery-Speedometer so you could see how it works in IE8.

The only alternative would be to have a large sprite image that contains all possible needle positions side by side and then change the sprite image position to animate the needle (example: http://source.futurecolors.ru/fc.tape/ )

-- J.

[Dominic Warzok]

Yes thats the very big problem with the IE8. But ca. 90% of my useres use this. :-( 

Thanks for the Speedometer Example this helps me a lot. 

[Rob]

Hi,

There's a GWT wrapper for HighCharts:

-> http://www.highcharts.com/documentation/compatibility -> states IE6+

-> http://www.highcharts.com/component/content/article/2-news/46-gauges-ranges-and-polar-charts-in-beta

-> http://www.moxiegroup.com/moxieapps/gwt-highcharts/

Cheers

Rob

Kiahu.com

[Jens]

Looks nice! Didn't know that Highcharts supports gauges.

-- J.