Multi Touch jQuery Dial / Spinner

By : Lee

I am creating an app for iOS using PhoneGap, phonegap packages HTML, CSS & Javascript into a native iPhone application.

The app will feature a large old style Combination Lock Spinner in the center of the screen. This concept is pulled off very very well in the Native iPhone app (obj-c) Converbot.

So my question is, is it possible to produce this using Javascript + CSS3, has anyone done this before, and can anyone point me in the right direction to get started?

I have attached some images to hopefully add clarity...

By : Lee


In response to your question: "Can it be done?" Yes.

The more important question is: "How can it be done?"

I'm not willing to write your project for you, but I am willing to give you a few pointers. There are a number of places you can start, each has its own merits and challenges. You'll need to figure out exactly what features you want, and how you want your app to respond.

For starters, how would the dial be turned? A few options are:

  • Mouse Scroll Wheel
  • Arrow Keys
  • Buttons
  • Dragging the mouse

How many notches are in the wheel?

  • a static number
  • a dynamic number

What other features do you want?

If you are using a static number of notches on your combo-lock, you may want to consider creating static images of each rotational state, preloading the images and displaying a different image depending on what state the wheel is in.

If you want a dynamic number of notches, you'll have to look into css3 transform

You have an advantage in knowing that you're only making this for the iPhone. That means you can probably use the -webkit-transform support, without needing to worry about IE's transform craziness (rotational matrices, rotation origin, css filters, etc)

You could then set up a div with the right number of notches and labels with all elements rotated properly for their position.

Then instead of moving any of the pieces individually, you could rotate the entire div around its center to produce the combo-lock effect.

By : zzzzBov

This video can help you solving your question :)
By: admin