Touch screen thumbwheel control
A while ago I asked for a thumbwheel volume control. I was laying out touch screen panels and was running low on real estate with long sliders that are necessary for any kind of precision operation.
Thumbwheel is basically a rotary control with a wide knob mounted horizontally and only a part of it exposed.
Like this:
http://www.hydratronics.com/upload/Products/Joysticks/Images/1-axis_Thumb.jpg
One swipe turns the pot maybe a quarter of the full travel- good for precision in small package.
This week I found myself longing for such control again.
So I thought about it and with a bit of hacking and some Photoshopping I made a thumbwheel control for my project. It works very well on a small touch screen and the user can't accidentally turn the volume way up with one swipe. Fine adjustment of volume is easy and the control is intuitive.
I captured a few seconds of me playing with it.
If anyone is interested in seeing it here is my Dropbox link to the zip file.
It's a Flash video and a html page with the video embedded and the player controls. Just double click on the .html file to view the video.
https://dl.dropbox.com/u/59405/BSS_London_thumbwheel_video.zip
I would put it on youtube but it is blocked on our network.
Thumbwheel is basically a rotary control with a wide knob mounted horizontally and only a part of it exposed.
Like this:
http://www.hydratronics.com/upload/Products/Joysticks/Images/1-axis_Thumb.jpg
One swipe turns the pot maybe a quarter of the full travel- good for precision in small package.
This week I found myself longing for such control again.
So I thought about it and with a bit of hacking and some Photoshopping I made a thumbwheel control for my project. It works very well on a small touch screen and the user can't accidentally turn the volume way up with one swipe. Fine adjustment of volume is easy and the control is intuitive.
I captured a few seconds of me playing with it.
If anyone is interested in seeing it here is my Dropbox link to the zip file.
It's a Flash video and a html page with the video embedded and the player controls. Just double click on the .html file to view the video.
https://dl.dropbox.com/u/59405/BSS_London_thumbwheel_video.zip
I would put it on youtube but it is blocked on our network.
Comments
Please share
http://dl.dropbox.com/u/59405/thumb wheel test.architect
http://dl.dropbox.com/u/59405/thwheel.zip
What you do is drop the slot and the wheel graphics onto a gain object, size the now very tall control to be short, then cover it with the ring graphic. Turn snapping to grid off and nudge the elements with your arrow keys until you have perfect fit. Observe the z order- which graphic is on top.
The effect lies in the transparency of the shadow in the ring graphic, which makes a flat object look like it’s curving back.
If you are handy with Photoshop or Fireworks you can make your own thumbwheels to fit your panels just right.