@wemap/positioning 1.2.2 → 2.1.0

package/src/components/InclinationComponent.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import InclinationProvider from '../providers/others/InclinationProvider';
+import EventType from '../events/EventType';
+import Utils from './Utils';
+
+class InclinationComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = { inclination: null };
+
+        this.inclinationProvider = new InclinationProvider(this.onEvent, this.onError);
+    }
+
+    componentDidMount() {
+        this.inclinationProvider.start();
+    }
+
+    componentWillUnmount() {
+        this.inclinationProvider.stop();
+    }
+
+    onEvent = events => {
+        events.forEach(event => {
+            if (event.dataType === EventType.Inclination) {
+                this.setState({ inclination: event.data });
+            }
+        });
+    };
+
+    onError = events => {
+        events.forEach(event => {
+            if (event.dataType === EventType.Inclination) {
+                this.setState({ inclination: event.error });
+            }
+        });
+    }
+
+    render() {
+
+        return (
+            <div>
+                <h3>Inclination</h3>
+                <p>{Utils.renderInclination(this.state.inclination)}</p>
+            </div>
+        );
+
+    }
+}
+
+export default InclinationComponent;

package/src/components/PdrComponent.jsx

@@ -0,0 +1,88 @@
+import isEmpty from 'lodash.isempty';
+import React from 'react';
+
+import {
+    Itinerary, WGS84UserPosition
+} from '@wemap/geo';
+
+import Utils from './Utils';
+import PdrProvider from '../providers/pose/pdr/PdrProvider';
+import EventType from '../events/EventType';
+
+const INITIAL_LOCATION = new WGS84UserPosition(43.6091955, 3.8841255);
+const INITIAL_HEADING = 191.9;
+const ITINERARY = Itinerary.fromPoints([
+    [INITIAL_LOCATION.lat, INITIAL_LOCATION.lng],
+    [43.6091883, 3.8841242],
+    [43.6091709, 3.8842382],
+    [43.6091288, 3.884226],
+    [43.6091461, 3.884112]
+], false);
+
+class PdrComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = { position: null };
+
+        this.pdrProvider = new PdrProvider(this.onEvent, this.onError);
+    }
+
+
+    componentDidMount() {
+        this.pdrProvider.setLocation(INITIAL_LOCATION);
+        this.pdrProvider.setHeading(INITIAL_HEADING);
+        this.pdrProvider.enableMapMatching(ITINERARY);
+        this.pdrProvider.start();
+    }
+
+    componentWillUnmount() {
+        this.pdrProvider.stop();
+    }
+
+    onEvent = events => {
+        const newState = {};
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                newState.position = event.data;
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                newState.attitude = event.data;
+            }
+        });
+        if (!isEmpty(newState)) {
+            this.setState(newState);
+        }
+    };
+
+    onError = events => {
+        const newState = {};
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                newState.position = event.error;
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                newState.attitude = event.error;
+            }
+        });
+        if (!isEmpty(newState)) {
+            this.setState(newState);
+        }
+    }
+
+    render() {
+
+        const attitudeRender = Utils.renderAttitude(this.state.attitude);
+        const positionRender = Utils.renderPosition(this.state.position);
+
+        return (
+            <div>
+                <h3>Position</h3>
+                {positionRender}
+                <h3>Attitude</h3>
+                {attitudeRender}
+            </div>
+
+        );
+    }
+}
+
+export default PdrComponent;

package/src/components/PoseComponent.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import isEmpty from 'lodash.isempty';
+
+import EventType from '../events/EventType';
+import Utils from './Utils';
+import PoseProvider from '../providers/pose/PoseProvider';
+
+class PoseComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            position: null,
+            attitude: null
+        };
+
+        this.poseProvider = new PoseProvider(this.onEvent, this.onError);
+    }
+
+
+    componentDidMount() {
+        this.poseProvider.start();
+    }
+
+    componentWillUnmount() {
+        this.poseProvider.stop();
+    }
+
+    onEvent = events => {
+        const newState = {};
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                newState.position = event.data;
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                newState.attitude = event.data;
+            }
+        });
+        if (!isEmpty(newState)) {
+            this.setState(newState);
+        }
+    };
+
+    onError = events => {
+        const newState = {};
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                newState.position = event.error;
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                newState.attitude = event.error;
+            }
+        });
+        if (!isEmpty(newState)) {
+            this.setState(newState);
+        }
+    }
+
+    render() {
+
+        const attitudeRender = Utils.renderAttitude(this.state.attitude);
+        const positionRender = Utils.renderPosition(this.state.position);
+
+        return (
+            <div>
+                <h3>Position</h3>
+                {positionRender}
+                <h3>Attitude</h3>
+                {attitudeRender}
+            </div>
+
+        );
+    }
+}
+
+export default PoseComponent;

