-
Blog
- Good example of functional gestures in Games
July 2, 2009
- Summer time!
June 29, 2009
- Movement is everything!
June 1, 2009
- Kauppa.fi and Tekninen.fi now live
May 27, 2009
- Project Snapshot: Including end-users even with tight schedules, part 2
May 26, 2009
- Redesigning Kauppa.fi
April 30, 2009
- Spin the bottle... and spin it even more!
April 21, 2009
- NexTV - tying the knot between content and technology
April 20, 2009
- Project snapshot: including end-users even with tight schedules
April 9, 2009
- Get Ready for Micro Payments
March 4, 2009
- Good example of functional gestures in Games
iPhone: Spin the Bottle!
Friday, September 12, 2008
Spin the Bottle Demo
www.idean.com/iphone/spin
NOTE: Requires an iPhone 2.0 or the new iPod Touch. SDK simulator works too. People with an older iPhone see the bottle but it won’t rotate…
Abstract Spin the bottle is an iPhone 2.0 web application that demonstrates cool touch and animation features of the Safari Mobile. You can actually spin the bottle in the screen with your finger and watch the bottle rotate and finally slow down to a stop. There’s some 3D effects to ad up realism. The demo requires the newer iPhone 2.0 (or 3G) as it uses the latest features of Safari Mobile.
UPDATE: Our Spin-the-Bottle got “staff pick” nomination by Apple. Cool:)
http://www.apple.com/webapps/
It’s a web application!
As a software developer with a focus on web I’m very excited about the browser in the iPhone, the Safari Mobile. It is one of the most advanced browsers in the market even compared to desktop alternatives. The engineers at Apple have packaged some really cool features yet to be discovered by mainstream.
Spin the bottle could have been easily implemented as a native iPhone application but I wanted to experiment with the new features of the browser: touch events, CSS transforms and animations. The CSS features are new innovations of the Webkit rendering engine and might end up in the standardisation process in the future.
Finding out information about these techniques required some surfing in the Apple Developer pages and in several iphone-related forums around the net. Good sample code was hard to find. Developing of the app took some trial and error, but it was fun to push the limit.
In the end we were quite amazed at what is possible to do in the browser these days, not to mention a mobile one. This is a sign of things to come. When Mozilla, Google and other enter the mobile browser landscape, I’m sure we’ll see more innovative ways to take the mobile web where no man has been before.
We had lots of fun developing this small app. Hope you like it too.
Technical points for geeks
Touch events. The new Safari Mobile has a new set of touch callbacks for tracking touch events. The standard mouse events won’t do the work. The app also demonstrates how to prevent the browser from scrolling the window on finger movement.
CSS transforms, transitions, animations. All of these cool new features are used in the app. The bottle is rotated with a “rotateZ” CSS transform. CSS transition is used to slide up the about box on close. CSS animation is used in the rotating splash text graphic “Spin the the bottle”. There’s some glitch in the CSS animation that I could not remove. Maybe a bug in the browser.
CSS rounded corners and border-image. The forthcoming CSS3 standard specifies a better way for implementing rounded corners. There’s a “border-radius” that applies curving to the standard border. “border-image” offers a way to implement a custom bitmap border around an element in a single compact image. Both of these bring great relief for web developers struggling with “sliding windows” techniques and what not. We’ll see these on desktops browsers soon as well.
Orientation change. Polling of window dimensions with Javascript, the usual way. I wonder why Apple hasn’t yet implemented an event handler for detecting orientation change.
Transparent PNGs. See how easy it is to provide some realism with little transparency in the images. The devil is in the details.
Custom Home Screen icon. If you save the URL to the Home Screen of your iPhone, you’ll get the application specific icon.
There’s no Javascript framework in use here, although I’m a huge fan of jquery. I wanted to keep things clear and simple.
And of course, the brave souls can digg the sources for the details.
Tomi
i thought there was an “onorientationchange” event on the body element…
ah yes, here: http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/chapter_8_section_6.html
i haven’t used it myself.
PS. i forgot to mention, nice work!
Thanks for the doc pointer, bunnyhero. There was so much documentation; I guess I was not able to digest it all.
[...] Mickelsson has created a fun iPhone Web App called Spin the Bottle. You know, a Web app, not one that has to get into the Apple [...]
The disclaimer is wrong. It requires the iPhone 2.0 or 2.1 update, but doesn’t require an iPhone 3G.
[...] Mickelsson has created a fun iPhone Web App called Spin the Bottle. You know, a Web app, not one that has to get into the Apple [...]
Why should it require an iphone 3G? Mobile safari on the first gen iphone got updated too, both devices run the same firmware versions/mobile safari versions.
I can now confirm it works with the first gen iphone and the first gen iphone touch (if people updated their firmware) too. So just say it needs firmware 2.0 or 2.1 or at whatever version the features you use were added. (I think I read about it, but not sure atm at which version they were added)
Wow, That is awesome!!!
[...] Mickelsson has created a fun iPhone Web App called Spin the Bottle. You know, a Web app, not one that has to get into the Apple [...]
[...] Mickelsson has created a fun iPhone Web App called Spin the Bottle. You know, a Web app, not one that has to get into the Apple [...]
Very interesting post, i bookmarked your blog, thanks for share
i will visit your blog later
[...] from Apple’s Web Apps Dev Centre, and invaluable information from blog articles such as Idean’s “Spin the Bottle”, SitePen’s “Touching and Gesturing on the iPhone” and Paul Bakaus’s [...]
[...] http://www.idean.com/blog/spin-the-bottle/ [...]
Pingback: http://blog.lieberlieber.com/2008/11/22/spin-the-bottle-for-iphone/
also check out our Version for Windows Mobile - Including G-Sensor Support for HTC Touch Diamond!!
http://blog.lieberlieber.com/2008/11/13/warum-programmieren-und-trinken-so-gut-zusammen-passt
[...] iPhone: Spin the Bottle! [...]
In landscape mode, if you spin it clockwise too fast it ends up counterclockwise ^^