Code Monkey home page Code Monkey logo

cordova-plugin-device-orientation's Introduction

title description
Device Orientation
Access compass data.

cordova-plugin-device-orientation

Android Testsuite Chrome Testsuite iOS Testsuite Lint Test

Usage Notice

With the W3C Device Orientation API, Android, iOS, and Windows devices may not need this plugin anymore.

However, on iOS 13+, potential issues with permissions and secure contexts can arise. Therefore it is recommended to use this plugin as it uses a native implementation.


Description

This plugin provides access to the device's compass. The compass is a sensor that detects the direction or heading that the device is pointed, typically from the top of the device. It measures the heading in degrees from 0 to 359.99, where 0 is north.

Access is via a global navigator.compass object.

Although the object is attached to the global scoped navigator, it is not available until after the deviceready event.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.compass);
}

Report issues on the Apache Cordova issue tracker

Installation

cordova plugin add cordova-plugin-device-orientation

Supported Platforms

  • Android
  • Browser
  • iOS
  • Windows

Methods

  • navigator.compass.getCurrentHeading
  • navigator.compass.watchHeading
  • navigator.compass.clearWatch

navigator.compass.getCurrentHeading

Get the current compass heading. The compass heading is returned via a CompassHeading object using the compassSuccess callback function.

navigator.compass.getCurrentHeading(compassSuccess, compassError);

Example

function onSuccess(heading) {
    alert('Heading: ' + heading.magneticHeading);
};

function onError(error) {
    alert('CompassError: ' + error.code);
};

navigator.compass.getCurrentHeading(onSuccess, onError);

navigator.compass.watchHeading

Gets the device's current heading at a regular interval. Each time the heading is retrieved, the headingSuccess callback function is executed.

The returned watch ID references the compass watch interval. The watch ID can be used with navigator.compass.clearWatch to stop watching the navigator.compass.

var watchID = navigator.compass.watchHeading(compassSuccess, compassError, [compassOptions]);

compassOptions may contain the following keys:

  • frequency: How often to retrieve the compass heading in milliseconds. (Number) (Default: 100)
  • filter: The change in degrees required to initiate a watchHeading success callback. When this value is set, frequency is ignored. (Number)

Example

function onSuccess(heading) {
    var element = document.getElementById('heading');
    element.innerHTML = 'Heading: ' + heading.magneticHeading;
};

function onError(compassError) {
    alert('Compass error: ' + compassError.code);
};

var options = {
    frequency: 3000
}; // Update every 3 seconds

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

Browser Quirks

Values for current heading are randomly generated in order to simulate the compass.

iOS Quirks

Only one watchHeading can be in effect at one time in iOS. If a watchHeading uses a filter, calling getCurrentHeading or watchHeading uses the existing filter value to specify heading changes. Watching heading changes with a filter is more efficient than with time intervals.

Android Quirks

  • No support for filter.

navigator.compass.clearWatch

Stop watching the compass referenced by the watch ID parameter.

navigator.compass.clearWatch(watchID);
  • watchID: The ID returned by navigator.compass.watchHeading.

Example

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

// ... later on ...

navigator.compass.clearWatch(watchID);

CompassHeading

A CompassHeading object is returned to the compassSuccess callback function.

Properties

  • magneticHeading: The heading in degrees from 0-359.99 at a single moment in time. (Number)

  • trueHeading: The heading relative to the geographic North Pole in degrees 0-359.99 at a single moment in time. A negative value indicates that the true heading can't be determined. (Number)

  • headingAccuracy: The deviation in degrees between the reported heading and the true heading. (Number)

  • timestamp: The time at which this heading was determined. (DOMTimeStamp)

Android Quirks

  • The trueHeading property is not supported, but reports the same value as magneticHeading.

  • The headingAccuracy property is always 0 because there is no difference between the magneticHeading and trueHeading.

iOS Quirks

  • The trueHeading property is only returned for location services enabled via navigator.geolocation.watchLocation().

CompassError

A CompassError object is returned to the compassError callback function when an error occurs.

