@wemap/providers 3.1.3 → 3.1.5

package/debug/Common.css

@@ -0,0 +1,172 @@
+html,
+body {
+    margin: 0;
+    font-size: 14px;
+    height: 100%;
+}
+
+#app {
+    height: 100%
+}
+
+p {
+    margin-top: 0;
+}
+
+.title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+#map-container {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+#menu-container {
+    position: absolute;
+    background: #FFFFFFAA;
+    margin: 10px;
+    padding: 10px;
+    max-width: 250px;
+    min-width: 150px;
+}
+
+#details-container {
+    margin-top: 10px;
+}
+
+#show-hide-details {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-user-select: none;
+    text-decoration: underline;
+    font-size: 16px;
+}
+
+#location-marker {
+    width: 14px;
+    height: 14px;
+    top: -7px;
+    left: -7px;
+    position: absolute;
+    border-radius: 50%;
+    background: #008DF1;
+    border:1px solid #000000AA;    
+}
+
+#location-marker.inaccurate {
+    background: #AAAAAA;
+}
+
+#location-marker-compass {
+    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;
+}
+
+#location-marker-accuracy {
+    position: absolute;
+    border-radius: 50%;
+    background: #008DF134;
+    border:1px solid #00000034;    
+}
+
+#location-marker-accuracy.inaccurate {
+    background: #AAAAAA34;
+}
+
+.loader {
+    display: inline-block;
+    border: 3px solid #f3f3f3; /* Light grey */
+    border-top: 3px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 3px;
+    height: 3px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#wheelchair-icon {
+    width: 15px;
+    height: 15px;
+    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M449.771,470.475L416.382,325.79c-3.722-14.89-17.047-25.287-32.394-25.287h-64.876 c-9.178-15.069-21.144-28.282-35.291-38.91v-94.647c0-25.164-26.951-40.553-48.323-29.868l-66.778,33.389 c-11.385,5.69-18.344,17.135-18.344,29.868v42.705c-0.207,0.071-0.417,0.094-0.622,0.174 c-53.773,21.003-88.521,71.886-88.521,129.632c0,76.713,62.409,139.122,139.122,139.122c77.23,0,142.093-63.95,138.875-144.687 h18.691l27.063,119.4c4.459,17.802,22.381,28.848,40.498,24.292C443.332,506.511,454.228,488.344,449.771,470.475z M200.353,478.579c-58.301,0-105.732-47.432-105.732-105.732c0-39.568,21.583-74.727,55.754-92.997v42.913 c0,18.412,14.866,33.389,33.278,33.389s33.389-14.977,33.389-33.389v-54.647c0.826,0.292,1.658,0.574,2.549,0.738 c50.116,9.205,86.495,52.942,86.495,103.994C306.085,431.147,258.654,478.579,200.353,478.579z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M256.002,0c-27.617,0-50.084,22.466-50.084,50.084s22.466,50.084,50.084,50.084s50.084-22.466,50.084-50.084 S283.619,0,256.002,0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+    margin-left: 10px;
+    padding: 1px;
+    vertical-align: top;
+    border-width: 2px;
+    border-style: solid;
+    border-color: #66666666;
+    cursor: pointer;
+}
+
+#wheelchair-icon.selected {
+    border-color: blue;
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-remove .mapboxgl-ctrl-icon {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")
+}
+
+.map-click-list-element {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-user-select: none;
+    padding: 3px 10px 3px 25px;
+
+    background-position-x: 8px;
+    background-repeat: no-repeat;
+    background-size: auto 50%;
+    background-position-y: center;
+}
+
+.map-click-list-element:hover {
+    background-color: #00000033;
+}
+
+
+#navigate-to-this-point {
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%233366ff' d='M444.644,344.229L81.977,2.896c-0.116-0.108-0.288-0.102-0.408-0.204c-1.23-1.065-2.707-1.759-4.335-2.173 c-0.487-0.126-0.915-0.229-1.415-0.285C75.423,0.189,75.075,0,74.665,0c-1.496,0-2.914,0.318-4.206,0.872 c-0.008,0.004-0.016-0.001-0.016-0.001c-0.04,0.018-0.055,0.056-0.087,0.07c-1.667,0.74-2.98,1.975-4.066,3.413 c-0.273,0.361-0.499,0.684-0.724,1.076c-0.908,1.569-1.568,3.292-1.568,5.237v490.667c0,1.967,0.674,3.707,1.602,5.289 c0.227,0.391,0.451,0.714,0.724,1.073c1.129,1.478,2.499,2.751,4.241,3.478c0,0,0.01,0.012,0.017,0.014 C71.904,511.74,73.29,512,74.665,512c1.401,0,2.786-0.285,4.083-0.823c1.309-0.543,2.487-1.328,3.471-2.315l146.195-146.195 h208.917c4.375,0,8.302-2.667,9.917-6.74C448.863,351.865,447.832,347.229,444.644,344.229z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+#start-from-there {
+    background-image: url("data:image/svg+xml,%3Csvg height='422pt' viewBox='-45 0 422 422' width='422pt' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='green' d='m203.136719 187.609375c30.636719-22.902344 71.796875-25.894531 105.425781-7.660156l24.15625 13.152343.027344-150.851562-30.824219-16.792969c-28.796875-15.621093-64.050781-13.058593-90.28125 6.566407-30.597656 22.902343-71.726563 25.894531-105.316406 7.660156l-23.953125-13.148438v150.851563l30.640625 16.789062c28.742187 15.625 63.953125 13.058594 90.125-6.566406zm0 0'/%3E%3Cpath d='m36.371094 0v408h-29.371094c-3.867188 0-7 3.132812-7 7s3.132812 7 7 7h90.601562c3.863282 0 7-3.132812 7-7s-3.136718-7-7-7h-29.230468v-408zm0 0'/%3E%3C/svg%3E");
+}
+
+#end-to-there {
+    background-image: url("data:image/svg+xml,%3Csvg height='422pt' viewBox='-45 0 422 422' width='422pt' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='red' d='m203.136719 187.609375c30.636719-22.902344 71.796875-25.894531 105.425781-7.660156l24.15625 13.152343.027344-150.851562-30.824219-16.792969c-28.796875-15.621093-64.050781-13.058593-90.28125 6.566407-30.597656 22.902343-71.726563 25.894531-105.316406 7.660156l-23.953125-13.148438v150.851563l30.640625 16.789062c28.742187 15.625 63.953125 13.058594 90.125-6.566406zm0 0'/%3E%3Cpath d='m36.371094 0v408h-29.371094c-3.867188 0-7 3.132812-7 7s3.132812 7 7 7h90.601562c3.863282 0 7-3.132812 7-7s-3.136718-7-7-7h-29.230468v-408zm0 0'/%3E%3C/svg%3E");
+}
+
+
+.mapboxgl-popup-content {
+    padding: 0;
+    padding-top: 17px;
+    padding-bottom: 10px;
+}
+
+@media screen and (max-width: 600px) {
+     html, body {
+        font-size: 12px;
+    }
+
+    .title {
+        font-size: 14px;
+    }
+}

