@wemap/providers 3.2.2 → 3.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/debug/dist/absolute-attitude.html +19 -0
- package/{dist → debug/dist}/absolute-position.html +5 -2
- package/{dist → debug/dist}/gnss-wifi.html +5 -2
- package/{dist → debug/dist}/imu.html +5 -2
- package/debug/dist/inclination.html +19 -0
- package/debug/dist/index.html +20 -0
- package/debug/dist/positioning-legacy.html +19 -0
- package/debug/dist/relative-attitude.html +19 -0
- package/debug/dist/step-detection.html +19 -0
- package/debug/index.js +7 -9
- package/debug/{components → src}/AbsolutePositionComponent.jsx +4 -4
- package/debug/{components → src}/GnssWifiComponent.jsx +5 -5
- package/debug/{components → src}/Utils.js +2 -4
- package/debug/src/map/SimpleMap.jsx +47 -0
- package/index.js +1 -3
- package/package.json +12 -36
- package/src/ProvidersInterface.js +4 -1
- package/src/providers/attitude/absolute/AbsoluteAttitudeFromBrowserProvider.js +1 -1
- package/src/providers/attitude/relative/RelativeAttitudeFromBrowserProvider.js +1 -1
- package/src/providers/imu/ImuProvider.js +1 -1
- package/src/providers/position/absolute/AbsolutePositionProvider.js +4 -2
- package/src/providers/position/absolute/GnssWifiProvider.js +1 -1
- package/babel.config.json +0 -16
- package/config.json +0 -4
- package/debug/MainComponent.jsx +0 -51
- package/debug/css/App.css +0 -128
- package/debug/css/UserOnMapHandler.css +0 -43
- package/debug/details/DetailsAttitudeComponent.jsx +0 -128
- package/debug/details/DetailsComponent.jsx +0 -31
- package/debug/details/DetailsPositionComponent.jsx +0 -134
- package/debug/details/ItineraryComponent.jsx +0 -264
- package/debug/map/MapComponent.jsx +0 -85
- package/debug/map/MapHandler.js +0 -44
- package/debug/map/helpers/ItineraryMapHandler.js +0 -283
- package/debug/map/helpers/MapClickHandler.js +0 -121
- package/debug/map/helpers/UserOnMapHandler.js +0 -91
- package/debug/stores/ItineraryStore.js +0 -198
- package/dist/absolute-attitude.html +0 -16
- package/dist/assets/indoor-maps/bureaux-wemap-montpellier.geojson +0 -7270
- package/dist/inclination.html +0 -16
- package/dist/index.html +0 -19
- package/dist/js/providers-components.js +0 -2361
- package/dist/logger.html +0 -58
- package/dist/positioning-legacy.html +0 -16
- package/dist/relative-attitude.html +0 -16
- package/dist/step-detection.html +0 -16
- package/src/logger/NavigationLogger.js +0 -138
- package/src/logger/NavigationLoggerConverter.js +0 -263
- package/webpack/webpack.common.cjs +0 -26
- package/webpack/webpack.dev.cjs +0 -25
- package/webpack/webpack.prod.cjs +0 -15
- /package/debug/{components → src}/AbsoluteAttitudeComponent.jsx +0 -0
- /package/debug/{components → src}/ImuComponent.jsx +0 -0
- /package/debug/{components → src}/InclinationComponent.jsx +0 -0
- /package/debug/{components → src}/NavigationConfig.js +0 -0
- /package/debug/{components → src}/RelativeAttitudeComponent.jsx +0 -0
- /package/debug/{components → src}/StartStopComponent.jsx +0 -0
- /package/debug/{components → src}/StepDetectionComponent.jsx +0 -0
package/debug/css/App.css
DELETED
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
html,
|
|
2
|
-
body {
|
|
3
|
-
margin: 0;
|
|
4
|
-
font-size: 14px;
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
#app {
|
|
9
|
-
height: 100%
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
p {
|
|
13
|
-
margin-top: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.title {
|
|
17
|
-
font-size: 18px;
|
|
18
|
-
font-weight: bold;
|
|
19
|
-
margin-top: 10px;
|
|
20
|
-
margin-bottom: 5px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
#map-container {
|
|
24
|
-
position: absolute;
|
|
25
|
-
height: 100%;
|
|
26
|
-
width: 100%;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
#menu-container {
|
|
30
|
-
position: absolute;
|
|
31
|
-
background: #FFFFFFAA;
|
|
32
|
-
margin: 10px;
|
|
33
|
-
padding: 10px;
|
|
34
|
-
max-width: 250px;
|
|
35
|
-
min-width: 150px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
#details-container {
|
|
39
|
-
margin-top: 10px;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
#show-hide-details {
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
-webkit-user-select: none;
|
|
45
|
-
user-select: none;
|
|
46
|
-
-moz-user-select: none;
|
|
47
|
-
text-decoration: underline;
|
|
48
|
-
font-size: 16px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.loader {
|
|
52
|
-
display: inline-block;
|
|
53
|
-
border: 3px solid #f3f3f3; /* Light grey */
|
|
54
|
-
border-top: 3px solid #3498db; /* Blue */
|
|
55
|
-
border-radius: 50%;
|
|
56
|
-
width: 3px;
|
|
57
|
-
height: 3px;
|
|
58
|
-
animation: spin 2s linear infinite;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
@keyframes spin {
|
|
62
|
-
0% { transform: rotate(0deg); }
|
|
63
|
-
100% { transform: rotate(360deg); }
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
#wheelchair-icon {
|
|
67
|
-
width: 15px;
|
|
68
|
-
height: 15px;
|
|
69
|
-
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");
|
|
70
|
-
margin-left: 10px;
|
|
71
|
-
padding: 1px;
|
|
72
|
-
vertical-align: top;
|
|
73
|
-
border-width: 2px;
|
|
74
|
-
border-style: solid;
|
|
75
|
-
border-color: #66666666;
|
|
76
|
-
cursor: pointer;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
#wheelchair-icon.selected {
|
|
80
|
-
border-color: blue;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.map-click-list-element {
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
-webkit-user-select: none;
|
|
86
|
-
user-select: none;
|
|
87
|
-
-moz-user-select: none;
|
|
88
|
-
padding: 3px 10px 3px 25px;
|
|
89
|
-
|
|
90
|
-
background-position-x: 8px;
|
|
91
|
-
background-repeat: no-repeat;
|
|
92
|
-
background-size: auto 50%;
|
|
93
|
-
background-position-y: center;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.map-click-list-element:hover {
|
|
97
|
-
background-color: #00000033;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
#navigate-to-this-point {
|
|
102
|
-
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");
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
#start-from-there {
|
|
106
|
-
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");
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
#end-to-there {
|
|
110
|
-
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");
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
.mapboxgl-popup-content {
|
|
115
|
-
padding: 0;
|
|
116
|
-
padding-top: 17px;
|
|
117
|
-
padding-bottom: 10px;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@media screen and (max-width: 600px) {
|
|
121
|
-
html, body {
|
|
122
|
-
font-size: 12px;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.title {
|
|
126
|
-
font-size: 14px;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
#location-marker {
|
|
2
|
-
width: 14px;
|
|
3
|
-
height: 14px;
|
|
4
|
-
top: -7px;
|
|
5
|
-
left: -7px;
|
|
6
|
-
position: absolute;
|
|
7
|
-
border-radius: 50%;
|
|
8
|
-
background: #008DF1;
|
|
9
|
-
border:1px solid #000000AA;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
#location-marker.inaccurate {
|
|
13
|
-
background: #AAAAAA;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
#location-marker-compass {
|
|
17
|
-
width: 15px;
|
|
18
|
-
height: 15px;
|
|
19
|
-
border-radius: 50%;
|
|
20
|
-
z-index: 10000001;
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: -14px;
|
|
23
|
-
left: -14px;
|
|
24
|
-
border: 7px solid;
|
|
25
|
-
border-color: transparent;
|
|
26
|
-
border-top-color: #008DF1;
|
|
27
|
-
opacity: 0.5;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#location-marker-accuracy {
|
|
31
|
-
position: absolute;
|
|
32
|
-
border-radius: 50%;
|
|
33
|
-
background: #008DF134;
|
|
34
|
-
border:1px solid #00000034;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
#location-marker-accuracy.inaccurate {
|
|
38
|
-
background: #AAAAAA34;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-remove .mapboxgl-ctrl-icon {
|
|
42
|
-
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")
|
|
43
|
-
}
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import noop from 'lodash.noop';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
|
|
4
|
-
import { AbsoluteHeading } from '@wemap/geo';
|
|
5
|
-
import {
|
|
6
|
-
deg2rad, rad2deg
|
|
7
|
-
} from '@wemap/maths';
|
|
8
|
-
import { TimeUtils } from '@wemap/utils';
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
ProvidersInterface, EventType
|
|
12
|
-
} from '../../index.js';
|
|
13
|
-
|
|
14
|
-
const Orientations = [
|
|
15
|
-
{
|
|
16
|
-
name: 'QR Code Wemap (lvl 2)',
|
|
17
|
-
heading: 191.9
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
name: 'Gare de Lyon (RER-A)',
|
|
21
|
-
heading: 41.6
|
|
22
|
-
}
|
|
23
|
-
];
|
|
24
|
-
|
|
25
|
-
const fps = 10;
|
|
26
|
-
|
|
27
|
-
class DetailsAttitudeComponent extends React.PureComponent {
|
|
28
|
-
|
|
29
|
-
attitude = null;
|
|
30
|
-
attitudeDirty = true;
|
|
31
|
-
|
|
32
|
-
componentDidMount() {
|
|
33
|
-
|
|
34
|
-
this.attitude = ProvidersInterface.getLastKnown(EventType.AbsoluteAttitude);
|
|
35
|
-
|
|
36
|
-
this.providersId = ProvidersInterface.addEventListener(
|
|
37
|
-
EventType.AbsoluteAttitude,
|
|
38
|
-
attitude => {
|
|
39
|
-
this.attitudeDirty = true;
|
|
40
|
-
this.attitude = attitude;
|
|
41
|
-
},
|
|
42
|
-
noop,
|
|
43
|
-
true
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
this.renderLoop();
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
componentWillUnmount() {
|
|
50
|
-
if (this.timeoutLoopId) {
|
|
51
|
-
clearTimeout(this.timeoutLoopId);
|
|
52
|
-
}
|
|
53
|
-
cancelAnimationFrame(this.renderLoopId);
|
|
54
|
-
ProvidersInterface.removeEventListener(this.providersId);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
renderLoop = () => {
|
|
58
|
-
this.renderAttitude();
|
|
59
|
-
this.timeoutLoopId = setTimeout(() => {
|
|
60
|
-
this.timeoutLoopId = null;
|
|
61
|
-
this.renderLoopId = requestAnimationFrame(this.renderLoop);
|
|
62
|
-
}, 1000 / fps);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
renderAttitude = () => {
|
|
66
|
-
|
|
67
|
-
if (!this.attitudeDirty) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const attitude = this.attitude;
|
|
72
|
-
if (attitude) {
|
|
73
|
-
const q = attitude.quaternion;
|
|
74
|
-
this.refs.quaternion.innerHTML = `[${q[0].toFixed(3)}, ${q[1].toFixed(3)}, ${q[2].toFixed(3)}, ${q[3].toFixed(3)}]`;
|
|
75
|
-
|
|
76
|
-
const euler = attitude.eulerAnglesDegrees;
|
|
77
|
-
this.refs.euler.innerHTML = `[${euler[0].toFixed(2)}°, ${euler[1].toFixed(2)}°, ${euler[2].toFixed(2)}°]`;
|
|
78
|
-
|
|
79
|
-
this.refs.heading.innerHTML = `${attitude.headingDegrees.toFixed(2)}°`;
|
|
80
|
-
|
|
81
|
-
this.refs.accuracy.innerHTML = `${rad2deg(attitude.accuracy).toFixed(1)}°`;
|
|
82
|
-
this.refs.time.innerHTML = `${attitude.time.toFixed(2)}s`;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
this.attitudeDirty = false;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
render() {
|
|
89
|
-
return (
|
|
90
|
-
<div>
|
|
91
|
-
<div className="title">Attitude</div>
|
|
92
|
-
<p>
|
|
93
|
-
Quat: <span ref='quaternion'></span><br />
|
|
94
|
-
Euler: <span ref='euler'></span><br />
|
|
95
|
-
Heading: <span ref='heading'></span><br />
|
|
96
|
-
Accuracy: <span ref='accuracy'></span><br />
|
|
97
|
-
Time: <span ref='time'></span>
|
|
98
|
-
</p>
|
|
99
|
-
<div>
|
|
100
|
-
<select ref='select'>
|
|
101
|
-
{Orientations.map((option, index) =>
|
|
102
|
-
<option key={index}
|
|
103
|
-
value={index}>
|
|
104
|
-
{option.name}
|
|
105
|
-
</option>
|
|
106
|
-
)}
|
|
107
|
-
</select>
|
|
108
|
-
<button
|
|
109
|
-
style={{ marginLeft: '5px' }}
|
|
110
|
-
onClick={() => this.handleForceOrientation()}>
|
|
111
|
-
Force
|
|
112
|
-
</button>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
handleForceOrientation() {
|
|
119
|
-
const heading = new AbsoluteHeading(
|
|
120
|
-
deg2rad(Orientations[this.refs.select.value].heading),
|
|
121
|
-
TimeUtils.preciseTime / 1e3,
|
|
122
|
-
0
|
|
123
|
-
);
|
|
124
|
-
ProvidersInterface.feed(EventType.AbsoluteHeading, heading);
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export default DetailsAttitudeComponent;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
|
|
4
|
-
import MapHandler from '../map/MapHandler.js';
|
|
5
|
-
import DetailsPositionComponent from './DetailsPositionComponent.jsx';
|
|
6
|
-
import DetailsAttitudeComponent from './DetailsAttitudeComponent.jsx';
|
|
7
|
-
import ItineraryComponent from './ItineraryComponent.jsx';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
class DetailsComponent extends React.Component {
|
|
11
|
-
|
|
12
|
-
static propTypes = { mapHandler: PropTypes.instanceOf(MapHandler) };
|
|
13
|
-
|
|
14
|
-
render() {
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<>
|
|
18
|
-
|
|
19
|
-
<DetailsPositionComponent />
|
|
20
|
-
|
|
21
|
-
<DetailsAttitudeComponent />
|
|
22
|
-
|
|
23
|
-
<ItineraryComponent mapHandler={this.props.mapHandler} />
|
|
24
|
-
|
|
25
|
-
</>
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export default DetailsComponent;
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import noop from 'lodash.noop';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
Level, UserPosition
|
|
6
|
-
} from '@wemap/geo';
|
|
7
|
-
import { rad2deg } from '@wemap/maths';
|
|
8
|
-
import { TimeUtils } from '@wemap/utils';
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
ProvidersInterface, EventType
|
|
12
|
-
} from '../../index.js';
|
|
13
|
-
|
|
14
|
-
import Utils from '../components/Utils.js';
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const NOT_AVAILABLE_STR = Utils.NOT_AVAILABLE_STR;
|
|
18
|
-
|
|
19
|
-
const Positions = [
|
|
20
|
-
{
|
|
21
|
-
name: 'Wemap (outdoor)',
|
|
22
|
-
coords: new UserPosition(43.6091955, 3.8841255, 1.5)
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
name: 'QR Code Wemap (lvl 2)',
|
|
26
|
-
coords: new UserPosition(43.6091812, 3.8841376, 1.5, new Level(2))
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
name: 'Gare de Lyon (RER-A)',
|
|
30
|
-
coords: new UserPosition(48.8442365, 2.3728267, 1.5, new Level(-2))
|
|
31
|
-
}
|
|
32
|
-
];
|
|
33
|
-
|
|
34
|
-
const fps = 10;
|
|
35
|
-
|
|
36
|
-
class DetailsPositionComponent extends React.PureComponent {
|
|
37
|
-
|
|
38
|
-
position = null;
|
|
39
|
-
positionDirty = true;
|
|
40
|
-
|
|
41
|
-
componentDidMount() {
|
|
42
|
-
|
|
43
|
-
this.position = ProvidersInterface.getLastKnown(EventType.AbsolutePosition);
|
|
44
|
-
|
|
45
|
-
this.providersId = ProvidersInterface.addEventListener(
|
|
46
|
-
EventType.AbsolutePosition,
|
|
47
|
-
position => {
|
|
48
|
-
this.positionDirty = true;
|
|
49
|
-
this.position = position;
|
|
50
|
-
},
|
|
51
|
-
noop,
|
|
52
|
-
true
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
this.renderLoop();
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
componentWillUnmount() {
|
|
59
|
-
if (this.timeoutLoopId) {
|
|
60
|
-
clearTimeout(this.timeoutLoopId);
|
|
61
|
-
}
|
|
62
|
-
cancelAnimationFrame(this.renderLoopId);
|
|
63
|
-
ProvidersInterface.removeEventListener(this.providersId);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
renderLoop = () => {
|
|
67
|
-
this.renderPosition();
|
|
68
|
-
this.timeoutLoopId = setTimeout(() => {
|
|
69
|
-
this.timeoutLoopId = null;
|
|
70
|
-
this.renderLoopId = requestAnimationFrame(this.renderLoop);
|
|
71
|
-
}, 1000 / fps);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
renderPosition = () => {
|
|
75
|
-
|
|
76
|
-
if (!this.positionDirty) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
const position = this.position;
|
|
81
|
-
if (position) {
|
|
82
|
-
this.refs.latitude.innerHTML = `${position.lat.toFixed(7)}°`;
|
|
83
|
-
this.refs.longitude.innerHTML = `${position.lng.toFixed(7)}°`;
|
|
84
|
-
this.refs.altitude.innerHTML = position.alt ? `${position.alt.toFixed(2)}m` : NOT_AVAILABLE_STR;
|
|
85
|
-
this.refs.level.innerHTML = position.level ? position.level.toString() : NOT_AVAILABLE_STR;
|
|
86
|
-
this.refs.bearing.innerHTML = position.bearing !== null ? `${rad2deg(position.bearing).toFixed(2)}°` : NOT_AVAILABLE_STR;
|
|
87
|
-
this.refs.accuracy.innerHTML = `${position.accuracy.toFixed(2)}m`;
|
|
88
|
-
this.refs.time.innerHTML = `${position.time.toFixed(2)}s`;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
this.positionDirty = false;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
render() {
|
|
95
|
-
return (
|
|
96
|
-
<div>
|
|
97
|
-
<div className="title">Position</div>
|
|
98
|
-
<p>
|
|
99
|
-
Latitude: <span ref='latitude'></span><br />
|
|
100
|
-
Longitude: <span ref='longitude'></span><br />
|
|
101
|
-
Altitude: <span ref='altitude'></span><br />
|
|
102
|
-
Level: <span ref='level'></span><br />
|
|
103
|
-
Bearing: <span ref='bearing'></span><br />
|
|
104
|
-
Accuracy: <span ref='accuracy'></span><br />
|
|
105
|
-
Time: <span ref='time'></span>
|
|
106
|
-
</p>
|
|
107
|
-
<div>
|
|
108
|
-
<select ref='select'>
|
|
109
|
-
{Positions.map((option, index) =>
|
|
110
|
-
<option key={index}
|
|
111
|
-
value={index}>
|
|
112
|
-
{option.name}
|
|
113
|
-
</option>
|
|
114
|
-
)}
|
|
115
|
-
</select>
|
|
116
|
-
<button
|
|
117
|
-
style={{ marginLeft: '5px' }}
|
|
118
|
-
onClick={() => this.handleForcePosition()}>
|
|
119
|
-
Force
|
|
120
|
-
</button>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
handleForcePosition() {
|
|
127
|
-
const position = Positions[this.refs.select.value].coords.clone();
|
|
128
|
-
position.time = TimeUtils.preciseTime / 1e3;
|
|
129
|
-
position.accuracy = 0;
|
|
130
|
-
ProvidersInterface.feed(EventType.AbsolutePosition, position);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
export default DetailsPositionComponent;
|