@wemap/positioning 2.1.0 → 2.2.0

package/src.old/components/AbsoluteAttitude.jsx

@@ -1,136 +0,0 @@
-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.old/components/Imu.jsx

@@ -1,89 +0,0 @@
-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.old/components/LocationSource.jsx

@@ -1,434 +0,0 @@
-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 { deg2rad } 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(deg2rad(INITIAL_HEADING));
-
-        const pdr2LocationSource = new PdrLocationSource(fn, {
-            'stepdetectionlocker': false,
-            'smoother': false
-        });
-        pdr2LocationSource.setLocation(INITIAL_LOCATION);
-        pdr2LocationSource.setHeading(deg2rad(INITIAL_HEADING));
-        pdr2LocationSource.enableMapMatching(ITINERARY);
-
-        const pdr3LocationSource = new PdrLocationSource(fn, {
-            'stepdetectionlocker': true,
-            'smoother': false
-        });
-        pdr3LocationSource.setLocation(INITIAL_LOCATION);
-        pdr3LocationSource.setHeading(deg2rad(INITIAL_HEADING));
-        pdr3LocationSource.enableMapMatching(ITINERARY);
-        pdr3LocationSource.setItinerary(ITINERARY);
-
-        const pdr4LocationSource = new PdrLocationSource(fn, {
-            'stepdetectionlocker': true,
-            'smoother': true
-        });
-        pdr4LocationSource.setLocation(INITIAL_LOCATION);
-        pdr4LocationSource.setHeading(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);