@wemap/providers 5.0.6 → 5.1.0
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/index.js +3 -0
- package/package.json +4 -4
- package/debug/dist/absolute-attitude.html +0 -19
- package/debug/dist/absolute-position.html +0 -19
- package/debug/dist/gnss-wifi.html +0 -19
- package/debug/dist/imu.html +0 -19
- package/debug/dist/inclination.html +0 -19
- package/debug/dist/index.html +0 -21
- package/debug/dist/positioning-legacy.html +0 -19
- package/debug/dist/relative-attitude.html +0 -19
- package/debug/dist/step-detection.html +0 -19
- package/debug/dist/turn-detection.html +0 -19
- package/debug/index.js +0 -28
- package/debug/src/AbsoluteAttitudeComponent.jsx +0 -161
- package/debug/src/AbsolutePositionComponent.jsx +0 -76
- package/debug/src/GnssWifiComponent.jsx +0 -52
- package/debug/src/ImuComponent.jsx +0 -53
- package/debug/src/InclinationComponent.jsx +0 -65
- package/debug/src/NavigationConfig.js +0 -113
- package/debug/src/RelativeAttitudeComponent.jsx +0 -85
- package/debug/src/StartStopComponent.jsx +0 -47
- package/debug/src/StepDetectionComponent.jsx +0 -39
- package/debug/src/TurnDetectionComponent.jsx +0 -47
- package/debug/src/Utils.js +0 -230
- package/debug/src/map/SimpleMap.jsx +0 -47
package/index.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
export { default as EventType } from './src/events/EventType.js';
|
|
2
|
+
export { default as ProviderEvent } from './src/events/ProviderEvent.js';
|
|
2
3
|
export * as Providers from './src/Providers.js';
|
|
3
4
|
export { default as ProvidersInterface } from './src/ProvidersInterface.js';
|
|
4
5
|
export { default as ProvidersOptions } from './src/ProvidersOptions.js';
|
|
5
6
|
|
|
6
7
|
export { default as PositionSmoother } from './src/smoothers/PositionSmoother.js';
|
|
7
8
|
export { default as AttitudeSmoother } from './src/smoothers/AttitudeSmoother.js';
|
|
9
|
+
|
|
10
|
+
export { default as ProvidersLoggerOld } from './src/events/ProvidersLoggerOld.js';
|
package/package.json
CHANGED
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
"@wemap/geo": "^5.0.3",
|
|
12
12
|
"@wemap/geomagnetism": "^0.1.1",
|
|
13
13
|
"@wemap/logger": "^5.0.0",
|
|
14
|
-
"@wemap/map": "^5.0
|
|
14
|
+
"@wemap/map": "^5.1.0",
|
|
15
15
|
"@wemap/maths": "^5.0.0",
|
|
16
|
+
"@wemap/osm": "^5.1.0",
|
|
16
17
|
"@wemap/utils": "^5.0.0"
|
|
17
18
|
},
|
|
18
19
|
"description": "A package using different geoloc systems",
|
|
19
20
|
"devDependencies": {
|
|
20
|
-
"@wemap/osm": "^5.0.6",
|
|
21
21
|
"mapbox-gl": "^1.11.1"
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/wemap/wemap-modules-js#readme",
|
|
@@ -39,6 +39,6 @@
|
|
|
39
39
|
"url": "git+https://github.com/wemap/wemap-modules-js.git"
|
|
40
40
|
},
|
|
41
41
|
"type": "module",
|
|
42
|
-
"version": "5.0
|
|
43
|
-
"gitHead": "
|
|
42
|
+
"version": "5.1.0",
|
|
43
|
+
"gitHead": "0133b575647d871440689d4388edcfd45870cc51"
|
|
44
44
|
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Absolute Attitude</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, AbsoluteAttitudeComponent */
|
|
15
|
-
createReactElement(AbsoluteAttitudeComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Absolute Attitude</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body style="margin: 0">
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, AbsolutePositionComponent */
|
|
15
|
-
createReactElement(AbsolutePositionComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Positioning</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, GnssWifiComponent */
|
|
15
|
-
createReactElement(GnssWifiComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
package/debug/dist/imu.html
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Imu</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, ImuComponent */
|
|
15
|
-
createReactElement(ImuComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Inclination</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, InclinationComponent */
|
|
15
|
-
createReactElement(InclinationComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
package/debug/dist/index.html
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>AR debug</title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<a href="./imu.html">IMU</a><br />
|
|
12
|
-
<a href="./inclination.html">Inclination</a><br />
|
|
13
|
-
<a href="./relative-attitude.html">Relative Attitude</a><br />
|
|
14
|
-
<a href="./absolute-attitude.html">Absolute Attitude</a><br />
|
|
15
|
-
<a href="./gnss-wifi.html">GNSS-Wifi</a><br />
|
|
16
|
-
<a href="./step-detection.html">Step Detection</a><br />
|
|
17
|
-
<a href="./turn-detection.html">Turn Detection</a><br />
|
|
18
|
-
<a href="./absolute-position.html">Absolute Position</a>
|
|
19
|
-
</body>
|
|
20
|
-
|
|
21
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Positioning</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, PositioningComponent */
|
|
15
|
-
createReactElement(PositioningComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Relative Attitude</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, RelativeAttitudeComponent */
|
|
15
|
-
createReactElement(RelativeAttitudeComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Step Detection</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, StepDetectionComponent */
|
|
15
|
-
createReactElement(StepDetectionComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Debug Step Detection</title>
|
|
8
|
-
<script src="/js/providers-lib.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app"></div>
|
|
13
|
-
<script>
|
|
14
|
-
/* global createReactElement, TurnDetectionComponent */
|
|
15
|
-
createReactElement(TurnDetectionComponent, document.getElementById('app'));
|
|
16
|
-
</script>
|
|
17
|
-
</body>
|
|
18
|
-
|
|
19
|
-
</html>
|
package/debug/index.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
|
-
|
|
4
|
-
import AbsoluteAttitudeComponent from './src/AbsoluteAttitudeComponent.jsx';
|
|
5
|
-
import AbsolutePositionComponent from './src/AbsolutePositionComponent.jsx';
|
|
6
|
-
import GnssWifiComponent from './src/GnssWifiComponent.jsx';
|
|
7
|
-
import ImuComponent from './src/ImuComponent.jsx';
|
|
8
|
-
import InclinationComponent from './src/InclinationComponent.jsx';
|
|
9
|
-
import RelativeAttitudeComponent from './src/RelativeAttitudeComponent.jsx';
|
|
10
|
-
import StepDetectionComponent from './src/StepDetectionComponent.jsx';
|
|
11
|
-
import TurnDetectionComponent from './src/TurnDetectionComponent.jsx';
|
|
12
|
-
|
|
13
|
-
const createReactElement = (component, container) => ReactDOM.render(
|
|
14
|
-
React.createElement(component, {}, null),
|
|
15
|
-
container
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
export {
|
|
19
|
-
AbsoluteAttitudeComponent,
|
|
20
|
-
AbsolutePositionComponent,
|
|
21
|
-
ImuComponent,
|
|
22
|
-
InclinationComponent,
|
|
23
|
-
GnssWifiComponent,
|
|
24
|
-
RelativeAttitudeComponent,
|
|
25
|
-
StepDetectionComponent,
|
|
26
|
-
TurnDetectionComponent,
|
|
27
|
-
createReactElement
|
|
28
|
-
};
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import { deg2rad } from '@wemap/maths';
|
|
4
|
-
import {
|
|
5
|
-
UserPosition, AbsoluteHeading
|
|
6
|
-
} from '@wemap/geo';
|
|
7
|
-
import { TimeUtils } from '@wemap/utils';
|
|
8
|
-
|
|
9
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
10
|
-
import {
|
|
11
|
-
AbsoluteAttitudeFromBrowser,
|
|
12
|
-
AbsoluteAttitude,
|
|
13
|
-
AbsolutePosition
|
|
14
|
-
} from '../../src/Providers.js';
|
|
15
|
-
import Utils from './Utils.js';
|
|
16
|
-
|
|
17
|
-
ProvidersLoggerOld.enabled = true;
|
|
18
|
-
|
|
19
|
-
class AbsoluteAttitudeComponent extends React.Component {
|
|
20
|
-
|
|
21
|
-
isStarted = false;
|
|
22
|
-
|
|
23
|
-
constructor(props, context) {
|
|
24
|
-
super(props, context);
|
|
25
|
-
|
|
26
|
-
this.state = {
|
|
27
|
-
attitude: null,
|
|
28
|
-
attitudeFromBrowser: null,
|
|
29
|
-
deviceorientation: null,
|
|
30
|
-
deviceorientationabsolute: null
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
start() {
|
|
36
|
-
|
|
37
|
-
if (this.isStarted) {
|
|
38
|
-
this.stop();
|
|
39
|
-
}
|
|
40
|
-
this.isStarted = true;
|
|
41
|
-
|
|
42
|
-
this.providerFromBrowserId = AbsoluteAttitudeFromBrowser.addEventListener(
|
|
43
|
-
events => this.setState({ attitudeFromBrowser: events[0] }),
|
|
44
|
-
error => this.setState({ attitudeFromBrowser: error })
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
this.providerId = AbsoluteAttitude.addEventListener(
|
|
48
|
-
events => this.setState({ attitude: events[0] }),
|
|
49
|
-
error => this.setState({ attitude: error })
|
|
50
|
-
);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.onDeviceOrientationEventListener = (e) => this.setState({ deviceorientation: e });
|
|
54
|
-
window.addEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
|
|
55
|
-
|
|
56
|
-
this.onDeviceOrientationAbsoluteEventListener = (e) => this.setState({ deviceorientationabsolute: e });
|
|
57
|
-
window.addEventListener('deviceorientationabsolute', this.onDeviceOrientationAbsoluteEventListener, true);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
stop() {
|
|
61
|
-
this.isStarted = false;
|
|
62
|
-
AbsoluteAttitudeFromBrowser.removeEventListener(this.providerFromBrowserId);
|
|
63
|
-
AbsoluteAttitude.removeEventListener(this.providerId);
|
|
64
|
-
window.removeEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
|
|
65
|
-
window.removeEventListener('deviceorientationabsolute', this.onDeviceOrientationAbsoluteEventListener, true);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
componentWillUnmount() {
|
|
69
|
-
if (this.isStarted) {
|
|
70
|
-
this.stop();
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
handleHeadingSubmit() {
|
|
75
|
-
const heading = Number(this.inputHeading);
|
|
76
|
-
if (!isNaN(heading)) {
|
|
77
|
-
AbsoluteAttitude.feed(
|
|
78
|
-
new AbsoluteHeading(deg2rad(heading), TimeUtils.preciseTime() / 1e3, 0)
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
handlePosSubmit() {
|
|
84
|
-
AbsolutePosition.feed(
|
|
85
|
-
new UserPosition(43.61, 3.8, null, null, TimeUtils.preciseTime() / 1e3, 1000)
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
render() {
|
|
90
|
-
|
|
91
|
-
let rawRender = <span>Not available</span>;
|
|
92
|
-
|
|
93
|
-
if (this.state.deviceorientation && this.state.deviceorientation.webkitCompassHeading) {
|
|
94
|
-
const alpha = this.state.deviceorientation.alpha;
|
|
95
|
-
const beta = this.state.deviceorientation.beta;
|
|
96
|
-
const gamma = this.state.deviceorientation.gamma;
|
|
97
|
-
const webkitCompassHeading = this.state.deviceorientation.webkitCompassHeading;
|
|
98
|
-
|
|
99
|
-
if (typeof alpha === 'number' && typeof beta === 'number'
|
|
100
|
-
&& typeof gamma === 'number' && typeof webkitCompassHeading === 'number') {
|
|
101
|
-
rawRender = <pre>alpha: {alpha.toFixed(2)}, <br />
|
|
102
|
-
beta: {beta.toFixed(2)}, <br />
|
|
103
|
-
gamma: {gamma.toFixed(2)}, <br />
|
|
104
|
-
webkitCompassHeading: {webkitCompassHeading.toFixed(2)}</pre>;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
} else if (this.state.deviceorientationabsolute) {
|
|
108
|
-
const alpha = this.state.deviceorientationabsolute.alpha;
|
|
109
|
-
const beta = this.state.deviceorientationabsolute.beta;
|
|
110
|
-
const gamma = this.state.deviceorientationabsolute.gamma;
|
|
111
|
-
|
|
112
|
-
if (typeof alpha === 'number' && typeof beta === 'number' && typeof gamma === 'number') {
|
|
113
|
-
rawRender = <pre>alpha: {alpha.toFixed(2)}, <br />
|
|
114
|
-
beta: {beta.toFixed(2)}, <br />
|
|
115
|
-
gamma: {gamma.toFixed(2)}</pre>;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
return (
|
|
121
|
-
<div style={{ width: '100%' }}>
|
|
122
|
-
<div style={{ width: '100%' }}>
|
|
123
|
-
<input type="button"
|
|
124
|
-
style={{
|
|
125
|
-
marginLeft: 'auto',
|
|
126
|
-
marginRight: 'auto',
|
|
127
|
-
display: 'block'
|
|
128
|
-
}}
|
|
129
|
-
onClick={() => this.start()}
|
|
130
|
-
value="Start" />
|
|
131
|
-
</div>
|
|
132
|
-
<div style={{ marginTop: '20px' }}>
|
|
133
|
-
<input type="text"
|
|
134
|
-
style={{ width: '50px' }}
|
|
135
|
-
placeholder='Heading'
|
|
136
|
-
pattern="[0-9]*"
|
|
137
|
-
onChange={event => (this.inputHeading = event.target.value)}
|
|
138
|
-
/>
|
|
139
|
-
<input type="button"
|
|
140
|
-
style={{ marginRight: '20px' }}
|
|
141
|
-
onClick={() => this.handleHeadingSubmit()}
|
|
142
|
-
value="Send" />
|
|
143
|
-
|
|
|
144
|
-
<input type="button"
|
|
145
|
-
style={{ marginLeft: '20px' }}
|
|
146
|
-
onClick={() => this.handlePosSubmit()}
|
|
147
|
-
value="Send Montpellier position" />
|
|
148
|
-
</div>
|
|
149
|
-
<h3>Raw:</h3>
|
|
150
|
-
{rawRender}
|
|
151
|
-
<h3>Absolute attitude:</h3>
|
|
152
|
-
{Utils.renderAttitudeEvent(this.state.attitude)}
|
|
153
|
-
<h3>Absolute attitude From browser:</h3>
|
|
154
|
-
{Utils.renderAttitudeEvent(this.state.attitudeFromBrowser)}
|
|
155
|
-
</div>
|
|
156
|
-
);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
export default AbsoluteAttitudeComponent;
|
|
161
|
-
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import { AbsolutePosition, AbsoluteAttitude } from '../../src/Providers.js';
|
|
4
|
-
import Utils from './Utils.js';
|
|
5
|
-
import NavigationConfig from './NavigationConfig.js';
|
|
6
|
-
import SimpleMap from './map/SimpleMap.jsx';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
class AbsolutePositionComponent extends React.Component {
|
|
10
|
-
|
|
11
|
-
constructor(props, context) {
|
|
12
|
-
super(props, context);
|
|
13
|
-
this.state = { position: null };
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
componentDidMount() {
|
|
17
|
-
this.providerId = AbsolutePosition.addEventListener(
|
|
18
|
-
events => this.onNewPosition(events[0]),
|
|
19
|
-
error => this.setState({ absolutePosition: error })
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
componentWillUnmount() {
|
|
24
|
-
AbsolutePosition.removeEventListener(this.providerId);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
onNewPosition = position => {
|
|
28
|
-
this.map.updatePosition(position.data);
|
|
29
|
-
this.setState({ absolutePosition: position });
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
handlePosSubmit() {
|
|
33
|
-
AbsolutePosition.feed(NavigationConfig.INITIAL_POSITION);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
handleHeadingSubmit() {
|
|
37
|
-
AbsoluteAttitude.feed(NavigationConfig.INITIAL_HEADING);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
render() {
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<div style={{
|
|
44
|
-
display: 'flex',
|
|
45
|
-
flexFlow: 'column',
|
|
46
|
-
height: 'calc(100vh - 16px)',
|
|
47
|
-
padding: '8px'
|
|
48
|
-
}}>
|
|
49
|
-
<div>
|
|
50
|
-
<input type="button"
|
|
51
|
-
onClick={() => this.handlePosSubmit()}
|
|
52
|
-
value="Send Wemap position" />
|
|
53
|
-
<input type="button"
|
|
54
|
-
style={{ marginLeft: '10px' }}
|
|
55
|
-
onClick={() => this.handleHeadingSubmit()}
|
|
56
|
-
value="Send heading" />
|
|
57
|
-
</div>
|
|
58
|
-
<h3>Position</h3>
|
|
59
|
-
{Utils.renderPositionEvent(this.state.absolutePosition)}
|
|
60
|
-
<h3>Map</h3>
|
|
61
|
-
<div style={{
|
|
62
|
-
flexGrow: 1,
|
|
63
|
-
flexShrink: 1,
|
|
64
|
-
flexBasis: 'auto',
|
|
65
|
-
minHeight: '300px'
|
|
66
|
-
}}>
|
|
67
|
-
<SimpleMap
|
|
68
|
-
ref={map => (this.map = map)}
|
|
69
|
-
/>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export default AbsolutePositionComponent;
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import Utils from './Utils.js';
|
|
4
|
-
import SimpleMap from './map/SimpleMap.jsx';
|
|
5
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
6
|
-
import { GnssWifi } from '../../src/Providers.js';
|
|
7
|
-
|
|
8
|
-
ProvidersLoggerOld.enabled = true;
|
|
9
|
-
class GnssWifiComponent extends React.Component {
|
|
10
|
-
|
|
11
|
-
constructor(props, context) {
|
|
12
|
-
super(props, context);
|
|
13
|
-
|
|
14
|
-
this.state = { position: null };
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
componentDidMount() {
|
|
19
|
-
this.providerId = GnssWifi.addEventListener(
|
|
20
|
-
events => this.onNewPosition(events[0]),
|
|
21
|
-
error => this.setState({ position: error })
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
componentWillUnmount() {
|
|
26
|
-
GnssWifi.removeEventListener(this.providerId);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
onNewPosition = position => {
|
|
30
|
-
this.setState({ position });
|
|
31
|
-
this.map.updatePosition(position.data);
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
onError = error => {
|
|
35
|
-
this.setState({ position: error });
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
render() {
|
|
39
|
-
return (
|
|
40
|
-
<div>
|
|
41
|
-
<h3>Position</h3>
|
|
42
|
-
{Utils.renderPositionEvent(this.state.position)}
|
|
43
|
-
<h3>Map</h3>
|
|
44
|
-
<div style={{ height: '300px' }}>
|
|
45
|
-
<SimpleMap ref={map => (this.map = map)} />
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export default GnssWifiComponent;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import Utils from './Utils.js';
|
|
4
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
5
|
-
import {
|
|
6
|
-
Accelerometer, Gyroscope
|
|
7
|
-
} from '../../src/Providers.js';
|
|
8
|
-
|
|
9
|
-
ProvidersLoggerOld.enabled = true;
|
|
10
|
-
|
|
11
|
-
class ImuComponent extends React.Component {
|
|
12
|
-
|
|
13
|
-
constructor(props, context) {
|
|
14
|
-
super(props, context);
|
|
15
|
-
|
|
16
|
-
this.state = {
|
|
17
|
-
acc: null,
|
|
18
|
-
gyr: null
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
componentDidMount() {
|
|
24
|
-
this.accelerometerProviderId = Accelerometer.addEventListener(
|
|
25
|
-
events => this.setState({ acc: events[0] }),
|
|
26
|
-
error => this.setState({ acc: error })
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
this.gyroscopeProviderId = Gyroscope.addEventListener(
|
|
30
|
-
events => this.setState({ gyr: events[0] }),
|
|
31
|
-
error => this.setState({ gyr: error })
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
componentWillUnmount() {
|
|
36
|
-
Accelerometer.removeEventListener(this.accelerometerProviderId);
|
|
37
|
-
Gyroscope.removeEventListener(this.gyroscopeProviderId);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
render() {
|
|
41
|
-
return (
|
|
42
|
-
<div>
|
|
43
|
-
<h3>Acceleration</h3>
|
|
44
|
-
{Utils.renderVector3Event(this.state.acc)}
|
|
45
|
-
<h3>Angular Velocity</h3>
|
|
46
|
-
{Utils.renderVector3Event(this.state.gyr)}
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export default ImuComponent;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import Utils from './Utils.js';
|
|
4
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
5
|
-
import {
|
|
6
|
-
InclinationFromAcc, InclinationFromRelativeAttitude, Inclination
|
|
7
|
-
} from '../../src/Providers.js';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
class InclinationComponent extends React.Component {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
constructor(props, context) {
|
|
14
|
-
super(props, context);
|
|
15
|
-
ProvidersLoggerOld.enabled = false;
|
|
16
|
-
|
|
17
|
-
this.state = {
|
|
18
|
-
inclination: null,
|
|
19
|
-
inclinationFromAcc: null,
|
|
20
|
-
inclinationFromAtt: null
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
componentDidMount() {
|
|
25
|
-
|
|
26
|
-
this.providerAccId = InclinationFromAcc.addEventListener(
|
|
27
|
-
events => this.setState({ inclinationFromAcc: events[0] }),
|
|
28
|
-
error => this.setState({ inclinationFromAcc: error })
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
this.providerAttId = InclinationFromRelativeAttitude.addEventListener(
|
|
32
|
-
events => this.setState({ inclinationFromAtt: events[0] }),
|
|
33
|
-
error => this.setState({ inclinationFromAtt: error })
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
this.providerId = Inclination.addEventListener(
|
|
37
|
-
events => this.setState({ inclination: events[0] }),
|
|
38
|
-
error => this.setState({ inclination: error })
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
componentWillUnmount() {
|
|
44
|
-
InclinationFromAcc.removeEventListener(this.providerAccId);
|
|
45
|
-
InclinationFromRelativeAttitude.removeEventListener(this.providerAttId);
|
|
46
|
-
Inclination.removeEventListener(this.providerId);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
render() {
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<div>
|
|
53
|
-
<h3>Inclination from accelerometer</h3>
|
|
54
|
-
{Utils.renderInclinationEvent(this.state.inclinationFromAcc)}
|
|
55
|
-
<h3>Inclination from relative attitude</h3>
|
|
56
|
-
{Utils.renderInclinationEvent(this.state.inclinationFromAtt)}
|
|
57
|
-
<h3>Inclination</h3>
|
|
58
|
-
{Utils.renderInclinationEvent(this.state.inclination)}
|
|
59
|
-
</div>
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default InclinationComponent;
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import React from 'react'; // eslint-disable-line no-unused-vars
|
|
2
|
-
|
|
3
|
-
import { AbsoluteHeading, UserPosition, Level, Coordinates } from '@wemap/geo';
|
|
4
|
-
import { deg2rad } from '@wemap/maths';
|
|
5
|
-
import { Itinerary } from '@wemap/osm';
|
|
6
|
-
import { TimeUtils } from '@wemap/utils';
|
|
7
|
-
|
|
8
|
-
const datasets = {};
|
|
9
|
-
|
|
10
|
-
// Wemap Office
|
|
11
|
-
const wemapOffice = {
|
|
12
|
-
get initialPosition() {
|
|
13
|
-
return new UserPosition(43.6091955, 3.8841255, 1.5, null, TimeUtils.preciseTime() / 1e3, 0);
|
|
14
|
-
},
|
|
15
|
-
get initialHeading() {
|
|
16
|
-
return new AbsoluteHeading(deg2rad(191.9), TimeUtils.preciseTime() / 1e3, 0);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
wemapOffice.itinerary = Itinerary.fromOrderedPointsArray(
|
|
20
|
-
[
|
|
21
|
-
[wemapOffice.initialPosition.lat, wemapOffice.initialPosition.lng],
|
|
22
|
-
[43.6091883, 3.8841242],
|
|
23
|
-
[43.6091709, 3.8842382],
|
|
24
|
-
[43.6091288, 3.884226],
|
|
25
|
-
[43.6091461, 3.884112]
|
|
26
|
-
],
|
|
27
|
-
[wemapOffice.initialPosition.lat, wemapOffice.initialPosition.lng],
|
|
28
|
-
[43.6091461, 3.884112]
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
// Wemap Office Multi-level
|
|
32
|
-
const wemapOfficeMulti = {
|
|
33
|
-
get initialPosition() {
|
|
34
|
-
return new UserPosition(43.6091965, 3.8841285, 1.5, new Level(2), TimeUtils.preciseTime() / 1e3, 0);
|
|
35
|
-
},
|
|
36
|
-
get initialHeading() {
|
|
37
|
-
return new AbsoluteHeading(deg2rad(191.9), TimeUtils.preciseTime() / 1e3, 0);
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
wemapOfficeMulti.itinerary = Itinerary.fromOrderedPointsArray(
|
|
41
|
-
[
|
|
42
|
-
[43.6091888, 3.8841263, new Level(2)],
|
|
43
|
-
[43.6091749, 3.8842173, new Level(2)],
|
|
44
|
-
[43.6092935, 3.8842518, new Level(2)],
|
|
45
|
-
[43.6093022, 3.8842702, new Level(2)],
|
|
46
|
-
[43.6093123, 3.8842731, new Level(2)],
|
|
47
|
-
[43.6093234, 3.8842009, new Level(2)],
|
|
48
|
-
[43.6093629, 3.8842127, new Level(1, 2)],
|
|
49
|
-
[43.6093597, 3.8842336, new Level(1, 2)],
|
|
50
|
-
[43.6093202, 3.8842218, new Level(1)],
|
|
51
|
-
[43.6093123, 3.8842731, new Level(1)],
|
|
52
|
-
[43.6092681, 3.8842604, new Level(1)]
|
|
53
|
-
],
|
|
54
|
-
[wemapOfficeMulti.initialPosition.lat, wemapOffice.initialPosition.lng, wemapOfficeMulti.initialPosition.level],
|
|
55
|
-
[43.6092602, 3.8842669, new Level(1)]
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
// Gare de Lyon RER A
|
|
59
|
-
const gareDeLyonRerA = {
|
|
60
|
-
get initialPosition() {
|
|
61
|
-
return new UserPosition(48.8442365, 2.3728267, 1.5, new Level(-2), TimeUtils.preciseTime() / 1e3, 0);
|
|
62
|
-
},
|
|
63
|
-
get initialHeading() {
|
|
64
|
-
return new AbsoluteHeading(deg2rad(41.6), TimeUtils.preciseTime() / 1e3, 0);
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
gareDeLyonRerA.itinerary = Itinerary.fromOrderedPointsArray(
|
|
68
|
-
[
|
|
69
|
-
[48.8442368, 2.3728274, new Level(-2)],
|
|
70
|
-
[48.8442378, 2.3728257, new Level(-2)],
|
|
71
|
-
[48.8443732, 2.3726023, new Level(-1)],
|
|
72
|
-
[48.8443864, 2.3726195, new Level(-1)],
|
|
73
|
-
[48.8444032, 2.3726407, new Level(-1)]
|
|
74
|
-
],
|
|
75
|
-
[gareDeLyonRerA.initialPosition.lat, gareDeLyonRerA.initialPosition.lng, gareDeLyonRerA.initialPosition.level],
|
|
76
|
-
[48.8444315, 2.3726809, new Level(-1)]
|
|
77
|
-
);
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
datasets['wemap-office'] = wemapOffice;
|
|
81
|
-
datasets['wemap-office-multi'] = wemapOfficeMulti;
|
|
82
|
-
datasets['gare-de-lyon-rer-a'] = gareDeLyonRerA;
|
|
83
|
-
|
|
84
|
-
class NavigationConfig {
|
|
85
|
-
|
|
86
|
-
static dataset = wemapOffice;
|
|
87
|
-
|
|
88
|
-
static load(datasetName) {
|
|
89
|
-
const dataset = datasets[datasetName];
|
|
90
|
-
if (!dataset) {
|
|
91
|
-
throw new Error('Unknown ' + datasetName);
|
|
92
|
-
}
|
|
93
|
-
this.dataset = dataset;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
/** @type {Coordinates} */
|
|
97
|
-
static get INITIAL_POSITION() {
|
|
98
|
-
return this.dataset.initialPosition;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/** @type {AbsoluteHeading} */
|
|
102
|
-
static get INITIAL_HEADING() {
|
|
103
|
-
return this.dataset.initialHeading;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/** @type {Itinerary} */
|
|
107
|
-
static get ITINERARY() {
|
|
108
|
-
return this.dataset.itinerary;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
export default NavigationConfig;
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import Utils from './Utils.js';
|
|
4
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
5
|
-
import {
|
|
6
|
-
RelativeAttitudeFromBrowser, RelativeAttitudeFromEkf, RelativeAttitude
|
|
7
|
-
} from '../../src/Providers.js';
|
|
8
|
-
|
|
9
|
-
ProvidersLoggerOld.enabled = true;
|
|
10
|
-
|
|
11
|
-
class RelativeAttitudeComponent extends React.Component {
|
|
12
|
-
|
|
13
|
-
constructor(props, context) {
|
|
14
|
-
super(props, context);
|
|
15
|
-
|
|
16
|
-
this.state = {
|
|
17
|
-
attitude: null,
|
|
18
|
-
attitudeFromBrowser: null,
|
|
19
|
-
attitudeFromEkf: null,
|
|
20
|
-
deviceorientation: null
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
componentDidMount() {
|
|
25
|
-
|
|
26
|
-
this.providerFromBrowserId = RelativeAttitudeFromBrowser.addEventListener(
|
|
27
|
-
events => this.setState({ attitudeFromBrowser: events[0] }),
|
|
28
|
-
error => this.setState({ attitudeFromBrowser: error })
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
this.providerFromEkfId = RelativeAttitudeFromEkf.addEventListener(
|
|
32
|
-
events => this.setState({ attitudeFromEkf: events[0] }),
|
|
33
|
-
error => this.setState({ attitudeFromEkf: error })
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
this.providerId = RelativeAttitude.addEventListener(
|
|
37
|
-
events => this.setState({ attitude: events[0] }),
|
|
38
|
-
error => this.setState({ attitude: error })
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
window.addEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
componentWillUnmount() {
|
|
45
|
-
RelativeAttitudeFromBrowser.removeEventListener(this.providerFromBrowserId);
|
|
46
|
-
RelativeAttitudeFromEkf.removeEventListener(this.providerFromEkfId);
|
|
47
|
-
RelativeAttitude.removeEventListener(this.providerId);
|
|
48
|
-
window.removeEventListener('deviceorientation', this.onDeviceOrientationEventListener, true);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
onDeviceOrientationEventListener = (e) => this.setState({ deviceorientation: e });
|
|
52
|
-
|
|
53
|
-
render() {
|
|
54
|
-
|
|
55
|
-
let rawRender = <span>Not available</span>;
|
|
56
|
-
|
|
57
|
-
if (this.state.deviceorientation) {
|
|
58
|
-
const alpha = this.state.deviceorientation.alpha;
|
|
59
|
-
const beta = this.state.deviceorientation.beta;
|
|
60
|
-
const gamma = this.state.deviceorientation.gamma;
|
|
61
|
-
|
|
62
|
-
if (typeof alpha === 'number' && typeof beta === 'number' && typeof gamma === 'number') {
|
|
63
|
-
rawRender = <pre>alpha: {alpha.toFixed(2)}, <br />
|
|
64
|
-
beta: {beta.toFixed(2)}, <br />
|
|
65
|
-
gamma: {gamma.toFixed(2)}</pre>;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
return (
|
|
70
|
-
<div>
|
|
71
|
-
<h3>Raw:</h3>
|
|
72
|
-
{rawRender}
|
|
73
|
-
<h3>Relative Attitude From Browser</h3>
|
|
74
|
-
{Utils.renderAttitudeEvent(this.state.attitudeFromBrowser)}
|
|
75
|
-
<h3>Relative Attitude From Ekf</h3>
|
|
76
|
-
{Utils.renderAttitudeEvent(this.state.attitudeFromEkf)}
|
|
77
|
-
<h3>Relative Attitude</h3>
|
|
78
|
-
{Utils.renderAttitudeEvent(this.state.attitude)}
|
|
79
|
-
</div>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export default RelativeAttitudeComponent;
|
|
85
|
-
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
|
|
4
|
-
class StartStopComponent extends React.Component {
|
|
5
|
-
|
|
6
|
-
static propTypes = {
|
|
7
|
-
onStart: PropTypes.func.isRequired,
|
|
8
|
-
onStop: PropTypes.func.isRequired,
|
|
9
|
-
errored: PropTypes.bool
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
static defaultProps = { errored: false };
|
|
13
|
-
|
|
14
|
-
constructor(props, context) {
|
|
15
|
-
super(props, context);
|
|
16
|
-
this.state = { started: false };
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
start() {
|
|
20
|
-
this.setState({started: true});
|
|
21
|
-
this.props.onStart();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
stop() {
|
|
25
|
-
this.setState({started: false});
|
|
26
|
-
this.props.onStop();
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
render() {
|
|
30
|
-
return (
|
|
31
|
-
<span>
|
|
32
|
-
<button onClick={() => this.start()}
|
|
33
|
-
disabled={(this.state.started && !this.props.errored)}>
|
|
34
|
-
Start
|
|
35
|
-
</button>
|
|
36
|
-
<button onClick={() => this.stop()}
|
|
37
|
-
disabled={!(this.state.started && !this.props.errored)}>
|
|
38
|
-
Stop
|
|
39
|
-
</button>
|
|
40
|
-
</span>
|
|
41
|
-
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export default StartStopComponent;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import Utils from './Utils.js';
|
|
4
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
5
|
-
import { StepDetector } from '../../src/Providers.js';
|
|
6
|
-
|
|
7
|
-
ProvidersLoggerOld.enabled = true;
|
|
8
|
-
|
|
9
|
-
class StepDetectionComponent extends React.Component {
|
|
10
|
-
|
|
11
|
-
constructor(props, context) {
|
|
12
|
-
super(props, context);
|
|
13
|
-
|
|
14
|
-
this.state = { stepDetected: null };
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
componentDidMount() {
|
|
18
|
-
this.providerId = StepDetector.addEventListener(
|
|
19
|
-
events => this.setState({ stepDetected: events[0] }),
|
|
20
|
-
error => this.setState({ stepDetected: error })
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
componentWillUnmount() {
|
|
25
|
-
StepDetector.removeEventListener(this.providerId);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
render() {
|
|
29
|
-
return (
|
|
30
|
-
<div>
|
|
31
|
-
<h3>Step detected</h3>
|
|
32
|
-
{Utils.renderStepEvent(this.state.stepDetected)}
|
|
33
|
-
</div>
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export default StepDetectionComponent;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import Utils from './Utils.js';
|
|
4
|
-
import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
|
|
5
|
-
import { TurnDetector, HighRotationsDetector } from '../../src/Providers.js';
|
|
6
|
-
|
|
7
|
-
ProvidersLoggerOld.enabled = true;
|
|
8
|
-
|
|
9
|
-
class TurnDetectionComponent extends React.Component {
|
|
10
|
-
|
|
11
|
-
constructor(props) {
|
|
12
|
-
super(props);
|
|
13
|
-
|
|
14
|
-
this.state = { turnDetected: 0, highRotationsDetected: 0 };
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
componentDidMount() {
|
|
18
|
-
this.turnDetectorId = TurnDetector.addEventListener(
|
|
19
|
-
() => this.setState(({ turnDetected }) => ({ turnDetected: turnDetected + 1 })),
|
|
20
|
-
error => this.setState({ turnDetected: error })
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
this.highRotationsDetectorId = HighRotationsDetector.addEventListener(
|
|
24
|
-
() => this.setState(({ highRotationsDetected }) => ({ highRotationsDetected: highRotationsDetected + 1 })),
|
|
25
|
-
error => this.setState({ highRotationsDetected: error })
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
componentWillUnmount() {
|
|
30
|
-
TurnDetector.removeEventListener(this.turnDetectorId);
|
|
31
|
-
HighRotationsDetector.removeEventListener(this.highRotationsDetectorId);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
render() {
|
|
35
|
-
return (
|
|
36
|
-
<div>
|
|
37
|
-
<h3>Turn detected</h3>
|
|
38
|
-
{Utils.renderTurnEvent(this.state.turnDetected)}
|
|
39
|
-
<h3>High rotation detected</h3>
|
|
40
|
-
{Utils.renderTurnEvent(this.state.highRotationsDetected)}
|
|
41
|
-
</div>
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export default TurnDetectionComponent;
|
package/debug/src/Utils.js
DELETED
|
@@ -1,230 +0,0 @@
|
|
|
1
|
-
import React from 'react'; // eslint-disable-line no-unused-vars
|
|
2
|
-
|
|
3
|
-
import { ItineraryInfo } from '@wemap/geo';
|
|
4
|
-
import { rad2deg } from '@wemap/maths';
|
|
5
|
-
import { OsrmUtils } from '@wemap/osm';
|
|
6
|
-
|
|
7
|
-
import ProviderEvent from '../../src/events/ProviderEvent.js';
|
|
8
|
-
|
|
9
|
-
const NOT_AVAILABLE_STR = 'Not available';
|
|
10
|
-
|
|
11
|
-
class Utils {
|
|
12
|
-
|
|
13
|
-
static NOT_AVAILABLE_STR = NOT_AVAILABLE_STR;
|
|
14
|
-
|
|
15
|
-
static renderAttitudeEvent(event) {
|
|
16
|
-
|
|
17
|
-
if (!event) {
|
|
18
|
-
return <p>Waiting</p>;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
if (event instanceof Error) {
|
|
22
|
-
return Utils.renderError(event);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const attitude = event instanceof ProviderEvent ? event.data : event;
|
|
27
|
-
const quaternion = attitude.quaternion;
|
|
28
|
-
|
|
29
|
-
const w = quaternion[0].toFixed(3);
|
|
30
|
-
const x = quaternion[1].toFixed(3);
|
|
31
|
-
const y = quaternion[2].toFixed(3);
|
|
32
|
-
const z = quaternion[3].toFixed(3);
|
|
33
|
-
|
|
34
|
-
const euler = attitude.eulerAnglesDegrees;
|
|
35
|
-
const yaw = euler[0].toFixed(2);
|
|
36
|
-
const pitch = euler[1].toFixed(2);
|
|
37
|
-
const roll = euler[2].toFixed(2);
|
|
38
|
-
const heading = attitude.headingDegrees.toFixed(2);
|
|
39
|
-
|
|
40
|
-
const accuracyString = attitude.accuracy !== null ? rad2deg(attitude.accuracy).toFixed(1) : '';
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<div>
|
|
44
|
-
<pre>
|
|
45
|
-
Quat: [{w}, {x}, {y}, {z}]<br />
|
|
46
|
-
Eulers: [{yaw}, {pitch}, {roll}]<br />
|
|
47
|
-
Heading: {heading}<br />
|
|
48
|
-
Time: {attitude.time.toFixed(2)}<br />
|
|
49
|
-
Accuracy: {accuracyString}
|
|
50
|
-
</pre>
|
|
51
|
-
{(event instanceof ProviderEvent) ? Utils.renderFromStack(event) : ''}
|
|
52
|
-
</div>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
static renderVector3Event(event) {
|
|
57
|
-
|
|
58
|
-
if (!event) {
|
|
59
|
-
return <p>Waiting</p>;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
if (event instanceof Error) {
|
|
63
|
-
return Utils.renderError(event);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const { values } = event.data;
|
|
67
|
-
return (
|
|
68
|
-
<div>
|
|
69
|
-
<pre>
|
|
70
|
-
[
|
|
71
|
-
{values[0].toFixed(2).padStart(6, ' ')},
|
|
72
|
-
{values[1].toFixed(2).padStart(6, ' ')},
|
|
73
|
-
{values[2].toFixed(2).padStart(6, ' ')}
|
|
74
|
-
]
|
|
75
|
-
</pre>
|
|
76
|
-
{Utils.renderFromStack(event)}
|
|
77
|
-
</div>
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
static renderPositionEvent(event) {
|
|
82
|
-
|
|
83
|
-
if (!event) {
|
|
84
|
-
return <p>Waiting</p>;
|
|
85
|
-
}
|
|
86
|
-
if (event instanceof Error) {
|
|
87
|
-
return Utils.renderError(event);
|
|
88
|
-
}
|
|
89
|
-
const position = event instanceof ProviderEvent ? event.data : event;
|
|
90
|
-
return (
|
|
91
|
-
<div>
|
|
92
|
-
<pre>
|
|
93
|
-
Latitude: {position.lat.toFixed(7)}<br />
|
|
94
|
-
Longitude: {position.lng.toFixed(7)}<br />
|
|
95
|
-
Altitude: {position.alt ? position.alt.toFixed(2) : NOT_AVAILABLE_STR}<br />
|
|
96
|
-
Level: {position.level ? position.level.toString() : NOT_AVAILABLE_STR}<br />
|
|
97
|
-
Bearing: {position.bearing !== null ? rad2deg(position.bearing).toFixed(2) : NOT_AVAILABLE_STR}<br />
|
|
98
|
-
Accuracy: {position.accuracy.toFixed(2)}<br />
|
|
99
|
-
Time: {position.time.toFixed(2)}
|
|
100
|
-
</pre>
|
|
101
|
-
{(event instanceof ProviderEvent) ? Utils.renderFromStack(event) : ''}
|
|
102
|
-
</div>
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
static renderRelativePosition(position) {
|
|
108
|
-
|
|
109
|
-
if (!position) {
|
|
110
|
-
return <p>Waiting</p>;
|
|
111
|
-
}
|
|
112
|
-
if (position instanceof Error) {
|
|
113
|
-
return Utils.renderError(position);
|
|
114
|
-
}
|
|
115
|
-
return (
|
|
116
|
-
<pre>
|
|
117
|
-
x: {position[0].toFixed(2)}<br />
|
|
118
|
-
y: {position[1].toFixed(2)}<br />
|
|
119
|
-
z: {position[2].toFixed(2)}
|
|
120
|
-
</pre>
|
|
121
|
-
);
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* @param {ItineraryInfo} info
|
|
127
|
-
*/
|
|
128
|
-
static renderItineraryInfo(info) {
|
|
129
|
-
|
|
130
|
-
if (!info) {
|
|
131
|
-
return <p>Waiting</p>;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
const step = info.nextStep;
|
|
135
|
-
let nextStepStr = '[' + step.number + '] ';
|
|
136
|
-
if (step.firstStep) {
|
|
137
|
-
nextStepStr += 'Depart';
|
|
138
|
-
} else if (step.lastStep) {
|
|
139
|
-
nextStepStr += 'Arrive';
|
|
140
|
-
} else {
|
|
141
|
-
nextStepStr += 'Turn '
|
|
142
|
-
+ OsrmUtils.getModifierFromAngle(step.angle);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
return (
|
|
147
|
-
<pre>
|
|
148
|
-
projection: {info.projection.nearestElement.constructor.name}<br />
|
|
149
|
-
distanceOfProjection: {info.projection.distanceFromNearestElement.toFixed(1)}m<br />
|
|
150
|
-
traveledDistance: {info.traveledDistance.toFixed(1)}m ({(info.traveledPercentage * 100).toFixed(1)}%)<br />
|
|
151
|
-
remainingDistance: {info.remainingDistance.toFixed(1)}m ({(info.remainingPercentage * 100).toFixed(1)}%)<br />
|
|
152
|
-
nextStep: {nextStepStr}
|
|
153
|
-
</pre>
|
|
154
|
-
);
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
static renderInclinationEvent(event) {
|
|
159
|
-
if (event === null) {
|
|
160
|
-
return 'Waiting';
|
|
161
|
-
}
|
|
162
|
-
if (event instanceof Error) {
|
|
163
|
-
return Utils.renderError(event);
|
|
164
|
-
}
|
|
165
|
-
return (
|
|
166
|
-
<div>
|
|
167
|
-
<pre>
|
|
168
|
-
Inclination: {rad2deg(event.data).toFixed(2)} deg
|
|
169
|
-
</pre>
|
|
170
|
-
{Utils.renderFromStack(event)}
|
|
171
|
-
</div>
|
|
172
|
-
);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* @param {ProviderEvent} stepEvent
|
|
177
|
-
*/
|
|
178
|
-
static renderStepEvent(event) {
|
|
179
|
-
if (event === null) {
|
|
180
|
-
return 'Waiting';
|
|
181
|
-
}
|
|
182
|
-
if (event instanceof Error) {
|
|
183
|
-
return Utils.renderError(event);
|
|
184
|
-
}
|
|
185
|
-
return (
|
|
186
|
-
<div>
|
|
187
|
-
<pre style={{ margin: 0 }}>
|
|
188
|
-
Number: {event.data.number}<br />
|
|
189
|
-
Size: {event.data.size.toFixed(2)}m
|
|
190
|
-
</pre>
|
|
191
|
-
{Utils.renderFromStack(event)}
|
|
192
|
-
</div>
|
|
193
|
-
);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* @param {number|Error} event
|
|
198
|
-
*/
|
|
199
|
-
static renderTurnEvent(event) {
|
|
200
|
-
if (event === null) {
|
|
201
|
-
return 'Waiting';
|
|
202
|
-
}
|
|
203
|
-
if (event instanceof Error) {
|
|
204
|
-
return Utils.renderError(event);
|
|
205
|
-
}
|
|
206
|
-
return (
|
|
207
|
-
<div>
|
|
208
|
-
<pre style={{ margin: 0 }}>
|
|
209
|
-
Number: {event}
|
|
210
|
-
</pre>
|
|
211
|
-
{/* {Utils.renderFromStack(event)} */}
|
|
212
|
-
</div>
|
|
213
|
-
);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
static renderError(error) {
|
|
217
|
-
return (<div style={{ maxWidth: '180px' }}><strong>[{error.constructor.name}]</strong><br />{error.message}</div>);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
static renderFromStack({providersStack}) {
|
|
221
|
-
return <pre style={{
|
|
222
|
-
margin: 0,
|
|
223
|
-
fontSize: 'small'
|
|
224
|
-
}}>
|
|
225
|
-
Providers Stack: {providersStack.join(', ')}
|
|
226
|
-
</pre>;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
export default Utils;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Map } from 'mapbox-gl';
|
|
3
|
-
|
|
4
|
-
import { GeolocationLayer } from '@wemap/map';
|
|
5
|
-
|
|
6
|
-
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
7
|
-
|
|
8
|
-
const accessToken
|
|
9
|
-
= 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
|
|
10
|
-
|
|
11
|
-
class SimpleMap extends React.Component {
|
|
12
|
-
|
|
13
|
-
componentDidMount() {
|
|
14
|
-
this.map = new Map({
|
|
15
|
-
accessToken,
|
|
16
|
-
container: this.mapContainer,
|
|
17
|
-
style: 'mapbox://styles/mapbox/streets-v10'
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
this.map.on('load', () => {
|
|
21
|
-
this.map.geolocationLayer = new GeolocationLayer(this.map);
|
|
22
|
-
this.map.addControl(this.map.geolocationLayer.control);
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
componentWillUnmount() {
|
|
27
|
-
this.map.remove();
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
updatePosition(position) {
|
|
31
|
-
if (this.map && this.map.geolocationLayer) {
|
|
32
|
-
this.map.geolocationLayer.updatePosition(position);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
render() {
|
|
37
|
-
return (
|
|
38
|
-
<div ref={map => (this.mapContainer = map)}
|
|
39
|
-
style={{
|
|
40
|
-
width: '100%',
|
|
41
|
-
height: '100%'
|
|
42
|
-
}} />
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export default SimpleMap;
|