Quickstart: Retrieving the Quaternion and rotation matrix (HTML)
You can use the Orientation sensor to retrieve a Quaternion and rotation matrix with an app written in JavaScript. Developers typically use this data to control complex games.
A Quaternion can be most easily understood as a rotation of a point [x,y,z] about a single arbitrary axis. This is different from a rotation matrix, which represents rotations around three axes. The mathematics behind quaternions is fairly exotic because it involves the geometric properties of complex numbers and mathematical properties of imaginary numbers, but working with them is simple and frameworks like DirectX support them.
Objective: After completing this quickstart you will understand how to use the Orientation sensor to retrieve a quaternion and a rotation matrix.
Prerequisites
You should be familiar with HTML, JavaScript, and events.
The device or emulator that you're using must support an orientation sensor.
Time to complete: 15 minutes.
Instructions
1. Open Microsoft Visual Studio
Open an instance of Microsoft Visual Studio.
2. Create a new project
Create a new project, choosing a Blank App from the JavaScript/Store Apps project types.
3. Replace the JavaScript code
Open your project's default.js file and replace the existing code with the following.
// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
"use strict";
var orientationSensor;
function id(elementId) {
return document.getElementById(elementId);
}
function onDataChanged(e) {
var reading = e.reading;
id('txtQuaternion').innerHTML = "W: " + reading.quaternion.w.toFixed(6)
+ "X: " + reading.quaternion.x.toFixed(6)
+ "Y: " + reading.quaternion.y.toFixed(6)
+ "Z: " + reading.quaternion.z.toFixed(6);
id('txtRotationMatrix').innerHTML = "M11: " + reading.rotationMatrix.m11.toFixed(6)
+ "M12: " + reading.rotationMatrix.m12.toFixed(6)
+ "M13: " + reading.rotationMatrix.m13.toFixed(6)
+ "M21: " + reading.rotationMatrix.m21.toFixed(6)
+ "M22: " + reading.rotationMatrix.m22.toFixed(6)
+ "M23: " + reading.rotationMatrix.m23.toFixed(6)
+ "M31: " + reading.rotationMatrix.m31.toFixed(6)
+ "M32: " + reading.rotationMatrix.m32.toFixed(6)
+ "M33: " + reading.rotationMatrix.m33.toFixed(6);
}
var app = WinJS.Application;
// This function responds to all app activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Retrieve the default orientation sensor
orientationSensor = Windows.Devices.Sensors.OrientationSensor.getDefault();
// Choose a report interval supported by the sensor
var minimumReportInterval = orientationSensor.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
orientationSensor.reportInterval = reportInterval;
// Set the event handler
orientationSensor.addEventListener("readingchanged", onDataChanged);
WinJS.UI.processAll();
}
};
app.start();
})();
4. Add the HTML for the apps
Open the default.html file for the Windows and Windows Phone projects, and copy the following HTML into inside the BODY tags of the file.
<div class="item" id="scenario1Output">
Quaternion: <a id="txtQuaternion">no data</a>
<br />
Rotation Matrix: <a id="txtRotationMatrix">no data</a>
</div>
5. Build, deploy and run the app
Press F5 or select Debug > Start Debugging to build, deploy, and run the app.
Once the app is running, you can change the accelerometer values by moving the device or using the emulator tools.
6. Stop the app
- Press ALT+Tab to return to Visual Studio.
- Press Shift+F5 or select Debug > Stop Debugging to stop the app.
Summary and next steps
The previous example demonstrates how little code you'll need to write in order to integrate the Orientation sensor into your app.
The app establishes a connection with the default Orientation sensor in the onactivated function. This occurs on the following line.
orientationSensor = Windows.Devices.Sensors.OrientationSensor.getDefault();
The new data is captured in the onDataChanged function. Each time the sensor driver receives new data from the sensor, it passes the values to your app by using this function (or event handler). The app registers this event handler on the following line.
orientationSensor.addEventListener("readingchanged", onDataChanged);
These new values are written to the screen via updates to the DOM elements shown below.
<div class="item" id="scenario1Output">
Quaternion: <a id="txtQuaternion">no data</a>
<br />
Rotation Matrix: <a id="txtRotationMatrix">no data</a>
</div>
The app establishes the report interval within the onactivated function. This code retrieves the minimum interval supported by the device and compares it to a requested interval of 16 milliseconds (which approximates a 60-Hz refresh rate). If the minimum supported interval is greater than the requested interval, the code sets the value to the minimum. Otherwise, it sets the value to the requested interval.
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
If you're writing a 3-D app, the next steps would typically involve integrating the quaternion or rotation matrix values with your app's graphic output.