Initial commit

RobThree · Jun 14, 2024 · ed80381 · ed80381
1 parent 76a6820
commit ed80381
Show file tree

Hide file tree

Showing 14 changed files with 1,799 additions and 0 deletions.
diff --git a/img/1.jpg b/img/1.jpg
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/3.jpg b/img/3.jpg
diff --git a/img/4.jpg b/img/4.jpg
diff --git a/img/5.jpg b/img/5.jpg
diff --git a/img/6.jpg b/img/6.jpg
diff --git a/img/notfound.gif b/img/notfound.gif
diff --git a/img/pin-blue.png b/img/pin-blue.png
diff --git a/img/pin-red.png b/img/pin-red.png
diff --git a/index.htm b/index.htm
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin/index.min.css" />
+
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+                background-color: #f8faf7;
+            }
+
+            a {
+                color: #dcdcdc;
+                text-decoration: underline;
+            }
+
+            .notfound {
+                background: url('img/notfound.gif') center center no-repeat;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="viewer" style="width: 100vw; height: 100vh;"></div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
+                    "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js",
+                    "@photo-sphere-viewer/markers-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { Viewer } from '@photo-sphere-viewer/core';
+            import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
+            import markerdata from './markerdata.json' with { type: 'json' };
+
+            const createMarker = (id, marker) => ({
+                id,
+                image: `img/pin-${marker.content ? 'blue' : 'red'}.png`,
+                size: { width: 32, height: 32 },
+                anchor: 'bottom center',
+                tooltip: marker.tooltip,
+                style: { cursor: marker.content ? 'pointer' : 'help' },
+                content: marker.content,
+                position: marker.position
+            });
+
+            const getViewerOptions = (imageId) => {
+                const image = markerdata.images[imageId];               // Get image data
+                // Iterate image markers and create markers by merging shared markerdata with image-specific markerdata
+                const markers = Object.entries(image.markers).map(([key, marker]) => createMarker(key, Object.assign(marker, markerdata.markers[key])));
+
+                delete image.markers;   // Delete 'martkers' property from image
+
+                // Build base result object
+                const defaultimage = {
+                    container: 'viewer',
+                    panorama: `img/${imageId}.jpg`,
+                    navbar: ['zoom', 'move', 'markers', /* 'markersList', */ 'caption', 'fullscreen'],
+                    plugins: [[MarkersPlugin, { 
+                        markers,
+                        defaultHoverScale: {
+                            amount: 1.2,
+                            duration: 50
+                        }
+                    }]]
+                }
+                // Merge with image object and return result
+                return Object.assign(defaultimage, image);
+            };
+
+            const searchParams = new URLSearchParams(window.location.search);
+            const imageId = searchParams.get('i');
+            if (imageId in markerdata.images) {
+                const viewer = new Viewer(getViewerOptions(imageId));
+            } else {
+                document.getElementById("viewer").classList.add('notfound');
+            }
+
+            // Uncomment below to get position on click
+            //viewer.addEventListener('click', ({ data }) => {
+            //    navigator.clipboard.writeText(JSON.stringify({ position: { yaw: data.yaw, pitch: data.pitch }}, null, 2));
+            //});
+        </script>
+    </body>
+</html>