https://github.com/ryohidaka/detect-device-orientation
Detect device orientation.
https://github.com/ryohidaka/detect-device-orientation
device orientation
Last synced: 5 months ago
JSON representation
Detect device orientation.
- Host: GitHub
- URL: https://github.com/ryohidaka/detect-device-orientation
- Owner: ryohidaka
- License: mit
- Created: 2024-01-16T03:33:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-01T04:34:44.000Z (about 1 year ago)
- Last Synced: 2025-04-30T21:08:51.455Z (5 months ago)
- Topics: device, orientation
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/detect-device-orientation
- Size: 227 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# detect-device-orientation
[](https://badge.fury.io/js/detect-device-orientation)
[](https://opensource.org/licenses/MIT)
[](https://ko-fi.com/B0B6TVH92)
## Overview
Detect device orientation.
## Notes
- DeviceOrientationEvent is available only in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS), in some or all [supporting browsers](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation#browser_compatibility).
## Installation
You can install this library using npm:
```shell
npm install detect-device-orientation
```
## Usage
```typescript
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.
```typescript
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
- [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.