DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > How to Use the Gyroscope of Your iPhone in a Mobile Web App

How to Use the Gyroscope of Your iPhone in a Mobile Web App

Peter Friese user avatar by
Peter Friese
·
Nov. 26, 10 · Mobile Zone · Interview
Like (0)
Save
Tweet
16.10K Views

Join the DZone community and get the full member experience.

Join For Free

This week's release of iOS 4.2 for iPad and iPhone comes with some nice little features most people will not immediately become aware of as they're neither directly visible in the iOS UI nor are they mentioned in Apple's official release notes. You have to dig a little deeper to find them. One of them is a JavaScript API for the iPhone's gyroscope. Read on to see it in action and learn how to use it.Your iPhone has a number of sensors, some of which are rather essential for the phone's operation (such as the microphone). While the accelerometer and the gyroscope might not be the most essential sensors for a phone, they're certainly the most exciting ones. While accelerometer measures the acceleration you induce on the phone, the gyroscope gives a rather precise feedback on the orientation of the phone.

Until now, web developers didn't have access to the accelerometer sensor and the gyroscope sensor. With this week's release of iOS 4.2, this has changed and we can now use DeviceMotionEvent and DeviceOrientationEvent to determine the acceleration and orientation data of the phone.

Let's first determine whether the current browser supports device orientation sensing:

if (window.DeviceMotionEvent==undefined) {
}

We can then read the sensor data by registering the respective callbacks. Here's how you read the accelerometer's data:

window.ondevicemotion = function(event) {
ax = event.accelerationIncludingGravity.x
ay = event.accelerationIncludingGravity.y
az = event.accelerationIncludingGravity.z
rotation = event.rotationRate;
if (rotation != null) {
arAlpha = Math.round(rotation.alpha);
arBeta = Math.round(rotation.beta);
arGamma = Math.round(rotation.gamma);
}
}

The gyroscope's data can be read like this:

window.ondeviceorientation = function(event) {
alpha = Math.round(event.alpha);
beta = Math.round(event.beta);
gamma = Math.round(event.gamma);
}

I've put together a little demo that uses the sensor data to color some boxes on the phone's screen. Here's a short video showing it in action:

If you want to take it for a spin, open this URL in mobile safari on your phone: http://demos.peterfriese.de/gyro/gyro.html.

(image of Gyroscope by stop that pigeon! taken from http://www.flickr.com/photos/25312309@N05/2651042796/)

 

From http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/

mobile app

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Take Control of Your Application Security
  • Unit Vs Integration Testing: What's the Difference?
  • APIs Outside, Events Inside
  • SDLC Vs STLC: What's the Difference?

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo