Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hook to set panoData when image size is known? (or a "drone mode")

See original GitHub issue

When dealing with 360 photo spheres generated by a Mavic 2 Pro drone there are 24-26 images being taken for stitching, but due to the limited upwards tilt of the camera on the drone these mostly cover 80% downwards and around, with the sky/straight up missing.

I’ve done stitching in various applications (Lightroom, ICE, etc) but when I load these into PSV the horizon is horribly warped, so I had to look into manually setting the crop information using panoData.

I know how to deal with this now as long as I know the image size in advance, doing something like this:

  const url = 'PANO0001_stitch_rz.jpg';
  const width = 16384; // known width
  const height = 5757; // known height

  let panoData = { // we know width will be 2x height
    fullWidth: width,
    fullHeight: width / 2,
    croppedWidth: width,
    croppedHeight: height,
    croppedX: 0,
    croppedY: (width / 2) - height
  };

…and passing that on to the viewer constructor, but it would be good if there was a way of initializing the panoData dynamically, e.g. in the ready event when the image size is known.

Is there a way of doing this today? I didn’t find anything in the documentation,

Or would it be possible to have some kind of “droneMode: true” configuration parameter where it automatically does this?

Example image: https://spoox.org/pano/PANO0001_stitch_rz.jpg (yes I know I forgot to crop the top…)

Example OK: https://spoox.org/pano/index.html Example warped (no crop data): https://spoox.org/pano/index-without.html

Issue Analytics

State:
Created 3 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

mistic100commented, May 13, 2020

Your are showing code of the wrong repository.

I’ll see what can be done

0reactions

fran6tcommented, Sep 1, 2021

@sp00x if your server have php and gd library or equivalent you could make like this

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>

<body>
<div id="viewer"></div>
</body>

<style>
  html, body, #viewer {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>
<?php 
list($width, $height, $type, $attr) = getimagesize("PANO0001_stitch_rz.jpg");
?>
<script>  
  const url = 'PANO0001_stitch_rz.jpg';
  const width = <?php echo $width; ?>;
  const height = <?php echo $height; ?>;

  let panoData = {
    fullWidth: width,
    fullHeight: width / 2,
    croppedWidth: width,
    croppedHeight: height,
    croppedX: 0,
    croppedY: (width / 2) - height
  };

  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: url,
    panoData,
    minFov: 10,
    maxFov: 90
  });
</script>
</html>
```

Top Results From Across the Web

DJI Air 2S Panorama Mode / Drone 360 Photo. All you need to ...

All you need to know and more. In-depth analysis of the Panorama mode in the DJI Air 2S. I will show how to...

How to download sphere panorama photo to PC - Mavic Pilots

I want to copy sphere panorama photo to PC. A sphere panorama image on the MicroSD of Mini 2, instead of a single...

Shoot a vertical panorama with your drone if you regularly ...

Shoot a vertical panorama with your drone in order to create sharper and higher resolution portrait oriented drone photos.

react-photo-sphere-viewer - npm package | Snyk

The npm package react-photo-sphere-viewer was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as ......

React Photosphere Viewer: Allows You to Display 360 Degree ...

Little Planet Mode : display the panorama like a little planet (Similar to the DJI drones ... The URL of the panorama image....