Search results
diff --git a/docs/DataImage.js.html b/docs/DataImage.js.html index 505e754d..8cf5ab1b 100644 --- a/docs/DataImage.js.html +++ b/docs/DataImage.js.html @@ -152,7 +152,7 @@Search results
diff --git a/docs/PANOLENS.BasicPanorama.html b/docs/PANOLENS.BasicPanorama.html index 9fde109d..60a152ad 100644 --- a/docs/PANOLENS.BasicPanorama.html +++ b/docs/PANOLENS.BasicPanorama.html @@ -317,7 +317,7 @@Search results
diff --git a/docs/PANOLENS.CubePanorama.html b/docs/PANOLENS.CubePanorama.html index a6950989..643fa0d2 100644 --- a/docs/PANOLENS.CubePanorama.html +++ b/docs/PANOLENS.CubePanorama.html @@ -581,7 +581,7 @@Search results
diff --git a/docs/PANOLENS.EmptyPanorama.html b/docs/PANOLENS.EmptyPanorama.html index 90ca66d5..af920f53 100644 --- a/docs/PANOLENS.EmptyPanorama.html +++ b/docs/PANOLENS.EmptyPanorama.html @@ -317,7 +317,7 @@Search results
diff --git a/docs/PANOLENS.GoogleStreetviewPanorama.html b/docs/PANOLENS.GoogleStreetviewPanorama.html index 2dfc6ee7..ec6daad6 100644 --- a/docs/PANOLENS.GoogleStreetviewPanorama.html +++ b/docs/PANOLENS.GoogleStreetviewPanorama.html @@ -1055,7 +1055,7 @@Search results
diff --git a/docs/PANOLENS.ImageLittlePlanet.html b/docs/PANOLENS.ImageLittlePlanet.html index 8e409804..fee7e60f 100644 --- a/docs/PANOLENS.ImageLittlePlanet.html +++ b/docs/PANOLENS.ImageLittlePlanet.html @@ -393,7 +393,7 @@Search results
diff --git a/docs/PANOLENS.ImagePanorama.html b/docs/PANOLENS.ImagePanorama.html index cc665bb1..18fc4fe9 100644 --- a/docs/PANOLENS.ImagePanorama.html +++ b/docs/PANOLENS.ImagePanorama.html @@ -631,7 +631,7 @@Search results
diff --git a/docs/PANOLENS.Infospot.html b/docs/PANOLENS.Infospot.html index b2bfb2ec..0664f33a 100644 --- a/docs/PANOLENS.Infospot.html +++ b/docs/PANOLENS.Infospot.html @@ -355,7 +355,7 @@Methods
addHoverElement(el)
+addHoverElement(el [, delta])
Parameters:
Parameters:
+delta+ + + + + +
Parameters:
addHoverText(text)
+addHoverText(text [, delta])
Parameters:
Parameters:
+delta+ + + + + +
Search results
diff --git a/docs/PANOLENS.LittlePlanet.html b/docs/PANOLENS.LittlePlanet.html index 79006a94..39624d69 100644 --- a/docs/PANOLENS.LittlePlanet.html +++ b/docs/PANOLENS.LittlePlanet.html @@ -429,7 +429,7 @@Search results
diff --git a/docs/PANOLENS.Panorama.html b/docs/PANOLENS.Panorama.html index 419918b6..0f5951de 100644 --- a/docs/PANOLENS.Panorama.html +++ b/docs/PANOLENS.Panorama.html @@ -3356,7 +3356,7 @@Search results
diff --git a/docs/PANOLENS.Reticle.html b/docs/PANOLENS.Reticle.html index 28546c56..5d71f2ec 100644 --- a/docs/PANOLENS.Reticle.html +++ b/docs/PANOLENS.Reticle.html @@ -1541,7 +1541,7 @@Search results
diff --git a/docs/PANOLENS.SpriteText.html b/docs/PANOLENS.SpriteText.html index 8d927288..fa5981ca 100644 --- a/docs/PANOLENS.SpriteText.html +++ b/docs/PANOLENS.SpriteText.html @@ -1459,7 +1459,7 @@Search results
diff --git a/docs/PANOLENS.Tile.html b/docs/PANOLENS.Tile.html index b76faa15..1224cd09 100644 --- a/docs/PANOLENS.Tile.html +++ b/docs/PANOLENS.Tile.html @@ -1510,7 +1510,7 @@Search results
diff --git a/docs/PANOLENS.TileGroup.html b/docs/PANOLENS.TileGroup.html index f7e4c246..ed5d509d 100644 --- a/docs/PANOLENS.TileGroup.html +++ b/docs/PANOLENS.TileGroup.html @@ -1391,7 +1391,7 @@Search results
diff --git a/docs/PANOLENS.Utils.CubeTextureLoader.html b/docs/PANOLENS.Utils.CubeTextureLoader.html index 0345ea8f..27b37cd1 100644 --- a/docs/PANOLENS.Utils.CubeTextureLoader.html +++ b/docs/PANOLENS.Utils.CubeTextureLoader.html @@ -452,7 +452,7 @@Search results
diff --git a/docs/PANOLENS.Utils.ImageLoader.html b/docs/PANOLENS.Utils.ImageLoader.html index cdc7b6e4..c3763ba7 100644 --- a/docs/PANOLENS.Utils.ImageLoader.html +++ b/docs/PANOLENS.Utils.ImageLoader.html @@ -452,7 +452,7 @@Search results
diff --git a/docs/PANOLENS.Utils.TextureLoader.html b/docs/PANOLENS.Utils.TextureLoader.html index c325d75f..a5323166 100644 --- a/docs/PANOLENS.Utils.TextureLoader.html +++ b/docs/PANOLENS.Utils.TextureLoader.html @@ -452,7 +452,7 @@Search results
diff --git a/docs/PANOLENS.Utils.html b/docs/PANOLENS.Utils.html index 773b0a08..655d56e1 100644 --- a/docs/PANOLENS.Utils.html +++ b/docs/PANOLENS.Utils.html @@ -228,7 +228,7 @@Search results
diff --git a/docs/PANOLENS.VideoPanorama.html b/docs/PANOLENS.VideoPanorama.html index 505008e7..8f5be5f3 100644 --- a/docs/PANOLENS.VideoPanorama.html +++ b/docs/PANOLENS.VideoPanorama.html @@ -1939,7 +1939,7 @@Search results
diff --git a/docs/PANOLENS.Viewer.html b/docs/PANOLENS.Viewer.html index 6cdc5b56..5bcbaf4c 100644 --- a/docs/PANOLENS.Viewer.html +++ b/docs/PANOLENS.Viewer.html @@ -913,7 +913,47 @@Properties
-outputInfospotPosition+ + + + + +
Search results
diff --git a/docs/PANOLENS.Widget.html b/docs/PANOLENS.Widget.html index 3addf372..44bc6260 100644 --- a/docs/PANOLENS.Widget.html +++ b/docs/PANOLENS.Widget.html @@ -2320,7 +2320,7 @@Search results
diff --git a/docs/PANOLENS.html b/docs/PANOLENS.html index d15fc3e8..f7f477aa 100644 --- a/docs/PANOLENS.html +++ b/docs/PANOLENS.html @@ -1263,7 +1263,7 @@Search results
diff --git a/docs/Panolens.js.html b/docs/Panolens.js.html index 7cce5f74..f6b9714c 100644 --- a/docs/Panolens.js.html +++ b/docs/Panolens.js.html @@ -90,7 +90,7 @@Source: Panolens.js
* @namespace PANOLENS */ -var PANOLENS = { REVISION: '6-dev' }; +var PANOLENS = { REVISION: '7' }; @@ -132,7 +132,7 @@Search results
diff --git a/docs/classes.list.html b/docs/classes.list.html index 0ed1ef49..374684ff 100644 --- a/docs/classes.list.html +++ b/docs/classes.list.html @@ -2965,7 +2965,7 @@Search results
diff --git a/docs/index.html b/docs/index.html index 4a3c8b54..22dea98b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -117,18 +117,21 @@Usage
Include three.min.js and panolens.min.js
PANOLENS.Viewer Configuration
All attributes are optional
<script>
viewer = new PANOLENS.Viewer({
- container: document.body, // A DOM Element container
- controlBar: true, // Vsibility of bottom control bar
- controlButtons: [], // Buttons array in the control bar. Default to ['fullscreen', 'setting', 'video']
- autoHideControlBar: false, // Auto hide control bar
- autoHideInfospot: true, // Auto hide infospots
- horizontalView: false, // Allow only horizontal camera control
- cameraFov: 60, // Camera field of view in degree
- reverseDragging: false, // Reverse orbit control direction
- enableReticle: false, // Enable reticle for mouseless interaction
- dwellTime: 1500, // Dwell time for reticle selection in millisecond
- autoReticleSelect: true, // Auto select a clickable target after dwellTime
- passiveRendering: false, // Render only when control triggered by user input
+ container: document.body, // A DOM Element container
+ controlBar: true, // Vsibility of bottom control bar
+ controlButtons: [], // Buttons array in the control bar. Default to ['fullscreen', 'setting', 'video']
+ autoHideControlBar: false, // Auto hide control bar
+ autoHideInfospot: true, // Auto hide infospots
+ horizontalView: false, // Allow only horizontal camera control
+ cameraFov: 60, // Camera field of view in degree
+ reverseDragging: false, // Reverse orbit control direction
+ enableReticle: false, // Enable reticle for mouseless interaction
+ dwellTime: 1500, // Dwell time for reticle selection in millisecond
+ autoReticleSelect: true, // Auto select a clickable target after dwellTime
+ passiveRendering: false, // Render only when control triggered by user input
+ viewIndicator: false, // Adds an angle view indicator in upper left corner
+ indicatorSize: 30, // Size of View Indicator
+ outputInfospotPosition: false // Whether and where to output infospot position. Could be 'console' or 'overlay'
});
</script>Examples
Check Panolens example page
Features
-
@@ -141,7 +144,7 @@
- Built-in fullscreen and video control widgets
- Convert equirectangular image into little planet (Stereographic projection)
Features
How to add an infospot (hotspot)
Move cursor on a specific point in a panorama and press Ctrl with mouse clicking or hovering, which will generate position (x, y, z) in the console. See Panorama Infospot example for creating and attaching infospots.
How to add an infospot (hotspot)
Move cursor on a specific point in a panorama and press Ctrl with clicking or hovering, which will generate position (x, y, z) in the console or on the overlay element based on parameter outputInfospotPosition='console' or 'overlay'. See Panorama Infospot example for creating and attaching infospots.
Dependency
Panolens.js includes Tween.js and iphone-inline-video by default
How to contribute
Always make your contributions for the latest dev branch, not master, so it can be tracked for the next release.
Search results
diff --git a/docs/infospot_Infospot.js.html b/docs/infospot_Infospot.js.html index ee37304a..4620d596 100644 --- a/docs/infospot_Infospot.js.html +++ b/docs/infospot_Infospot.js.html @@ -270,12 +270,6 @@Source: infospot/Infospot.js
*/ PANOLENS.Infospot.prototype.onHover = function ( event ) { - if ( this.element && !this.element.locked && this.getContainer() ) { - - this.translateElement( event.mouseEvent.clientX, event.mouseEvent.clientY ); - - } - }; /** @@ -321,8 +315,6 @@Source: infospot/Infospot.js
this.element._height = this.element.clientHeight; } - - this.translateElement( event.mouseEvent.clientX, event.mouseEvent.clientY ); } @@ -429,8 +421,8 @@Source: infospot/Infospot.js
container = this.container; element = this.element; width = element._width / 2; - height = element._height; - delta = 30; + height = element._height / 2; + delta = element.verticalDelta !== undefined ? element.verticalDelta : 40; left = x - width; top = y - height - delta; @@ -500,13 +492,13 @@Source: infospot/Infospot.js
/** * Add hovering text element * @param {string} text - Text to be displayed + * @param {number} [delta=40] - Vertical delta to the infospot */ - PANOLENS.Infospot.prototype.addHoverText = function ( text ) { + PANOLENS.Infospot.prototype.addHoverText = function ( text, delta ) { if ( !this.element ) { this.element = document.createElement( 'div' ); - this.element.style.display = 'none'; this.element.style.color = '#fff'; this.element.style.top = 0; @@ -514,8 +506,9 @@Source: infospot/Infospot.js
this.element.style.maxHeight = '50%'; this.element.style.textShadow = '0 0 3px #000000'; this.element.style.fontFamily = '"Trebuchet MS", Helvetica, sans-serif'; - this.element.style.position = 'fixed'; + this.element.style.position = 'absolute'; this.element.classList.add( 'panolens-infospot' ); + this.element.verticalDelta = delta !== undefined ? delta : 40; } @@ -526,16 +519,18 @@Source: infospot/Infospot.js
/** * Add hovering element by cloning an element * @param {HTMLDOMElement} el - Element to be cloned and displayed + * @param {number} [delta=40] - Vertical delta to the infospot */ - PANOLENS.Infospot.prototype.addHoverElement = function ( el ) { + PANOLENS.Infospot.prototype.addHoverElement = function ( el, delta ) { if ( !this.element ) { this.element = el.cloneNode( true ); this.element.style.display = 'none'; this.element.style.top = 0; - this.element.style.position = 'fixed'; + this.element.style.position = 'absolute'; this.element.classList.add( 'panolens-infospot' ); + this.element.verticalDelta = delta !== undefined ? delta : 40; } @@ -716,7 +711,7 @@Search results
diff --git a/docs/interface_Reticle.js.html b/docs/interface_Reticle.js.html index 39fabc08..4c4ee0ee 100644 --- a/docs/interface_Reticle.js.html +++ b/docs/interface_Reticle.js.html @@ -309,7 +309,7 @@Search results
diff --git a/docs/interface_SpriteText.js.html b/docs/interface_SpriteText.js.html index b8bdff47..fe944f2c 100644 --- a/docs/interface_SpriteText.js.html +++ b/docs/interface_SpriteText.js.html @@ -319,7 +319,7 @@Search results
diff --git a/docs/interface_Tile.js.html b/docs/interface_Tile.js.html index 0461d178..be7e028c 100644 --- a/docs/interface_Tile.js.html +++ b/docs/interface_Tile.js.html @@ -319,7 +319,7 @@Search results
diff --git a/docs/interface_TileGroup.js.html b/docs/interface_TileGroup.js.html index 765d5b98..6f5e75ea 100644 --- a/docs/interface_TileGroup.js.html +++ b/docs/interface_TileGroup.js.html @@ -404,7 +404,7 @@Search results
diff --git a/docs/namespaces.list.html b/docs/namespaces.list.html index 2147fd37..cc0d3407 100644 --- a/docs/namespaces.list.html +++ b/docs/namespaces.list.html @@ -2965,7 +2965,7 @@Search results
diff --git a/docs/panorama_BasicPanorama.js.html b/docs/panorama_BasicPanorama.js.html index 00ff16b0..52959d4d 100644 --- a/docs/panorama_BasicPanorama.js.html +++ b/docs/panorama_BasicPanorama.js.html @@ -146,7 +146,7 @@Search results
diff --git a/docs/panorama_CubePanorama.js.html b/docs/panorama_CubePanorama.js.html index b776a438..6657a5cb 100644 --- a/docs/panorama_CubePanorama.js.html +++ b/docs/panorama_CubePanorama.js.html @@ -191,7 +191,7 @@Search results
diff --git a/docs/panorama_EmptyPanorama.js.html b/docs/panorama_EmptyPanorama.js.html index d7a19286..7162b7c5 100644 --- a/docs/panorama_EmptyPanorama.js.html +++ b/docs/panorama_EmptyPanorama.js.html @@ -151,7 +151,7 @@Search results
diff --git a/docs/panorama_GoogleStreetviewPanorama.js.html b/docs/panorama_GoogleStreetviewPanorama.js.html index 9617bd52..c31bf672 100644 --- a/docs/panorama_GoogleStreetviewPanorama.js.html +++ b/docs/panorama_GoogleStreetviewPanorama.js.html @@ -249,7 +249,7 @@Search results
diff --git a/docs/panorama_ImageLittlePlanet.js.html b/docs/panorama_ImageLittlePlanet.js.html index ba3085f7..4e86d902 100644 --- a/docs/panorama_ImageLittlePlanet.js.html +++ b/docs/panorama_ImageLittlePlanet.js.html @@ -161,7 +161,7 @@Search results
diff --git a/docs/panorama_ImagePanorama.js.html b/docs/panorama_ImagePanorama.js.html index c9248961..fbe0e11b 100644 --- a/docs/panorama_ImagePanorama.js.html +++ b/docs/panorama_ImagePanorama.js.html @@ -201,7 +201,7 @@Search results
diff --git a/docs/panorama_LittlePlanet.js.html b/docs/panorama_LittlePlanet.js.html index 1976ec10..8b501861 100644 --- a/docs/panorama_LittlePlanet.js.html +++ b/docs/panorama_LittlePlanet.js.html @@ -414,7 +414,7 @@Search results
diff --git a/docs/panorama_Panorama.js.html b/docs/panorama_Panorama.js.html index 09321ca8..e9d13469 100644 --- a/docs/panorama_Panorama.js.html +++ b/docs/panorama_Panorama.js.html @@ -677,7 +677,7 @@Search results
diff --git a/docs/panorama_VideoPanorama.js.html b/docs/panorama_VideoPanorama.js.html index 12723056..4a8f3d3a 100644 --- a/docs/panorama_VideoPanorama.js.html +++ b/docs/panorama_VideoPanorama.js.html @@ -157,10 +157,7 @@Source: panorama/VideoPanorama.js
this.videoElement.setAttribute( "webkit-playsinline", "" ); } - this.videoElement.src = src; - this.videoElement.load(); - - this.videoElement.onloadeddata = function(){ + var onloadeddata = function(){ scope.setVideoTexture( scope.videoElement ); @@ -208,9 +205,34 @@Source: panorama/VideoPanorama.js
} } - }; + /** + * Ready state of the audio/video element + * 0 = HAVE_NOTHING - no information whether or not the audio/video is ready + * 1 = HAVE_METADATA - metadata for the audio/video is ready + * 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond + * 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available + * 4 = HAVE_ENOUGH_DATA - enough data available to start playing + */ + if ( this.videoElement.readyState > 2 ) { + + onloadeddata(); + + } else { + + if ( !this.videoElement.querySelectorAll('source').length || !this.videoElement.src ) { + + this.videoElement.src = src; + + } + + this.videoElement.load(); + } + + this.videoElement.onloadeddata = onloadeddata; + + this.videoElement.ontimeupdate = function ( event ) { /** @@ -465,7 +487,7 @@Search results
diff --git a/docs/quicksearch.html b/docs/quicksearch.html index 354aecc8..b1cf3d2b 100644 --- a/docs/quicksearch.html +++ b/docs/quicksearch.html @@ -7,7 +7,7 @@ -Panolens.js panorama video example. 360 Video from Clash of clans
+
diff --git a/package.json b/package.json
index 9e3390b0..34d76fbd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "panolens.js",
- "version": "0.6.0",
+ "version": "0.7.0",
"description": "Javascript panorama viewer",
"main": "index.js",
"scripts": {
diff --git a/src/Panolens.js b/src/Panolens.js
index c56f0d1a..86ac9caa 100644
--- a/src/Panolens.js
+++ b/src/Panolens.js
@@ -4,4 +4,4 @@
* @namespace PANOLENS
*/
-var PANOLENS = { REVISION: '6' };
+var PANOLENS = { REVISION: '7' };
diff --git a/src/infospot/Infospot.js b/src/infospot/Infospot.js
index e817b6f4..acb57df1 100644
--- a/src/infospot/Infospot.js
+++ b/src/infospot/Infospot.js
@@ -184,12 +184,6 @@
*/
PANOLENS.Infospot.prototype.onHover = function ( event ) {
- if ( this.element && !this.element.locked && this.getContainer() ) {
-
- this.translateElement( event.mouseEvent.clientX, event.mouseEvent.clientY );
-
- }
-
};
/**
@@ -235,8 +229,6 @@
this.element._height = this.element.clientHeight;
}
-
- this.translateElement( event.mouseEvent.clientX, event.mouseEvent.clientY );
}
@@ -343,8 +335,8 @@
container = this.container;
element = this.element;
width = element._width / 2;
- height = element._height;
- delta = 30;
+ height = element._height / 2;
+ delta = element.verticalDelta !== undefined ? element.verticalDelta : 40;
left = x - width;
top = y - height - delta;
@@ -414,13 +406,13 @@
/**
* Add hovering text element
* @param {string} text - Text to be displayed
+ * @param {number} [delta=40] - Vertical delta to the infospot
*/
- PANOLENS.Infospot.prototype.addHoverText = function ( text ) {
+ PANOLENS.Infospot.prototype.addHoverText = function ( text, delta ) {
if ( !this.element ) {
this.element = document.createElement( 'div' );
-
this.element.style.display = 'none';
this.element.style.color = '#fff';
this.element.style.top = 0;
@@ -428,8 +420,9 @@
this.element.style.maxHeight = '50%';
this.element.style.textShadow = '0 0 3px #000000';
this.element.style.fontFamily = '"Trebuchet MS", Helvetica, sans-serif';
- this.element.style.position = 'fixed';
+ this.element.style.position = 'absolute';
this.element.classList.add( 'panolens-infospot' );
+ this.element.verticalDelta = delta !== undefined ? delta : 40;
}
@@ -440,16 +433,18 @@
/**
* Add hovering element by cloning an element
* @param {HTMLDOMElement} el - Element to be cloned and displayed
+ * @param {number} [delta=40] - Vertical delta to the infospot
*/
- PANOLENS.Infospot.prototype.addHoverElement = function ( el ) {
+ PANOLENS.Infospot.prototype.addHoverElement = function ( el, delta ) {
if ( !this.element ) {
this.element = el.cloneNode( true );
this.element.style.display = 'none';
this.element.style.top = 0;
- this.element.style.position = 'fixed';
+ this.element.style.position = 'absolute';
this.element.classList.add( 'panolens-infospot' );
+ this.element.verticalDelta = delta !== undefined ? delta : 40;
}
diff --git a/src/util/Utils.js b/src/util/Utils.js
index 1f701c03..3114a9f3 100644
--- a/src/util/Utils.js
+++ b/src/util/Utils.js
@@ -10,4 +10,10 @@
*/
PANOLENS.Utils = {};
+ PANOLENS.Utils.checkTouchSupported = function () {
+
+ return window ? 'ontouchstart' in window || window.navigator.msMaxTouchPoints : false;
+
+ };
+
})();
\ No newline at end of file
diff --git a/src/viewer/Viewer.js b/src/viewer/Viewer.js
index dbb8590a..11bd67d0 100644
--- a/src/viewer/Viewer.js
+++ b/src/viewer/Viewer.js
@@ -23,7 +23,8 @@
* @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime
* @param {boolean} [options.passiveRendering=false] - Render only when control triggered by user input
* @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner
- * @param {number} [options.indicatorSize=30] - size of View Indicator
+ * @param {number} [options.indicatorSize=30] - Size of View Indicator
+ * @param {boolean} [options.outputInfospotPosition=false] - Whether and where to output infospot position. Could be 'console' or 'overlay'. Defaults to false
*/
PANOLENS.Viewer = function ( options ) {
@@ -53,6 +54,7 @@
options.passiveRendering = options.passiveRendering || false;
options.viewIndicator = options.viewIndicator !== undefined ? options.viewIndicator : false;
options.indicatorSize = options.indicatorSize || 30;
+ options.outputInfospotPosition = options.outputInfospotPosition !== undefined ? options.outputInfospotPosition : false;
this.options = options;
@@ -120,6 +122,8 @@
this.cameraFrustum = new THREE.Frustum();
this.cameraViewProjectionMatrix = new THREE.Matrix4();
+ this.outputDivElement;
+
// Handler references
this.HANDLER_MOUSE_DOWN = this.onMouseDown.bind( this );
this.HANDLER_MOUSE_UP = this.onMouseUp.bind( this );
@@ -212,6 +216,10 @@
this.registerMouseAndTouchEvents();
}
+ if ( this.options.outputInfospotPosition === 'overlay' ) {
+ this.addOutputElement();
+ }
+
// Register dom event listeners
this.registerEventListeners();
@@ -950,8 +958,8 @@
PANOLENS.Viewer.prototype.getScreenVector = function ( worldVector ) {
var vector = worldVector.clone();
- var widthHalf = ( window.innerWidth - this.container.offsetLeft ) / 2;
- var heightHalf = window.innerHeight / 2;
+ var widthHalf = ( this.container.clientWidth ) / 2;
+ var heightHalf = this.container.clientHeight / 2;
vector.project( this.camera );
@@ -1127,23 +1135,53 @@
};
+ PANOLENS.Viewer.prototype.addOutputElement = function () {
+
+ var element = document.createElement( 'div' );
+ element.style.position = 'absolute';
+ element.style.right = '10px';
+ element.style.top = '10px';
+ element.style.color = "#fff";
+ this.container.appendChild( element );
+ this.outputDivElement = element;
+
+ };
+
/**
* Output infospot attach position in developer console by holding down Ctrl button
*/
PANOLENS.Viewer.prototype.outputInfospotPosition = function () {
- var intersects, point;
+ var intersects, point, panoramaWorldPosition, outputPosition;
intersects = this.raycaster.intersectObject( this.panorama, true );
- if ( intersects.length > 0 ) {
+ if ( intersects.length > 0 && intersects[0].object instanceof PANOLENS.Panorama ) {
+
+ point = intersects[0].point;
+ panoramaWorldPosition = this.panorama.getWorldPosition();
+
+ // Panorama is scaled -1 on X axis
+ outputPosition = new THREE.Vector3(
+ (point.x - panoramaWorldPosition.x).toFixed(2) * -1,
+ (point.y - panoramaWorldPosition.y).toFixed(2),
+ (point.z - panoramaWorldPosition.z).toFixed(2)
+ );
- point = intersects[0].point.clone();
+ switch ( this.options.outputInfospotPosition ) {
- console.info( '{ '
- + -point.x.toFixed(2) + ', '
- + point.y.toFixed(2) + ', '
- + point.z.toFixed(2) + ' }' );
+ case 'console':
+ console.info( outputPosition.x + ', ' + outputPosition.y + ', ' + outputPosition.z );
+ break;
+
+ case 'overlay':
+ this.outputDivElement.textContent = outputPosition.x + ', ' + outputPosition.y + ', ' + outputPosition.z;
+ break;
+
+ default:
+ break;
+
+ }
}
@@ -1234,7 +1272,7 @@
}
// output infospot information
- if ( this.OUTPUT_INFOSPOT ) {
+ if ( event.type !== 'mousedown' && PANOLENS.Utils.checkTouchSupported() || this.OUTPUT_INFOSPOT ) {
this.outputInfospotPosition();
@@ -1466,7 +1504,7 @@
PANOLENS.Viewer.prototype.onKeyDown = function ( event ) {
- if ( event.key === 'Control' ) {
+ if ( this.options.outputInfospotPosition && event.key === 'Control' ) {
this.OUTPUT_INFOSPOT = true;
diff --git a/src/widget/Widget.js b/src/widget/Widget.js
index 66c4f0a3..a1e60b63 100644
--- a/src/widget/Widget.js
+++ b/src/widget/Widget.js
@@ -10,7 +10,7 @@
THREE.EventDispatcher.call( this );
this.DEFAULT_TRANSITION = 'all 0.27s ease';
- this.TOUCH_ENABLED = 'ontouchstart' in window;
+ this.TOUCH_ENABLED = PANOLENS.Utils.checkTouchSupported();
this.PREVENT_EVENT_HANDLER = function ( event ) {
event.preventDefault();
event.stopPropagation();
@@ -355,7 +355,7 @@
*/
PANOLENS.Widget.prototype.createFullscreenButton = function () {
- var scope = this, item, isFullscreen = false;
+ var scope = this, item, isFullscreen = false, tapSkipped = true;
// Don't create button if no support
if ( !document.fullscreenEnabled &&
@@ -367,13 +367,14 @@
function onTap () {
+ tapSkipped = false;
+
if ( !isFullscreen ) {
scope.container.requestFullscreen && scope.container.requestFullscreen();
scope.container.msRequestFullscreen && scope.container.msRequestFullscreen();
scope.container.mozRequestFullScreen && scope.container.mozRequestFullScreen();
scope.container.webkitRequestFullscreen && scope.container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
isFullscreen = true;
- attachInfospotsToContainer();
} else {
document.exitFullscreen && document.exitFullscreen();
document.msExitFullscreen && document.msExitFullscreen();
@@ -385,10 +386,20 @@
this.style.backgroundImage = ( isFullscreen )
? 'url("' + PANOLENS.DataImage.FullscreenLeave + '")'
: 'url("' + PANOLENS.DataImage.FullscreenEnter + '")';
-
+
}
- function onFullScreenChange () {
+ function onFullScreenChange (e) {
+
+ if ( tapSkipped ) {
+
+ isFullscreen = !isFullscreen;
+
+ item.style.backgroundImage = ( isFullscreen )
+ ? 'url("' + PANOLENS.DataImage.FullscreenLeave + '")'
+ : 'url("' + PANOLENS.DataImage.FullscreenEnter + '")';
+
+ }
/**
* Viewer handler event
@@ -397,6 +408,8 @@
*/
scope.dispatchEvent( { type: 'panolens-viewer-handler', method: 'toggleFullscreen', data: isFullscreen } );
+ tapSkipped = true;
+
}
document.addEventListener( 'fullscreenchange', onFullScreenChange, false );
@@ -404,23 +417,6 @@
document.addEventListener( 'mozfullscreenchange', onFullScreenChange, false );
document.addEventListener( 'MSFullscreenChange', onFullScreenChange, false );
- // Attach infospot to container when fullscreen
- function attachInfospotsToContainer () {
-
- var infospotElements = document.querySelectorAll( '.panolens-infospot' );
-
- for ( var i = 0; i < infospotElements.length; i++ ) {
-
- if ( infospotElements[ i ].parentElement !== scope.container ) {
-
- scope.container.appendChild( infospotElements[ i ] );
-
- }
-
- }
-
- }
-
item = this.createCustomItem( {
style : {