holodeck up. drag and drop, ready

javascript/panoramaviewer-ext.js

@@ -109,6 +109,7 @@ function panorama_send_image(dataURL, name = "Embed Resource") {
 }
 
 function panorama_change_mode(mode) {
+	return () => {
 			openpanorama.frame.contentWindow.postMessage({
 			type: "panoramaviewer/change-mode",
 			mode: mode
@@ -194,7 +195,7 @@ function setPanoFromDroppedFile(file) {
 	reader = new FileReader();
 	console.log(file)
 	reader.onload = function (event) {
-		panoviewer.setPanorama(event.target.result)
+		panoviewer.setPanorama({source: event.target.result})
 	}
 	reader.readAsDataURL(file);
 }

scripts/panorama-3dviewer.py

@@ -8,6 +8,7 @@ from PIL import Image
 
 usefulDirs = scripts.basedir().split(os.sep)[-2:]
 iframesrc = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/tab_video.html"
+iframesrc_gal = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/viewer.html"
 
 # js 2 gradio messaging?! how to do better?
 gallery_input_ondrop=None
@@ -66,8 +67,8 @@ def after_component(component, **kwargs):
 #            if (suffix):
             view_gallery_button = gr.Button ("Pano \U0001F310", elem_id="sendto_panogallery_button_"+suffix)        # 🌐
             view_cube_button    = gr.Button ("Pano \U0001F9CA", elem_id="sendto_panogallery_cube_button_"+ suffix)   # 🧊
-            view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc+"\",\"\",\""+view_gallery_button.elem_id+"\")" )
-            view_cube_button.click    (None, [],None, _js="panorama_here(\""+iframesrc+"\",\"cubemap\",\""+view_cube_button.elem_id+"\")" )
+            view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"\",\""+view_gallery_button.elem_id+"\")" )
+            view_cube_button.click    (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"cubemap\",\""+view_cube_button.elem_id+"\")" )
             
             gallery_input_ondrop = gr.Textbox(visible=False, elem_id="gallery_input_ondrop_"+ suffix)
             gallery_input_ondrop.style(container=False)

scripts/tab_video.html

@@ -23,7 +23,7 @@
 //const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
 const baseUrl = '../docs/assets/img/'
 
-const viewer = new PhotoSphereViewer.Viewer({
+const panoviewer = new PhotoSphereViewer.Viewer({
     container: 'panoramaviewer',
     adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
         muted: true,

scripts/viewer.html

@@ -3,7 +3,6 @@
   <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" />
 </head>
-
 <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/cubemap-adapter@5/index.js"></script>
@@ -11,71 +10,13 @@
 
 <div id="panoramaviewer" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
 
-
-<!--
-const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
-
-const viewer = new PhotoSphereViewer.Viewer({
-    container: 'viewer',
-    adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
-        muted: true,
-    }],
-    caption: 'Ayutthaya <b>&copy; meetle</b>',
-    loadingImg: baseUrl + 'loader.gif',
-    touchmoveTwoFingers: true,
-    mousewheelCtrlKey: true,
-    navbar: 'video caption settings fullscreen',
-
-    plugins: [
-        PhotoSphereViewer.VideoPlugin,
-        PhotoSphereViewer.SettingsPlugin,
-        [PhotoSphereViewer.ResolutionPlugin, {
-            defaultResolution: 'HD',
-            resolutions: [
-                {
-                    id: 'UHD',
-                    label: 'Ultra high',
-                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_UHD.mp4' },
-                },
-                {
-                    id: 'FHD',
-                    label: 'High',
-                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_FHD.mp4' },
-                },
-                {
-                    id: 'HD',
-                    label: 'Standard',
-                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_HD.mp4' },
-                },
-                {
-                    id: 'SD',
-                    label: 'Low',
-                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_SD.mp4' },
-                },
-            ],
-        }],
-    ],
-});
--->
-
 <script>
   const startImage = window.frameElement.getAttribute("panoimage") ? window.frameElement.getAttribute("panoimage") : '../docs/assets/img/startimage.jpg'
-  const panoAdapter = PhotoSphereViewer.EquirectangularVideoAdapter
-  //window.frameElement.getAttribute("panoMode") === "cubemap" ? PhotoSphereViewer.CubemapAdapter : PhotoSphereViewer.EquirectangularAdapter
+  const panoAdapter = window.frameElement.getAttribute("panoMode") === "cubemap" ? PhotoSphereViewer.CubemapAdapter : PhotoSphereViewer.EquirectangularAdapter
   let panoviewer
 
   function PanOptionsFor(mode) {
     switch (mode) {
-      case "equivideo":
-        return {
-          container: document.querySelector('#panoramaviewer'),
-          adapter: panoAdapter,
-          panorama: {
-            type: 'net',
-            path: startImage
-          }
-        }
-        break
       case "cubemap":
         return {
           container: document.querySelector('#panoramaviewer'),
@@ -94,22 +35,18 @@ const viewer = new PhotoSphereViewer.Viewer({
         }
     }
   }
-
   function createViewer(opts) {
     let panObj = opts ? opts : PanOptionsFor(window.frameElement.getAttribute("panoMode"))
     panoviewer = new PhotoSphereViewer.Viewer(panObj)
   }
-
   function destroyViewer() {
       if (panoviewer) {
         panoviewer.destroy()
         panoviewer = null
       }
   }
-
   /* main */
   createViewer();
-
   window.addEventListener("message", ({ data, origin, source }) => {
     console.log(data.type)
     switch (data.type) {
@@ -120,7 +57,6 @@ const viewer = new PhotoSphereViewer.Viewer({
         //.then(() => /* update complete */);
         document.querySelector('#panoramaviewer').focus()
         break
-
       case "panoramaviewer/change-mode":
         console.info(`[panorama viewer] Changing mode to '${data.mode}'`);
         const p = PanOptionsFor(data.mode)
@@ -128,15 +64,10 @@ const viewer = new PhotoSphereViewer.Viewer({
         createViewer(p)
         document.querySelector('#panoramaviewer').focus()
         break
-
       case "panoramaviewer/destroy":
         console.info(`[panorama viewer] Destroying message received`);
         destroyViewer()
         break
-
     }
-
   })
-
-
 </script>