/    Sign up×
Community /Pin to ProfileBookmark

rotating graphics with mouse position

Copy linkTweet thisAlerts:
Jul 02.2006

I’ve got an idea for a new website design for my auto auction but i’m not entirely sure how to start.

I want to have a sort of dashboard on the bottom of the screen that will have a speedometer, tachometer, ect. and I want the needles to follow the mouse movements. I’m going to have various links within the dash via symbols with short descriptions similar to the ones in a car (check engine light, ect.). Theres going to be a lot of different things I’ll be needing to ask you guys about to accomplish this, but I’ve decided to start with trying to figure out how to get the needles moving. I’ve found a way to do this via flash, but the problem is that I dont know the first thing about flash and the examples I’ve seen only follow the mouse if it’s within the little flash window, which isn’t going to cut it. I need the needles to work everywhere on the page. I’ll also need a way to restrict thier movements to only within a specified range, because the gauges arent a full 360 degrees around. I’ll need some that are 180 degrees, some probubly around 300 degrees, and some only like 120.

can javascript pull off something similar to this?
[URL=http://www.actionscript.org/tutorials/advanced/Mouse_Angle_Detection_II/index.shtml]http://www.actionscript.org/tutorials/advanced/Mouse_Angle_Detection_II/index.shtml[/URL]

thanks a ton

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooJul 02.2006 — You need to use the trig functions to describe a curved path .

[CODE]this snip should give you a hint:

step++;

//(rx and ry are calculated offsets)
var rf=1.0 - (step/incr);
var t=(step/incr) * 2 *Math.PI;

var leftPos=Math.ceil(-rf*Math.cos(t)*rx);
var topPos=Math.ceil(-rf*Math.sin(t)*ry);

if(cntr < num){
timer=window.setTimeout("animate()", 10);
}
else{
timer='';
wait=false;
}
}[/CODE]
Copy linkTweet thisAlerts:
@Chrisab429authorJul 03.2006 — I'm frying my brain over this trying to get it to work and its just not wanting to do it for me....I think i follow your hint there, but i just cant seem to get it working.

i've attached an example of a graphic i need to rotate.

also,

I've found an analog clock script that has hands that rotate the way i need my needles to rotate, would it be tough to change it so that the hands follow the mouse instead of the time?

I've been playing with it for hours trying to merge your example into this script, but no luck.

http://www.dynamicdrive.com/dynamicindex6/analog2.htm

I need that graphic or a rendered line, such as the ones in the analog clock script, to rotate according to the mouse position. I thought i was good with javascript, but evidently i'm not :mad:


if you guys could show me the way i'd appreciate it.

[upl-file uuid=b1b911f7-e80e-4631-9732-1f0e4bbb9623 size=1kB]needle copy.gif[/upl-file]
Copy linkTweet thisAlerts:
@Chrisab429authorJul 05.2006 — I've been working with flash trying to get a good demonstration of what i'm looking for and this is exactly what i need. The only problem is that i'm afraid there is no way for flash to keep track of the mouse while its outside of the frame. The website is pritty much made and its with normal HTML and CSS and javascript and all that good stuff, so if i want this to work anywhere on the page i would have to redo it all in flash to get the effect i'm looking for...and thats a lot of work, not to mention yesterday was my first day ever even looking at the inside workings of flash.

so my question to you javascript gurus is this:

can this exact thing be done with javascript?

[upl-file uuid=11f3908f-d6af-4c5b-9645-7c84815c820e size=21kB]porschegaugesworking.zip[/upl-file]
×

Success!

Help @Chrisab429 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...