Windows* Store App - Gyroscope Sample Whitepaper

Lana N Lindberg, Software Applications Engineer for the Intel® Atom ™ Processor

Download Article

Windows* Store App - Gyroscope Sample (PDF 358KB)


The Gyroscope sample of a Windows Store app described in this article shows how to register for notifications from the gyroscope sensor in the new Windows 8 environment and use the reported values to modify a 3D object on the display. An example of a Gyroscope used to rotate a 3D object based on the reported angular velocity of the gyroscope in 3 dimensions is something that’s not necessarily new to creators of phone based applications, but is entirely new to creators of traditional desktop applications. With Microsoft adding support for sensors in their Windows 8 OS and Intel delivering more and more platforms with integrated sensors, the creators of the traditional desktop applications will find themselves wanting to add support for sensors to their existing applications and wanting to create Windows Store app versions of current and new applications that use sensors.

Gyroscope Application Code and Explanations

This Gyroscope app consists of JavaScript* code, HTML, and CSS. JavaScript code starts the app, connects to the default gyrometer and reads x, y, z angular velocities. CSS sets width, height, and position of the gyroscope image and loads it. HTML displays x,y,z angular velocities and animated gyroscope image on the screen.

JavaScript functions

onActivated() event

Whenever the Gyroscope app is launched, the activated event is raised. It connects to the default gyrometer, sets the change sensitivity for gyroscope based on the report interval and registers an event listener on the image.

 app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==    
    activation.ApplicationExecutionState.terminated) {
            var minimumReportInterval;
            var reportInterval;
    //Connect to the default gyrometer
            gyroscope = Windows.Devices.Sensors.Gyrometer.getDefault();

            //Choose a report interval supported by the sensor
            minimumReportInterval = gyroscope.minimumReportInterval;
            reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            gyroscope.reportInterval = reportInterval;

            //Set the event handler
            gyroscope.addEventListener("readingchanged", onDataChangedGyro);



This function is called each time a gyroscope event is fired by the driver. It reads x, y, z angular velocities and does a 3D transformation of the gyroscope on the screen.

function onDataChangedGyro(e) {
    var reading = e.reading;

    x_degrees = reading.angularVelocityX.toFixed(2);
    y_degrees = reading.angularVelocityY.toFixed(2);
    z_degrees = reading.angularVelocityZ.toFixed(2);

    id('txtXVelocity').innerHTML = reading.angularVelocityX.toFixed(2);
    id('txtYVelocity').innerHTML = reading.angularVelocityY.toFixed(2);
    id('txtZVelocity').innerHTML = reading.angularVelocityZ.toFixed(2);

    id('gyroscope').style.msTransform = 'perspective(0px) 
translate3d(100px, 100px, 0px) 
rotateX(' + x_degrees + 'deg) 
rotateY(' + y_degrees + 'deg) 
rotateZ(' + z_degrees + 'deg)';


This function is invoked within onDataChanged to retrieve the given identifier from the HTML document.

function id(elementId) {
    return document.getElementById(elementId);


Starts the application.

CSS functions

#gyroscope {
   width: 200px; 
   height: 200px; 
   background-image: url(../images/gyroscope.png); 
   position: absolute;

HTML functions

In HTML we output x, y, z, velocity values for the Gyroscope.

<!DOCTYPE html>
    <meta charset="utf-8" />

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- Gyroscope references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script type = "text/javascript" src="/js/default.js"></script>
<body role ="application">  
    <div class="item" id="Div">
        <br />
        X: <a id="txtXVelocity">no data</a>
        <br />
        Y: <a id="txtYVelocity">no data</a>
        <br />
        Z: <a id="txtZVelocity">no data</a>
        <br />
    <canvas id="gyroscope" width="600" height="600"></canvas>

Basic Lifecycle

The application starts by connecting to the default gyrometer. It reads x,y,z angular velocities and passes the values to the 3D transform. The user can move the tablet in different directions and observe the image rotation in 3D based on the angular velocities.

 Helpful Links

1.Gyroscope, Wikipedia,
2.Using Sensors and Location Data for Cutting-edge User Experiences in Mobile Applications, Intel Corporation,

License Notice

Intel, the Intel logo, and Atom are trademarks of Intel Corporation in the US and/or other countries.

Copyright © 2012 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.