> Rotating wheel for your iPhone webapps

Rotating wheel

In my last post I was suggesting to stop cloning the default Apple UI for web applications and start creating custom controls. This time I want to put my words in practice and present you with a rotating wheel select control, 150 lines of code all included (HTML+CSS+JS).

As always get an idea of what I am talking about watching the short screencast or point your mobile browser to the online demo. As you’ll see the code is pretty rough, you probably won’t be able to cut’n'paste it into your project and make it work without editing, but I hope you’ll get an idea of what can be done with this little webkit beauty in just a couple of hours.

To build the astrological wheel I decided to split each sign into a slice. This way I had much freedom to play with every element of the control as I wanted to do a short slide-in animation on window load.

Each astrological sign is a li element each rotated by 30 degrees compared to the previous. So aries is -webkit-transform:rotate(0deg), taurus -webkit-transform:rotate(29deg), gemini -webkit-transform:rotate(59deg), and so on. By default the pivot of rotation is placed in the middle of the element, to change the origin to the center of the wheel we have to apply the -webkit-transform-origin:38px 138px CSS property to each slice.

To get the slide-in animation I also y translated by -100 pixel each sign and on window load I execute the following code:

1. lis = document.getElementsByTagName('li');
2. for(i=0; i<lis.length; i+=1) {
3. 	theTransform = window.getComputedStyle(lis[i]).webkitTransform;
4. 	matrix = new WebKitCSSMatrix(theTransform).translate(0, 100);
5. 	lis[i].style.webkitTransform = matrix;
6. }

Worth noting the usage of getComputedStyle(element).webkitTransform and the newly discovered magic class WebKitCSSMatrix. The first returns a matrix of all the transforms applied to an element, the second lets us read and manipulate a 3d matrix that can be later reassigned to any element.

On line #3 we read the actual transforms matrix, on line #4 we modify the matrix translating the object by +100 pixels on the y axis, on line #5 we apply the new matrix back to the element. Since we gave the slices -webkit-transition-duration:800ms; the translation is performed with a short animation.

To get the selected sign when the OK button is pressed all needed to do is getSelectedValue() which returns the slice number and an associated value. Please forgive the mess in getting the selected value, very unwisely I keep adding/subtracting radians to rotate the wheel, this means that we can end up with a 40 radians rotation that is nasty, I leave the code beautifying to the smart reader ;) . Also if there’s enough interest I could enhance the control a bit. It could be fun to do a wheel of fortune like game.

Th-th-that’s all folks. Please leave a comment and let me know what you think about this script and how we can make it better. Vandals set my car on fire this night… I think I got the best Easter egg this year…

Download the script

/Share the joy

/Reactions

    • Author: Mahendra
    • Posted on: 2011/11/08
    • At: 19:42

    Hi,

    Firstly, you are an awesome guy. I have been tweaking around with iScroll and the DatePicker and they are just amazing.

    This is one more feather to your hat, and it is damn excellent.

    I was just wondering like is it possible to control the spinning? Like can we start the spinning on click of a button, and create some random duration for the spinning time.

    Let me know if you think this is possible with a possible path towards that direction, and I’d love to move ahead.

    Thanks in advance.

      • Author: Mahendra
      • Posted on: 2011/11/09
      • At: 08:21

      Ok, I managed to make it spin continuously, and even increase/decrease the spinning speed… :-)

      Do you have any idea, as to how can we increase/decrease the diameter or the wheel and change the number of wedges depending upon some configurable global variables like:

      var totalWedges = 12;

      and depending upon this value, the li gets populated.

      Thanks.

    • Author: Farid
    • Posted on: 2011/11/10
    • At: 16:52

    Hi,
    How can i interact it with my app. For example how i allocate an another viewController instead of alert ?

    Please help me.

    • Author: Pro
    • Posted on: 2011/11/16
    • At: 16:00

    How to set position right if i set it right site its not working.

    • Author: Mark
    • Posted on: 2011/11/22
    • At: 16:54

    This is an awesome piece of work! But I do agree with your last comment about getSelectedValue()

    I’m trying to change the location of the selected sign from the 12:00 position to the 3:00 position, but have had no luck.

    Can you advise?

    It’s Greatly Appreciated!

    • Author: Ali
    • Posted on: 2012/01/10
    • At: 20:10

    hi, i am using the ROTATING WHEEL on my website just wondering how can i make it so that it works on firefox and opera mobile browser i can modify the css but can not figure out the js code to make the script to work on theses browser.

    • Author: Caroline
    • Posted on: 2012/01/22
    • At: 18:16

    Thanks this is great – however my maths isn’t that good, I have made a larger version of the wheel with 8 segments. I am pretty sure I changed all the relevant lines, however, my wheel spins backwards and too slow!! Any ideas what I messed up?? Been looking for hours!!

  • Hi MAHENDRA,

    Can you tell me how can i make wheel of 20 wedges.
    I tried to make by using angle pattern 0 29 59 89 119 149 179 209 239 269 299 329 but i unable to make exact circle pattern…can you make wheel for 20 numbers.

    • sorry angle pattern is not this that is 0 17 35 53 71 89 107 125 143 161 179 197 215 233 251 269 287 305 323 341