@wemap/positioning 2.0.0 → 2.2.0

package/src/components/GnssWifiPdrComponent.jsx

@@ -0,0 +1,94 @@
+import isEmpty from 'lodash.isempty';
+import React from 'react';
+
+import {
+    Itinerary, WGS84UserPosition
+} from '@wemap/geo';
+
+import Utils from './Utils';
+import EventType from '../events/EventType';
+import GnssWifiPdrProvider from '../providers/pose/GnssWifiPdrProvider';
+import MapComponent from './MapComponent';
+
+const INITIAL_LOCATION = new WGS84UserPosition(43.6091955, 3.8841255);
+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 GnssWifiPdrComponent extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = { position: null };
+
+        this.gnssWifiPdrProvider = new GnssWifiPdrProvider(this.onEvent, this.onError);
+    }
+
+
+    componentDidMount() {
+        this.gnssWifiPdrProvider.enableMapMatching(ITINERARY);
+        this.gnssWifiPdrProvider.start();
+    }
+
+    componentWillUnmount() {
+        this.gnssWifiPdrProvider.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);
+        }
+
+        if (this.map) {
+            this.map.parseEvents(events);
+        }
+    };
+
+    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}
+                <h3>Map</h3>
+                <MapComponent
+                    ref={map => (this.map = map)}
+                    network={ITINERARY} />
+            </div>
+
+        );
+    }
+}
+
+export default GnssWifiPdrComponent;

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/MapComponent.jsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import PropTypes from 'prop-types';
+
+import {
+    WGS84, Attitude, Network
+} from '@wemap/geo';
+import EventType from '../events/EventType';
+
+mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+
+
+const COMPASS_STYLE = {
+    'width': '15px',
+    'height': '15px',
+    'border-radius': '50%',
+    'z-index': '10000001',
+    'position': 'absolute',
+    'top': '-14px',
+    'left': '-14px',
+    'border': '7px solid',
+    'border-color': 'transparent',
+    'border-top-color': '#008DF1',
+    'opacity': 0.5
+};
+
+const LOCATION_STYLE = {
+    'width': '15px',
+    'height': '15px',
+    'top': '-7px',
+    'left': '-7px',
+    'position': 'absolute',
+    'border-radius': '50%',
+    'background': '#008DF1'
+};
+
+
+class MapComponent extends React.Component {
+
+    static propTypes = { network: PropTypes.instanceOf(Network) };
+
+
+    componentDidMount() {
+        this.map = new mapboxgl.Map({
+            container: this.mapContainer,
+            style: 'mapbox://styles/mapbox/streets-v9'
+        });
+    }
+
+    componentWillUnmount() {
+        this.map.remove();
+    }
+
+    createMarker(options) {
+        var elem, marker;
+
+        elem = document.createElement('div');
+        elem.style.marginLeft = '-' + options.iconAnchor[0] + 'px';
+        elem.style.marginTop = '-' + options.iconAnchor[1] + 'px';
+        elem.style.width = 0;
+        elem.style.height = 0;
+        elem.appendChild(options.dom);
+
+        marker = new mapboxgl.Marker(elem);
+        marker.setLngLat([options.longitude, options.latitude]);
+        return marker;
+    }
+
+    createLocationMarker(location) {
+        const coreIcon = document.createElement('div');
+        this.applyStyleToDomElement(coreIcon, LOCATION_STYLE);
+
+        this.locationIcon = document.createElement('div');
+        this.locationIcon.appendChild(coreIcon);
+
+        return this.createMarker({
+            dom: this.locationIcon,
+            iconAnchor: [0, 0],
+            latitude: location[1],
+            longitude: location[0]
+        });
+    }
+
+    createCompassElement() {
+        if (!this.locationIcon) {
+            throw new Error('createLocationMarker() should be called before');
+        }
+        this.compassIcon = document.createElement('div');
+        this.applyStyleToDomElement(this.compassIcon, COMPASS_STYLE);
+        this.locationIcon.appendChild(this.compassIcon);
+    }
+
+    applyStyleToDomElement(domElement, style) {
+        for (const key in style) {
+            if (style.hasOwnProperty(key)) {
+                domElement.style[key] = style[key];
+            }
+        }
+    }
+
+    parseEvents(events) {
+        if (!this.map) {
+            return;
+        }
+        events.forEach(event => {
+            if (event.dataType === EventType.AbsolutePosition) {
+                this.updatePosition(event.data);
+
+            } else if (event.dataType === EventType.AbsoluteAttitude) {
+                this.updateAttitude(event.data);
+            }
+        });
+    }
+
+    updatePosition(position) {
+
+        if (!this.map) {
+            return;
+        }
+
+        if (!(position instanceof WGS84)) {
+            if (this.mapMarker) {
+                this.mapMarker.remove();
+                this.mapMarker = null;
+                this.locationIcon = null;
+            }
+            return;
+        }
+
+        const lngLat = [position.lng, position.lat];
+
+        if (!this.mapMarker) {
+            this.mapMarker = this.createLocationMarker(lngLat)
+                .addTo(this.map);
+            this.map.jumpTo({
+                center: lngLat,
+                zoom: 19
+            });
+        } else {
+            this.mapMarker.setLngLat(lngLat);
+        }
+
+    }
+
+    updateAttitude(attitude) {
+
+        if (!this.locationIcon) {
+            return;
+        }
+
+        if (!(attitude instanceof Attitude)) {
+            if (this.compassIcon) {
+                this.locationIcon.removeChild(this.compassIcon);
+            }
+            return;
+        }
+
+        if (!this.compassIcon) {
+            this.createCompassElement();
+        }
+
+        this.locationIcon.style.transform = 'rotate(' + attitude.headingDegrees + 'deg)';
+    }
+
+    renderNetwork() {
+
+        if (!this.map) {
+            return;
+        }
+
+        const network = this.props.network;
+
+        if (!network) {
+            if (this.networkLayer) {
+                this.map.removeLayer(this.networkLayer);
+                this.networkLayer = null;
+            }
+            return;
+        }
+
+        const layer = {
+            id: 'network',
+            type: 'line',
+            source: {
+                type: 'geojson',
+                data: {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: {
+                        type: 'MultiLineString',
+                        coordinates: []
+                    }
+                }
+            },
+            paint: {
+                'line-color': '#0000FF',
+                'line-width': 3
+            }
+        };
+
+        for (let i = 0; i < network.length; i++) {
+            layer.source.data.geometry.coordinates.push(
+                [
+                    [network.edges[i].node1.lng, network.edges[i].node1.lat],
+                    [network.edges[i].node2.lng, network.edges[i].node2.lat]
+                ]
+            );
+        }
+        this.map.on('load', () => {
+            this.networkLayer = this.map.addLayer(layer);
+        });
+    }
+
+    render() {
+        this.renderNetwork();
+        return (
+            <div
+                ref={map => (this.mapContainer = map)}
+                style={{ height: '300px' }} />
+        );
+    }
+}
+
+
+export default MapComponent;

package/src/components/PdrComponent.jsx

@@ -0,0 +1,97 @@
+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';
+import MapComponent from './MapComponent';
+
+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);
+        }
+
+        if (this.map) {
+            this.map.parseEvents(events);
+        }
+    };
+
+    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}
+                <h3>Map</h3>
+                <MapComponent
+                    ref={map => (this.map = map)}
+                    network={ITINERARY} />
+            </div>
+
+        );
+    }
+}
+
+export default PdrComponent;

package/src/components/PoseComponent.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import isEmpty from 'lodash.isempty';
+
+import EventType from '../events/EventType';
+import Utils from './Utils';
+import PoseProvider from '../providers/pose/PoseProvider';
+import MapComponent from './MapComponent';
+
+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);
+        }
+
+        if (this.map) {
+            this.map.parseEvents(events);
+        }
+    };
+
+    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}
+                <h3>Map</h3>
+                <MapComponent ref={map => (this.map = map)} />
+            </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;