Properties

  • code: One of the predefined error codes listed below.

Constants

  • CompassError.COMPASS_INTERNAL_ERR
  • CompassError.COMPASS_NOT_SUPPORTED

cordova-plugin-device-orientation's People

Contributors

agrieve avatar alsorokin avatar bennmapes avatar cfjedimaster avatar clelland avatar cmarcelk avatar csantanapr avatar dblotsky avatar dependabot[bot] avatar erisu avatar filmaj avatar hardeep avatar hermwong avatar janpio avatar jcesarmobile avatar jsoref avatar ldeluca avatar matrosov-nikita avatar maverickmishra avatar nikhilkh avatar omefire avatar purplecabbage avatar revolunet avatar shazron avatar stacic avatar stevengill avatar surajpindoria avatar timbru31 avatar vladimir-kotikov avatar zalun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cordova-plugin-device-orientation's Issues

Documentation: CompassError code 3 on Android 10

Bug Report

Problem

When subscribing to a watchHeading function, I get a CompassError {code: 3} response. It works on older Android phones. I haven't tested iOS. If I browsed the code correctly. The error code is neither one of CompassError.COMPASS_INTERNAL_ERR CompassError.COMPASS_NOT_SUPPORTED.

What is expected to happen?

It should work.

What does actually happen?

I get an undocumented CompassError.

Information

It doesn't work on Android 10.

Command or Code

import { DeviceOrientation } from '@ionic-native/device-orientation/ngx';

constructor(
    private deviceOrientation: DeviceOrientation
  ) { }

this.compass = this.deviceOrientation.watchHeading({frequency: 500}).subscribe(data => {
       // logic
});

Environment, Platform, Device

I used Angular 11, Ionic framework 5 and Capacitor.

Version information

ionic info output:

Ionic:

   Ionic CLI                     : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.4
   @angular-devkit/build-angular : 0.1102.8
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 11.2.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.2.2

