@wemap/positioning 1.2.0

package/src/components/AbsoluteAttitude.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+
+import { WGS84 } from '@wemap/geo';
+
+import AttitudeHandler from '../attitude/AttitudeHandler';
+import Utils from './Utils';
+
+const userLocation = new WGS84(43.609275, 3.884236);
+
+class AbsoluteAttitude extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.attitudeHandlerBrowser = new AttitudeHandler();
+        this.attitudeHandlerEkf = new AttitudeHandler();
+        this.attitudeHandlerCustom = new AttitudeHandler();
+        // this.attitudeHandlerAutomatic = new AttitudeHandler();
+
+        this.state = {
+            attitudeBrowser: null,
+            attitudeEkf: null,
+            attitudeCustom: null,
+            // attitudeAuto: null,
+            deviceorientation: null,
+            deviceorientationabsolute: null
+        };
+    }
+
+
+    componentDidMount() {
+        const browserPromise = this.attitudeHandlerBrowser.startAbsolute(attitude => this.setState({ attitudeBrowser: attitude }), AttitudeHandler.AbsoluteMethod.BROWSER);
+        this.attitudeHandlerBrowser.setUserLocationForAbsolute(userLocation);
+        browserPromise.catch(() =>
+            this.setState({ attitudeBrowser: -1 })
+        );
+
+        const ekfPromise = this.attitudeHandlerEkf.startAbsolute(attitude => this.setState({ attitudeEkf: attitude }), AttitudeHandler.AbsoluteMethod.INTERNAL_EKF);
+        this.attitudeHandlerEkf.setUserLocationForAbsolute(userLocation);
+        ekfPromise.catch(() =>
+            this.setState({ attitudeEkf: -1 })
+        );
+
+        const customPromise = this.attitudeHandlerCustom.startAbsolute(attitude => this.setState({ attitudeCustom: attitude }), AttitudeHandler.AbsoluteMethod.INTERNAL_CUSTOM);
+        this.attitudeHandlerCustom.setUserLocationForAbsolute(userLocation);
+        customPromise.catch(() =>
+            this.setState({ attitudeCustom: -1 })
+        );
+
+        // const autoPromise = this.attitudeHandlerAutomatic.startAbsolute(attitude => this.setState({ attitudeAuto: attitude }), AttitudeHandler.AbsoluteMethod.AUTOMATIC);
+        // this.attitudeHandlerAutomatic.setUserLocationForAbsolute(userLocation);
+        // autoPromise.catch(() =>
+        //     this.setState({ attitudeAuto: -1 })
+        // );
+
+
+        this.onDeviceOrientationEventListener = (e) =>
+            this.setState({ deviceorientation: e });
+
+        window.addEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
+
+
+        this.onDeviceOrientationAbsoluteEventListener = (e) =>
+            this.setState({ deviceorientationabsolute: e });
+
+        window.addEventListener('deviceorientationabsolute', this.onDeviceOrientationAbsoluteEventListener, true);
+
+    }
+
+    componentWillUnmount() {
+        this.attitudeHandlerBrowser.stopAbsolute();
+        this.attitudeHandlerEkf.stopAbsolute();
+        this.attitudeHandlerCustom.stopAbsolute();
+        // this.attitudeHandlerAutomatic.stopAbsolute();
+        window.removeEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
+        window.removeEventListener('deviceorientationabsolute', this.onDeviceOrientationAbsoluteEventListener, true);
+    }
+
+
+    render() {
+
+
+        let rawRender = <span>Not available</span>;
+
+        if (this.state.deviceorientation && this.state.deviceorientation.webkitCompassHeading) {
+            const alpha = this.state.deviceorientation.alpha;
+            const beta = this.state.deviceorientation.beta;
+            const gamma = this.state.deviceorientation.gamma;
+            const webkitCompassHeading = this.state.deviceorientation.webkitCompassHeading;
+
+            if (alpha && beta && gamma && webkitCompassHeading) {
+                rawRender = <p>alpha: {alpha.toFixed(2)}, <br />
+                    beta: {beta.toFixed(2)}, <br />
+                    gamma: {gamma.toFixed(2)}, <br />
+                    webkitCompassHeading: {webkitCompassHeading.toFixed(2)}</p>;
+            }
+
+        } else if (this.state.deviceorientationabsolute) {
+            const alpha = this.state.deviceorientationabsolute.alpha;
+            const beta = this.state.deviceorientationabsolute.beta;
+            const gamma = this.state.deviceorientationabsolute.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.attitudeBrowser);
+        const ekfRender = Utils.renderAttitude(this.state.attitudeEkf);
+        const customRender = Utils.renderAttitude(this.state.attitudeCustom);
+        // const autoRender = Utils.renderAttitude(this.state.attitudeAuto);
+
+        return (
+            <div>
+                <h3>Raw:</h3>
+                {rawRender}
+                <h3>From browser:</h3>
+                {browserRender}
+                <h3>From Ekf:</h3>
+                {ekfRender}
+                <h3>From Custom:</h3>
+                {customRender}
+                {
+
+                    /* <h3>From Automatic:</h3>
+                    {autoRender} */
+                }
+            </div>
+        );
+    }
+}
+
+export default AbsoluteAttitude;
+

