Hook to set panoData when image size is known? (or a "drone mode") #380
Comments
|
Your "example ok" does not work. To answer your question it is not possible, the whole loading is done by knowing panoData in advance when overloaded. You can also embed the cropping data directly into the file as explained here https://photo-sphere-viewer.js.org/guide/cropped-panorama.html |
|
What do you say is not working with the "example ok" link? Not displaying? Javascript errors? (maybe it's just taking some time to load, the file is 12.5mb) My point is that I want to handle this for known drone style images without having to embed this information, given that I know they are like this. (I can of course load them externally, inspect, and supply the url as a data uri instead) Looking at the source, this would be the place I mean it would be possible to have this optional callback/hook - as this is where it is reading the image size anyway: E.g. what I would propose here is allowing Edit: yes I know that won't work, seeing pano_size is initialized by copying props at https://github.com/JeremyHeleine/Photo-Sphere-Viewer/blob/master/photo-sphere-viewer.js#L1779 |
|
(I see my "example ok" page is not working in Firefox, it is ok in Chrome and Safari/IOS - the examples at the project page works fine, though. My HTML works with a smaller image, maybe Firefox has issues with this big an image?) |
|
Your are showing code of the wrong repository. I'll see what can be done |
|
( Sorry for the wrong links - I probably clicked the "forked-from" link by accident ) |
|
@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>
``` |
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:
..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
readyevent 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
The text was updated successfully, but these errors were encountered: