71 lines
2.4 KiB
HTML
71 lines
2.4 KiB
HTML
<head>
|
|
<!-- for optimal display on high DPI devices -->
|
|
<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>
|
|
|
|
<div id="panoramaviewer" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> </div>
|
|
<script>
|
|
|
|
const startImage = window.frameElement.getAttribute("panoimage") ? window.frameElement.getAttribute("panoimage") : '../docs/assets/img/startimage.jpg'
|
|
|
|
const panoviewer = new PhotoSphereViewer.Viewer({
|
|
container: document.querySelector('#panoramaviewer'),
|
|
panorama: startImage
|
|
})
|
|
|
|
window.addEventListener("message", ({ data, origin, source }) => {
|
|
console.log(data.type)
|
|
switch (data.type) {
|
|
case "panoramaviewer/set-panorama":
|
|
console.info(`[panorama viewer] Sending image '${data.image.dataURL}'`);
|
|
panoviewer.setPanorama(data.image.dataURL)
|
|
//.then(() => /* update complete */);
|
|
document.querySelector('#panoramaviewer').focus()
|
|
break
|
|
}
|
|
})
|
|
|
|
function setPanoFromDroppedFile(file) {
|
|
reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
panoviewer.setPanorama(event.target.result)
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
function dropHandler(ev) {
|
|
// File(s) dropped
|
|
// Prevent default behavior (Prevent file from being opened)
|
|
ev.preventDefault();
|
|
|
|
if (ev.dataTransfer.items) {
|
|
// Use DataTransferItemList interface to access the file(s)
|
|
[...ev.dataTransfer.items].forEach((item, i) => {
|
|
|
|
// If dropped items aren't files, reject them
|
|
if (item.kind === "file") {
|
|
const file = item.getAsFile();
|
|
console.log(`… file[${i}].name = ${file.name}`);
|
|
if (i === 0) { setPanoFromDroppedFile(file) }
|
|
|
|
}
|
|
});
|
|
} else {
|
|
// Use DataTransfer interface to access the file(s)
|
|
[...ev.dataTransfer.files].forEach((file, i) => {
|
|
if (i === 0) { setPanoFromDroppedFile(file) }
|
|
console.log(`… file[${i}].name = ${file.name}`);
|
|
});
|
|
}
|
|
}
|
|
|
|
function dragOverHandler(ev) {
|
|
// Prevent default behavior (Prevent file from being opened)
|
|
ev.preventDefault();
|
|
}
|
|
|
|
</script> |