package/src/components/Imu.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import SensorsCompatibility from '../sensors/SensorsCompatibility';
+
+class Imu extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.brAcc = new SensorsCompatibility();
+        this.brGry = new SensorsCompatibility();
+        this.brMag = new SensorsCompatibility();
+
+        this.state = {
+            acc: null,
+            gyr: null,
+            mag: null
+        };
+    }
+
+    componentDidMount() {
+        this.brAcc.startImu(imu => {
+            this.setState({ acc: imu.acc });
+        }, { accelerometer: true }, 10).catch(() => this.setState({ acc: -1 }));
+
+        this.brGry.startImu(imu => {
+            this.setState({ gyr: imu.gyr });
+        }, { gyroscope: true }, 10).catch(() => this.setState({ gyr: -1 }));
+
+        this.brMag.startImu(imu => {
+            this.setState({ mag: imu.mag });
+        }, { magnetometer: true }, 10).catch(() => this.setState({ mag: -1 }));
+    }
+
+    componentWillUnmount() {
+        this.brAcc.stopImu();
+        this.brGry.stopImu();
+        this.brMag.stopImu();
+    }
+
+    render() {
+
+        let accelerometerString = 'Acceleration: ';
+        const acc = this.state.acc;
+        if (!acc) {
+            accelerometerString += 'Waiting';
+        } else if (acc === -1) {
+            accelerometerString += 'Not available';
+        } else {
+            accelerometerString += '[' + acc[0].toFixed(2)
+                + ', ' + acc[1].toFixed(2)
+                + ', ' + acc[2].toFixed(2)
+                + ']';
+        }
+
+        let gyroscopeString = 'Angular Velocity: ';
+        const gyr = this.state.gyr;
+        if (!gyr) {
+            gyroscopeString += 'Waiting';
+        } else if (gyr === -1) {
+            gyroscopeString += 'Not available';
+        } else {
+            gyroscopeString += '[' + gyr[0].toFixed(2)
+                + ', ' + gyr[1].toFixed(2)
+                + ', ' + gyr[2].toFixed(2)
+                + ']';
+        }
+
+        let magnetometerString = 'Magnetic Field: ';
+        const mag = this.state.mag;
+        if (!mag) {
+            magnetometerString += 'Waiting';
+        } else if (mag === -1) {
+            magnetometerString += 'Not available';
+        } else {
+            magnetometerString += '[' + mag[0].toFixed(2)
+                + ', ' + mag[1].toFixed(2)
+                + ', ' + mag[2].toFixed(2)
+                + ']';
+        }
+
+        return (<p>{accelerometerString}<br />
+            {gyroscopeString}<br />
+            {magnetometerString}</p>);
+
+    }
+}
+
+export default Imu;

package/src/components/LocationSource.jsx

