2022-11-07 13:03:15 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<p>Please select a gpx file to be converted to gpc and loaded.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<input type="file" is="gpx_file" id="fileInput" accept=".gpx">
|
|
|
|
|
|
2022-11-09 07:45:44 +00:00
|
|
|
<div id="status"></div>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
2022-11-07 20:42:31 +00:00
|
|
|
<script src="../../core/lib/interface.js"></script>
|
2022-11-08 08:06:58 +00:00
|
|
|
<script>
|
|
|
|
|
function onInit() {
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2022-11-07 13:03:15 +00:00
|
|
|
|
|
|
|
|
<script type="module">
|
2022-11-08 17:00:19 +00:00
|
|
|
|
2022-11-08 17:15:04 +00:00
|
|
|
|
2022-11-09 07:45:44 +00:00
|
|
|
import init, { convert_gpx_strings, get_gpc, get_svg } from "./pkg/gpconv.js";
|
2022-11-08 17:07:45 +00:00
|
|
|
console.log("imported wasm");
|
|
|
|
|
document
|
|
|
|
|
.getElementById("fileInput")
|
|
|
|
|
.addEventListener("change", function selectedFileChanged() {
|
|
|
|
|
if (this.files.length === 0) {
|
|
|
|
|
console.log("No file selected.");
|
|
|
|
|
return;
|
|
|
|
|
}
|
2022-11-09 07:45:44 +00:00
|
|
|
let status = document.getElementById("status");
|
|
|
|
|
status.innerHTML = "reading file";
|
2022-11-08 17:00:19 +00:00
|
|
|
|
2022-11-08 17:07:45 +00:00
|
|
|
let gpx_filename = this.files[0].name;
|
|
|
|
|
let gpc_filename = gpx_filename.slice(0, gpx_filename.length - 4) + ".gpc";
|
|
|
|
|
while (gpc_filename.length > 28) {
|
|
|
|
|
let new_name = prompt(
|
|
|
|
|
"enter a shorter destination filename than '" +
|
|
|
|
|
gpc_filename +
|
|
|
|
|
"' (28 chars max)",
|
|
|
|
|
gpc_filename
|
|
|
|
|
);
|
|
|
|
|
if (new_name != null && new_name.slice(new_name.length - 4) == ".gpc") {
|
|
|
|
|
gpc_filename = new_name;
|
|
|
|
|
} else {
|
2022-11-07 13:03:15 +00:00
|
|
|
return;
|
|
|
|
|
}
|
2022-11-08 17:07:45 +00:00
|
|
|
}
|
2022-11-07 13:03:15 +00:00
|
|
|
|
2022-11-08 17:07:45 +00:00
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = function fileReadCompleted() {
|
|
|
|
|
console.log("reading file completed");
|
2022-11-07 13:03:15 +00:00
|
|
|
|
2022-11-08 17:07:45 +00:00
|
|
|
init().then(() => {
|
2022-11-09 07:45:44 +00:00
|
|
|
status.innerHTML = "converting file";
|
|
|
|
|
let gpc_svg = convert_gpx_strings(reader.result);
|
|
|
|
|
gpc_svg.then(gs => {
|
|
|
|
|
console.log(gs);
|
|
|
|
|
let gpc_file = get_gpc(gs);
|
|
|
|
|
let gpc_string = String.fromCharCode.apply(String, gpc_file);
|
|
|
|
|
;
|
2022-11-07 13:03:15 +00:00
|
|
|
|
2022-11-09 07:45:44 +00:00
|
|
|
status.innerHTML = "uploading file";
|
|
|
|
|
console.log("uploading");
|
|
|
|
|
Util.writeStorage(gpc_filename, gpc_string, () => {
|
|
|
|
|
status.innerHTML = `${gpc_filename} uploaded`;
|
|
|
|
|
console.log("DONE");
|
|
|
|
|
});
|
|
|
|
|
let svg = get_svg(gs);
|
|
|
|
|
let svg_string = String.fromCharCode.apply(String, svg);
|
|
|
|
|
let img = document.getElementById("map");
|
|
|
|
|
img.innerHTML = svg_string;
|
|
|
|
|
});
|
2022-11-08 17:07:45 +00:00
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
reader.readAsText(this.files[0]);
|
|
|
|
|
});
|
2022-11-07 13:03:15 +00:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
