In 
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…
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.
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.
Just tried it out and it really is amazing. The way the slices slide in. It’s so fluid too. Amazing.
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?!
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?
@Monika, you are probably looking for onOrientationChange. Google it or head to Apple devs’ site
If you need a coder I’m always available for hire
Boy … you rock !
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
Thanks Matteo, that is what I needed to know. I will send you an email if I need codeing help. Which I probably will.
Cool,
but can you upload your psd(?) of the images?
This looks really great. It amazes me how powerful webkit can be!
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.
@viva, you probably have to update the originY value. If you are 100px lower originY should be 210 (wheel_height/2 + top/2).
Thanks for the prompt reply Matteo. I’ll try it when I get home this evening.
Hi Matteo,
I’ve modified it a bit and created a social bookmarking widget. Check it out: http://iphoneized.com/2009/04/iphone-optimized-social-bookmarking-widget-social-spinner/
Cheers!
Chris
Impressive,
Matteo you are my hero!
that’s exactly what i need – great!
in os3.0 the wheel judders 
what happens?
but
cheers
marcus
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
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.
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.
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.
Social comments and analytics for this post…
This post was mentioned on Twitter by del_javascript: Rotating wheel for your iPhone webapps | Cubiq.org http://tr.im/uZnW...
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.
@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?
Amazing script, well, congratulations !!!
one question, how to remove the site URL in the popup window !!!
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
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?
This is amazing, simply great…I was wondering if we can add a control like this to webview?
Great work.
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.
@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
Hi,
According to the new rules of Apple. Can I put java scripts in my code?
Can some body post some tutorial about how to use it on iphone in my application ?
Great job !!! It inspired us for creating a multitouch selection wheel in wink (http://www.winktoolkit.org/?section=previews&previews=66)
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.