@@ -0,0 +1,434 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    FormControl, Select, MenuItem
+} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+import {
+    WGS84UserPosition, Itinerary, Edge
+} from '@wemap/geo';
+import { Utils as MathUtils } from '@wemap/maths';
+
+import IPLocationSource from '../providers/IPLocationSource';
+import GnssLocationSource from '../providers/GnssLocationSource';
+import PdrLocationSource from '../providers/PdrLocationSource';
+import GnssPdrLocationSource from '../providers/GnssPdrLocationSource';
+import Pose from '../Pose';
+import Utils from './Utils';
+
+
+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);
+
+const NOT_AVAILABLE_STR = 'Not available';
+
+mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+
+const styles = (theme) => {
+
+    return {
+        formControl: {
+            margin: theme.spacing(1),
+            minWidth: 120
+        },
+        map: {
+            width: '90%',
+            height: '300px',
+            marginLeft: 'auto',
+            marginRight: 'auto'
+        }
+    };
+};
+
+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 LocationSource extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = { pose: new Pose() };
+    }
+
+    generateProviders() {
+
+        const fn = pose => this.setState({ pose: pose });
+
+        const pdr1LocationSource = new PdrLocationSource(fn, {
+            'stepdetectionlocker': false,
+            'smoother': false
+        });
+        pdr1LocationSource.setLocation(INITIAL_LOCATION);
+        pdr1LocationSource.setHeading(MathUtils.deg2rad(INITIAL_HEADING));
+
+        const pdr2LocationSource = new PdrLocationSource(fn, {
+            'stepdetectionlocker': false,
+            'smoother': false
+        });
+        pdr2LocationSource.setLocation(INITIAL_LOCATION);
+        pdr2LocationSource.setHeading(MathUtils.deg2rad(INITIAL_HEADING));
+        pdr2LocationSource.enableMapMatching(ITINERARY);
+
+        const pdr3LocationSource = new PdrLocationSource(fn, {
+            'stepdetectionlocker': true,
+            'smoother': false
+        });
+        pdr3LocationSource.setLocation(INITIAL_LOCATION);
+        pdr3LocationSource.setHeading(MathUtils.deg2rad(INITIAL_HEADING));
+        pdr3LocationSource.enableMapMatching(ITINERARY);
+        pdr3LocationSource.setItinerary(ITINERARY);
+
+        const pdr4LocationSource = new PdrLocationSource(fn, {
+            'stepdetectionlocker': true,
+            'smoother': true
+        });
+        pdr4LocationSource.setLocation(INITIAL_LOCATION);
+        pdr4LocationSource.setHeading(MathUtils.deg2rad(INITIAL_HEADING));
+        pdr4LocationSource.enableMapMatching(ITINERARY);
+        pdr4LocationSource.setItinerary(ITINERARY);
+
+        const gnssPdrLocationSource = new GnssPdrLocationSource(fn);
+        gnssPdrLocationSource.enableMapMatching(ITINERARY);
+        gnssPdrLocationSource.setItinerary(ITINERARY);
+
+        const providers = [
+            new GnssLocationSource(fn),
+            gnssPdrLocationSource,
+            pdr1LocationSource,
+            pdr2LocationSource,
+            pdr3LocationSource,
+            pdr4LocationSource,
+            new IPLocationSource(fn)
+        ];
+
+        return new Promise(resolve => {
+            this.setState({ providers: providers }, resolve);
+        });
+    }
+
+
+    componentDidMount() {
+        this.generateProviders()
+            .then(() => {
+                this.updateProvider(null, this.state.providers[0]);
+            });
+        this.map = new mapboxgl.Map({
+            container: this.mapContainer,
+            style: 'mapbox://styles/mapbox/streets-v9'
+        });
+        this.map.on('load', () => {
+            const provider = this.state.provider;
+            if (provider && provider.itinerary) {
+                this.networkLayer = this.map.addLayer(this.buildMapboxLayerFromNetwork(ITINERARY));
+            }
+        });
+    }
+
+    componentWillUnmount() {
+        if (this.itineraryInfoInterval) {
+            clearInterval(this.itineraryInfoInterval);
+            this.itineraryInfoInterval = null;
+        }
+
+        if (this.state.provider) {
+            this.state.provider.stop();
+        }
+        this.map.remove();
+    }
+
+
+    handleChange = event => {
+
+        const prevProvider = this.state.provider;
+
+        const { providers } = this.state;
+        for (let i = 0; i < providers.length; i++) {
+            const providerNameWithOptions = providers[i].providerNameWithOptions;
+            if (providerNameWithOptions === event.target.value) {
+                this.updateProvider(prevProvider, providers[i]);
+                return;
+            }
+        }
+    };
+
+    updateProvider(prevProvider, newProvider) {
+
+        if (prevProvider) {
+            prevProvider.stop();
+        }
+
+        if (this.mapMarker) {
+            this.mapMarker.remove();
+            this.mapMarker = null;
+        }
+
+        if (prevProvider && prevProvider.itinerary) {
+            this.map.removeLayer('network');
+            this.map.removeSource('network');
+        }
+
+        if (newProvider.itinerary) {
+            if (this.itineraryInfoInterval) {
+                clearInterval(this.itineraryInfoInterval);
+                this.itineraryInfoInterval = null;
+            }
+            this.itineraryInfoInterval = setInterval(() => {
+                this.setState({ itineraryInfo: this.state.provider.getItineraryInfo() });
+            }, 1000);
+        }
+
+        if (prevProvider && newProvider.itinerary) {
+            this.map.addLayer(this.buildMapboxLayerFromNetwork(ITINERARY));
+        }
+
+        newProvider.start().catch(() => this.setState({ pose: -1 }));
+
+        this.setState({ provider: newProvider });
+    }
+
+    renderProviders() {
+        const { classes } = this.props;
+        const {
+            provider, providers
+        } = this.state;
+
+        if (!providers || !provider) {
+            return <p>Loading</p>;
+        }
+        const locationSourceItems = [];
+        for (let i = 0; i < providers.length; i++) {
+            const providerNameWithOptions = providers[i].providerNameWithOptions;
+            locationSourceItems.push(
+                <MenuItem key={providerNameWithOptions}
+                    value={providerNameWithOptions}>
+                    {providerNameWithOptions}
+                </MenuItem>
+            );
+        }
+
+        return (
+            <FormControl className={classes.formControl}>
+                <Select
+                    value={provider ? provider.providerNameWithOptions : providers[0].providerNameWithOptions}
+                    onChange={this.handleChange}
+                >
+                    {locationSourceItems}
+                </Select>
+            </FormControl>);
+
+
+    }
+
+    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');
+        const compassIcon = document.createElement('div');
+        this.applyStyleToDomElement(coreIcon, LOCATION_STYLE);
+        this.applyStyleToDomElement(compassIcon, COMPASS_STYLE);
+
+        this.locationIcon = document.createElement('div');
+        this.locationIcon.appendChild(coreIcon);
+        this.locationIcon.appendChild(compassIcon);
+
+        return this.createMarker({
+            dom: this.locationIcon,
+            iconAnchor: [0, 0],
+            latitude: location[1],
+            longitude: location[0]
+        });
+    }
+
+    applyStyleToDomElement(domElement, style) {
+        for (const key in style) {
+            if (style.hasOwnProperty(key)) {
+                domElement.style[key] = style[key];
+            }
+        }
+    }
+
+    renderMap() {
+
+        const { classes } = this.props;
+        const { pose } = this.state;
+
+        if (pose.location) {
+            const location = pose.location;
+
+            const lngLat = [location.lng, location.lat];
+            // Update map marker
+            if (!this.mapMarker) {
+
+                this.mapMarker = this.createLocationMarker(lngLat)
+                    .addTo(this.map);
+
+            } else {
+                this.mapMarker.setLngLat(lngLat);
+            }
+            if (this.map.getZoom() < 3) {
+                this.map.setZoom(21);
+            }
+            this.map.jumpTo({ center: lngLat });
+        }
+
+        if (pose.attitude && this.locationIcon && this.locationIcon.style) {
+            this.locationIcon.style.transform = 'rotate(' + pose.attitude.headingDegrees + 'deg)';
+        }
+
+        return (
+            <div className={classes.map}
+                ref={map => {
+                    this.mapContainer = map;
+                }} />
+        );
+    }
+
+    buildMapboxLayerFromNetwork(network) {
+        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]
+                ]
+            );
+        }
+        return layer;
+    }
+
+    render() {
+
+        const {
+            pose, itineraryInfo
+        } = this.state;
+
+        const selectControl = this.renderProviders();
+        const mapRendered = this.renderMap();
+
+        let contents;
+        if (!pose) {
+            contents = <p>Waiting</p>;
+        } else if (pose === -1) {
+            contents = <p>{NOT_AVAILABLE_STR}</p>;
+        } else {
+
+            let locationString = <span>{NOT_AVAILABLE_STR}</span>;
+            let itineraryInfoString = <span>{NOT_AVAILABLE_STR}</span>;
+            if (pose.location) {
+                const location = pose.location;
+
+                locationString = (
+                    <p>
+                        Latitude: {location.lat.toFixed(7)}<br />
+                        Longitude: {location.lng.toFixed(7)}<br />
+                        Altitude: {location.alt ? location.alt.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                        Bearing: {location.bearing ? location.bearing.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                        Accuracy: {location.accuracy ? location.accuracy.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                        Time: {location.time ? location.time.toFixed(2) : NOT_AVAILABLE_STR}<br />
+                        Provider: {location.provider ? location.provider : NOT_AVAILABLE_STR}
+                    </p>);
+
+                if (itineraryInfo) {
+                    const projection = itineraryInfo.projection;
+                    const nearestElement = projection.nearestElement;
+                    itineraryInfoString = (
+                        <p>
+                            Origin: {projection.origin.toString()} <br />
+                            Distance: {projection.distanceFromNearestElement.toFixed(2)} m<br />
+                            Projection: {projection.projection.toString()}<br />
+                            Nearest element: {nearestElement instanceof Edge ? 'Edge' : 'Node'}<br />
+                            Remaining Distance: {itineraryInfo.remainingDistance.toFixed(2)}m<br />
+                            Remaining Percentage: {(itineraryInfo.remainingPercentage * 100).toFixed(1)}%
+                        </p>
+                    );
+                }
+            }
+
+            contents = (
+                <div>
+                    <h3>Location</h3>
+                    {locationString}
+                    <h3>Attitude</h3>
+                    {Utils.renderAttitude(pose.attitude)}
+                    <h3>Projection</h3>
+                    {itineraryInfoString}
+                </div>);
+        }
+
+        return (
+            <div>
+                {selectControl}
+                {contents}
+                <h3>Map</h3>
+                {mapRendered}
+            </div>);
+    }
+}
+
+LocationSource.propTypes = { classes: PropTypes.object.isRequired };
+
+export default withStyles(styles)(LocationSource);