From 81ec52e70813c11113d1cb052d973d449c5eb49e Mon Sep 17 00:00:00 2001
From: Oscar Lorentzon <oscarlorentzon@users.noreply.github.com>
Date: Mon, 5 Oct 2020 18:16:25 +0200
Subject: [PATCH] feat: add spatial debug page

---
 debug/spatial.html | 91 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 debug/spatial.html
diff --git a/debug/spatial.html b/debug/spatial.html
new file mode 100644
index 00000000..42a726e8
--- /dev/null
+++ 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>
