Capacitor - Using Motion

Capacitor
1

I am confused on how to use the motion api plugin with Capacitor. I am trying to get the ‘compass heading’ but I can’t seems to get it. When I listen to an Orientation and get a MotionOrientationEventResult, the only event properties are alpha beta and gamma. Here is the sample of what I have.

import { Plugins, MotionOrientationEventResult, MotionEventResult } from ‘@capacitor/core’;
const { Geolocation } = Plugins;
const { Motion } = Plugins;

private getMotion() {
// try {
Motion.addListener(‘accel’, (event: MotionEventResult) => {
console.log (‘accel’);
console.log (event);

})

Motion.addListener('orientation', (event: MotionOrientationEventResult) => {
  console.log ('Orientation');
  console.log (event);
});

}

Any help on this would be great.

Thanks

2

What device are you testing it on?

3

The latest iPad Pro, 11" Model with iOS 12.3.1 and and iPhone 6. I am using Ionic 4.5.0 with Angular 7.2.15 and Capacitor 1.0.0

I am using Visual Studio Code and the code intelligence for that event MotionOrientationEventResult only gives me the properties, alpha, beta and gamma

4

See this code snippet: https://stackoverflow.com/questions/18112729/calculate-compass-heading-from-deviceorientation-event-api

I would also look at: https://github.com/lamplightdev/compass

5

Oh cool, I will check those links out. Thanks

6

I still seem to get getting inaccurate values. I am taking the alpha, beta and gamma values and plugging them into the function mentioned in the post, but when I compare to a compass app, it is nowhere close. The gamma value is always negative as well. Not sure if that is an issue. Its like the device is not calibrated.

Any thoughts? Thanks

Motion.addListener('orientation', (event: MotionOrientationEventResult) => {
    orientation.degrees = this.compassHeading(event.alpha, event.beta, event.gamma);
}

private  compassHeading(alpha, beta, gamma) {

    // Convert degrees to radians
    var alphaRad = alpha * (Math.PI / 180);
    var betaRad = beta * (Math.PI / 180);
    var gammaRad = gamma * (Math.PI / 180);
  
    // Calculate equation components
    var cA = Math.cos(alphaRad);
    var sA = Math.sin(alphaRad);
    var cB = Math.cos(betaRad);
    var sB = Math.sin(betaRad);
    var cG = Math.cos(gammaRad);
    var sG = Math.sin(gammaRad);
  
    // Calculate A, B, C rotation components
    var rA = - cA * sG - sA * sB * cG;
    var rB = - sA * sG + cA * sB * cG;
    var rC = - cB * cG;
  
    // Calculate compass heading
    var compassHeading = Math.atan(rA / rB);
  
    // Convert from half unit circle to whole unit circle
    if(rB < 0) {
      compassHeading += Math.PI;
    }else if(rA < 0) {
      compassHeading += 2 * Math.PI;
    }

    // Convert radians to degrees
    compassHeading *= 180 / Math.PI;

  
    return compassHeading;
  
  }
1 Like
7

Another update, it really does seem to be a calibration issue as I get different values each time I load the app standing in the same direction. The goal I am trying to reach is that when I take a picture, I want to state what direction I am facing. Does anyone have thoughts on how that can be accomplished?

Thanks

8

Hey, did you ever figure this one out ? It seems like it is setting the orientation the app is open at at 0 and then change the number relative to that first position. Not sure how to get the true or magnet North.

9

If it happens just on iOS you can try to use webkitCompassHeading instead of alpha. Check WebKit JS documentation for more details.