package/src/components/PositioningComponent.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PositioningPoseComponent from './PositioningPoseComponent';
+import PositioningHandler from '../PositioningHandler';
+import PositioningInclinationComponent from './PositioningInclinationComponent';
+
+class PositioningComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+        this.positioningHandler = new PositioningHandler();
+    }
+
+    render() {
+
+        return (
+            <div>
+                <h2>Pose</h2>
+                <div><PositioningPoseComponent positioningHandler={this.positioningHandler} /></div>
+                <h2>Inclination</h2>
+                <div><PositioningInclinationComponent positioningHandler={this.positioningHandler} /></div>
+            </div>
+        );
+    }
+}
+
+export default PositioningComponent;

package/src/components/PositioningInclinationComponent.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+
+import EventType from '../events/EventType';
+import Utils from './Utils';
+import PositioningHandler from '../PositioningHandler';
+import StartStopComponent from './StartStopComponent';
+
+class PositioningInclinationComponent extends React.Component {
+
+    static propTypes = { positioningHandler: PropTypes.instanceOf(PositioningHandler).isRequired };
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            inclination: null,
+            errored: false
+        };
+    }
+
+
+    start() {
+        this.id = this.props.positioningHandler.start(
+            [EventType.Inclination],
+            this.onEvents,
+            this.onErrors
+        );
+    }
+
+
+    stop() {
+        this.props.positioningHandler.stop(this.id);
+        this.setState({
+            inclination: null,
+            errored: false
+        });
+    }
+
+    onEvents = (events) => {
+        const newState = {};
+        events.forEach(event => {
+            if (event.dataType === EventType.Inclination) {
+                newState.inclination = event.data;
+            }
+        });
+        if (!isEmpty(newState)) {
+            this.setState(newState);
+        }
+    };
+
+    onErrors = events => {
+        const newState = { errored: true };
+        events.forEach(event => {
+            if (event.dataType === EventType.Inclination) {
+                newState.inclination = event.error;
+            }
+        });
+        this.setState(newState);
+    }
+
+    render() {
+        return (
+            <div>
+                <StartStopComponent
+                    onStart={() => this.start()}
+                    onStop={() => this.stop()}
+                    errored={this.state.errored} />
+
+                <p>{Utils.renderInclination(this.state.inclination)}</p>
+            </div>
+        );
+    }
+}
+
+export default PositioningInclinationComponent;

package/src/components/PositioningPoseComponent.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+
+import EventType from '../events/EventType';
+import Utils from './Utils';
+import PositioningHandler from '../PositioningHandler';
+import StartStopComponent from './StartStopComponent';
+import {
+    WGS84UserPosition, Itinerary
+} from '@wemap/geo';
+
+const INITIAL_LOCATION = new WGS84UserPosition(43.6091955, 3.8841255);
+const INITIAL_HEADING = 191.9;
+const ITINERARY = Itinerary.fromPoints([
+    [INITIAL_LOCATION.lat, INITIAL_LOCATION.lng],
+    [43.6091883, 3.8841242],
+    [43.6091709, 3.8842382],
+    [43.6091288, 3.884226],
+    [43.6091461, 3.884112]
+], false);
+
+class PositioningPoseComponent extends React.Component {
+
+    static propTypes = { positioningHandler: PropTypes.instanceOf(PositioningHandler).isRequired };
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            position: null,
+            attitude: null,
+            errored: false
+        };
+    }
+
+
+    start() {
+        this.id = this.props.positioningHandler.start(
+            [EventType.AbsolutePosition, EventType.AbsoluteAttitude],
+            this.onEvents,
+            this.onErrors,
+            {
+                waitInputPosition: true,
+                useMapMatching: true
+            }
+        );
+
+        setTimeout(() => {
+            this.props.positioningHandler.setPosition(this.id, INITIAL_LOCATION);
+            this.props.positioningHandler.setHeading(this.id, INITIAL_HEADING);
+            this.props.positioningHandler.setItinerary(this.id, ITINERARY);
+        }, 3000);
+    }
+
+
+    stop() {
+        this.props.positioningHandler.stop(this.id);
+        this.setState({
+            position: null,
+            attitude: null,
+            errored: false
+        });
+    }
+
+    onEvents = (events) => {
+        const newState = {};
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                newState.position = event.data;
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                newState.attitude = event.data;
+            }
+        });
+        if (!isEmpty(newState)) {
+            this.setState(newState);
+        }
+    };
+
+    onErrors = events => {
+        const newState = { errored: true };
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                newState.position = event.error;
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                newState.attitude = event.error;
+            }
+        });
+        this.setState(newState);
+    }
+
+    render() {
+        const attitudeRender = Utils.renderAttitude(this.state.attitude);
+        const positionRender = Utils.renderPosition(this.state.position);
+
+        return (
+            <div>
+                <StartStopComponent
+                    onStart={() => this.start()}
+                    onStop={() => this.stop()}
+                    errored={this.state.errored} />
+
+                <h3>Position</h3>
+                {positionRender}
+                <h3>Attitude</h3>
+                {attitudeRender}
+            </div>
+        );
+    }
+}
+
+export default PositioningPoseComponent;

