@glandais/vcyclist-elevation-wasm 0.0.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/demo.css +596 -0
- package/demo.js +613 -0
- package/index.html +194 -0
- package/package.json +19 -0
- package/sample.gpx +2 -0
- package/vcyclist-elevation.d.mts +92 -0
- package/vcyclist-elevation.import-object.mjs +209 -0
- package/vcyclist-elevation.js-builtins.mjs +33 -0
- package/vcyclist-elevation.mjs +82 -0
- package/vcyclist-elevation.wasm +0 -0
- package/vcyclist-elevation.wasm.map +1 -0
package/index.html
ADDED
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>vcyclist :elevation β WASM demo</title>
|
|
7
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
8
|
+
<link rel="stylesheet" href="demo.css" />
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div class="app-container">
|
|
13
|
+
<div class="header">
|
|
14
|
+
<h1>vcyclist :elevation β WASM demo</h1>
|
|
15
|
+
<div class="info">
|
|
16
|
+
Kotlin/Wasm port of @glandais/elevation, exercised through the same UI as the
|
|
17
|
+
original TypeScript demo.
|
|
18
|
+
<a href="https://github.com/glandais/vcyclist" target="_blank" rel="noopener"
|
|
19
|
+
>π View on GitHub</a
|
|
20
|
+
>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div class="controls-panel">
|
|
25
|
+
<div class="controls-row">
|
|
26
|
+
<div class="section">
|
|
27
|
+
<strong>π Tools</strong>
|
|
28
|
+
<div class="button-group">
|
|
29
|
+
<button id="point-mode" class="primary">π Point</button>
|
|
30
|
+
<button id="path-mode" class="secondary">π€οΈ Path</button>
|
|
31
|
+
<button id="clear-path" class="danger" disabled>ποΈ Clear</button>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="button-group">
|
|
34
|
+
<input
|
|
35
|
+
type="file"
|
|
36
|
+
id="gpx-file-input"
|
|
37
|
+
accept=".gpx"
|
|
38
|
+
style="display: none"
|
|
39
|
+
/>
|
|
40
|
+
<button id="gpx-upload-btn" class="secondary">π Load GPX</button>
|
|
41
|
+
<button id="load-sample-btn" class="secondary">π Example GPX</button>
|
|
42
|
+
</div>
|
|
43
|
+
<div id="gpx-status" class="gpx-status"></div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="section">
|
|
47
|
+
<strong>ποΈ Relief</strong>
|
|
48
|
+
<div class="button-group">
|
|
49
|
+
<button id="relief-off" class="primary">Off</button>
|
|
50
|
+
<button id="relief-hillshade" class="secondary">Hillshade</button>
|
|
51
|
+
<button id="relief-slope" class="secondary">Slope</button>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="section">
|
|
56
|
+
<strong>π Smoothing</strong>
|
|
57
|
+
<div class="control-line">
|
|
58
|
+
<input type="checkbox" id="enable-smoothing" checked />
|
|
59
|
+
<label for="enable-smoothing">Enable</label>
|
|
60
|
+
<label for="smoothing-window-slider">Window:</label>
|
|
61
|
+
<input
|
|
62
|
+
type="range"
|
|
63
|
+
id="smoothing-window-slider"
|
|
64
|
+
min="10"
|
|
65
|
+
max="200"
|
|
66
|
+
value="150"
|
|
67
|
+
step="10"
|
|
68
|
+
/>
|
|
69
|
+
<input
|
|
70
|
+
type="number"
|
|
71
|
+
id="smoothing-window-input"
|
|
72
|
+
min="10"
|
|
73
|
+
max="200"
|
|
74
|
+
value="150"
|
|
75
|
+
step="10"
|
|
76
|
+
/>m
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="section">
|
|
81
|
+
<strong>π§ Filtering</strong>
|
|
82
|
+
<div class="control-line">
|
|
83
|
+
<input type="checkbox" id="enable-filtering" checked />
|
|
84
|
+
<label for="enable-filtering">Enable</label>
|
|
85
|
+
<label for="tolerance-slider">Tolerance:</label>
|
|
86
|
+
<input
|
|
87
|
+
type="range"
|
|
88
|
+
id="tolerance-slider"
|
|
89
|
+
min="1"
|
|
90
|
+
max="100"
|
|
91
|
+
value="10"
|
|
92
|
+
step="1"
|
|
93
|
+
/>
|
|
94
|
+
<input
|
|
95
|
+
type="number"
|
|
96
|
+
id="tolerance-input"
|
|
97
|
+
min="1"
|
|
98
|
+
max="100"
|
|
99
|
+
value="10"
|
|
100
|
+
step="1"
|
|
101
|
+
/>m
|
|
102
|
+
</div>
|
|
103
|
+
<div class="control-line">
|
|
104
|
+
<label for="z-exaggeration-slider">Z Exaggeration:</label>
|
|
105
|
+
<input
|
|
106
|
+
type="range"
|
|
107
|
+
id="z-exaggeration-slider"
|
|
108
|
+
min="1"
|
|
109
|
+
max="10"
|
|
110
|
+
value="3"
|
|
111
|
+
step="0.5"
|
|
112
|
+
/>
|
|
113
|
+
<input
|
|
114
|
+
type="number"
|
|
115
|
+
id="z-exaggeration-input"
|
|
116
|
+
min="1"
|
|
117
|
+
max="10"
|
|
118
|
+
value="3"
|
|
119
|
+
step="0.5"
|
|
120
|
+
/>x
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="mode-info" id="mode-info">Click anywhere to get elevation</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="map-container">
|
|
128
|
+
<div id="map"></div>
|
|
129
|
+
<div class="status-bar">
|
|
130
|
+
<div id="elevation-display" class="elevation-display">
|
|
131
|
+
Loading WASM moduleβ¦
|
|
132
|
+
</div>
|
|
133
|
+
<div id="coordinates" class="coordinates">Coordinates will appear here</div>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="chart-panel">
|
|
138
|
+
<div id="chart-container">
|
|
139
|
+
<h3>π Elevation Profile</h3>
|
|
140
|
+
<canvas id="elevation-chart"></canvas>
|
|
141
|
+
<div class="chart-info">
|
|
142
|
+
<div class="stats" id="elevation-stats"></div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
149
|
+
<script src="https://unpkg.com/gpxparser@3.0.8/dist/gpxparser.min.js"></script>
|
|
150
|
+
<script src="https://cdn.jsdelivr.net/npm/leaflet-relief@latest/dist/leaflet-relief.min.js"></script>
|
|
151
|
+
|
|
152
|
+
<!--
|
|
153
|
+
Kotlin/Wasm output: webpack UMD bundle that exposes `globalThis.elevation` as a
|
|
154
|
+
Promise resolving to the module exports (async because of WebAssembly instantiation).
|
|
155
|
+
Once it resolves we expose the façade as `window.Elevation.ElevationProvider` and
|
|
156
|
+
then load demo.js, which uses that namespace exactly like the original TS demo.
|
|
157
|
+
-->
|
|
158
|
+
<script src="./elevation.js"></script>
|
|
159
|
+
<script>
|
|
160
|
+
// Kotlin/Wasm 2.3 only allows @JsExport on top-level functions, so the bundle exposes
|
|
161
|
+
// free functions taking an opaque provider handle (created via newElevationProvider).
|
|
162
|
+
// This shim wraps them in an `ElevationProvider` class so demo.js can keep the same
|
|
163
|
+
// call sites as the original TS demo (`new ElevationProvider()`, `provider.getElevation`).
|
|
164
|
+
(async () => {
|
|
165
|
+
try {
|
|
166
|
+
const lib = await globalThis.elevation;
|
|
167
|
+
|
|
168
|
+
class ElevationProvider {
|
|
169
|
+
constructor(config) {
|
|
170
|
+
this._h = lib.newElevationProvider(config);
|
|
171
|
+
}
|
|
172
|
+
getElevation(latitude, longitude, interpolation = true) {
|
|
173
|
+
return lib.getElevation(this._h, latitude, longitude, interpolation);
|
|
174
|
+
}
|
|
175
|
+
getElevationsAlong(path, options) {
|
|
176
|
+
return lib.getElevationsAlong(this._h, path, options);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
window.Elevation = { ElevationProvider };
|
|
181
|
+
|
|
182
|
+
const s = document.createElement('script');
|
|
183
|
+
s.src = './demo.js';
|
|
184
|
+
document.body.appendChild(s);
|
|
185
|
+
} catch (err) {
|
|
186
|
+
document.getElementById('elevation-display').textContent =
|
|
187
|
+
'Failed to load WASM module: ' + err;
|
|
188
|
+
document.getElementById('elevation-display').className =
|
|
189
|
+
'elevation-display error';
|
|
190
|
+
}
|
|
191
|
+
})();
|
|
192
|
+
</script>
|
|
193
|
+
</body>
|
|
194
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@glandais/vcyclist-elevation-wasm",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"main": "vcyclist-elevation.mjs",
|
|
5
|
+
"types": "vcyclist-elevation.d.mts",
|
|
6
|
+
"devDependencies": {},
|
|
7
|
+
"dependencies": {},
|
|
8
|
+
"peerDependencies": {},
|
|
9
|
+
"optionalDependencies": {},
|
|
10
|
+
"bundledDependencies": [],
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"license": "Apache-2.0",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/glandais/vcyclist.git"
|
|
18
|
+
}
|
|
19
|
+
}
|