package/debug/MainComponent.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { ProvidersInterface } from '..';
+
+import MapComponent from './map/MapComponent';
+import DetailsComponent from './details/DetailsComponent';
+
+import './Common.css';
+
+class MainComponent extends React.Component {
+
+    started = false;
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            details: true,
+            mapHandler: null
+        };
+
+        ProvidersInterface.logger = false;
+    }
+
+
+    render() {
+        return (
+            <>
+                <div id='map-container'>
+                    <MapComponent
+                        ref={map => (this.map = map)}
+                        onMapLoaded={mapHandler => this.setState({ mapHandler })}
+                        indoorMaps={['assets/indoor-maps/bureaux-wemap-montpellier.geojson']}
+                    />
+                </div>
+                <div id='menu-container'>
+                    <span id='show-hide-details'
+                        onClick={() => this.setState({ details: !this.state.details })}>
+                        {this.state.details ? 'Hide details' : 'Show details'}
+                    </span>
+                    {this.state.details ? (
+                        <div id='details-container'>
+                            <DetailsComponent mapHandler={this.state.mapHandler} />
+                        </div>
+                    ) : null}
+                </div>
+            </>
+        );
+    }
+}
+
+export default MainComponent;

package/debug/components/AbsolutePositionComponent.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { AbsolutePosition } from '../../src/Providers';
 import Utils from './Utils';
 import NavigationConfig from './NavigationConfig';
