Feature: 360-view, experimenting with photo-sphere-viewer

package-lock.json

@@ -15,6 +15,7 @@
         "@comunica/core": "^3.0.1",
         "@comunica/query-sparql": "^3.0.1",
         "@comunica/query-sparql-link-traversal": "^0.3.0",
+        "@photo-sphere-viewer/equirectangular-tiles-adapter": "^5.12.1",
         "@rapideditor/location-conflation": "^1.3.0",
         "@rgossiaux/svelte-headlessui": "^1.0.2",
         "@rgossiaux/svelte-heroicons": "^0.1.2",
@@ -74,6 +75,7 @@
         "panzoom": "^9.4.3",
         "papaparse": "^5.5.2",
         "pg": "^8.11.3",
+        "photo-sphere-viewer": "^4.8.1",
         "pic4carto": "^2.1.15",
         "pluscodes": "^2.6.0",
         "pmtiles": "^4.2.1",
@@ -6273,6 +6275,32 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@photo-sphere-viewer/core": {
+      "version": "5.12.1",
+      "resolved": "https://registry.npmjs.org/@photo-sphere-viewer/core/-/core-5.12.1.tgz",
+      "integrity": "sha512-aK+SueXdKOr5FQAMwjxswHaa2OZcpWi4tx5P4fjq1vWEDa8PtdaoSdQaAp3Csmthvd9DlfNDUb6c21fTudzM/w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "three": "^0.173.0"
+      }
+    },
+    "node_modules/@photo-sphere-viewer/core/node_modules/three": {
+      "version": "0.173.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.173.0.tgz",
+      "integrity": "sha512-AUwVmViIEUgBwxJJ7stnF0NkPpZxx1aZ6WiAbQ/Qq61h6I9UR4grXtZDmO8mnlaNORhHnIBlXJ1uBxILEKuVyw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@photo-sphere-viewer/equirectangular-tiles-adapter": {
+      "version": "5.12.1",
+      "resolved": "https://registry.npmjs.org/@photo-sphere-viewer/equirectangular-tiles-adapter/-/equirectangular-tiles-adapter-5.12.1.tgz",
+      "integrity": "sha512-Z9oiPNQwBdkGD1m+bXe0EuuBgdZFzec+d7MKexYgEqzLLukgp1WJ4il+3omMaRP5HAhRVWR5vapVALag+8BmPg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@photo-sphere-viewer/core": "5.12.1"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -23230,6 +23258,17 @@
         "split2": "^4.1.0"
       }
     },
+    "node_modules/photo-sphere-viewer": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/photo-sphere-viewer/-/photo-sphere-viewer-4.8.1.tgz",
+      "integrity": "sha512-Yl1KZq1adtrajCOrf8Y79Qi4A35DfEu8atL779YOdA9XHoH2l2+sYovejnZlGgUM0hEbTyenRDoyXSy/MtioYg==",
+      "deprecated": "Use @photo-sphere-viewer/core instead, see https://photo-sphere-viewer.js.org/guide/migration.html",
+      "license": "MIT",
+      "dependencies": {
+        "three": "^0.147.0",
+        "uevent": "^2.1.1"
+      }
+    },
     "node_modules/pic4carto": {
       "version": "2.1.15",
       "license": "SEE LICENSE IN LICENSE.txt",
@@ -26708,6 +26747,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.147.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.147.0.tgz",
+      "integrity": "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==",
+      "license": "MIT"
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -27594,6 +27639,12 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/uevent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/uevent/-/uevent-2.2.0.tgz",
+      "integrity": "sha512-48s5LF/c6R1fUmctGib/dWKhZjZLd4aK/85dwVAbwgHNBSO0k0UNp0ZKZpkSbU6633qYhgykYQPakTSuOxZopA==",
+      "license": "MIT"
+    },
     "node_modules/uglify-js": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
@@ -34147,6 +34198,29 @@
       "version": "2.8.2",
       "dev": true
     },