System:

   Android SDK Tools : 26.1.1 (/Users/datigo/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : ios-sim/9.0.0 darwin-x64 node-v12.18.3
   NodeJS            : v12.18.3 (/usr/local/Cellar/node@12/12.18.3/bin/node)
   npm               : 6.14.6
   OS                : macOS Catalina
   Xcode             : Xcode 12.4 Build version 12D4e

Checklist

  • I searched for existing GitHub issues
  • I updated all Cordova tooling to most recent version
  • I included all the necessary information above

Different value for magneticHeading in iOS and Android

Problem

Different value in iOS and Android. iOS is correct

What is expected to happen?

Same value for both

Information

this.deviceOrientation.watchHeading().subscribe((res: DeviceOrientationCompassHeading) => {
      console.log(res);
});

In iOS the value is

{
  "headingAccuracy": 15.887619972229004,
  "magneticHeading": 15.256682395935059,
  "timestamp": 1653415919642.137,
  "trueHeading": 15.116232872009277
}

and in Android

{
    "magneticHeading": 165.015625,
    "trueHeading": 165.015625,
    "headingAccuracy": 0,
    "timestamp": 1653416203062
}

Both handphone are flat on table side by side

Environment, Platform, Device

Ionic Capacitor 3
Angular 13
Android 10
iOS 15.3.1

Checklist

  • I searched for existing GitHub issues
  • I updated all Cordova tooling to most recent version
  • I included all the necessary information above

deprecation compatibility.

I know this plugin is now deprecated, but the last version of it was 2.0.1 - though it looks like someone was still doing a dev version 2.0.2.

My question is when it was deprecated, what were the version levels of cordova-ios and cordova-android (or cordova-cli) that this plugin was no longer needed?

My app is running significantly behind all the latest and greatest revs - so I need to determine that as of (example) [email protected] and [email protected] this plugin is not needed.

As well, if the plugin is no longer needed, where is the documentation on how to call the new integrated functions (previously used by this plugin) for device orientation functionality?

W3C DeviceOrientation Event Specification is no longer in active maintenance

Cordova has depreciated the device-orientation plugin AND W3C does not intend to maintain the DeviceOrientation Event Specification?

With the W3C Device Orientation API now being supported on iOS, Android and Windows devices, this plugin is not needed any more.

Cordova links the above to a 2016 W3C standard which pops up

This version is outdated!

Redirecting to...
W3C

Beware. This specification is no longer in active maintenance and the Geolocation Working Group does not intend to maintain it further.

Increasing reports of compass not working on some android devices

Bug Report

Problem

I've had an app released for a few years using this plugin to provide magnetic heading data in order to orient a compass. Increasingly in the last year I've had customers report that the compass isn't working on a selection of android phones, all of which have magnetometer sensors.

Devices are:
Motorola Razr 5g
Sony Xperia 5 ii
Motorola G6

What does actually happen?

navigator.compass is returning false, implying that the compass sensor is not recognised.

Investigated switching to W3C orientation, but it does not give magnetic heading so is not fit for purpose. This plugin has been great for me.

Information

Using plugin v2.01 - Cordova 9.0

Checklist

  • [ X] I searched for existing GitHub issues
  • [X ] I updated all Cordova tooling to most recent version
  • [X ] I included all the necessary information above

Freezing Android Apps getCurrentHeading

Bug Report

Problem

When calling getCurrentHeading on some ionic apps on Android devices freeze out in the field.

What is expected to happen?

getCurrentHeading gets the heading at all times.

What does actually happen?

getCurrentHeading doesn't return a value any more. On some devices this is even causing a crash.

Information

the issue is described here as well.
danielsogl/awesome-cordova-plugins#3537
--> PR will be added and linked to this issue as well.

Command or Code

        this.deviceOrientation.getCurrentHeading().then((orientation: DeviceOrientationCompassHeading) => 
                    LogUtil.debug('device orientation: ', orientation));
            .catch((error) => LogUtil.debug('Cannot get device orientation: ', error));

Environment, Platform, Device

many different Android devices

Version information

"@angular-devkit/build-angular": "^16.1.4",
"@angular-devkit/core": "^16.1.4",
"@angular-devkit/schematics": "^16.1.4",
"@angular-eslint/builder": "^16.1.0",
"@angular/cli": "^16.1.4",
"@angular/compiler": "^16.1.5",
"@angular/compiler-cli": "^16.1.6",
"@angular/language-service": "^16.1.6",
"@capacitor/cli": "^5.2.2",
"@eama/egis-symbologies": "file:plugins/egis-symbologies",
"@ionic/cli": "^7.1.1",
 "cordova-plugin-device-orientation": "^2.0.1",

Checklist

  • [ x] I searched for existing GitHub issues
  • [ x] I updated all Cordova tooling to most recent version
  • [ x] I included all the necessary information above

Should deprecation status be removed?

Since iOS 13, the WKWebView requires user permission when fetching DeviceOrientationEvent. When DeviceOrientationEvent.requestPermission() is called, a modal is shown that asks permission for "localhost". After app restart, the modal is shown again. Thinking of a mobile app, this is probably not the best user experience. With the device orientation plugin, this problems could be worked around, couldn't it?

Device orientation plugin migration to W3C

Hello,

I've read the blog and how we will proceed with W3C device orientation , but my question is how to calculate the values provided from cordova-plugin-device-orientation, for example there is a logic that i've had in my app related to the "headingAccuracy" which is not provided from the W3C device orientation, so how am i going to obtain the related props?

Horizontal compass heading not working

Hi, i've been using this plugin to get the absolute north point.
There is some problem with it. When using navigator.compass.getCurrentHeading(console.log);
If the phone is in portrait mode there is no problem...the value goes from 0 to 359.99
But when the phone is in landscape mode the values are totally wrong and not stable at all,
varying almost +/-20 degrees... Soo, how to get the right value?

Orientation  | Degrees | Degrees |
----------------------------------
Portrait     |     0   |    45   |
Landscape    |    20   |    80   |
UpsideDown   |   160   |   220   |
Landscape    |   190   |   350   |

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.