Looking for Suggestions - UI Device for Rotation

[josh.schramm]

Hey all,

Im trying to design something that would be intuitive for the user to
represent rotating something. Think along the lines of rotating an
image a specific amount of degrees. The obvious choice is to have the
user input CW or CCW and the number of degrees but i would rather
present something graphically and let them manipulate that, then in JS
determine the rotation.

The only thing i have been able to come up with right now is something
along the lines of the iPod click wheel with a dot at the top. As it is
clicked and dragged it spins, but the problem is i dont know if this is
possible in just JS / HTML, i don't want to use flash.

So any ideas? or do you think this click wheel idea could work?

 

[Martin Honnen]

The only thing i have been able to come up with right now is something
along the lines of the iPod click wheel with a dot at the top. As it is
clicked and dragged it spins, but the problem is i dont know if this is
possible in just JS / HTML, i don't want to use flash.

I don't know how the iPod click wheel looks but I think if it uses Flash
then you could try to solve it with SVG in browsers like Firefox 1.5 or
SeaMonkey 1.0 or the upcoming Opera 9. With IE/Win you can use the Adobe
SVG viewer to have SVG support. I don't think you will be able to have a
spinning wheel where you can control/check rotation with HTML and
JavaScript alone.

 

[Areric]

hmm.. bummer.

I really dont want to use any external plug ins. If the browser doesnt
support it nativley i dont want to use it.

 

[[on]]

hmm.. bummer.

I really dont want to use any external plug ins. If the browser doesnt
support it nativley i dont want to use it.

Well logically you could do it, though you need to make alot of images
(could be solved by Server Side Scripting) and just load them in order,
or whatever...

Won't be pretty though.

 

[Martin Honnen]

If the browser doesnt
support it nativley i dont want to use it.

Firefox 1.5 has native support for SVG and scripting. Opera 9 will have
that too. But admittedly that is not much if you are looking for a
solution for web users in general.
Recent Safari and Firefox 1.5 also have support for the canvas element
into which JavaScript can draw
<http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas>

 

[Andrew Poulos]

Recent Safari and Firefox 1.5 also have support for the canvas element
into which JavaScript can draw
<http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas>

I opened <url: http://caimansys.com/painter/ > with IE 6 and I was able
to draw on the canvas. I'm stumped. I didn't think that IE supported the
CANVAS tag so why does it work in IE?

Andrew Poulos

 

[Martin Honnen]

I opened <url: http://caimansys.com/painter/ > with IE 6 and I was able
to draw on the canvas. I'm stumped. I didn't think that IE supported the
CANVAS tag so why does it work in IE?

That page includes this <http://caimansys.com/painter/excanvas.js> which
seems to be an attempt to emulate canvas and its 2d context for IE/Win
based on the VML vector markup language that browser supports.

Various attempts to do that are there, see
<http://erik.eae.net/archives/2006/03/28/12.05.59/>

 

[Matt Kruse]

I don't think you
will be able to have a spinning wheel where you can control/check
rotation with HTML and JavaScript alone.

Sure you could. Imagine two images: A big wheel and a small dot.

The small dot is absolutely positioned, by default at the top of the wheel
image, on top of it.
On click and drag of the mouse over the big wheel image, the position of the
small dot is re-calculated using basic trigonometry so that its position on
the wheel is re-calculated and it is moved. When the mouse button is
released, its new position is returned.

There are plenty of clocks and other animation scripts out there that do
similar things. I did a quick search and couldn't find an example of a
"knob" like this though, which I find surprising. I'm sure it exists.
Perhaps someone else can do some better searching

 

[Areric]

You know Matt i was thinking about that and didnt know if it would work
but now that you mention it you could use CSS to position it and then
basically put the "dot" image on a "rail" so to speak, only allow it to
move a certain way. In the background i calculate the degrees it moved
and store it hidden.

I might go with that.