+    "@photo-sphere-viewer/core": {
+      "version": "5.12.1",
+      "resolved": "https://registry.npmjs.org/@photo-sphere-viewer/core/-/core-5.12.1.tgz",
+      "integrity": "sha512-aK+SueXdKOr5FQAMwjxswHaa2OZcpWi4tx5P4fjq1vWEDa8PtdaoSdQaAp3Csmthvd9DlfNDUb6c21fTudzM/w==",
+      "peer": true,
+      "requires": {
+        "three": "^0.173.0"
+      },
+      "dependencies": {
+        "three": {
+          "version": "0.173.0",
+          "resolved": "https://registry.npmjs.org/three/-/three-0.173.0.tgz",
+          "integrity": "sha512-AUwVmViIEUgBwxJJ7stnF0NkPpZxx1aZ6WiAbQ/Qq61h6I9UR4grXtZDmO8mnlaNORhHnIBlXJ1uBxILEKuVyw==",
+          "peer": true
+        }
+      }
+    },
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": {
+      "version": "5.12.1",
+      "resolved": "https://registry.npmjs.org/@photo-sphere-viewer/equirectangular-tiles-adapter/-/equirectangular-tiles-adapter-5.12.1.tgz",
+      "integrity": "sha512-Z9oiPNQwBdkGD1m+bXe0EuuBgdZFzec+d7MKexYgEqzLLukgp1WJ4il+3omMaRP5HAhRVWR5vapVALag+8BmPg==",
+      "requires": {}
+    },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -46355,6 +46429,15 @@
         "split2": "^4.1.0"
       }
     },
+    "photo-sphere-viewer": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/photo-sphere-viewer/-/photo-sphere-viewer-4.8.1.tgz",
+      "integrity": "sha512-Yl1KZq1adtrajCOrf8Y79Qi4A35DfEu8atL779YOdA9XHoH2l2+sYovejnZlGgUM0hEbTyenRDoyXSy/MtioYg==",
+      "requires": {
+        "three": "^0.147.0",
+        "uevent": "^2.1.1"
+      }
+    },
     "pic4carto": {
       "version": "2.1.15",
       "requires": {
@@ -48749,6 +48832,11 @@
         "thenify": ">= 3.1.0 < 4"
       }
     },
+    "three": {
+      "version": "0.147.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.147.0.tgz",
+      "integrity": "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -49436,6 +49524,11 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g=="
     },
+    "uevent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/uevent/-/uevent-2.2.0.tgz",
+      "integrity": "sha512-48s5LF/c6R1fUmctGib/dWKhZjZLd4aK/85dwVAbwgHNBSO0k0UNp0ZKZpkSbU6633qYhgykYQPakTSuOxZopA=="
+    },
     "uglify-js": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",

package.json

@@ -177,6 +177,7 @@
     "@comunica/core": "^3.0.1",
     "@comunica/query-sparql": "^3.0.1",
     "@comunica/query-sparql-link-traversal": "^0.3.0",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "^5.12.1",
     "@rapideditor/location-conflation": "^1.3.0",
     "@rgossiaux/svelte-headlessui": "^1.0.2",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
@@ -236,6 +237,7 @@
     "panzoom": "^9.4.3",
     "papaparse": "^5.5.2",
     "pg": "^8.11.3",
+    "photo-sphere-viewer": "^4.8.1",
     "pic4carto": "^2.1.15",
     "pluscodes": "^2.6.0",
     "pmtiles": "^4.2.1",

src/Logic/Web/NearbyImagesSearch.ts

