143 lines
5.0 KiB
HTML
143 lines
5.0 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>
|
|
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/cubemap-adapter@5/index.js"></script>
|
|
<script src="../javascript/panoramaviewer-ext.js"></script>
|
|
|
|
<div id="panoramaviewer" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
|
|
|
|
<script>
|
|
let startImage = window.frameElement.getAttribute("panoimage") ? window.frameElement.getAttribute("panoimage") : '../docs/assets/img/startimage.jpg'
|
|
const panoAdapter = window.frameElement.getAttribute("panoMode") === "cubemap" ? PhotoSphereViewer.CubemapAdapter : PhotoSphereViewer.EquirectangularAdapter
|
|
let panoviewer
|
|
|
|
document.querySelector("body").style.margin = "0";
|
|
|
|
const panoViewerKeyboardActions = {
|
|
keyboardActions: {
|
|
...PhotoSphereViewer.DEFAULTS.keyboardActions,
|
|
'h': (viewer) => {
|
|
if (viewer.panel.isVisible('help')) {
|
|
viewer.panel.hide();
|
|
} else {
|
|
viewer.panel.show({
|
|
id: 'help',
|
|
content: 'Help content',
|
|
});
|
|
}
|
|
},
|
|
'f': (viewer) => viewer.toggleFullscreen(),
|
|
}
|
|
}
|
|
|
|
const navBarCustomButtons = [
|
|
{
|
|
id: 'pano-previmage',
|
|
content: '<span>⟨</span>',
|
|
title: 'Previous image from gallery',
|
|
className: 'pano-nav-previmg',
|
|
onClick: (viewer) => {
|
|
// normalize path
|
|
startImage = startImage.replace(/\\/g, "/");
|
|
const srcArray = JSON.parse(frameElement.getAttribute("panoGalItems"))
|
|
if (srcArray.length === 1) { return }
|
|
const currentIndex = srcArray.indexOf(startImage)
|
|
var previousIndex = currentIndex - 1
|
|
if (previousIndex < 0) {
|
|
previousIndex = srcArray.length - 1
|
|
}
|
|
startImage = srcArray[previousIndex]
|
|
viewer.setPanorama(startImage, { caption: startImage.replace(/^.*[\\\/]/, '') })
|
|
},
|
|
},
|
|
{
|
|
id: 'pano-nextimage',
|
|
content: '<span>⟩</span>',
|
|
title: 'Next image from gallery',
|
|
className: 'pano-nav-nextimg',
|
|
onClick: (viewer) => {
|
|
const srcArray = JSON.parse(frameElement.getAttribute("panoGalItems"))
|
|
if (srcArray.length === 1) { return }
|
|
const currentIndex = srcArray.indexOf(startImage);
|
|
var nextIndex = (currentIndex + 1) % srcArray.length;
|
|
startImage = srcArray[nextIndex];
|
|
viewer.setPanorama(startImage, { caption: startImage.replace(/^.*[\\\/]/, '') })
|
|
},
|
|
},
|
|
'caption',
|
|
'fullscreen'
|
|
]
|
|
|
|
function PanOptionsFor(mode) {
|
|
switch (mode) {
|
|
case "cubemap":
|
|
return {
|
|
container: document.querySelector('#panoramaviewer'),
|
|
adapter: panoAdapter,
|
|
panorama: {
|
|
type: 'net',
|
|
path: startImage
|
|
},
|
|
navbar: navBarCustomButtons,
|
|
caption: startImage.replace(/^.*[\\\/]/, ''),
|
|
keyboardActions: panoViewerKeyboardActions
|
|
}
|
|
break
|
|
default:
|
|
return {
|
|
container: document.querySelector('#panoramaviewer'),
|
|
panorama: startImage,
|
|
adapter: panoAdapter,
|
|
navbar: navBarCustomButtons,
|
|
caption: startImage.replace(/^.*[\\\/]/, ''),
|
|
keyboardActions: panoViewerKeyboardActions
|
|
}
|
|
}
|
|
}
|
|
function createViewer(opts) {
|
|
let panObj = opts ? opts : PanOptionsFor(window.frameElement.getAttribute("panoMode"))
|
|
panoviewer = new PhotoSphereViewer.Viewer(panObj)
|
|
panoviewer.animate({
|
|
yaw: Math.PI * 2,
|
|
pitch: '360deg',
|
|
zoom: 20,
|
|
speed: '3rpm',
|
|
})
|
|
}
|
|
|
|
function destroyViewer() {
|
|
if (panoviewer) {
|
|
panoviewer.destroy()
|
|
panoviewer = null
|
|
}
|
|
}
|
|
/* main */
|
|
createViewer();
|
|
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}'`);
|
|
if (!panoviewer) createViewer()
|
|
panoviewer.setPanorama(data.image.dataURL)
|
|
//.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)
|
|
destroyViewer()
|
|
createViewer(p)
|
|
document.querySelector('#panoramaviewer').focus()
|
|
break
|
|
case "panoramaviewer/destroy":
|
|
console.info(`[panorama viewer] Destroying message received`);
|
|
destroyViewer()
|
|
break
|
|
}
|
|
})
|
|
</script> |