package/src/components/RelativeAttitudeComponent.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import RelativeAttitudeProvider from '../providers/attitude/RelativeAttitudeProvider';
+import Utils from './Utils';
+import EventType from '../events/EventType';
+
+class RelativeAttitudeComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            attitude: null,
+            deviceorientation: null
+        };
+
+        this.relativeAttitudeProvider = new RelativeAttitudeProvider(this.onEvent, this.onError);
+    }
+
+    componentDidMount() {
+        this.relativeAttitudeProvider.start();
+        window.addEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
+    }
+
+    componentWillUnmount() {
+        this.relativeAttitudeProvider.stop();
+        window.removeEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
+    }
+
+    onEvent = events => {
+        events.forEach(event => {
+            if (event.dataType === EventType.RelativeAttitude) {
+                this.setState({ attitude: event.data });
+            }
+        });
+    };
+
+    onError = events => {
+        events.forEach(event => {
+            if (event.dataType === EventType.RelativeAttitude) {
+                this.setState({ attitude: event.error });
+            }
+        });
+    }
+
+    onDeviceOrientationEventListener = (e) => this.setState({ deviceorientation: e });
+
+    setOffset(offset) {
+        this.relativeAttitudeProvider.setOffset(offset);
+    }
+
+    render() {
+
+        let rawRender = <span>Not available</span>;
+
+        if (this.state.deviceorientation) {
+            const alpha = this.state.deviceorientation.alpha;
+            const beta = this.state.deviceorientation.beta;
+            const gamma = this.state.deviceorientation.gamma;
+
+            if (alpha && beta && gamma) {
+                rawRender = <p>alpha: {alpha.toFixed(2)}, <br />
+                    beta: {beta.toFixed(2)}, <br />
+                    gamma: {gamma.toFixed(2)}</p>;
+            }
+        }
+
+        const browserRender = Utils.renderAttitude(this.state.attitude);
+
+        return (
+            <div>
+                <h3>Raw:</h3>
+                {rawRender}
+                <h3>From browser:</h3>
+                {browserRender}
+            </div>
+        );
+    }
+}
+
+export default RelativeAttitudeComponent;
+

package/src/components/StartStopComponent.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class StartStopComponent extends React.Component {
+
+    static propTypes = {
+        onStart: PropTypes.func.isRequired,
+        onStop: PropTypes.func.isRequired,
+        errored: PropTypes.bool.isRequired
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = { started: false };
+    }
+
+    start() {
+        this.setState({started: true});
+        this.props.onStart();
+    }
+
+    componentWillUnmount() {
+        stop();
+    }
+
+    stop() {
+        this.setState({started: false});
+        this.props.onStop();
+    }
+
+
+    render() {
+        return (
+            <div>
+                <button onClick={() => this.start()}
+                    disabled={(this.state.started && !this.props.errored)}>
+                    Start
+                </button>
+                <button onClick={() => this.stop()}
+                    disabled={!(this.state.started && !this.props.errored)}>
+                    Stop
+                </button>
+            </div>
+
+        );
+    }
+
+}
+
+export default StartStopComponent;