@@ -325,7 +325,7 @@ class MapillaryFetcher implements ImageFetcher {
     private readonly end_captured_at?: Date
 
     constructor(options?: {
-        panoramas: undefined | "only" | "no"
+        panoramas?: undefined | "only" | "no"
         max_images?: 100 | number
         start_captured_at?: Date
         end_captured_at?: Date
@@ -411,7 +411,6 @@ export class CombinedFetcher {
             new ImagesFromPanoramaxFetcher(),
             new ImagesFromPanoramaxFetcher(Constants.panoramax.url),
             new MapillaryFetcher({
-                panoramas: "no",
                 max_images: 25,
                 start_captured_at: maxage,
             }),

src/UI/Image/photoAdapter.ts

@@ -0,0 +1,54 @@
+import {
+    EquirectangularTilesAdapter,
+    EquirectangularTilesAdapterConfig
+} from "@photo-sphere-viewer/equirectangular-tiles-adapter"
+
+export class PhotoAdapter extends EquirectangularTilesAdapter {
+    // This code was shamelessly stolen from https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/src/utils/PhotoAdapter.js
+    // MIT-license; thank you adrien!
+
+    private readonly _shouldGoFast: () => boolean
+
+    constructor(viewer, config?: EquirectangularTilesAdapterConfig & { shouldGoFast?: () => boolean }) {
+        super(viewer, config)
+        this._shouldGoFast = config?.shouldGoFast ?? (() => true)
+    }
+
+    /**
+     * Override to skip loading SD images according to shouldGoFast option.
+     */
+    public async loadTexture(panorama, loader) {
+        if (!panorama.origBaseUrl) {
+            panorama.origBaseUrl = panorama.baseUrl
+        } else {
+            panorama.baseUrl = panorama.origBaseUrl
+        }
+
+        // Fast mode + thumbnail available + no HD image loaded yet + flat picture
+        if (
+            this._shouldGoFast()
+            && panorama.thumbUrl
+            && !panorama.hdLoaded
+            && panorama.rows == 1
+        ) {
+            panorama.baseUrl = panorama.thumbUrl
+        }
+
+        let data = await super.loadTexture(panorama, loader)
+        if (panorama.baseUrl === panorama.origBaseUrl) {
+            panorama.hdLoaded = true
+        }
+        return data
+    }
+
+    /**
+     * Override to skip loading tiles according to shouldGoFast option.
+     * @private
+     */
+    /*
+   private __loadTiles(tiles) {
+        if (!this._shouldGoFast()) {
+            super.__loadTiles(tiles)
+        }
+    }*/
+}

src/UI/Test.svelte

@@ -1,34 +1,113 @@
 <script lang="ts">
-  import { GeoLocationState } from "../Logic/State/GeoLocationState"
 
-  let origlog = console.log
+  import { onMount } from "svelte"
 
-  let logs: string[] = []
+  export let imageInfo
+  // Tiles of the panorama, not geotiles
+  let tilemeta = imageInfo?.asset_templates?.tiles_webp || imageInfo?.asset_templates?.tiles
 
-  function log(...items) {
+  import "@photo-sphere-viewer/core/index.css"
-    origlog(...items)
+  // import "@photo-sphere-viewer/virtual-tour-plugin/index.css"
-    logs.push(items.join(" "))
+  // import "@photo-sphere-viewertileUrl/gallery-plugin/index.css"
+  // import "@photo-sphere-viewer/markers-plugin/index.css"
+
+
+  import { AbstractAdapter, Viewer as PSViewer } from "photo-sphere-viewer"
+  import { PhotoAdapter } from "./Image/photoAdapter"
+
+  export const PSV_DEFAULT_ZOOM = 30
+  export const PSV_ANIM_DURATION = 250
+  export const PIC_MAX_STAY_DURATION = 3000
+
+  const BASE_PANORAMA = {
+    baseUrl: "./assets/loader_base.jpg",
+    width: 1280,
+    cols: 2,
+    rows: 1,
+    tileUrl: () => null
   }
 
-  console.log = log
-  console.error = (...items) => log("ERR: ", ...items)
-  console.warn = (...items) => log("WARN: ", ...items)
 
-  const st = new GeoLocationState()
+  let container: HTMLElement
-  const av = st.gpsAvailable
+
-  const loc = st.currentGPSLocation
+  let isSmall = () => container?.offsetWidth < 576
-  const permission = st.permission
+  let shouldGoFast = () => true
+
+  function constructPanoramaInfo() {
+    const f = imageInfo
+
+    const hdUrl = (Object.values(f.assets).find(a => a?.roles?.includes("data")) || {}).href
+    const matrix = f?.properties?.["tiles:tile_matrix_sets"]?.geovisio
+    const baseUrlWebp = Object.values(f.assets).find(a => a.roles?.includes("visual") && a.type === "image/webp")
+    const baseUrlJpeg = Object.values(f.assets).find(a => a.roles?.includes("visual") && a.type === "image/jpeg")
+    const baseUrl = (baseUrlWebp || baseUrlJpeg).href
+    const thumbUrl = (Object.values(f.assets).find(a => a.roles?.includes("thumbnail") && a.type === "image/jpeg"))?.href
+
+    let panorama = {
+      baseUrl,
+      origBaseUrl: baseUrl,
+      basePanoData: (img) => ({
+        fullWidth: img.width,
+        fullHeight: img.height
+      }),
+      hdUrl,
+      thumbUrl,
+      cols: matrix && matrix.tileMatrix[0].matrixWidth,
+      rows: matrix && matrix.tileMatrix[0].matrixHeight,
+      width: matrix && (matrix.tileMatrix[0].matrixWidth * matrix.tileMatrix[0].tileWidth),
+      tileUrl: matrix && ((col, row) => tilemeta.href.replace(/\{TileCol}/g, col).replace(/\{TileRow}/g, row))
+    }
+    return panorama
+  }
+
+
+  PSViewer["useNewAnglesOrder"] = true
+
+  onMount(() => {
+    const viewer = new PSViewer({
+      container,
+
+      panorama: BASE_PANORAMA.baseUrl,
+
+      adapter: [{ PhotoAdapter, prototype: AbstractAdapter }
+        , {
+          showErrorTile: false,
+          baseBlur: false,
+          resolution: isSmall() ? 32 : 64
+          // shouldGoFast
+        }],
+
+      //withCredentials: parent._options?.fetchOptions?.credentials == "include",
+      //requestHeaders: parent._options?.fetchOptions?.headers,
+      //lang: parent._t.psv,
+      minFov: 5,
+      loadingTxt: "&nbsp;",
+      navbar: null
+    })
+
+
+    const panorama = constructPanoramaInfo()
+    console.log(panorama, container)
+
+    viewer.setOptions({
+      adapter: [PhotoAdapter, {
+        showErrorTile: false,
+        baseBlur: false,
+        resolution: isSmall() ? 32 : 64
+      }]
+    })
+    viewer.setPanorama(panorama.hdUrl, {
+      zoom: 0, longitude: 45, latitude: -45
+    })
+
+    window.setTimeout(() => {
+      console.log(viewer.getPosition())
+    }, 2000)
+
+  })
+
 </script>
 
-<button on:click={() => st.requestPermission()}>Get geolocation</button>
+
-Permission:
+<div bind:this={container} class="h-screen w-screen"></div>
-<code>{$permission}</code>
+
-Available:
-<code>{$av}</code>
-Location:
-<code>{JSON.stringify($loc)}</code>
-<ol>
-  {#each logs as log}
-    <li>{log}</li>
-  {/each}
-</ol>

src/test.ts

@@ -1,4 +1,13 @@
 import Test from "./UI/Test.svelte"
-import { OsmConnection } from "./Logic/Osm/OsmConnection"
+import { ImageData, PanoramaxXYZ } from "panoramax-js"
+
+const target = document.getElementById("maindiv")
+target.innerHTML = ""
+let img = "https://panoramax-storage-public-fast.s3.gra.perf.cloud.ovh.net/main-pictures/d2/8c/ba/cf/c807-4dbf-b8c8-b1c3aa89182d.jpg"
+let imgId = "d28cbacf-c807-4dbf-b8c8-b1c3aa89182d"
+let panoramax = new PanoramaxXYZ()
+panoramax.imageInfo(imgId).then((imageInfo: ImageData) => {
+    console.log("IMG INFO: ", imageInfo)
+    new Test({ target, props: { imageInfo } })
+})
 
-new OsmConnection().interact("user/details.json").then((r) => console.log(">>>", r))