Using "Raphael" to animate gauge pointers

[rjco...@bigpond.com]

I was wondering if anybody has animated a dial or gauges. Similar to
a car speedo.

I am looking to create a number of gauges on a page (up to 10) and was
wondering how I can make the pointer move in a ~180 degree arc. An
image example: http://www.purinchu.net/images/dial2.png

I assume if I create an image of the scale without the pointer and
have it as a background div then create a canvas within that div which
contains another image of a pointer, then use rotate ?
It would be also nice to have the page refresh via a button which
would reset the pointer to 0 and then animate it up to the actual
reading. This would show that the gauge did refresh even though it
maybe still at the same reading.



rob

[Rob]

OK I think I am getting the hand of this, although have a couple of
questions based upon my test page

http://www.rjconway.homeip.net/playground.html

1. Firefox kind of behaves as expected. IE the element goes crazy in
a circle and then stabilises.
2. in FF if I specify "paper.rect(320, 320, 100,2).rotate(-20).animate
({rotation: 100},5000);" the animation always seems to start at 0 and
go to 100 degrees and not start at the intial -20 degrees.
3. I am rotating a rectangle as a pointer, how do a specify the point
which to rotate around. I want it to rotate around the end of the
rectangle not the middle.
4. Did not really see how to draw just a simple line say 2 px wide as
a pointer thus I used a rectangle.

would really appreciate some help

rob australia

[chasbeen]

I ran Robs code and I also noted a current discussion about the method
rotate and the new prototype call of....
.rotate(degree ,cx,cY);
degree number Degree of rotation (0 – 360°)
cx number [optional] X coordinate of the origin of rotation
cY number [optional] Y coordinate of the origin of rotation

It seems that these efforts are failing in IE so another alternative
method would be to create a "speedo indicator" that was invisible for
one half it's length and use plain old .rotate(degree).

Run the below code in the "Playground" and change the rotate to what
ever you like.
paper.image("http://www.irunmywebsite.com/images/speedo.png", 200,
200, 290, 223);
c=paper.image("http://www.irunmywebsite.com/images/speedob.png", 265,
345, 160,10);
c.rotate(-10);

This is only half a solution (Please wait while the images reach
Australia:). You would have to use a time out loop to animate this.

You can see some other similar animation that uses time out here:
http://www.irunmywebsite.com/raphael/raphaelsource.html

Hope that helps
Chasbeen Canada

[chasbeen]

Correction I said "and I also noted a current discussion about the
method
rotate"
That's wrong no-one else reported that..

> > rob australia- Hide quoted text -
>
> - Show quoted text -

[chasbeen]

I kept thinking about this.
I looked at the example I sent and the "speed indicator" looks crap. I
remade the indicator into an alpha channel png and its perfect.

Try this code..

paper.image("http://www.irunmywebsite.com/images/speedo.png", 200,
200, 290, 223);

c=paper.image("http://www.irunmywebsite.com/images/speedoc.png", 265,
340, 164,12);
c.rotate(-177);

> > - Show quoted text -- Hide quoted text -

[chasbeen]

This is a final entry and hope you don't mind me being verbose. I need
this functionality so I am hoping you find this mutually beneficial.

Here is a final example done with both an image and a path.

As stated before you will need to use a setTimeout to create the
continuous animation..

paper.image("http://www.irunmywebsite.com/images/speedo.png", 200,
200, 290, 223);

c=paper.image("http://www.irunmywebsite.com/images/speedod.png", 345,
340, 82,12);
c.rotate(45,345,340);
var pathParams = {stroke: "blue", "stroke-width": 10, "stroke-
linecap": "round"};
ePath=paper.path(pathParams).moveTo(345 , 340).lineTo(427 , 340).rotate
(-30,345,340);

[Rob]

OK I made a pointer as a png using a transparent background and only
take the top half of the image file. Works great http://redturq/playground.html

a couple of noob questions:

1. If I use the image function to embed it in the canvas will the
images be stored in the clients explorer cache, just like other images
used within the html ?
2. As the animate in IE does not produce reliable results has anybody
got a javascript code snippet of how one would create a loop around
the rotate function to do the same thing.

[Rob]

Oops should of been www.rjconway.homeip.net/playground.html

On Apr 8, 9:34 pm, Rob <rjcon...@bigpond.com> wrote:
> OK I made a pointer as a png  using a transparent background and only

> take the top half of the image file.   Works greathttp://redturq/playground.html

[chasbeen]

Rob,

Unless your really fussy I would use a path instaed of a graphic (No
cache issue). Here below is a rough idea on creating a loop around the
rotate function.

This code will make the "dial indicater" do a 360 in just over 3.5
seconds.

var moves=0;
var totalmoves=360;
var timer=0;

var pathParams = {stroke: "blue", "stroke-width": 10, "stroke-
linecap": "round"};

function morphView ( )
{
if(moves == totalmoves)
{
clearTimeout(timer);
}
else
{
setNextView();
timer = setTimeout("morphView();",10);
}
moves++;
}

function setNextView()
{
var ePath=paper.path(pathParams).moveTo(345 , 340).lineTo(427 ,
340).rotate (moves,345,340);
}
On Apr 8, 7:48 am, Rob <rjcon...@bigpond.com> wrote:
> Oops should of beenwww.rjconway.homeip.net/playground.html

> > the rotate function to do the same thing.- Hide quoted text -