Rotating wheel for your iPhone webapps

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

64 thoughts on “Rotating wheel for your iPhone webapps”

  1. 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).

    i like your cloning from the default apple UI. Pls don’t stop with it.

  2. Now this is what i had in mind when you first said about your spinning wheel script πŸ˜‰

    It looks like you got the image from ConvertBot though. It is pretty nice i do admit.

    Although i don’t totally agree with the non-native UI thing. If the site is specifically designed for iPhone then it’s fine. Just need to make another theme for those without one.

  3. Just tried it out and it really is amazing. The way the slices slide in. It’s so fluid too. Amazing.

  4. Oh yes, forgot to mention. The idea came to my head way before convertbot, but the wheel design is inspired by the guys from tapbots. Just to stress the point that anything can be done with webkit… who needs object-c?! πŸ˜›

  5. I am a graphic designer, not a programmer, so I will try not to sound too stupid with the question I am about to ask. I am designing a mobile version of our web site. I don’t want my site to be a scaled down version of our main web site, I want it to be designed specifically for the mobile platform. Is there a script that can modify the page layout when the phone is turned horizontally? Or, swap a referenced image for an image that looks better in the horizontal view than the one that was designed for the vertical view?

  6. Awesome stuff Matteo! I’ve posted about it on my blog: http://iphoneized.com I’m playing around with it and hope to have a variation on the theme soon.

    I posted about your previous custom control as well. Keep up the great work man, it’s definitely inspiring.

    Cheers,

    Chris

  7. Thanks Matteo, that is what I needed to know. I will send you an email if I need codeing help. Which I probably will.

  8. Really Awesome!

    I was changing the display positioning of the wheel and images. I wanted everything 100px lower than it is . The animations load and everything looks good but I can no longer rotate the wheel properly. All of the zodiac signs rotate off of the Aries sign, I must have missed a variable somewhere. Any ideas?

    Thank-you for your time.

  9. Thanks for the prompt reply Matteo. I’ll try it when I get home this evening.

  10. that’s exactly what i need – great!
    but πŸ™‚ in os3.0 the wheel judders πŸ™ what happens?

    cheers
    marcus

  11. Perfect! Well, almost. Don’t get me wrong – I think you have done a brilliant job, my only concern is about the speed with which such webkit transforms execute on the iPhone itself (not the simulator). I have been trying things very similar to this recently and have found that when executed in the iPhone Simulator it works perfectly (presumably because it is using my computers CPU or even GPU to do the transformations) but when I test it on the iPhone itself it is a mighty bit slower and results in a pretty disgusting user experience. I have also tried this on the new 3GS (more power) and it is a tad quicker, but is still a long way from fluid. But congratulations because this is exactly the direction I feel mobile application development needs to be heading – people like you are pioneering the way. I guess we just need the hardware in mobile devices to catch up to what the code is demanding.

    Cheers,

    Chris

  12. thank you Chris, that is exactly the spirit I write my post with. I’m not giving away snippets of code to cut-n-paste on your site (sorry guys), but I’m trying to explore new ways of doing things (even if we are not still technologically there). Hope my work could be inspirational in some way.

  13. Has anyone had any luck smoothing this out on 3.0? It ran beautifully on 2.2, but as soon as I upgraded to 3.0, the animation got really chunky.

  14. This seems to spin much more smoothly on 3.0 if you change the rotateStart webkitTransitionDuration to something larger. I tried 30ms and it worked pretty well. It still skips every once in awhile, but overall it’s much better.

  15. very cool. you are an amazing webkit developer.
    if only it was more generic and abstract. for example, a keen use is to mimic the ipod scrollwheel and hook the delta value into another function that might select from a long list of stuff. I’ve been looking around for a class that essentially does nothing except track circular gesture on top of a DOM element.

  16. @timtim, I wish I had the time to develop a generic framework. So far I’m just working on proof of concepts. Any sponsor out there? πŸ˜€

  17. Amazing script, well, congratulations !!!

    one question, how to remove the site URL in the popup window !!!

  18. Hey great script but i was wondering how to reduce the number of segments.
    Ive been tryin to reduce the amount from 12 to 5 or 4 but have had no luck, i think it has somethin to do with -webkit-transform-origin:38px 138px but im not sure what exactly this does, can you explain this

  19. i had the same question of the previous commenter. I want fewer sections, because as my app is for kids, the pics need to be bigger. Or instead of a wheel a long vertical or horizontal bar, so you can add many different sections. Any suggestions?

  20. This is amazing, simply great…I was wondering if we can add a control like this to webview?
    Great work.

  21. Perfect! Well, almost. Don’t get me wrong – I think you have done a brilliant job, my only concern is about the speed with which such webkit transforms execute on the iPhone itself (not the simulator). I have been trying things very similar to this recently and have found that when executed in the iPhone Simulator it works perfectly (presumably because it is using my computers CPU or even GPU to do the transformations) but when I test it on the iPhone itself it is a mighty bit slower and results in a pretty disgusting user experience. I have also tried this on the new 3GS (more power) and it is a tad quicker, but is still a long way from fluid. But congratulations because this is exactly the direction I feel mobile application development needs to be heading – people like you are pioneering the way. I guess we just need the hardware in mobile devices to catch up to what the code is demanding.

  22. @M. Lawyer: just the initial animation seems slow to me, the rotation itself is pretty smooth. The animation is there just for the sake of it and probably should be removed in production. btw, as you noted, this script is here just because I like to bring the device to the limit πŸ™‚

  23. Hi,

    According to the new rules of Apple. Can I put java scripts in my code?

  24. Can some body post some tutorial about how to use it on iphone in my application ?

  25. Excellent. I’d love to see a “random-choice” mode where it spins and spins, duration of spinning proportional to the initial finger momentum … ’round and ’round and ’round she goes, and where she stops, nobody knows.

  26. I love this wheel. I apologize but I am a newbie at coding. I downloaded the source code for the wheel. I am hosting it on my website jeremyfriedman.homeserver.com/wheel. wanna use it as my start up page with simple links as a start up page on my iphone. I have changed all the values and numbers to the links I want, so when I try the wheel I get the message spitting back “jeremyfriedman.homeserver.come: 1, google” etc. I realize I have to go into photoshop and edit the jpg by eye dropping the grey background and covering up the horoscope and changing it to my links. Here is my question and its probably a simple one. How do I point my selection to link.

    Basically I want to say if (ul) or whatever those 1-11 variables are called = 1 or “goggle” then location.href=”http://google.com”

    If variable= 2, Bing the location.href=”http://bing” or even “bing://” to load the program itself etc.

    How do I do this? Can I do it right in index.com or do I have to create some data file at stores the values or what.

    Thank you for any assistance, please email the email I provide..and YES I paid $100 for mobile me and I’m kicking myself considering slowly I have stopped using the servies, replacing idisk with dropbox, calendar with google, etc. Basically the only thing i have is a central email address that delivers to my phone instantly which I could also do with google.

    Thanks,

    Jeremy
    jeremyfriedman@me.com

  27. Hey guys, I’ve noticed the scrolling function is kind of slow – is it possible to optimize something to give it a smoother scrolling feature – much like you see on the ipod or iphone when you scroll up and down the songs to select the one you want, like the animation and how smooth it is – could this be done with this wheel?

    Thanks

  28. Hi Matteo

    Very cool – have it on my iphone.

    What would be nice is if sound could be attached to it.

    I am not sure where to start.

    So each time you moved the wheel, you got the clicking noise just like what you would see and hear on the real wheel.

    Iain

  29. Hi guys,

    We are using this cool script for an ipad web app of ours – it’s real cool and perfect what I want it to do

    Recently, on the ipad I upgraded the OS Software to –

    4.2.1

    Since then I have a problem with the wheel in Safari. For example, I scroll the wheel – make a selection – click the chosen item shown with the selection. Then when I have seen the selection, I click close to go back to the wheel and the wheel is now frozen and doesn’t even load.

    Before I had it on – 3.2.2 and I didn’t have this problem

    Anybody know a solution?

    1. Also to add –

      The funny thing is, when I turn the ipad to another angle – eg horiz or vertical, then it wakes it up again and it works again…confused

  30. HI Matteo,

    very cool script, thanks for sharing! I am quiet new to javascript so maybe can you help a lil on how i can get 8 segments instead of 12.

    Many Thanks

    Thomas

    1. It’s easy but there are a lot of things that need to be changed.
      Line 24: divide by 4 instead of 6
      Line 27: change the values
      Line 80: divide by 8 instead of 12
      Line 84: multiply by 8 instead of 12

      of course you have to change the elements position (lines 123-134)… and probably I missed something.

  31. use rotate3d instead of rotateZ, like this:

    rotate3d(0,0,1,’ + this.angle + ‘rad);

    It gives you a lot smoother wheel

  32. Thanks for this is a great widget! How might I get the wheel slices to align a little rotated to the right by a degree or two? It’s alignment is a little off – maybe intentionally. Any ideas?

  33. Hey! Is there any way to make this compatible with a regular laptop? I am extremely new to web coding and this widget works great on the iPad but doesn’t work when I try using it in Firefox or IE on my laptop.

    Any help would be greatly appreciated. This is fantastic coding and I am extremely impressed!

    Thank you for making it!!

    1. Hi, making this work on chrome or safari (webkit browsers) isn’t all that hard. Compatibility with a desktop is realized by changing the ‘touchstart’, ‘touchend’, ‘touchmove’ events by their desktop counterparts (see iscroll).

      Furthermore an extended replace (2 occurrences) for e.touches[0[.pageX by (hasTouch ? (hasTouch ? e.touches[0].pageX : e.pageX) : e.pageX) and same goes for e.touches[0].pageY by (hasTouch ? (hasTouch ? e.touches[0].pageY : e.pageY) does the trick.

    2. wow, something went wrong in my second paragraph.
      of course I meant: (hasTouch ? e.touches[0].pageX : e.pageX) and (hasTouch ? e.touches[0].pageY : e.pageY)

  34. I noticed that on occasion I get a returned 13th value ( as 12 which does not exist) on what should be 0 (zero). Could there be an error in the “selected” logic?

  35. 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.

    1. 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.

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

    Please help me.

  37. 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!

  38. 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.

  39. 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!!

  40. 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.

Comments are closed.