package/src/components/Utils.js

@@ -1,4 +1,7 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
+import { rad2deg } from '@wemap/maths';
+
+const NOT_AVAILABLE_STR = 'Not available';
 
 class Utils {
 
@@ -8,8 +11,8 @@ class Utils {
             return <p>Waiting</p>;
         }
 
-        if (attitude === -1) {
-            return <p>Not available</p>;
+        if (attitude instanceof Error) {
+            return Utils.renderError(attitude);
         }
 
         const quaternion = attitude.quaternion;
@@ -30,6 +33,42 @@ class Utils {
             Heading: {heading}</p>;
     }
 
+    static renderPosition(position) {
+
+        if (!position) {
+            return <p>Waiting</p>;
+        }
+        if (position instanceof Error) {
+            return Utils.renderError(position);
+        }
+        return (
+            <p>
+                Latitude: {position.lat.toFixed(7)}<br />
+                Longitude: {position.lng.toFixed(7)}<br />
+                Altitude: {position.alt ? position.alt.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                Bearing: {position.bearing ? position.bearing.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                Accuracy: {position.accuracy ? position.accuracy.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                Time: {position.time ? position.time.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                Provider: {position.provider ? position.provider : NOT_AVAILABLE_STR}
+            </p>
+        );
+
+    }
+
+    static renderInclination(inclination) {
+        if (inclination === null) {
+            return 'Waiting';
+        }
+        if (inclination instanceof Error) {
+            return Utils.renderError(inclination);
+        }
+        return rad2deg(inclination).toFixed(2);
+    }
+
+    static renderError(error) {
+        return (<span><strong>[{error.constructor.name}]</strong> {error.message}</span>);
+    }
+
 }
 
 export default Utils;

package/src/components/index.js

@@ -1,13 +1,30 @@
-import NavigationDebugApp from './NavigationDebugApp';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import AbsoluteAttitudeComponent from './AbsoluteAttitudeComponent';
+import GnssWifiComponent from './GnssWifiComponent';
+import GnssWifiPdrComponent from './GnssWifiPdrComponent';
+import ImuComponent from './ImuComponent';
+import InclinationComponent from './InclinationComponent';
+import PdrComponent from './PdrComponent';
+import PoseComponent from './PoseComponent';
+import PositioningComponent from './PositioningComponent';
+import RelativeAttitudeComponent from './RelativeAttitudeComponent';
+
 const createReactElement = (component, container) => ReactDOM.render(
     React.createElement(component, {}, null),
     container
 );
 
 export {
-    NavigationDebugApp,
+    AbsoluteAttitudeComponent,
+    ImuComponent,
+    InclinationComponent,
+    GnssWifiComponent,
+    GnssWifiPdrComponent,
+    PdrComponent,
+    PoseComponent,
+    PositioningComponent,
+    RelativeAttitudeComponent,
     createReactElement
 };

package/src/errors/AskImuOnDesktopError.js

@@ -0,0 +1,9 @@
+const DEFAULT_MESSAGE = 'It seems that you ask for IMU events on a desktop browser';
+
+class AskImuOnDesktopError extends Error {
+    constructor(message) {
+        super(message || DEFAULT_MESSAGE);
+    }
+}
+
+export default AskImuOnDesktopError;

package/src/errors/GeolocationApiMissingError.js

@@ -0,0 +1,9 @@
+const DEFAULT_MESSAGE = 'Geolocation api is missing';
+
+class GeolocationApiMissingError extends Error {
+    constructor(message) {
+        super(message || DEFAULT_MESSAGE);
+    }
+}
+
+export default GeolocationApiMissingError;

package/src/errors/GeolocationPermissionDeniedError.js

@@ -0,0 +1,9 @@
+const DEFAULT_MESSAGE = 'Geolocation permission denied';
+
+class GeolocationPermissionDeniedError extends Error {
+    constructor(message) {
+        super(message || DEFAULT_MESSAGE);
+    }
+}
+
+export default GeolocationPermissionDeniedError;

package/src/errors/GeolocationPositionUnavailableError.js

@@ -0,0 +1,9 @@
+const DEFAULT_MESSAGE = 'Geolocation position unavailable';
+
+class GeolocationPositionUnavailableError extends Error {
+    constructor(message) {
+        super(message || DEFAULT_MESSAGE);
+    }
+}
+
+export default GeolocationPositionUnavailableError;