@wemap/providers 3.0.0

package/debug/components/RelativeAttitudeComponent.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import Utils from './Utils';
+import ProvidersLogger from '../../src/events/ProvidersLogger';
+import {
+    RelativeAttitudeFromBrowser, RelativeAttitudeFromEkf, RelativeAttitude
+} from '../../src/Providers';
+
+ProvidersLogger.enabled = true;
+
+class RelativeAttitudeComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            attitude: null,
+            attitudeFromBrowser: null,
+            attitudeFromEkf: null,
+            deviceorientation: null
+        };
+    }
+
+    componentDidMount() {
+
+        this.providerFromBrowserId = RelativeAttitudeFromBrowser.addEventListener(
+            events => this.setState({ attitudeFromBrowser: events[0] }),
+            error => this.setState({ attitudeFromBrowser: error }),
+            this);
+
+        this.providerFromEkfId = RelativeAttitudeFromEkf.addEventListener(
+            events => this.setState({ attitudeFromEkf: events[0] }),
+            error => this.setState({ attitudeFromEkf: error }),
+            this);
+
+        this.providerId = RelativeAttitude.addEventListener(
+            events => this.setState({ attitude: events[0] }),
+            error => this.setState({ attitude: error }),
+            this);
+
+        window.addEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
+    }
+
+    componentWillUnmount() {
+        RelativeAttitudeFromBrowser.removeEventListener(this.providerFromBrowserId);
+        RelativeAttitudeFromEkf.removeEventListener(this.providerFromEkfId);
+        RelativeAttitude.removeEventListener(this.providerId);
+        window.removeEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
+    }
+
+    onDeviceOrientationEventListener = (e) => this.setState({ deviceorientation: e });
+
+    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>;
+            }
+        }
+
+        return (
+            <div>
+                <h3>Raw:</h3>
+                {rawRender}
+                <h3>Relative Attitude From Browser</h3>
+                {Utils.renderAttitudeEvent(this.state.attitudeFromBrowser)}
+                <h3>Relative Attitude From Ekf</h3>
+                {Utils.renderAttitudeEvent(this.state.attitudeFromEkf)}
+                <h3>Relative Attitude</h3>
+                {Utils.renderAttitudeEvent(this.state.attitude)}
+            </div>
+        );
+    }
+}
+
+export default RelativeAttitudeComponent;
+

package/debug/components/StartStopComponent.jsx

@@ -0,0 +1,45 @@
+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();
+    }
+
+    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/debug/components/StepDetectionComponent.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import Utils from './Utils';
+import ProvidersLogger from '../../src/events/ProvidersLogger';
+import { StepDetection } from '../../src/Providers';
+
+ProvidersLogger.enabled = true;
+
+class StepDetectionComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = { stepDetected: null };
+    }
+
+    componentDidMount() {
+        this.providerId = StepDetection.addEventListener(
+            events => this.setState({ stepDetected: events[0] }),
+            error => this.setState({ stepDetected: error }),
+            this.name);
+    }
+
+    componentWillUnmount() {
+        StepDetection.removeEventListener(this.providerId);
+    }
+
+    render() {
+        return (
+            <div>
+                <h3>Step detected</h3>
+                {Utils.renderStepEvent(this.state.stepDetected)}
+            </div>
+        );
+
+    }
+}
+
+export default StepDetectionComponent;

package/debug/components/Utils.js