-import MapComponent from './MapComponent';
+import MapComponent from '../map/MapComponent';
 
 
 class AbsolutePositionComponent extends React.Component {

package/debug/components/GnssWifiComponent.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Utils from './Utils';
-import MapComponent from './MapComponent';
+import MapComponent from '../map/MapComponent';
 import ProvidersLogger from '../../src/events/ProvidersLogger';
 import { GnssWifi } from '../../src/Providers';
 

package/debug/components/StartStopComponent.jsx

@@ -6,9 +6,11 @@ class StartStopComponent extends React.Component {
     static propTypes = {
         onStart: PropTypes.func.isRequired,
         onStop: PropTypes.func.isRequired,
-        errored: PropTypes.bool.isRequired
+        errored: PropTypes.bool
     };
 
+    static defaultProps = { errored: false };
+
     constructor(props, context) {
         super(props, context);
         this.state = { started: false };
@@ -26,7 +28,7 @@ class StartStopComponent extends React.Component {
 
     render() {
         return (
-            <div>
+            <span>
                 <button onClick={() => this.start()}
                     disabled={(this.state.started && !this.props.errored)}>
                     Start
@@ -35,7 +37,7 @@ class StartStopComponent extends React.Component {
                     disabled={!(this.state.started && !this.props.errored)}>
                     Stop
                 </button>
-            </div>
+            </span>
 
         );
     }

package/debug/components/Utils.js

@@ -10,6 +10,8 @@ const NOT_AVAILABLE_STR = 'Not available';
 
 class Utils {
 
+    static NOT_AVAILABLE_STR = NOT_AVAILABLE_STR;
+
     static renderAttitudeEvent(event) {
 
         if (!event) {
@@ -40,7 +42,7 @@ class Utils {
         return (
             <div>
                 <p>
-                    Quaternion: [{w}, {x}, {y}, {z}]<br />
+                    Quat: [{w}, {x}, {y}, {z}]<br />
                     Eulers: [{yaw}, {pitch}, {roll}]<br />
                     Heading: {heading}<br />
                     Time: {attitude.time.toFixed(2)}<br />
@@ -188,7 +190,7 @@ class Utils {
     }
 
     static renderError(error) {
-        return (<span><strong>[{error.constructor.name}]</strong> {error.message}</span>);
+        return (<div style={{ maxWidth: '180px' }}><strong>[{error.constructor.name}]</strong><br />{error.message}</div>);
     }
 
     static renderFromStack(providersStack) {

package/debug/details/DetailsAttitudeComponent.jsx

@@ -0,0 +1,128 @@
+import noop from 'lodash.noop';
+import React from 'react';
+
+import { AbsoluteHeading } from '@wemap/geo';
+import {
+    deg2rad, rad2deg
+} from '@wemap/maths';
+import { TimeUtils } from '@wemap/utils';
+
+import {
+    ProvidersInterface, EventType
+} from '../..';
+
+const Orientations = [
+    {
+        name: 'QR Code Wemap (lvl 2)',
+        heading: 191.9
+    },
+    {
+        name: 'Gare de Lyon (RER-A)',
+        heading: 41.6
+    }
+];
+
+const fps = 10;
+
+class DetailsAttitudeComponent extends React.PureComponent {
+
+    attitude = null;
+    attitudeDirty = true;
+
+    componentDidMount() {
+
+        this.attitude = ProvidersInterface.getLastKnown(EventType.AbsoluteAttitude);
+
+        this.providersId = ProvidersInterface.addEventListener(
+            EventType.AbsoluteAttitude,
+            attitude => {
+                this.attitudeDirty = true;
+                this.attitude = attitude;
+            },
+            noop,
+            true
+        );
+
+        this.renderLoop();
+    }
+
+    componentWillUnmount() {
+        if (this.timeoutLoopId) {
+            clearTimeout(this.timeoutLoopId);
+        }
+        cancelAnimationFrame(this.renderLoopId);
+        ProvidersInterface.removeEventListener(this.providersId);
+    }
+
+    renderLoop = () => {
+        this.renderAttitude();
+        this.timeoutLoopId = setTimeout(() => {
+            this.timeoutLoopId = null;
+            this.renderLoopId = requestAnimationFrame(this.renderLoop);
+        }, 1000 / fps);
+    }
+
+    renderAttitude = () => {
+
+        if (!this.attitudeDirty) {
+            return;
+        }
+
+        const attitude = this.attitude;
+        if (attitude) {
+            const q = attitude.quaternion;
+            this.refs.quaternion.innerHTML = `[${q[0].toFixed(3)}, ${q[1].toFixed(3)}, ${q[2].toFixed(3)}, ${q[3].toFixed(3)}]`;
+
+            const euler = attitude.eulerAnglesDegrees;
+            this.refs.euler.innerHTML = `[${euler[0].toFixed(2)}°, ${euler[1].toFixed(2)}°, ${euler[2].toFixed(2)}°]`;
+
+            this.refs.heading.innerHTML = `${attitude.headingDegrees.toFixed(2)}°`;
+
+            this.refs.accuracy.innerHTML = `${rad2deg(attitude.accuracy).toFixed(1)}°`;
+            this.refs.time.innerHTML = `${attitude.time.toFixed(2)}s`;
+        }
+
+        this.attitudeDirty = false;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="title">Attitude</div>
+                <p>
+                    Quat: <span ref='quaternion'></span><br />
+                    Euler: <span ref='euler'></span><br />
+                    Heading: <span ref='heading'></span><br />
+                    Accuracy: <span ref='accuracy'></span><br />
+                    Time: <span ref='time'></span>
+                </p>
+                <div>
+                    <select ref='select'>
+                        {Orientations.map((option, index) =>
+                            <option key={index}
+                                value={index}>
+                                {option.name}
+                            </option>
+                        )}
+                    </select>
+                    <button
+                        style={{ marginLeft: '5px' }}
+                        onClick={() => this.handleForceOrientation()}>
+                        Force
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    handleForceOrientation() {
+        const heading = new AbsoluteHeading(
+            deg2rad(Orientations[this.refs.select.value].heading),
+            TimeUtils.preciseTime / 1e3,
+            0
+        );
+        ProvidersInterface.feed(EventType.AbsoluteHeading, heading);
+    }
+}
+
+export default DetailsAttitudeComponent;

package/debug/details/DetailsComponent.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import '../Common.css';
+import MapHandler from '../map/MapHandler';
+import DetailsPositionComponent from './DetailsPositionComponent';
+import DetailsAttitudeComponent from './DetailsAttitudeComponent';
+import ItineraryComponent from './ItineraryComponent';
+
+
+class DetailsComponent extends React.Component {
+
+    static propTypes = { mapHandler: PropTypes.instanceOf(MapHandler) };
+
+    render() {
+
+        return (
+            <>
+
+                <DetailsPositionComponent />
+
+                <DetailsAttitudeComponent />
+
+                <ItineraryComponent mapHandler={this.props.mapHandler} />
+
+            </>
+        );
+    }
+
+}
+
+export default DetailsComponent;

package/debug/details/DetailsPositionComponent.jsx

@@ -0,0 +1,135 @@
+import isNumber from 'lodash.isnumber';
+import noop from 'lodash.noop';
+import React from 'react';
+
+import {
+    Level, UserPosition
+} from '@wemap/geo';
+import { rad2deg } from '@wemap/maths';
+import { TimeUtils } from '@wemap/utils';
+
+import {
+    ProvidersInterface, EventType
+} from '../..';
+
+import Utils from '../components/Utils';
+
+
+const NOT_AVAILABLE_STR = Utils.NOT_AVAILABLE_STR;
+
+const Positions = [
+    {
+        name: 'Wemap (outdoor)',
+        coords: new UserPosition(43.6091955, 3.8841255, 1.5)
+    },
+    {
+        name: 'QR Code Wemap (lvl 2)',
+        coords: new UserPosition(43.6091812, 3.8841376, 1.5, new Level(2))
+    },
+    {
+        name: 'Gare de Lyon (RER-A)',
+        coords: new UserPosition(48.8442365, 2.3728267, 1.5, new Level(-2))
+    }
+];
+
+const fps = 10;
+
+class DetailsPositionComponent extends React.PureComponent {
+
+    position = null;
+    positionDirty = true;
+
+    componentDidMount() {
+
+        this.position = ProvidersInterface.getLastKnown(EventType.AbsolutePosition);
+
+        this.providersId = ProvidersInterface.addEventListener(
+            EventType.AbsolutePosition,
+            position => {
+                this.positionDirty = true;
+                this.position = position;
+            },
+            noop,
+            true
+        );
+
+        this.renderLoop();
+    }
+
+    componentWillUnmount() {
+        if (this.timeoutLoopId) {
+            clearTimeout(this.timeoutLoopId);
+        }
+        cancelAnimationFrame(this.renderLoopId);
+        ProvidersInterface.removeEventListener(this.providersId);
+    }
+
+    renderLoop = () => {
+        this.renderPosition();
+        this.timeoutLoopId = setTimeout(() => {
+            this.timeoutLoopId = null;
+            this.renderLoopId = requestAnimationFrame(this.renderLoop);
+        }, 1000 / fps);
+    }
+
+    renderPosition = () => {
+
+        if (!this.positionDirty) {
+            return;
+        }
+
+        const position = this.position;
+        if (position) {
+            this.refs.latitude.innerHTML = `${position.lat.toFixed(7)}°`;
+            this.refs.longitude.innerHTML = `${position.lng.toFixed(7)}°`;
+            this.refs.altitude.innerHTML = position.alt ? `${position.alt.toFixed(2)}m` : NOT_AVAILABLE_STR;
+            this.refs.level.innerHTML = position.level ? position.level.toString() : NOT_AVAILABLE_STR;
+            this.refs.bearing.innerHTML = isNumber(position.bearing) ? `${rad2deg(position.bearing).toFixed(2)}°` : NOT_AVAILABLE_STR;
+            this.refs.accuracy.innerHTML = `${position.accuracy.toFixed(2)}m`;
+            this.refs.time.innerHTML = `${position.time.toFixed(2)}s`;
+        }
+
+        this.positionDirty = false;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="title">Position</div>
+                <p>
+                    Latitude: <span ref='latitude'></span><br />
+                    Longitude: <span ref='longitude'></span><br />
+                    Altitude: <span ref='altitude'></span><br />
+                    Level: <span ref='level'></span><br />
+                    Bearing: <span ref='bearing'></span><br />
+                    Accuracy: <span ref='accuracy'></span><br />
+                    Time: <span ref='time'></span>
+                </p>
+                <div>
+                    <select ref='select'>
+                        {Positions.map((option, index) =>
+                            <option key={index}
+                                value={index}>
+                                {option.name}
+                            </option>
+                        )}
+                    </select>
+                    <button
+                        style={{ marginLeft: '5px' }}
+                        onClick={() => this.handleForcePosition()}>
+                            Force
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    handleForcePosition() {
+        const position = Positions[this.refs.select.value].coords.clone();
+        position.time = TimeUtils.preciseTime / 1e3;
+        position.accuracy = 0;
+        ProvidersInterface.feed(EventType.AbsolutePosition, position);
+    }
+}
+
+export default DetailsPositionComponent;