-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (125 loc) · 4.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./lib/leaflet.css"/>
<style>
.obj { filter: hue-rotate(150deg) }
article { width: fit-content }
canvas {
background-repeat: no-repeat;
background-size: contain;
}
output {
display: block;
border: inset;
min-height: 1em;
background-color: #eee;
}
</style>
</head>
<body>
<header>
<h1>Micro3D - Main App</h1>
<p>Visit <a href="./index.html">The Main App</a> for testing capture datasets.</p>
<p>Visit <a href="./testing.html">The Testing App</a> for creating test datasets.</p>
</header>
<main>
<article id="upload">
<fieldset>
<legend>Upload Image to Extract Data</legend>
<input type="file" accept="image/*"/>
<pre><output></output></pre>
</fieldset>
</article>
<article id="input">
<fieldset>
<legend>Input Micro3D Capture JSON File</legend>
<textarea></textarea><br/>
<button>Compute</button>
</fieldset>
</article>
<article id="bboxes">
<fieldset>
<legend>Preview Bboxes</legend>
</fieldset>
</article>
<article>
<fieldset>
<legend>Correlation Results</legend>
<div id="preview" style="width:600px;height:400px;"></div>
<pre><output id="correlationOutput"></output></pre>
</fieldset>
</article>
</main>
<footer>
<h2>Setup</h2>
<p>
To run the program, you will need any HTTP web server (HTTPS not required, except for old experiments in 'experiment/' subfolder).
</p>
<p>
Source code for the project can be found at <a href="https://github.com/sunsetkookaburra/41079-micro3d">https://github.com/sunsetkookaburra/41079-micro3d</a>
</p>
<h2>Licences</h2>
<ul>
<li><a href="https://raw.githubusercontent.com/Leaflet/Leaflet/main/LICENSE">Leaflet (BSD 2-Clause)</a></li>
<li><a href="https://raw.githubusercontent.com/geographiclib/geographiclib-js/main/LICENSE.txt">GeographicLib JS (MIT)</a></li>
<li><a href="https://raw.githubusercontent.com/mattiasw/ExifReader/main/LICENSE">ExifReader (MPLv2.0)</a></li>
</ul>
</footer>
<script type="module">
import * as L from "./lib/leaflet-src.esm.js";
import { bboxToSvg } from "./src/bbox.mjs";
import { CaptureRig } from "./src/rig.mjs";
import { correlate } from "./src/correlate.mjs";
import { extractEXIF } from "./src/exif.mjs";
const map = L.map("preview")
.setView([0, 0], 1)
.addLayer(L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{ maxNativeZoom: 19, maxZoom: 21 },
));
const markers = L.featureGroup().addTo(map);
const fileUploadInput = document.querySelector(`#upload input[type="file"]`);
fileUploadInput.value = "";
fileUploadInput.addEventListener("input", async () => {
const data = URL.createObjectURL(fileUploadInput.files[0]);
const exif = await fetch(data).then(r => r.arrayBuffer()).then(buf => extractEXIF(buf));
document.querySelector("#upload output").innerText = JSON.stringify(exif, null, 2);
});
const captureInputArea = document.querySelector("#input textarea");
captureInputArea.value = "";
captureInputArea.addEventListener("change", () => {
const capture = JSON.parse(captureInputArea.value);
const bboxParent = document.querySelector("#bboxes fieldset");
const oldSvgs = document.querySelectorAll("#bboxes svg");
for (const svg of oldSvgs) {
svg.parentElement.removeChild(svg);
}
for (const [frameId, frame] of Object.entries(capture["frames"])) {
bboxParent.insertAdjacentHTML(
"beforeend",
bboxToSvg(frame)
);
}
markers.clearLayers();
const { features, frames } = correlate(capture);
document.getElementById("correlationOutput").innerText = JSON.stringify({ features, frames }, null, 2);
for (const [feature_id, { coords, tags }] of Object.entries(features)) {
markers.addLayer(L.marker(
[coords.lat, coords.lon],
{
riseOnHover: true,
icon: new L.Icon.Default({ className: "obj" }),
}
));
}
for (const [frame_id, { coords }] of Object.entries(frames)) {
markers.addLayer(L.marker([coords.lat, coords.lon]));
}
if (markers.getLayers().length > 0) {
map.fitBounds(markers.getBounds());
}
});
</script>
</body>
</html>