@@ -0,0 +1,216 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+
+import { rad2deg } from '@wemap/maths';
+import { OsrmUtils } from '@wemap/osm';
+
+import ProviderEvent from '../../src/events/ProviderEvent';
+import isNumber from 'lodash.isnumber';
+
+const NOT_AVAILABLE_STR = 'Not available';
+
+class Utils {
+
+    static renderAttitudeEvent(event) {
+
+        if (!event) {
+            return <p>Waiting</p>;
+        }
+
+        if (event instanceof Error) {
+            return Utils.renderError(event);
+        }
+
+
+        const attitude = event instanceof ProviderEvent ? event.data : event;
+        const quaternion = attitude.quaternion;
+
+        const w = quaternion[0].toFixed(3);
+        const x = quaternion[1].toFixed(3);
+        const y = quaternion[2].toFixed(3);
+        const z = quaternion[3].toFixed(3);
+
+        const euler = attitude.eulerAnglesDegrees;
+        const yaw = euler[0].toFixed(2);
+        const pitch = euler[1].toFixed(2);
+        const roll = euler[2].toFixed(2);
+        const heading = attitude.headingDegrees.toFixed(2);
+
+        const accuracyString = isNumber(attitude.accuracy) ? rad2deg(attitude.accuracy).toFixed(1) : '';
+
+        return (
+            <div>
+                <p>
+                    Quaternion: [{w}, {x}, {y}, {z}]<br />
+                    Eulers: [{yaw}, {pitch}, {roll}]<br />
+                    Heading: {heading}<br />
+                    Time: {attitude.time.toFixed(2)}<br />
+                    Accuracy: {accuracyString}
+                </p>
+                {(event instanceof ProviderEvent) ? Utils.renderTimeAndFromStack(event) : ''}
+            </div>
+        );
+    }
+
+    static renderVector3Event(event) {
+
+        if (!event) {
+            return <p>Waiting</p>;
+        }
+
+        if (event instanceof Error) {
+            return Utils.renderError(event);
+        }
+
+        const { data } = event;
+
+        return (
+            <div>
+                <p style={{ margin: 0 }}>
+                    [{data[0].toFixed(2)}, {data[1].toFixed(2)}, {data[2].toFixed(2)}]
+                </p>
+                {Utils.renderTimeAndFromStack(event)}
+            </div>
+        );
+    }
+
+    static renderPositionEvent(event) {
+
+        if (!event) {
+            return <p>Waiting</p>;
+        }
+        if (event instanceof Error) {
+            return Utils.renderError(event);
+        }
+        const position = event instanceof ProviderEvent ? event.data : event;
+        return (
+            <div>
+                <p>
+                    Latitude: {position.lat.toFixed(7)}<br />
+                    Longitude: {position.lng.toFixed(7)}<br />
+                    Altitude: {position.alt ? position.alt.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                    Level: {position.level ? position.level.toString() : NOT_AVAILABLE_STR}<br />
+                    Bearing: {isNumber(position.bearing) ? rad2deg(position.bearing).toFixed(2) : NOT_AVAILABLE_STR}<br />
+                    Accuracy: {isNumber(position.accuracy) ? position.accuracy.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                    Time: {isNumber(position.time) ? position.time.toFixed(2) : NOT_AVAILABLE_STR}
+                </p>
+                {(event instanceof ProviderEvent) ? Utils.renderTimeAndFromStack(event) : ''}
+            </div>
+        );
+
+    }
+
+    static renderRelativePosition(position) {
+
+        if (!position) {
+            return <p>Waiting</p>;
+        }
+        if (position instanceof Error) {
+            return Utils.renderError(position);
+        }
+        return (
+            <p>
+                x: {position[0].toFixed(2)}<br />
+                y: {position[1].toFixed(2)}<br />
+                z: {position[2].toFixed(2)}
+            </p>
+        );
+
+    }
+
+    static renderItineraryInfo(info) {
+
+        if (!info) {
+            return <p>Waiting</p>;
+        }
+
+        const step = info.nextStep;
+        let nextStepStr = '[' + step.number + '] ';
+        if (step.firstStep) {
+            nextStepStr += 'Depart';
+        } else if (step.lastStep) {
+            nextStepStr += 'Arrive';
+        } else {
+            nextStepStr += 'Turn '
+                + OsrmUtils.getModifierFromAngle(step.angle);
+        }
+
+
+        return (
+            <p>
+                projection: {info.projection.nearestElement.constructor.name}<br />
+                distanceOfProjection: {info.projection.distanceFromNearestElement.toFixed(1)}m<br />
+                traveledDistance: {info.traveledDistance.toFixed(1)}m
+                    ({(info.traveledPercentage * 100).toFixed(1)}%)<br />
+                remainingDistance: {info.remainingDistance.toFixed(1)}m
+                    ({(info.remainingPercentage * 100).toFixed(1)}%)<br />
+                nextStep: {nextStepStr}
+            </p>
+        );
+
+    }
+
+    static renderInclinationEvent(event) {
+        if (event === null) {
+            return 'Waiting';
+        }
+        if (event instanceof Error) {
+            return Utils.renderError(event);
+        }
+        return (
+            <div>
+                <p style={{ margin: 0 }}>
+                    Inclination: {rad2deg(event.data).toFixed(2)} deg
+                </p>
+                {Utils.renderTimeAndFromStack(event)}
+            </div>
+        );
+    }
+
+    /**
+     * @param {ProviderEvent} stepEvent
+     */
+    static renderStepEvent(event) {
+        if (event === null) {
+            return 'Waiting';
+        }
+        if (event instanceof Error) {
+            return Utils.renderError(event);
+        }
+        return (
+            <div>
+                <p style={{ margin: 0 }}>
+                    Number: {event.data.number}<br />
+                    Size: {event.data.size.toFixed(2)}m
+                </p>
+                {Utils.renderTimeAndFromStack(event)}
+            </div>
+        );
+    }
+
+    static renderError(error) {
+        return (<span><strong>[{error.constructor.name}]</strong> {error.message}</span>);
+    }
+
+    static renderFromStack(providersStack) {
+        return <span style={{}}>Provider: {providersStack.join(', ')}</span>;
+    }
+
+    static renderTime(timestamp) {
+        return `Time: ${timestamp.toFixed(2)} s`;
+    }
+
+    static renderTimeAndFromStack(event) {
+        return (
+            <p style={{
+                margin: 0,
+                fontSize: 'small'
+            }}>
+                {this.renderTime(event.timestamp)}<br />
+                {this.renderFromStack(event.providersStack)}
+            </p>
+        );
+    }
+
+}
+
+export default Utils;

package/debug/components/index.js

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

package/debug/components/old/PositioningComponent.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PositioningPoseComponent from './PositioningPoseComponent';
+import PositioningHandler from '../../src/PositioningHandler';
+import PositioningInclinationComponent from './PositioningInclinationComponent';
+import ProvidersLogger from '../../src/providers/ProvidersLogger';
+
+ProvidersLogger.enabled = true;
+
+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/debug/components/old/PositioningInclinationComponent.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+
+import EventType from '../../src/events/EventType';
+import Utils from './Utils';
+import PositioningHandler from '../../src/PositioningHandler';
+import StartStopComponent from './StartStopComponent';
+import ProvidersLogger from '../../src/providers/ProvidersLogger';
+
+ProvidersLogger.enabled = true;
+
+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() {
+        const output = this.props.positioningHandler.start(
+            [EventType.Inclination],
+            this.onEvents,
+            this.onError
+        );
+
+        if (!output) {
+            return;
+        }
+
+        this.id = output.id;
+    }
+
+
+    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);
+        }
+    };
+
+    onError = error => {
+        this.setState({
+            errored: true,
+            inclination: error
+        });
+    }
+
+    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/debug/components/old/PositioningPoseComponent.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+
+import EventType from '../../src/events/EventType';
+import NavigationConfig from './NavigationConfig';
+import Utils from './Utils';
+import PositioningHandler from '../../src/PositioningHandler';
+import StartStopComponent from './StartStopComponent';
+import MapComponent from './MapComponent';
+import ProvidersLogger from '../../src/providers/ProvidersLogger';
+
+ProvidersLogger.enabled = true;
+
+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() {
+        const output = this.props.positioningHandler.start(
+            [EventType.AbsolutePosition, EventType.AbsoluteAttitude],
+            this.onEvents,
+            this.onError,
+            {
+                waitInputPosition: true,
+                useMapMatching: true
+            }
+        );
+
+        if (!output) {
+            return;
+        }
+
+        this.id = output.id;
+
+        this.props.positioningHandler.setItinerary(this.id, NavigationConfig.ITINERARY);
+        this.props.positioningHandler.setNetwork(this.id, NavigationConfig.ITINERARY);
+        this.props.positioningHandler.setPosition(this.id, NavigationConfig.INITIAL_POSITION);
+        this.props.positioningHandler.setHeading(this.id, NavigationConfig.INITIAL_HEADING);
+    }
+
+    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);
+        }
+
+        if (this.map) {
+            this.map.parseEvents(events);
+        }
+    };
+
+    onError = error => {
+        this.setState({
+            position: error,
+            attitude: error,
+            errored: true
+        });
+    };
+
+    render() {
+        const attitudeRender = Utils.renderAttitude(this.state.attitude);
+        const positionRender = Utils.renderPosition(this.state.position);
+
+        const itineraryRender = Utils.renderItineraryInfo(
+            this.state.position && !(this.state.position instanceof Error)
+                ? NavigationConfig.ITINERARY.getInfo(this.state.position)
+                : null
+        );
+
+        return (
+            <div>
+                <StartStopComponent
+                    onStart={() => this.start()}
+                    onStop={() => this.stop()}
+                    errored={this.state.errored}
+                />
+
+                <h3>Position</h3>
+                {positionRender}
+                <h3>Attitude</h3>
+                {attitudeRender}
+                <h3>Map</h3>
+                <MapComponent ref={map => (this.map = map)}
+                    network={NavigationConfig.ITINERARY} />
+                <h3>ItineraryInfo</h3>
+                {itineraryRender}
+            </div>
+        );
+    }
+}
+
+export default PositioningPoseComponent;

package/debug/gnss-wifi.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <title>Debug Positioning</title>
+  <script src="/js/providers-components.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script>createReactElement(GnssWifiComponent, document.getElementById('app'));</script>
+</body>
+
+</html>

package/debug/imu.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <title>Debug Imu</title>
+  <script src="/js/providers-components.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script>createReactElement(ImuComponent, document.getElementById('app'));</script>
+</body>
+
+</html>

package/debug/inclination.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <title>Debug Inclination</title>
+  <script src="/js/providers-components.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script>createReactElement(InclinationComponent, document.getElementById('app'));</script>
+</body>
+
+</html>