@wemap/providers 3.2.16 → 3.2.18

package/debug/src/AbsoluteAttitudeComponent.jsx

@@ -16,6 +16,8 @@ ProvidersLoggerOld.enabled = true;
 
 class AbsoluteAttitudeComponent extends React.Component {
 
+    isStarted = false;
+
     constructor(props, context) {
         super(props, context);
 
@@ -29,7 +31,12 @@ class AbsoluteAttitudeComponent extends React.Component {
 
     }
 
-    componentDidMount() {
+    start() {
+
+        if (this.isStarted) {
+            this.stop();
+        }
+        this.isStarted = true;
 
         this.providerFromBrowserId = AbsoluteAttitudeFromBrowser.addEventListener(
             events => this.setState({ attitudeFromBrowser: events[0] }),
@@ -54,7 +61,8 @@ class AbsoluteAttitudeComponent extends React.Component {
         window.addEventListener('deviceorientationabsolute', this.onDeviceOrientationAbsoluteEventListener, true);
     }
 
-    componentWillUnmount() {
+    stop() {
+        this.isStarted = false;
         AbsoluteAttitudeFromBrowser.removeEventListener(this.providerFromBrowserId);
         AbsoluteAttitudeFromRelAtt.removeEventListener(this.providerFromRelAttId);
         AbsoluteAttitude.removeEventListener(this.providerId);
@@ -62,6 +70,12 @@ class AbsoluteAttitudeComponent extends React.Component {
         window.removeEventListener('deviceorientationabsolute', this.onDeviceOrientationAbsoluteEventListener, true);
     }
 
+    componentWillUnmount() {
+        if (this.isStarted) {
+            this.stop();
+        }
+    }
+
     handleHeadingSubmit() {
         const heading = Number(this.inputHeading);
         if (!isNaN(heading)) {
@@ -77,7 +91,6 @@ class AbsoluteAttitudeComponent extends React.Component {
         );
     }
 
-
     render() {
 
         let rawRender = <span>Not available</span>;
@@ -109,22 +122,34 @@ class AbsoluteAttitudeComponent extends React.Component {
 
 
         return (
-            <div>
-                <input type="text"
-                    style={{ width: '50px' }}
-                    placeholder='Heading'
-                    pattern="[0-9]*"
-                    onChange={event => (this.inputHeading = event.target.value)}
-                />
-                <input type="button"
-                    style={{ marginRight: '20px' }}
-                    onClick={() => this.handleHeadingSubmit()}
-                    value="Send" />
-                |
-                <input type="button"
-                    style={{ marginLeft: '20px' }}
-                    onClick={() => this.handlePosSubmit()}
-                    value="Send Montpellier position" />
+            <div style={{ width: '100%' }}>
+                <div style={{ width: '100%' }}>
+                    <input type="button"
+                        style={{
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                            display: 'block'
+                        }}
+                        onClick={() => this.start()}
+                        value="Start" />
+                </div>
+                <div style={{ marginTop: '20px' }}>
+                    <input type="text"
+                        style={{ width: '50px' }}
+                        placeholder='Heading'
+                        pattern="[0-9]*"
+                        onChange={event => (this.inputHeading = event.target.value)}
+                    />
+                    <input type="button"
+                        style={{ marginRight: '20px' }}
+                        onClick={() => this.handleHeadingSubmit()}
+                        value="Send" />
+                    |
+                    <input type="button"
+                        style={{ marginLeft: '20px' }}
+                        onClick={() => this.handlePosSubmit()}
+                        value="Send Montpellier position" />
+                </div>
                 <h3>Raw:</h3>
                 {rawRender}
                 <h3>Absolute attitude:</h3>

package/package.json

@@ -8,19 +8,19 @@
     "Guillaume Pannetier <guillaume.pannetier@getwemap.com>"
   ],
   "dependencies": {
-    "@wemap/geo": "^3.2.16",
+    "@wemap/geo": "^3.2.17",
     "@wemap/geomagnetism": "^0.1.1",
-    "@wemap/graph": "^3.2.16",
-    "@wemap/logger": "^3.2.3",
-    "@wemap/map": "^3.2.16",
-    "@wemap/maths": "^3.2.15",
+    "@wemap/graph": "^3.2.17",
+    "@wemap/logger": "^3.2.17",
+    "@wemap/map": "^3.2.17",
+    "@wemap/maths": "^3.2.17",
     "@wemap/utils": "^3.2.16",
     "lodash.isempty": "^4.4.0",
     "lodash.noop": "^3.0.1"
   },
   "description": "A package using different geoloc systems",
   "devDependencies": {
-    "@wemap/osm": "^3.2.16",
+    "@wemap/osm": "^3.2.17",
     "mapbox-gl": "^1.11.1"
   },
   "homepage": "https://github.com/wemap/wemap-modules-js#readme",
@@ -42,6 +42,6 @@
     "url": "git+https://github.com/wemap/wemap-modules-js.git"
   },
   "type": "module",
-  "version": "3.2.16",
-  "gitHead": "01e6c2ed3b4f24b230cb6a774fe159e7b20b810a"
+  "version": "3.2.18",
+  "gitHead": "5b5342754059b05298d7961f78c13b8198685a85"
 }

package/src/providers/Provider.js

@@ -127,7 +127,7 @@ class Provider {
     }
 
     get nativeInterface() {
-        return global.WemapProvidersAndroid || null;
+        return typeof window !== 'undefined' ? (window.__nativeProviders || null) : null;
     }
 
     get useCameraNatively() {

package/src/providers/attitude/absolute/AbsoluteAttitudeFromBrowserProvider.js

@@ -152,6 +152,9 @@ class AbsoluteAttitudeFromBrowserProvider extends Provider {
     };
 
 
+    iosPreviousQuat = null;
+    iosIsSkyMode;
+
     onDeviceOrientationSafariEvent = e => {
 
         this.magQuaternionTimestamp = e.timeStamp / 1e3;
@@ -166,18 +169,49 @@ class AbsoluteAttitudeFromBrowserProvider extends Provider {
             return;
         }
 
-        let webkitCompassHeading = -e.webkitCompassHeading;
-        // Be Careful: webkitCompassHeading is not continuous.
-        // Reference frame changes in function of beta with thresholds: beta > 30deg and beta < 62deg
-        // Below 30deg, East-North-Up (ENU) frame is used
-        // Above 62def, East-Up-South (EUS) frame is used
-        // Between 30deg and 62deg either ENU or EUS can be used
-        if (e.beta > 62) {
-            webkitCompassHeading = this.constructor.headingEusToEnu(
-                180 - webkitCompassHeading, e.beta, e.gamma);
+        /**
+         * Trying the best to retrieve a good quaternion from devicemotion event.
+         */
+
+        let alpha;
+        const [qw, qx, qy, qz] = Rotations.eulerToQuaternionZXYDegrees([e.webkitCompassHeading, e.beta, e.gamma]);
+        const groundAngle = rad2deg(Math.acos(qw ** 2 - qx ** 2 - qy ** 2 + qz ** 2));
+
+        let isSkyMode;
+        if (groundAngle > 136) {
+            isSkyMode = true;
+        } else if (groundAngle < 134) {
+            isSkyMode = false;
+        } else if (this.iosPreviousQuat && this.iosIsSkyMode !== null) {
+            /**
+             * This condition is true only if :
+             * - we are in the [134°; 136°] ground angle range
+             * - we know the previous quaternion
+             * - one of the both previous condition has been reached during this session
+             *
+             * In this case, we define a threshold to detect if there is a "jump" in the quaternion calculation,
+             * then, the mode is switched.
+             */
+            isSkyMode = Quaternion.distance([qw, qx, qy, qz], this.iosPreviousQuat) < 0.5
+                ? this.iosIsSkyMode
+                : !this.iosIsSkyMode;
         }
-        this.magQuaternion = Rotations.eulerToQuaternionZXYDegrees(
-            [webkitCompassHeading, e.beta, e.gamma]);
+        this.iosPreviousQuat = [qw, qx, qy, qz];
+        this.iosIsSkyMode = isSkyMode;
+
+        if (typeof (isSkyMode) === 'undefined') {
+            // Algorithm uncertainity
+            return;
+        }
+
+        if (isSkyMode) {
+            alpha = 180 - e.webkitCompassHeading;
+        } else {
+            alpha = AbsoluteAttitudeFromBrowserProvider.webkitCompassToHeading(
+                e.webkitCompassHeading, e.beta, e.gamma);
+        }
+
+        this.magQuaternion = Rotations.eulerToQuaternionZXYDegrees([alpha, e.beta, e.gamma]);
 
         this.compute();
     };
@@ -224,18 +258,22 @@ class AbsoluteAttitudeFromBrowserProvider extends Provider {
         this.compute();
     }
 
-    /**
-     * {@link https://math.stackexchange.com/questions/3181981/solve-a-system-of-rotation-matrices-z-x-z-z-x-y}
-     */
-    static headingEusToEnu(_alpha, _beta, _gamma) {
-        const alpha = deg2rad(_alpha);
+    static webkitCompassToHeading(_webkitCompassHeading, _beta, _gamma) {
+        const webkitCompassHeading = deg2rad(_webkitCompassHeading);
         const beta = deg2rad(_beta);
         const gamma = deg2rad(_gamma);
 
-        return rad2deg(Math.atan2(
-            Math.cos(alpha) * Math.sin(gamma) + Math.cos(gamma) * Math.sin(alpha) * Math.sin(beta),
-            Math.sin(alpha) * Math.sin(gamma) - Math.cos(alpha) * Math.cos(gamma) * Math.sin(beta)
-        ));
+        const c1 = Math.cos(webkitCompassHeading / 2);
+        const c2 = Math.cos(beta / 2);
+        const c3 = Math.cos(gamma / 2);
+        const s1 = Math.sin(webkitCompassHeading / 2);
+        const s2 = Math.sin(beta / 2);
+        const s3 = Math.sin(gamma / 2);
+
+        const qw = c1 * c2 * c3 - s1 * s2 * s3;
+        const qz = s1 * c2 * c3 + c1 * s2 * s3;
+
+        return rad2deg(-2 * Math.atan(qz / qw));
     }
 }
 

package/src/smoothers/PositionSmoother.js

@@ -74,7 +74,7 @@ class PositionSmoother {
                 clearTimeout(this.timeoutNotify);
             }
         } else {
-            this.positionsQueue.push(newPosition);
+            this.positionsQueue.push(newPosition.clone());
         }
 
         this.previousPosition = newPosition;