@wemap/positioning 2.0.0 → 2.1.0

package/src/components/ImuComponent.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import EventType from '../events/EventType';
+import ImuProvider from '../providers/others/ImuProvider';
+import Utils from './Utils';
+
+class ImuComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            acc: null,
+            gyr: null
+        };
+
+        this.imuProvider = new ImuProvider(this.onEvent, this.onError, {require: [
+            EventType.Acceleration, EventType.AngularRate
+        ]});
+    }
+
+    componentDidMount() {
+        this.imuProvider.start();
+    }
+
+    componentWillUnmount() {
+        this.imuProvider.stop();
+    }
+
+    onEvent = events => {
+        const newState = {};
+
+        events.forEach(event => {
+            if (event.dataType === EventType.Acceleration) {
+                newState.acc = event.data;
+            }
+            if (event.dataType === EventType.AngularRate) {
+                newState.gyr = event.data;
+            }
+        });
+
+        this.setState(newState);
+    };
+
+    onError = events => {
+        const newState = {};
+
+        events.forEach(event => {
+            if (event.dataType === EventType.Acceleration) {
+                newState.acc = event.error;
+            }
+            if (event.dataType === EventType.AngularRate) {
+                newState.gyr = event.error;
+            }
+        });
+
+        this.setState(newState);
+    }
+
+    render() {
+
+        let accelerometerString;
+        const acc = this.state.acc;
+        if (!acc) {
+            accelerometerString = 'Waiting';
+        } else if (acc instanceof Error) {
+            accelerometerString = Utils.renderError(acc);
+        } else {
+            accelerometerString = '[' + acc[0].toFixed(2)
+                + ', ' + acc[1].toFixed(2)
+                + ', ' + acc[2].toFixed(2)
+                + ']';
+        }
+
+        let gyroscopeString;
+        const gyr = this.state.gyr;
+        if (!gyr) {
+            gyroscopeString = 'Waiting';
+        } else if (gyr instanceof Error) {
+            gyroscopeString = Utils.renderError(gyr);
+        } else {
+            gyroscopeString = '[' + gyr[0].toFixed(2)
+                + ', ' + gyr[1].toFixed(2)
+                + ', ' + gyr[2].toFixed(2)
+                + ']';
+        }
+
+        return (
+            <div>
+                <h3>Acceleration</h3>
+                <p>{accelerometerString}</p>
+                <h3>Angular Velocity</h3>
+                <p>{gyroscopeString}</p>
+            </div>
+        );
+
+    }
+}
+
+export default ImuComponent;

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;