detect-device-orientation
v0.2.1
Published
Detect device orientation.
Downloads
10
Readme
detect-device-orientation
Overview
Detect device orientation.
Notes
- DeviceOrientationEvent is available only in secure contexts (HTTPS), in some or all supporting browsers.
Installation
You can install this library using npm:
npm install detect-device-orientation
Usage
import {
DetectDeviceOrientation,
Orientation,
} from "detect-device-orientation";
const detectDeviceOrientation = new DetectDeviceOrientation();
detectDeviceOrientation.init((orientation: Orientation) => {
console.log(`absolute: ${orientation.absolute}`);
// [Output] absolute: true
console.log(`alpha: ${orientation.absolute}`);
// [Output] alpha: 0
console.log(`beta: ${orientation.beta}`);
// [Output] beta: 0
console.log(`gamma: ${orientation.gamma}`);
// [Output] gamma: 0
console.log(`webkitCompassHeading: ${orientation.webkitCompassHeading}`);
// [Output] webkitCompassHeading: 0
console.log(`webkitCompassAccuracy: ${orientation.webkitCompassAccuracy}`);
// [Output] webkitCompassHeading: 0
});
In iOS Safari, requestPermission should be called through a user event, such as clicking a button.
var btn = document.createElement("BUTTON");
var text = document.createTextNode(
"Request Device Orientation Event Permission",
);
btn.appendChild(text);
document.body.appendChild(btn);
btn.addEventListener("click", function () {
detectDeviceOrientation.requestDeviceOrientationPermission;
});
Output
| Property | Description | Type | Example |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------- |
| absolute | A boolean that indicates whether or not the device is providing orientation data absolutely. | boolean | true
or false
|
| alpha | A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 (inclusive) to 360 (exclusive). | number | 0
|
| beta | A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 (inclusive) to 180 (exclusive). This represents a front to back motion of the device. | number | 0
|
| gamma | A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 (inclusive) to 180 (exclusive). This represents a front to back motion of the device. | number | 0
|
| webkitCompassHeading | A number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. | number | 0
|
| webkitCompassAccuracy | The accuracy of the compass means that the deviation is positive or negative. It's usually 10. | number | 0
|
Link
License
This project is licensed under the MIT License - see the LICENSE file for details.