heuzef
/
pannellum
miroir de https://github.com/mpetroff/pannellum.git
1
0
Bifurcation 0
Code Tickets 0 Versions 22 Wiki Activité
Parcourir la source

Orientationchange instance DeviceOrientationEvent

pull/633/head
Ekoo20 il y a 8 ans
Parent
2d04b53511
révision
b77301ca36
1 fichiers modifiés avec 101 ajouts et 101 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +101
    -101
      src/js/pannellum.js

+ 101
- 101
src/js/pannellum.js Voir le fichier

@@ -1,17 +1,17 @@
/*
* Pannellum - An HTML5 based Panorama Viewer
* Copyright (c) 2011-2016 Matthew Petroff
*
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -179,12 +179,12 @@ if (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webk
// Device orientation toggle
controls.orientation = document.createElement('div');
controls.orientation.addEventListener('click', function(e) {
window.addEventListener('deviceorientation', orientationListener);
window.addEventListener('orientationchange', orientationListener);
});
controls.orientation.className = 'pnlm-orientation-button pnlm-sprite pnlm-controls pnlm-control';
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(e) {
window.removeEventListener('deviceorientation', this);
window.addEventListener('orientationchange', function(e) {
window.removeEventListener('orientationchange', this);
if (e)
controls.container.appendChild(controls.orientation);
});
@@ -221,9 +221,9 @@ function init() {
anError();
return;
}
var i, p;
if (config.type == 'cubemap') {
panoImage = [];
for (i = 0; i < 6; i++) {
@@ -256,21 +256,21 @@ function init() {
if (config.type == 'cubemap') {
// Quick loading counter for synchronous loading
var itemsToLoad = 6;
var onLoad = function() {
itemsToLoad--;
if (itemsToLoad === 0) {
onImageLoad();
}
};
var onError = function(e) {
var a = document.createElement('a');
a.href = e.target.src;
a.innerHTML = a.href;
anError('The file ' + a.outerHTML + ' could not be accessed.');
};
for (i = 0; i < panoImage.length; i++) {
panoImage[i].onload = onLoad;
panoImage[i].onerror = onError;
@@ -287,16 +287,16 @@ function init() {
if (config.basePath) {
p = config.basePath;
}
if (config.dynamic !== true) {
// Still image
p = absoluteURL(config.panorama) ? config.panorama : p + config.panorama;
panoImage.onload = function() {
window.URL.revokeObjectURL(this.src); // Clean up
onImageLoad();
};
var xhr = new XMLHttpRequest();
xhr.onloadend = function() {
if (xhr.status != 200) {
@@ -347,7 +347,7 @@ function init() {
xhr.send();
}
}
container.classList.add('pnlm-grab');
container.classList.remove('pnlm-grabbing');
}
@@ -433,7 +433,7 @@ function parseGPanoXMP(image) {
var start = img.indexOf('<x:xmpmeta');
if (start > -1 && config.ignoreGPanoXMP !== true) {
var xmpData = img.substring(start, img.indexOf('</x:xmpmeta>') + 12);
// Extract the requested tag from the XMP data
var getTag = function(tag) {
var result;
@@ -449,7 +449,7 @@ function parseGPanoXMP(image) {
}
return null;
};
// Relevant XMP data
var xmp = {
fullWidth: getTag('GPano:FullPanoWidthPixels'),
@@ -461,11 +461,11 @@ function parseGPanoXMP(image) {
horizonPitch: getTag('GPano:PosePitchDegrees'),
horizonRoll: getTag('GPano:PoseRollDegrees')
};
if (xmp.fullWidth !== null && xmp.croppedWidth !== null &&
xmp.fullHeight !== null && xmp.croppedHeight !== null &&
xmp.topPixels !== null) {
// Set up viewer using GPano XMP data
config.haov = xmp.croppedWidth / xmp.fullWidth * 360;
config.vaov = xmp.croppedHeight / xmp.fullHeight * 180;
@@ -481,11 +481,11 @@ function parseGPanoXMP(image) {
panoImage.horizonPitch = xmp.horizonPitch / 180 * Math.PI;
panoImage.horizonRoll = xmp.horizonRoll / 180 * Math.PI;
}
// TODO: add support for initial view settings
}
}
// Load panorama
panoImage.src = window.URL.createObjectURL(image);
});
@@ -567,12 +567,12 @@ function onDocumentMouseDown(event) {
event.preventDefault();
// But not all of it
container.focus();
// Only do something if the panorama is loaded
if (!loaded) {
return;
}
// Calculate mouse position relative to top left of viewer container
var pos = mousePosition(event);

@@ -582,25 +582,25 @@ function onDocumentMouseDown(event) {
console.log('Pitch: ' + coords[0] + ', Yaw: ' + coords[1] + ', Center Pitch: ' +
config.pitch + ', Center Yaw: ' + config.yaw + ', HFOV: ' + config.hfov);
}
// Turn off auto-rotation if enabled
config.autoRotate = false;

window.removeEventListener('deviceorientation', orientationListener);
window.removeEventListener('orientationchange', orientationListener);
config.roll = 0;
isUserInteracting = true;
latestInteraction = Date.now();
onPointerDownPointerX = pos.x;
onPointerDownPointerY = pos.y;
onPointerDownYaw = config.yaw;
onPointerDownPitch = config.pitch;
container.classList.add('pnlm-grabbing');
container.classList.remove('pnlm-grab');
animateInit();
}

@@ -639,9 +639,9 @@ function onDocumentMouseMove(event) {
var yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(pos.x / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
yawSpeed = (yaw - config.yaw) % 360 * 0.2;
config.yaw = yaw;
var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
var pitch = ((Math.atan(pos.y / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
pitchSpeed = (pitch - config.pitch) * 0.2;
config.pitch = pitch;
@@ -681,7 +681,7 @@ function onDocumentTouchStart(event) {
// Turn off auto-rotation if enabled
config.autoRotate = false;

window.removeEventListener('deviceorientation', orientationListener);
window.removeEventListener('orientationchange', orientationListener);
config.roll = 0;

// Calculate touch position relative to top left of viewer container
@@ -689,7 +689,7 @@ function onDocumentTouchStart(event) {

onPointerDownPointerX = pos0.x;
onPointerDownPointerY = pos0.y;
if (event.targetTouches.length == 2) {
// Down pointer is the center of the two fingers
var pos1 = mousePosition(event.targetTouches[1]);
@@ -700,7 +700,7 @@ function onDocumentTouchStart(event) {
}
isUserInteracting = true;
latestInteraction = Date.now();
onPointerDownYaw = config.yaw;
onPointerDownPitch = config.pitch;

@@ -723,7 +723,7 @@ function onDocumentTouchMove(event) {
var pos0 = mousePosition(event.targetTouches[0]);
var clientX = pos0.x;
var clientY = pos0.y;
if (event.targetTouches.length == 2 && onPointerDownPointerDist != -1) {
var pos1 = mousePosition(event.targetTouches[1]);
clientX += (pos1.x - pos0.x) * 0.5;
@@ -733,11 +733,11 @@ function onDocumentTouchMove(event) {
setHfov(config.hfov + (onPointerDownPointerDist - clientDist) * 0.1);
onPointerDownPointerDist = clientDist;
}
var yaw = (onPointerDownPointerX - clientX) * 0.1 + onPointerDownYaw;
yawSpeed = (yaw - config.yaw) % 360 * 0.2;
config.yaw = yaw;
var pitch = (clientY - onPointerDownPointerY) * 0.1 + onPointerDownPitch;
pitchSpeed = (pitch - config.pitch) * 0.2;
config.pitch = pitch;
@@ -771,7 +771,7 @@ function onDocumentPointerDown(event) {
onDocumentTouchStart(event);
event.preventDefault();

window.removeEventListener('deviceorientation', orientationListener);
window.removeEventListener('orientationchange', orientationListener);
config.roll = 0;
}
}
@@ -825,7 +825,7 @@ function onDocumentPointerUp(event) {
*/
function onDocumentMouseWheel(event) {
event.preventDefault();
// Only do something if the panorama is loaded
if (!loaded) {
return;
@@ -845,7 +845,7 @@ function onDocumentMouseWheel(event) {
setHfov(config.hfov + event.detail * 1.5);
zoomSpeed = event.detail > 0 ? 1 : -1;
}
animateInit();
}

@@ -857,11 +857,11 @@ function onDocumentMouseWheel(event) {
function onDocumentKeyPress(event) {
// Override default action
event.preventDefault();
// Turn off auto-rotation if enabled
config.autoRotate = false;

window.removeEventListener('deviceorientation', orientationListener);
window.removeEventListener('orientationchange', orientationListener);
config.roll = 0;

// Record key pressed
@@ -869,7 +869,7 @@ function onDocumentKeyPress(event) {
if (event.which) {
keynumber = event.which;
}
// If escape key is pressed
if (keynumber == 27) {
// If in fullscreen mode
@@ -900,13 +900,13 @@ function clearKeys() {
function onDocumentKeyUp(event) {
// Override default action
event.preventDefault();
// Record key released
var keynumber = event.keycode;
if (event.which) {
keynumber = event.which;
}
// Change key
changeKey(keynumber, false);
}
@@ -924,53 +924,53 @@ function changeKey(keynumber, value) {
case 109: case 189: case 17:
if (keysDown[0] != value) { keyChanged = true; }
keysDown[0] = value; break;
// If plus key is released
case 107: case 187: case 16:
if (keysDown[1] != value) { keyChanged = true; }
keysDown[1] = value; break;
// If up arrow is released
case 38:
if (keysDown[2] != value) { keyChanged = true; }
keysDown[2] = value; break;
// If "w" is released
case 87:
if (keysDown[6] != value) { keyChanged = true; }
keysDown[6] = value; break;
// If down arrow is released
case 40:
if (keysDown[3] != value) { keyChanged = true; }
keysDown[3] = value; break;
// If "s" is released
case 83:
if (keysDown[7] != value) { keyChanged = true; }
keysDown[7] = value; break;
// If left arrow is released
case 37:
if (keysDown[4] != value) { keyChanged = true; }
keysDown[4] = value; break;
// If "a" is released
case 65:
if (keysDown[8] != value) { keyChanged = true; }
keysDown[8] = value; break;
// If right arrow is released
case 39:
if (keysDown[5] != value) { keyChanged = true; }
keysDown[5] = value; break;
// If "d" is released
case 68:
if (keysDown[9] != value) { keyChanged = true; }
keysDown[9] = value;
}
if (keyChanged && value) {
if (typeof performance !== 'undefined' && performance.now()) {
prevTime = performance.now();
@@ -991,11 +991,11 @@ function keyRepeat() {
if (!loaded) {
return;
}
var prevPitch = config.pitch;
var prevYaw = config.yaw;
var prevZoom = config.hfov;
var newTime;
if (typeof performance !== 'undefined' && performance.now()) {
newTime = performance.now();
@@ -1007,41 +1007,41 @@ function keyRepeat() {
}
var diff = (newTime - prevTime) * config.hfov / 1700;
diff = Math.min(diff, 1.0);
// If minus key is down
if (keysDown[0] && config.keyboardZoom === true) {
setHfov(config.hfov + (zoomSpeed * 0.8 + 0.5) * diff);
}
// If plus key is down
if (keysDown[1] && config.keyboardZoom === true) {
setHfov(config.hfov + (zoomSpeed * 0.8 - 0.2) * diff);
}
// If up arrow or "w" is down
if (keysDown[2] || keysDown[6]) {
// Pan up
config.pitch += (pitchSpeed * 0.8 + 0.2) * diff;
}
// If down arrow or "s" is down
if (keysDown[3] || keysDown[7]) {
// Pan down
config.pitch += (pitchSpeed * 0.8 - 0.2) * diff;
}
// If left arrow or "a" is down
if (keysDown[4] || keysDown[8]) {
// Pan left
config.yaw += (yawSpeed * 0.8 - 0.2) * diff;
}
// If right arrow or "d" is down
if (keysDown[5] || keysDown[9]) {
// Pan right
config.yaw += (yawSpeed * 0.8 + 0.2) * diff;
}
// If auto-rotate
var inactivityInterval = Date.now() - latestInteraction;
if (config.autoRotate && inactivityInterval > config.autoRotateInactivityDelay &&
@@ -1050,7 +1050,7 @@ function keyRepeat() {
if (diff > 0.000001) {
config.yaw -= config.autoRotate / 60 * diff;
}
// Deal with stopping auto rotation after a set delay
if (config.autoRotateStopDelay) {
config.autoRotateStopDelay -= newTime - prevTime;
@@ -1064,7 +1064,7 @@ function keyRepeat() {
if (diff > 0) {
// "Friction"
var friction = 0.85;
// Yaw
if (!keysDown[4] && !keysDown[5] && !keysDown[8] && !keysDown[9]) {
config.yaw += yawSpeed * diff * friction;
@@ -1084,14 +1084,14 @@ function keyRepeat() {
yawSpeed = yawSpeed * 0.8 + (config.yaw - prevYaw) / diff * 0.2;
pitchSpeed = pitchSpeed * 0.8 + (config.pitch - prevPitch) / diff * 0.2;
zoomSpeed = zoomSpeed * 0.8 + (config.hfov - prevZoom) / diff * 0.2;
// Limit speed
var maxSpeed = 5;
yawSpeed = Math.min(maxSpeed, Math.max(yawSpeed, -maxSpeed));
pitchSpeed = Math.min(maxSpeed, Math.max(pitchSpeed, -maxSpeed));
zoomSpeed = Math.min(maxSpeed, Math.max(zoomSpeed, -maxSpeed));
}
// Stop movement if opposite controls are pressed
if (keysDown[0] && keysDown[0]) {
zoomSpeed = 0;
@@ -1112,7 +1112,7 @@ function onDocumentResize() {
// Resize panorama renderer
renderer.resize();
animateInit();
// Kludge to deal with WebKit regression: https://bugs.webkit.org/show_bug.cgi?id=93525
onFullScreenChange();
}
@@ -1171,7 +1171,7 @@ function render() {

// Ensure the yaw is within min and max allowed
config.yaw = Math.max(config.minYaw, Math.min(config.maxYaw, config.yaw));
// Check if we autoRotate in a limited by min and max yaw
// If so reverse direction
if (config.autoRotate !== false && tmpyaw != config.yaw) {
@@ -1180,11 +1180,11 @@ function render() {

// Ensure the calculated pitch is within min and max allowed
config.pitch = Math.max(config.minPitch, Math.min(config.maxPitch, config.pitch));
renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {roll: config.roll * Math.PI / 180});
renderHotSpots();
// Update compass
if (config.compass) {
compass.style.transform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)';
@@ -1297,7 +1297,7 @@ function renderInit() {
renderer.init(config.haov * Math.PI / 180, config.vaov * Math.PI / 180, config.vOffset * Math.PI / 180, renderInitCallback);
} catch(event) {
// Panorama not loaded
// Display error if there is a bad texture
if (event.type == 'webgl error' || event.type == 'no webgl') {
anError();
@@ -1319,7 +1319,7 @@ function renderInit() {
function renderInitCallback() {
if (oldRenderer !== undefined) {
oldRenderer.destroy();
// Fade if specified
if (config.sceneFadeDuration && oldRenderer.fadeImg !== undefined) {
oldRenderer.fadeImg.style.opacity = 0;
@@ -1331,17 +1331,17 @@ function renderInitCallback() {
}, config.sceneFadeDuration);
}
}
// Show compass if applicable
if (config.compass) {
compass.style.display = 'inline';
} else {
compass.style.display = 'none';
}
// Show hotspots
createHotSpots();
// Hide loading display
infoDisplay.load.box.style.display = 'none';
if (preview !== undefined) {
@@ -1349,7 +1349,7 @@ function renderInitCallback() {
preview = undefined;
}
loaded = true;
animateInit();
}

@@ -1359,7 +1359,7 @@ function renderInitCallback() {
*/
function createHotSpots() {
if (hotspotsCreated) return;
if (!config.hotSpots) {
config.hotSpots = [];
} else {
@@ -1370,11 +1370,11 @@ function createHotSpots() {
config.hotSpots.forEach(function(hs) {
var div = document.createElement('div');
div.className = 'pnlm-hotspot pnlm-tooltip pnlm-sprite pnlm-' + escapeHTML(hs.type);
var span = document.createElement('span');
if (hs.text)
span.innerHTML = escapeHTML(hs.text);
var a;
if (hs.video) {
var video = document.createElement('video'),
@@ -1424,7 +1424,7 @@ function createHotSpots() {
}
renderContainer.appendChild(div);
}
div.appendChild(span);
span.style.width = span.scrollWidth - 20 + 'px';
span.style.marginLeft = -(span.scrollWidth - 26) / 2 + 'px';
@@ -1500,14 +1500,14 @@ function mergeConfig(sceneId) {
config = {};
var k;
var photoSphereExcludes = ['haov', 'vaov', 'vOffset', 'northOffset'];
// Merge default config
for (k in defaultConfig) {
if (defaultConfig.hasOwnProperty(k)) {
config[k] = defaultConfig[k];
}
}
// Merge default scene config
for (k in initialConfig.default) {
if (initialConfig.default.hasOwnProperty(k)) {
@@ -1517,7 +1517,7 @@ function mergeConfig(sceneId) {
}
}
}
// Merge current scene config
if ((sceneId !== null) && (sceneId !== '') && (initialConfig.scenes) && (initialConfig.scenes[sceneId])) {
var scene = initialConfig.scenes[sceneId];
@@ -1531,7 +1531,7 @@ function mergeConfig(sceneId) {
}
config.scene = sceneId;
}
// Merge initial config
for (k in initialConfig) {
if (initialConfig.hasOwnProperty(k)) {
@@ -1561,7 +1561,7 @@ function processOptions() {
preview.style.backgroundImage = "url('" + encodeURI(p) + "')";
renderContainer.appendChild(preview);
}
// Process other options
for (var key in config) {
if (config.hasOwnProperty(key)) {
@@ -1570,25 +1570,25 @@ function processOptions() {
infoDisplay.title.innerHTML = escapeHTML(config[key]);
infoDisplay.container.style.display = 'inline';
break;
case 'author':
infoDisplay.author.innerHTML = 'by ' + escapeHTML(config[key]);
infoDisplay.container.style.display = 'inline';
break;
case 'fallback':
infoDisplay.errorMsg.innerHTML = '<p>Your browser does not support WebGL.<br><a href="' + encodeURI(config[key]) + '" target="_blank">Click here to view this panorama in an alternative viewer.</a></p>';
break;
case 'hfov':
setHfov(Number(config[key]));
break;
case 'pitch':
// Keep pitch within bounds
config.pitch = Math.max(config.minPitch, Math.min(config.maxPitch, config.pitch));
break;
case 'autoLoad':
if (config[key] === true && oldRenderer === undefined) {
// Show loading box
@@ -1599,7 +1599,7 @@ function processOptions() {
init();
}
break;
case 'showZoomCtrl':
if (config[key]) {
// Show zoom controls
@@ -1613,7 +1613,7 @@ function processOptions() {
case 'showFullscreenCtrl':
if (config[key] && ('fullscreen' in document || 'mozFullScreen' in document ||
'webkitIsFullScreen' in document || 'msFullscreenElement' in document)) {
// Show fullscreen control
controls.fullscreen.style.display = 'block';
} else {
@@ -1744,7 +1744,7 @@ function load() {
function loadScene(sceneId, targetPitch, targetYaw, targetHfov) {
loaded = false;
oldRenderer = renderer;
// Set up fade if specified
var fadeImg, workingPitch, workingYaw, workingHfov;
if (config.sceneFadeDuration) {
@@ -1760,7 +1760,7 @@ function loadScene(sceneId, targetPitch, targetYaw, targetHfov) {
renderContainer.appendChild(fadeImg);
oldRenderer.fadeImg = fadeImg;
}
// Set new pointing
if (targetPitch === 'same') {
workingPitch = config.pitch;
@@ -1779,13 +1779,13 @@ function loadScene(sceneId, targetPitch, targetYaw, targetHfov) {
} else {
workingHfov = targetHfov;
}
// Destroy hot spots from previous scene
destroyHotSpots();
// Create the new config for the scene
mergeConfig(sceneId);
// Reload scene
processOptions();
if (workingPitch) {


Écrire Aperçu
Chargement…
Annuler
Enregistrer