feat: add spatial debug page

2026-01-18 13:56:53 +00:00 · 2020-10-05 18:16:25 +02:00 · 2020-10-05 18:16:25 +02:00 · 81ec52e708
commit 81ec52e708
parent 4a5fd5d421
1 changed files with 91 additions and 0 deletions
--- a/debug/spatial.html
+++ b/debug/spatial.html
@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Spatial data</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='dist/mapillary.min.css' />
+    <script src='dist/mapillary.js'></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+        }
+
+        #viewer {
+            width: 90%;
+            height: 90%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='viewer'></div>
+    <select name="visualization" id="visualization">
+        <option value="default">Default</option>
+        <option value="mergecc">CC</option>
+        <option value="cluster">Cluster</option>
+        <option value="sequence">Sequence</option>
+    </select>
+    <button onclick="toggleSetting('earthControls')">Earth</button>
+    <button onclick="toggleSetting('pointsVisible')">Points</button>
+    <button onclick="toggleSetting('camerasVisible')">Cameras</button>
+    <button onclick="toggleSetting('positionsVisible')">Positions</button>
+    <button onclick="toggleSetting('tilesVisible')">Tiles</button>
+    <button onclick="toggleImages()">Images</button>
+    <script>
+        const viewer = new Mapillary.Viewer(
+            "viewer",
+            "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
+            "zarcRdNFZwg3FkXNcsFeGw",
+            { component: { cover: false, stats: false, spatialData: true } });
+
+        window.addEventListener("resize", function () { viewer.resize(); });
+
+        const spatial = viewer.getComponent("spatialData");
+
+        document
+            .getElementById("visualization")
+            .addEventListener('change', (event) => {
+                const cvms = Mapillary.SpatialDataComponent.CameraVisualizationMode;
+                let mode;
+                switch (event.target.value) {
+                    case "mergecc": mode = cvms.ConnectedComponent; break;
+                    case "cluster": mode = cvms.Cluster; break;
+                    case "sequence": mode = cvms.Sequence; break;
+                    default: mode = cvms.Default; break;
+                }
+                spatial.configure({ cameraVisualizationMode: mode });
+            });
+
+        const s = {
+            camerasVisible: false,
+            earthControls: false,
+            imagesVisible: true,
+            pointsVisible: true,
+            positionsVisible: false,
+            tilesVisible: false,
+        }
+
+        function toggleSetting(name) {
+            s[name] = !s[name];
+            const c = {}; c[name] = s[name];
+            spatial.configure(c);
+        }
+
+        function toggleImages() {
+            s.imagesVisible = !s.imagesVisible;
+            if (s.imagesVisible) { viewer.activateComponent("imagePlane"); }
+            else { viewer.deactivateComponent("imagePlane"); }
+        }
+    </script>
+</body>
+
+</html>