├── .gitignore ├── README.md ├── anaglyph ├── colorTransformEffects.js ├── img │ ├── close.png │ └── open.png ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── common-marzipano ├── LICENSE.txt ├── marzipano.js └── marzipano.swf ├── common-other └── attribution.css ├── common-shim ├── es5-shim.js ├── eventShim.js └── requestAnimationFrame.js ├── cube-multi-res-generated ├── SolidColorSource.js ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── cube-multi-res ├── .gitignore ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── cube-single-res ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── device-orientation ├── DeviceOrientationControlMethod.js ├── img │ ├── gyro.png │ └── gyro_disable.png ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── editable ├── brush.js ├── createEditableLayer.js ├── editMode.js ├── eventEmitter.js ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── equirectangular ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── flat-square-tiles ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── hotspot-styles ├── hotspots │ ├── expand.css │ ├── expand.js │ ├── hintspot.css │ ├── hintspot.js │ ├── info.css │ ├── info.js │ ├── reveal.css │ ├── reveal.js │ ├── rotate.css │ ├── rotate.js │ ├── textInfo.css │ ├── textInfo.js │ ├── tooltip.css │ └── tooltip.js ├── img │ ├── bullet.png │ ├── forno.png │ ├── hotspot.png │ ├── human.png │ ├── info.png │ ├── marzipanner-logo.png │ ├── marzipano.png │ ├── photo.jpg │ ├── photo.png │ └── tooltip.svg ├── index.html ├── index.js ├── style.css └── vendor │ ├── hint.css │ └── reset.min.css ├── hotspots-embedded ├── hotspotHtml.js ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── hotspots-rect ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── layers ├── createEquirectLayer.js ├── fileToCanvas.js ├── img │ └── hotspot.png ├── index.html ├── index.js ├── ko-element.js ├── style.css └── vendor │ ├── hint.css │ ├── knockout-latest.js │ ├── lodash.js │ └── reset.min.css ├── side-by-side ├── img │ ├── close.png │ └── open.png ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── simple-tour ├── data.js ├── img │ ├── close.png │ ├── collapse.png │ ├── down.png │ ├── expand.png │ ├── fullscreen.png │ ├── hotspot.png │ ├── info.png │ ├── left.png │ ├── link.png │ ├── minus.png │ ├── open.png │ ├── pause.png │ ├── play.png │ ├── plus.png │ ├── powered.png │ ├── right.png │ ├── up.png │ └── windowed.png ├── index.html ├── index.js ├── style.css └── vendor │ ├── bowser.min.js │ ├── classList.js │ ├── es5-shim.js │ ├── eventShim.js │ ├── fastclick.js │ ├── marzipano.js │ ├── requestAnimationFrame.js │ ├── reset.min.css │ └── screenfull.min.js ├── slide-deck ├── SlideDeck.js ├── eventEmitter.js ├── font │ ├── Nexa-Black-Italic.eot │ ├── Nexa-Black-Italic.ttf │ ├── Nexa-Black-Italic.woff │ ├── Nexa-Black.eot │ ├── Nexa-Black.ttf │ ├── Nexa-Black.woff │ ├── Nexa-Bold-Italic.eot │ ├── Nexa-Bold-Italic.ttf │ ├── Nexa-Bold-Italic.woff │ ├── Nexa-Bold.eot │ ├── Nexa-Bold.ttf │ ├── Nexa-Bold.woff │ ├── Nexa-Book-Italic.eot │ ├── Nexa-Book-Italic.ttf │ ├── Nexa-Book-Italic.woff │ ├── Nexa-Book.eot │ ├── Nexa-Book.ttf │ ├── Nexa-Book.woff │ ├── Nexa-Heavy-Italic.eot │ ├── Nexa-Heavy-Italic.ttf │ ├── Nexa-Heavy-Italic.woff │ ├── Nexa-Heavy.eot │ ├── Nexa-Heavy.ttf │ ├── Nexa-Heavy.woff │ ├── Nexa-Light-Italic.eot │ ├── Nexa-Light-Italic.ttf │ ├── Nexa-Light-Italic.woff │ ├── Nexa-Light.eot │ ├── Nexa-Light.ttf │ ├── Nexa-Light.woff │ ├── Nexa-Regular-Italic.eot │ ├── Nexa-Regular-Italic.ttf │ ├── Nexa-Regular-Italic.woff │ ├── Nexa-Regular.eot │ ├── Nexa-Regular.ttf │ ├── Nexa-Regular.woff │ ├── Nexa-Thin-Italic.eot │ ├── Nexa-Thin-Italic.ttf │ ├── Nexa-Thin-Italic.woff │ ├── Nexa-Thin.eot │ ├── Nexa-Thin.ttf │ ├── Nexa-Thin.woff │ ├── Nexa-XBold-Italic.eot │ ├── Nexa-XBold-Italic.ttf │ ├── Nexa-XBold-Italic.woff │ ├── Nexa-XBold.eot │ ├── Nexa-XBold.ttf │ └── Nexa-XBold.woff ├── fonts.css ├── getSlidesFromDom.js ├── img │ ├── bullet.png │ ├── check.png │ ├── digisfera.png │ ├── dubai.png │ ├── fifa_2014.png │ ├── hero_bg.png │ ├── logo.png │ ├── o2_galaxy.png │ ├── quick_start.jpg │ ├── talon_vista.jpg │ └── visit_london.png ├── index.html ├── index.js ├── style.css ├── updateHashWithDeck.js └── vendor │ └── reset.min.css ├── square-flat ├── index.html ├── index.js ├── style.css └── vendor │ └── reset.min.css ├── touch-gestures ├── data.js ├── img │ ├── close.png │ ├── hotspot.png │ ├── open.png │ ├── pause.png │ ├── play.png │ └── powered.png ├── index.html ├── index.js ├── style.css └── vendor │ ├── classList.js │ ├── easing-min.js │ ├── fastclick.js │ └── reset.min.css ├── transitions ├── img │ ├── hotspot.png │ ├── human.png │ ├── marzipanner-logo.png │ ├── photo.png │ └── tooltip.svg ├── index.html ├── index.js ├── style.css ├── transitionUpdateFunctions.js └── vendor │ ├── easing-min.js │ └── reset.min.css ├── transparent-layers ├── img │ ├── close.png │ └── open.png ├── index.html ├── index.js ├── music.mp3 ├── music.ogg ├── style.css └── vendor │ └── reset.min.css ├── video-multi-res ├── CanvasHackVideoElementWrapper.js ├── EventEmitter.js ├── NullVideoElementWrapper.js ├── img │ ├── options.png │ ├── pause.png │ ├── play.png │ ├── resolution-icon.png │ ├── sound-off.png │ ├── sound-on.png │ └── spinner.png ├── index.html ├── init.js ├── interface.js ├── loadVideoInSync.js ├── multiResVideo.js ├── placeholder.png ├── stage.js ├── style.css └── vendor │ ├── EventEmitterProxy.js │ └── reset.min.css ├── webvr ├── index.js ├── no-polyfill.html ├── style.css ├── vendor │ ├── es6-promise.min.js │ ├── gl-matrix-min.js │ ├── reset.min.css │ ├── three.min.js │ ├── wakelock.js │ └── webvr-polyfill.js └── with-polyfill.html └── world-map ├── index.html ├── index.js ├── style.css └── vendor ├── knockout.js ├── lodash.js └── reset.min.css /.gitignore: -------------------------------------------------------------------------------- 1 | /common-media 2 | .DS_Store 3 | *.map.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Demos for the [Marzipano](http://www.marzipano.net) 360º media viewer. 2 | 3 | See [http://www.marzipano.net/demos](http://www.marzipano.net/demos) for a list of demos. -------------------------------------------------------------------------------- /anaglyph/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/anaglyph/img/close.png -------------------------------------------------------------------------------- /anaglyph/img/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/anaglyph/img/open.png -------------------------------------------------------------------------------- /anaglyph/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Anaglyph | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 23 |
24 | 25 | 26 |
Panorama by
27 |
Thomas Sharpless
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /anaglyph/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | var colorTransformEffects = window.colorTransformEffects; 6 | 7 | 8 | // Initialize viewer 9 | 10 | // Doing the blending for the anaglyph is only supported on the WebGL stage 11 | // Using the blending functions gl.ONE, gl.ONE will sum the channels on the two layers 12 | // One of the layers will only have a red channel and the other only blue and green 13 | var blendFunc = [ 'ONE', 'ONE' ]; 14 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: 'webgl', blendFunc: blendFunc }; 15 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 16 | var stage = viewer.stage(); 17 | 18 | // Create left and right layers 19 | var geometry = new Marzipano.CubeGeometry([ 20 | { tileSize: 256, size: 256, fallbackOnly: true }, 21 | { tileSize: 512, size: 512 }, 22 | { tileSize: 512, size: 1024 }, 23 | { tileSize: 512, size: 2048 }, 24 | { tileSize: 512, size: 4096 } 25 | ]); 26 | 27 | // View can be reused because both layers have the same size 28 | var viewLimiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(3100, 100*Math.PI/180); 29 | var view = new Marzipano.RectilinearView(null, viewLimiter); 30 | 31 | var left = createLayer(viewer.stage(), view, geometry, 'left'); 32 | var right = createLayer(viewer.stage(), view, geometry, 'right'); 33 | 34 | stage.addLayer(right); 35 | stage.addLayer(left); 36 | 37 | 38 | function createLayer(stage, view, geometry, eye, effects) { 39 | var source = new Marzipano.ImageUrlSource.fromString( 40 | "../common-media/music-room/" + eye + ".tiles/{z}/{f}/{y}/{x}.jpg", 41 | { cubeMapPreviewUrl: "../common-media/music-room/" + eye + ".tiles/preview.jpg" }); 42 | 43 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 44 | var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore, { effects: effects }); 45 | 46 | layer.pinFirstLevel(); 47 | 48 | return layer; 49 | } 50 | 51 | var typeElement = document.getElementById('type'); 52 | function updateEffects() { 53 | var type = typeElement.value; 54 | var effects = colorTransformEffects[type](); 55 | left.setEffects(effects.red); 56 | right.setEffects(effects.blue); 57 | } 58 | 59 | updateEffects(); 60 | typeElement.addEventListener('change', updateEffects); 61 | 62 | 63 | 64 | })(); -------------------------------------------------------------------------------- /anaglyph/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | font-family: Helvetica, Arial, sans-serif; 21 | } 22 | 23 | #pano { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | .info { 32 | position: absolute; 33 | top: 0; 34 | right: 0; 35 | 36 | background-color: rgb(30, 30, 30); 37 | background-color: rgba(30, 30, 30, 0.8); 38 | color: #fff; 39 | 40 | padding: 1em 1em; 41 | } 42 | 43 | select { 44 | min-width: 200px; 45 | height: 25px; 46 | color: #FFF; 47 | font-size: .8em; 48 | background-color: rgb(103,115,131); 49 | background-color: rgba(103,115,131,.8); 50 | border: none; 51 | } -------------------------------------------------------------------------------- /anaglyph/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /common-marzipano/marzipano.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/common-marzipano/marzipano.swf -------------------------------------------------------------------------------- /common-other/attribution.css: -------------------------------------------------------------------------------- 1 | .attribution { 2 | position: absolute; 3 | display: block; 4 | left: 15px; 5 | bottom: 10px; 6 | 7 | font-family: Helvetica, Arial, sans-serif; 8 | color: rgb(255, 255, 255); 9 | color: rgba(255, 255, 255, 0.8); 10 | 11 | pointer-events: none; 12 | } 13 | 14 | a.attribution { 15 | pointer-events: all; 16 | text-decoration: none; 17 | } 18 | 19 | .attribution .title { 20 | text-transform: uppercase; 21 | font-size: 11px; 22 | margin-bottom: 4px; 23 | } 24 | .attribution .name { 25 | text-transform: uppercase; 26 | font-size: 16px; 27 | } -------------------------------------------------------------------------------- /common-shim/requestAnimationFrame.js: -------------------------------------------------------------------------------- 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 3 | 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel 5 | 6 | // MIT license 7 | 8 | (function() { 9 | var lastTime = 0; 10 | var vendors = ['ms', 'moz', 'webkit', 'o']; 11 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 12 | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 13 | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 14 | || window[vendors[x]+'CancelRequestAnimationFrame']; 15 | } 16 | 17 | if (!window.requestAnimationFrame) 18 | window.requestAnimationFrame = function(callback, element) { 19 | var currTime = new Date().getTime(); 20 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 21 | var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 22 | timeToCall); 23 | lastTime = currTime + timeToCall; 24 | return id; 25 | }; 26 | 27 | if (!window.cancelAnimationFrame) 28 | window.cancelAnimationFrame = function(id) { 29 | clearTimeout(id); 30 | }; 31 | }()); -------------------------------------------------------------------------------- /cube-multi-res-generated/SolidColorSource.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var StaticCanvasAsset = window.Marzipano.StaticCanvasAsset; 5 | 6 | function SolidColorSource(width, height, textFromTileFun, colorFromTileFun, textColorFromTileFun) { 7 | textFromTileFun = textFromTileFun || function(tile) { 8 | var components = []; 9 | if(tile.face) { components.push("face:" + tile.face); } 10 | components.push("x:" + tile.x); 11 | components.push("y:" + tile.y); 12 | components.push("zoom:" + tile.z); 13 | 14 | return components.join(" "); 15 | }; 16 | 17 | colorFromTileFun = colorFromTileFun || function(tile) { 18 | if(tile.face) { 19 | if(tile.face == 'u') { return "#999"; } 20 | if(tile.face == 'b') { return "#aaa"; } 21 | if(tile.face == 'd') { return "#bbb"; } 22 | if(tile.face == 'f') { return "#ccc"; } 23 | if(tile.face == 'r') { return "#ddd"; } 24 | if(tile.face == 'l') { return "#eee"; } 25 | } 26 | return "#ddd"; 27 | }; 28 | textColorFromTileFun = textColorFromTileFun || function() { return "#000"; }; 29 | 30 | this._width = width; 31 | this._height = height; 32 | this._textFromTileFun = textFromTileFun; 33 | this._colorFromTileFun = colorFromTileFun; 34 | this._textColorFromTileFun = textColorFromTileFun; 35 | } 36 | 37 | SolidColorSource.prototype.loadAsset = function(stage, tile, done) { 38 | // loadAsset() must return a cancel() function which also calls `done` 39 | var width = this._width; 40 | var height = this._height; 41 | var text = this._textFromTileFun(tile); 42 | var color = this._colorFromTileFun(tile); 43 | var textColor = this._textColorFromTileFun(tile); 44 | 45 | var element = getCanvas(width, height); 46 | 47 | // Tile background 48 | var ctx = element.getContext("2d"); 49 | ctx.fillStyle = color; 50 | ctx.fillRect(0, 0, width, height); 51 | 52 | // Border around the tile 53 | ctx.lineWidth = 10; 54 | ctx.strokeStyle = '#000'; 55 | ctx.strokeRect(0, 0, width, height); 56 | 57 | 58 | // Text 59 | ctx.fillStyle = textColor; 60 | ctx.font = width/20 + "px Arial"; 61 | ctx.textAlign= "center"; 62 | ctx.fillText(text, width/2, height/2); 63 | 64 | // loadAsset() must be asynchronous 65 | var timeout = setTimeout(function() { 66 | var asset = new StaticCanvasAsset(element); 67 | done(null, tile, asset); 68 | }, 0); 69 | 70 | // cancel() function to return 71 | function cancel() { 72 | clearTimeout(timeout); 73 | done.apply(null, arguments); 74 | } 75 | 76 | return cancel; 77 | }; 78 | 79 | 80 | function getCanvas(width, height) { 81 | if(typeof document !== 'undefined') { 82 | var element = document.createElement("canvas"); 83 | element.width = width; 84 | element.height = height; 85 | return element; 86 | } 87 | else { 88 | var _nodeRequire = require; 89 | var Canvas = _nodeRequire('canvas'); 90 | var canvas = new Canvas(width,height); 91 | return canvas; 92 | } 93 | } 94 | 95 | window.SolidColorSource = SolidColorSource; 96 | })(); -------------------------------------------------------------------------------- /cube-multi-res-generated/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated Multiresolution Cube | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
Fov:
17 |
Face tiles:
18 |
Face size:
19 |
Total tiles:
20 |
Total size:
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /cube-multi-res-generated/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | var SolidColorSource = window.SolidColorSource; 6 | 7 | // Initialize Viewer 8 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 9 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 10 | 11 | // Create a Source which generated the tiles procedurally 12 | var source = new SolidColorSource(512, 512); 13 | 14 | // Create Geometry with a lot of levels 15 | var levels = []; 16 | for(var i = 0; i < 30; i++) { 17 | levels.push({ tileSize: 512, size: 512 * Math.pow(2,i) }); 18 | } 19 | var geometry = new Marzipano.CubeGeometry(levels); 20 | 21 | // Create View 22 | var view = new Marzipano.RectilinearView(); 23 | 24 | // Create and display Scene 25 | var scene = viewer.createScene({ 26 | source: source, 27 | geometry: geometry, 28 | view: view, 29 | pinFirstLevel: true 30 | }); 31 | 32 | scene.switchTo(); 33 | 34 | 35 | // Show information on the interface 36 | var facePixelsElement = document.getElementById('facePixels'); 37 | var faceTilesElement = document.getElementById('faceTiles'); 38 | var totalPixelsElement = document.getElementById('totalPixels'); 39 | var totalTilesElement = document.getElementById('totalTiles'); 40 | var fovElement = document.getElementById('fov'); 41 | 42 | view.addEventListener('change', function() { 43 | // TODO: add this function to the Marzipano API 44 | var level = view.selectLevel(geometry.levelList); 45 | 46 | var faceTiles = level.numHorizontalTiles() * level.numVerticalTiles(); 47 | var totalTiles = faceTiles * 6; 48 | var faceMegaPixels = (level.width()/1000) * (level.height()/1000); 49 | var totalMegaPixels = faceMegaPixels * 6; 50 | 51 | var fovDeg = view.fov() * 180/Math.PI; 52 | var fovFormatted = fovDeg.toFixed(10) + '°'; 53 | 54 | var faceTilesFormatted = formatTileNum(faceTiles); 55 | var totalTilesFormatted = formatTileNum(totalTiles); 56 | var facePixelsFormatted = formatMegaPixels(faceMegaPixels) + 'pixel'; 57 | var totalPixelsFormatted = formatMegaPixels(totalMegaPixels) + 'pixel'; 58 | 59 | faceTilesElement.innerHTML = faceTilesFormatted; 60 | totalTilesElement.innerHTML = totalTilesFormatted; 61 | facePixelsElement.innerHTML = facePixelsFormatted; 62 | totalPixelsElement.innerHTML = totalPixelsFormatted; 63 | fovElement.innerHTML = fovFormatted; 64 | }); 65 | 66 | function formatMegaPixels(num) { 67 | var suffixes = [ 'Mega' , 'Giga', 'Tera', 'Peta', 'Exa', 'Zetta' ]; 68 | 69 | for(var i = 0; i < suffixes.length; i++) { 70 | var divider = Math.pow(1000, i); 71 | if(num < divider) { break; } 72 | } 73 | 74 | i -= 1; 75 | 76 | var divided = num / Math.pow(1000, i); 77 | 78 | var formatted = divided.toFixed(2) + ' ' + suffixes[i]; 79 | 80 | return formatted; 81 | } 82 | 83 | function formatTileNum(num) { 84 | if(num < 999999) { return num; } 85 | 86 | var suffixes = [ '', 'K', 'M' , 'G', 'T', 'P', 'E', 'Z' ]; 87 | 88 | for(var i = 0; i < suffixes.length; i++) { 89 | var divider = Math.pow(1000, i); 90 | if(num < divider) { break; } 91 | } 92 | 93 | i -= 1; 94 | 95 | var divided = num / Math.pow(1000, i); 96 | 97 | var formatted = divided.toFixed(2) + suffixes[i]; 98 | 99 | return formatted; 100 | } 101 | })(); -------------------------------------------------------------------------------- /cube-multi-res-generated/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | background-color: #000; 21 | font-family: Helvetica, Arial, sans-serif; 22 | font-size: 16px; 23 | } 24 | 25 | #pano { 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | width: 100%; 30 | height: 100%; 31 | } 32 | 33 | .info { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | 38 | background-color: rgb(103,115,131); 39 | background-color: rgba(103,115,131,0.9); 40 | color: #fff; 41 | font-size: 22px; 42 | font-weight: bold; 43 | } 44 | 45 | .info > div { 46 | margin: 0.5em 0; 47 | padding: 0.2em 0.5em; 48 | background-color: 49 | } 50 | 51 | .info * { 52 | -moz-user-select: text; 53 | -webkit-user-select: text; 54 | -ms-user-select: text; 55 | user-select: text; 56 | } -------------------------------------------------------------------------------- /cube-multi-res-generated/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /cube-multi-res/.gitignore: -------------------------------------------------------------------------------- 1 | media-files -------------------------------------------------------------------------------- /cube-multi-res/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Multiresolution Cube | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
Gigapixel by
18 |
Jeffrey Martin
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /cube-multi-res/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | // Create Source 11 | 12 | // The tiles were generated with the krpano tools, which indexes the tiles 13 | // starting on 1 instead of 0. Therefore we cannot use ImageUrlSource.fromString() 14 | var previewUrl = "../common-media/prague.tiles/preview.jpg"; 15 | var tileUrl = function(face, z, x, y) { 16 | return "../common-media/prague.tiles/" + z + "/" + face + "/" + y + "/" + x + ".jpg"; 17 | }; 18 | 19 | var source = new Marzipano.ImageUrlSource(function(tile) { 20 | if(tile.z === 0) { 21 | var mapY = 'lfrbud'.indexOf(tile.face) / 6; 22 | return { url: previewUrl, rect: { x: 0, y: mapY, width: 1, height: 1/6 }}; 23 | } 24 | else { 25 | return { url: tileUrl(tile.face, tile.z, tile.x+1, tile.y+1) }; 26 | } 27 | }); 28 | 29 | // Create Geometry 30 | var geometry = new Marzipano.CubeGeometry([ 31 | { tileSize: 256, size: 256, fallbackOnly: true }, 32 | { tileSize: 512, size: 512 }, 33 | { tileSize: 512, size: 1024 }, 34 | { tileSize: 512, size: 2048 }, 35 | { tileSize: 512, size: 4096 }, 36 | { tileSize: 512, size: 8192 }, 37 | { tileSize: 512, size: 16384 }, 38 | { tileSize: 512, size: 32768 }, 39 | { tileSize: 512, size: 65536 } 40 | ]); 41 | 42 | // Create View 43 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(65536, 100*Math.PI/180); 44 | var view = new Marzipano.RectilinearView(null, limiter); 45 | 46 | // Create and display Scene 47 | var scene = viewer.createScene({ 48 | source: source, 49 | geometry: geometry, 50 | view: view, 51 | pinFirstLevel: true 52 | }); 53 | 54 | scene.switchTo(); 55 | })(); -------------------------------------------------------------------------------- /cube-multi-res/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } -------------------------------------------------------------------------------- /cube-multi-res/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /cube-single-res/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Single Resolution Cube | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /cube-single-res/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | // Create Source, Geometry and View 11 | var source = Marzipano.ImageUrlSource.fromString("../common-media/cube-single-res/{f}.jpg"); 12 | var geometry = new Marzipano.CubeGeometry([{ tileSize: 1024, size: 1024 }]); 13 | 14 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(4096, 110*Math.PI/180); 15 | var view = new Marzipano.RectilinearView(null, limiter); 16 | 17 | // Create and display Scene 18 | var scene = viewer.createScene({ 19 | source: source, 20 | geometry: geometry, 21 | view: view, 22 | pinFirstLevel: true 23 | }); 24 | 25 | scene.switchTo(); 26 | })(); -------------------------------------------------------------------------------- /cube-single-res/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } -------------------------------------------------------------------------------- /cube-single-res/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /device-orientation/DeviceOrientationControlMethod.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Marzipano = window.Marzipano; 4 | 5 | var Dynamics = Marzipano.Dynamics; 6 | var eventEmitter = Marzipano.util.eventEmitter; 7 | var degToRad = Marzipano.util.degToRad; 8 | 9 | function DeviceOrientationControlMethod(opts) { 10 | this._dynamics = { 11 | yaw: new Dynamics(), 12 | pitch: new Dynamics() 13 | }; 14 | 15 | this._deviceOrientationHandler = this._handleData.bind(this); 16 | 17 | if (window.DeviceOrientationEvent) { 18 | window.addEventListener('deviceorientation', this._deviceOrientationHandler); 19 | } 20 | 21 | this._previous = {}; 22 | 23 | this._getPitchCallbacks = []; 24 | } 25 | 26 | eventEmitter(DeviceOrientationControlMethod); 27 | 28 | 29 | DeviceOrientationControlMethod.prototype.destroy = function() { 30 | this._dynamics = null; 31 | }; 32 | 33 | DeviceOrientationControlMethod.prototype.getPitch = function(cb) { 34 | this._getPitchCallbacks.push(cb); 35 | } 36 | 37 | 38 | var doEuler = {}; 39 | var euler = {}; 40 | DeviceOrientationControlMethod.prototype._handleData = function(data) { 41 | doEuler.yaw = degToRad(data["alpha"]); 42 | doEuler.pitch = degToRad(data["beta"]); 43 | doEuler.roll = degToRad(data["gamma"]); 44 | 45 | rotateEuler(doEuler, euler); 46 | 47 | // Callback getPitch 48 | this._getPitchCallbacks.forEach(function(callback) { 49 | callback(null, euler.pitch); 50 | }); 51 | this._getPitchCallbacks.length = 0; 52 | 53 | // Emit offsets 54 | if(this._previous.yaw != null && this._previous.pitch != null && this._previous.roll != null) { 55 | this._dynamics.yaw.offset = -(euler.yaw - this._previous.yaw); 56 | this._dynamics.pitch.offset = (euler.pitch - this._previous.pitch); 57 | 58 | this.emit('parameterDynamics', 'yaw', this._dynamics.yaw); 59 | this.emit('parameterDynamics', 'pitch', this._dynamics.pitch); 60 | } 61 | 62 | this._previous.yaw = euler.yaw; 63 | this._previous.pitch = euler.pitch; 64 | this._previous.roll = euler.roll; 65 | }; 66 | 67 | // Taken from krpano's gyro plugin by Aldo Hoeben 68 | // https://github.com/fieldOfView/krpano_fovplugins/tree/master/gyro/ 69 | function rotateEuler(euler, result) 70 | { 71 | // This function is based on http://www.euclideanspace.com/maths/geometry/rotations/conversions/eulerToMatrix/index.htm 72 | // and http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToEuler/index.htm 73 | 74 | var heading, bank, attitude, 75 | ch = Math.cos(euler.yaw), 76 | sh = Math.sin(euler.yaw), 77 | ca = Math.cos(euler.pitch), 78 | sa = Math.sin(euler.pitch), 79 | cb = Math.cos(euler.roll), 80 | sb = Math.sin(euler.roll), 81 | 82 | matrix = [ 83 | sh*sb - ch*sa*cb, -ch*ca, ch*sa*sb + sh*cb, 84 | ca*cb, -sa, -ca*sb, 85 | sh*sa*cb + ch*sb, sh*ca, -sh*sa*sb + ch*cb 86 | ]; // Note: Includes 90 degree rotation around z axis 87 | 88 | /* [m00 m01 m02] 0 1 2 89 | * [m10 m11 m12] 3 4 5 90 | * [m20 m21 m22] 6 7 8 */ 91 | 92 | if (matrix[3] > 0.9999) 93 | { 94 | // Deal with singularity at north pole 95 | heading = Math.atan2(matrix[2],matrix[8]); 96 | attitude = Math.PI/2; 97 | bank = 0; 98 | } 99 | else if (matrix[3] < -0.9999) 100 | { 101 | // Deal with singularity at south pole 102 | heading = Math.atan2(matrix[2],matrix[8]); 103 | attitude = -Math.PI/2; 104 | bank = 0; 105 | } 106 | else 107 | { 108 | heading = Math.atan2(-matrix[6],matrix[0]); 109 | bank = Math.atan2(-matrix[5],matrix[4]); 110 | attitude = Math.asin(matrix[3]); 111 | } 112 | 113 | result.yaw = heading; 114 | result.pitch = attitude; 115 | result.roll = bank; 116 | } 117 | 118 | window.DeviceOrientationControlMethod = DeviceOrientationControlMethod; -------------------------------------------------------------------------------- /device-orientation/img/gyro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/device-orientation/img/gyro.png -------------------------------------------------------------------------------- /device-orientation/img/gyro_disable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/device-orientation/img/gyro_disable.png -------------------------------------------------------------------------------- /device-orientation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DeviceOrientation Control Method | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /device-orientation/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | var FullTiltControlMethod = window.FullTiltControlMethod; 6 | 7 | var toggleDeviceOrientationElement = document.getElementById('toggleDeviceOrientation'); 8 | 9 | // Initialize Viewer 10 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 11 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 12 | 13 | // Register Gyro control method 14 | var deviceOrientationEnabled = false; 15 | var deviceOrientationControlMethod = new DeviceOrientationControlMethod(); 16 | var controls = viewer.controls(); 17 | controls.registerMethod('deviceOrientation', deviceOrientationControlMethod); 18 | 19 | // Create Source, Geometry and View 20 | var source = Marzipano.ImageUrlSource.fromString("../common-media/cube-single-res/{f}.jpg"); 21 | var geometry = new Marzipano.CubeGeometry([{ tileSize: 1024, size: 1024 }]); 22 | 23 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(1024, 100*Math.PI/180); 24 | var view = new Marzipano.RectilinearView(null, limiter); 25 | 26 | 27 | // Create and display Scene 28 | var scene = viewer.createScene({ 29 | source: source, 30 | geometry: geometry, 31 | view: view, 32 | pinFirstLevel: true 33 | }); 34 | 35 | scene.switchTo(); 36 | 37 | 38 | function enableGyro() { 39 | deviceOrientationControlMethod.getPitch(function(err, pitch) { 40 | if(!err) { 41 | view.setPitch(pitch); 42 | } 43 | }); 44 | controls.enableMethod('deviceOrientation'); 45 | deviceOrientationEnabled = true; 46 | toggleDeviceOrientationElement.className = 'enabled'; 47 | } 48 | 49 | function disableGyro() { 50 | controls.disableMethod('deviceOrientation'); 51 | deviceOrientationEnabled = false; 52 | toggleDeviceOrientationElement.className = ''; 53 | } 54 | 55 | function toggleDeviceOrientation() { 56 | if(deviceOrientationEnabled) { disableGyro(); } 57 | else { enableGyro(); } 58 | } 59 | 60 | toggleDeviceOrientationElement.addEventListener('click', toggleDeviceOrientation); 61 | })(); -------------------------------------------------------------------------------- /device-orientation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } 29 | 30 | #toggleDeviceOrientation { 31 | width: 50px; 32 | height: 50px; 33 | position: absolute; 34 | top: 10px; 35 | left: 10px; 36 | background-color: rgb(103,115,131); 37 | background-color: rgba(103,115,131,0.8); 38 | } 39 | 40 | #toggleDeviceOrientation img { 41 | width: 34px; 42 | margin: 8px; 43 | } 44 | 45 | #toggleDeviceOrientation .disable { 46 | display: none; 47 | } 48 | 49 | #toggleDeviceOrientation.enabled .disable { 50 | display: block; 51 | } 52 | 53 | #toggleDeviceOrientation.enabled .enable { 54 | display: none; 55 | } -------------------------------------------------------------------------------- /device-orientation/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /editable/brush.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var editMode = window.editMode; 5 | 6 | var viewerElement = document.querySelector('#pano'); 7 | 8 | var brush = { 9 | radius: 30, 10 | updateCursor: updateCursor 11 | }; 12 | 13 | // Brush DOM element 14 | var element = document.createElement('div'); 15 | element.style.width = (brush.radius * 2) + 'px'; 16 | element.style.height = (brush.radius * 2) + 'px'; 17 | element.style.marginTop = (-brush.radius) + 'px'; 18 | element.style.marginLeft = (-brush.radius) + 'px'; 19 | element.style.position = 'absolute'; 20 | element.style.pointerEvents = 'none'; 21 | element.style.borderStyle = 'solid'; 22 | element.style.borderWidth = '1px'; 23 | element.style.borderColor = '#333333'; 24 | element.style.borderRadius = '50%'; 25 | element.style.display = 'none'; 26 | document.body.appendChild(element); 27 | 28 | var mousePosition = null; 29 | var displayingBrush = false; 30 | 31 | 32 | // Update mousePosition variable for fake cursor 33 | viewerElement.addEventListener('mousemove', function(e) { 34 | mousePosition = { x: e.clientX, y: e.clientY }; 35 | updateCursor(); 36 | }); 37 | window.addEventListener('blur', function() { 38 | mousePosition = null; 39 | updateCursor(); 40 | }); 41 | 42 | 43 | function updateCursor() { 44 | if(mousePosition && editMode.get()) { 45 | element.style.transform = "translateX(" + mousePosition.x + "px) translateY(" + mousePosition.y + "px) translateZ(0)"; 46 | if(!displayingBrush) { 47 | viewerElement.style.cursor = 'none'; 48 | element.style.display = 'block'; 49 | displayingBrush = true; 50 | } 51 | } 52 | else { 53 | if(displayingBrush) { 54 | element.style.display = 'none'; 55 | viewerElement.style.cursor = null; 56 | displayingBrush = false; 57 | } 58 | } 59 | } 60 | 61 | window.brush = brush; 62 | 63 | })(); -------------------------------------------------------------------------------- /editable/createEditableLayer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | var colorEffects = Marzipano.colorEffects; 6 | 7 | function createEditableLayers(stage, url, cb) { 8 | canvasFromUrl(url, function(err, canvas) { 9 | if(err) { return cb(err); } 10 | 11 | // Copy for the desaturated layer 12 | var canvas2 = desaturated(canvas); 13 | 14 | 15 | // Common objects 16 | var geometry = new Marzipano.EquirectGeometry([{ width: canvas.width }]); 17 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(canvas.width/4 * 1.5, 100*Math.PI/180); 18 | var view = new Marzipano.RectilinearView(null, limiter); 19 | 20 | // Color layer 21 | var asset = new Marzipano.DynamicCanvasAsset(canvas); 22 | var source = new Marzipano.SingleAssetSource(asset); 23 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 24 | var colorLayer = new Marzipano.Layer(stage, source, geometry, view, textureStore); 25 | 26 | // Desaturated layer 27 | var asset2 = new Marzipano.DynamicCanvasAsset(canvas2); 28 | var source2 = new Marzipano.SingleAssetSource(asset2); 29 | var textureStore2 = new Marzipano.TextureStore(geometry, source2, stage); 30 | var desaturatedLayer = new Marzipano.Layer(stage, source2, geometry, view, textureStore2); 31 | 32 | cb(null, { colorLayer: colorLayer, desaturatedLayer: desaturatedLayer }); 33 | }); 34 | } 35 | 36 | function canvasFromUrl(url, cb) { 37 | var canvas = document.createElement('canvas'); 38 | var ctx = canvas.getContext('2d'); 39 | 40 | var img = new Image(); 41 | 42 | img.onload = function(){ 43 | canvas.width = img.naturalWidth; 44 | canvas.height = img.naturalHeight; 45 | ctx.drawImage(img, 0, 0); // Or at whatever offset you like 46 | cb(null, canvas); 47 | }; 48 | 49 | img.onerror = function(e) { 50 | cb(e); 51 | }; 52 | 53 | img.src = url; 54 | } 55 | 56 | function desaturated(source) { 57 | var canvas = document.createElement('canvas'); 58 | canvas.width = source.width; 59 | canvas.height = source.height; 60 | var ctx = canvas.getContext('2d'); 61 | 62 | var imageData = source.getContext('2d').getImageData(0, 0, source.width, source.height); 63 | colorEffects.applyToImageData(imageData, colorEffects.saturation(0)); 64 | ctx.putImageData(imageData, 0, 0); 65 | return canvas; 66 | } 67 | 68 | window.createEditableLayers = createEditableLayers; 69 | 70 | })(); -------------------------------------------------------------------------------- /editable/editMode.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var eventEmitter = window.eventEmitter; 5 | 6 | var editMode = { 7 | get: getEditMode 8 | }; 9 | 10 | eventEmitter(editMode); 11 | 12 | // Enable edit mode with key press 13 | var shiftPressed = false; 14 | var ctrlPressed = false; 15 | window.addEventListener('keydown', function(e) { 16 | var previousEditMode = getEditMode(); 17 | if(e.keyCode === 16) { shiftPressed = true; } 18 | if(e.keyCode === 17) { ctrlPressed = true; } 19 | if(getEditMode() !== previousEditMode) { 20 | editMode.emit('changed'); 21 | } 22 | }); 23 | window.addEventListener('keyup', function(e) { 24 | var previousEditMode = getEditMode(); 25 | if(e.keyCode === 16) { shiftPressed = false; } 26 | if(e.keyCode === 17) { ctrlPressed = false; } 27 | if(getEditMode() !== previousEditMode) { 28 | editMode.emit('changed'); 29 | } 30 | }); 31 | window.addEventListener('blur', function() { 32 | var previousEditMode = getEditMode(); 33 | shiftPressed = false; 34 | ctrlPressed = false; 35 | if(getEditMode() !== previousEditMode) { 36 | editMode.emit('changed'); 37 | } 38 | }); 39 | 40 | function getEditMode() { 41 | if(shiftPressed) { 42 | return 'hide'; 43 | } 44 | else if(ctrlPressed) { 45 | return 'show'; 46 | } 47 | else { 48 | return false; 49 | } 50 | } 51 | 52 | 53 | window.editMode = editMode; 54 | 55 | })(); -------------------------------------------------------------------------------- /editable/eventEmitter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function EventEmitter() {} 4 | 5 | EventEmitter.prototype.addEventListener = function(event, fn) { 6 | var eventMap = this.__events = this.__events || {}; 7 | var handlerList = eventMap[event] = eventMap[event] || []; 8 | handlerList.push(fn); 9 | }; 10 | 11 | EventEmitter.prototype.removeEventListener = function(event, fn) { 12 | var eventMap = this.__events = this.__events || {}; 13 | var handlerList = eventMap[event]; 14 | if (handlerList) { 15 | var index = handlerList.indexOf(fn); 16 | if (index >= 0) { 17 | handlerList.splice(index, 1); 18 | } 19 | } 20 | }; 21 | 22 | EventEmitter.prototype.emit = function(event, arg1, arg2, arg3, arg4, arg5) { 23 | var eventMap = this.__events = this.__events || {}; 24 | var handlerList = eventMap[event]; 25 | if (handlerList) { 26 | for (var i = 0; i < handlerList.length; i++) { 27 | var fn = handlerList[i]; 28 | fn.call(this, arg1, arg2, arg3, arg4, arg5); 29 | } 30 | } 31 | }; 32 | 33 | function eventEmitter(obj) { 34 | var propList = Object.keys(EventEmitter.prototype); 35 | for (var i = 0; i < propList.length; i++) { 36 | var prop = propList[i]; 37 | obj[prop] = EventEmitter.prototype[prop]; 38 | } 39 | } 40 | 41 | window.eventEmitter = eventEmitter; 42 | -------------------------------------------------------------------------------- /editable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Editable Source | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /editable/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | font-family: Helvetica, Arial, sans-serif; 21 | } 22 | 23 | #pano { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: calc(100% - 300px); 28 | height: 100%; 29 | } 30 | 31 | #sidebar { 32 | position: absolute; 33 | top: 0; 34 | right: 0; 35 | width: 300px; 36 | height: 100%; 37 | 38 | background-color: rgb(58,68,84); 39 | color: #fff; 40 | 41 | font-size: 16px; 42 | line-height: 1.2em; 43 | padding: 0.5em; 44 | 45 | overflow-y: auto; 46 | } 47 | 48 | #sidebar p { 49 | margin-bottom: 1em; 50 | } 51 | #sidebar li, #sidebar .tool { 52 | margin-bottom: 0.5em; 53 | } 54 | #sidebar ul { 55 | list-style: disc; 56 | padding-left: 10px; 57 | margin-left: 10px; 58 | } 59 | 60 | .canvas-container { 61 | width: 90%; 62 | margin-left: 5%; 63 | } 64 | 65 | .canvas-container canvas { 66 | width: 100%; 67 | } 68 | 69 | .export-container { 70 | text-align: center; 71 | margin-top: 20px; 72 | margin-bottom: 20px; 73 | } 74 | 75 | .export-container button { 76 | margin-top: 10px; 77 | font-size: .8em; 78 | padding: .5em 7em; 79 | background-color: #25aae1; 80 | border: 2px solid #25aae1; 81 | color: #fff; 82 | border-radius: 5px; 83 | cursor: pointer; 84 | } -------------------------------------------------------------------------------- /editable/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /equirectangular/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Equirectangular | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /equirectangular/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | // Create Source, Geometry and View 11 | var source = Marzipano.ImageUrlSource.fromString("../common-media/equirect.jpg"); 12 | var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]); 13 | 14 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(1024, 100*Math.PI/180); 15 | var view = new Marzipano.RectilinearView(null, limiter); 16 | 17 | // Create and display Scene 18 | var scene = viewer.createScene({ 19 | source: source, 20 | geometry: geometry, 21 | view: view, 22 | pinFirstLevel: true 23 | }); 24 | 25 | scene.switchTo(); 26 | })(); -------------------------------------------------------------------------------- /equirectangular/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } -------------------------------------------------------------------------------- /equirectangular/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /flat-square-tiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Multiresolution Flat | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /flat-square-tiles/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | // Create Source 11 | var tileUrl = function(face, z, x, y) { 12 | return "../common-media/lx-giga.tiles/l" + z + "/" + y + "/l" + z + '_' + y + '_' + x + ".jpg"; 13 | }; 14 | 15 | var source = new Marzipano.ImageUrlSource(function(tile) { 16 | return { url: tileUrl(tile.face, tile.z+1, tile.x+1, tile.y+1) }; 17 | }); 18 | 19 | // Create Geometry 20 | var geometry = new Marzipano.FlatGeometry([ 21 | { width: 756, height: 312, tileWidth: 756, tileHeight: 756 }, 22 | { width: 1512, height: 624, tileWidth: 756, tileHeight: 756 }, 23 | { width: 3024, height: 1248, tileWidth: 756, tileHeight: 756 }, 24 | { width: 6048, height: 2496, tileWidth: 756, tileHeight: 756 }, 25 | { width: 12096, height: 4992, tileWidth: 756, tileHeight: 756 }, 26 | { width: 24192, height: 9984, tileWidth: 756, tileHeight: 756 }, 27 | { width: 48384, height: 19968, tileWidth: 756, tileHeight: 756 } 28 | ]); 29 | 30 | // Create View 31 | var limiter = Marzipano.util.compose( 32 | Marzipano.FlatView.limit.resolution(48384), 33 | Marzipano.FlatView.limit.letterbox() 34 | ); 35 | var view = new Marzipano.FlatView({ mediaAspectRatio: 48384/19968}, limiter); 36 | 37 | // Create and display Scene 38 | var scene = viewer.createScene({ 39 | source: source, 40 | geometry: geometry, 41 | view: view, 42 | pinFirstLevel: true 43 | }); 44 | 45 | scene.switchTo(); 46 | })(); -------------------------------------------------------------------------------- /flat-square-tiles/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | background-color: #000; 21 | } 22 | 23 | #pano { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | } -------------------------------------------------------------------------------- /flat-square-tiles/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /hotspot-styles/hotspots/expand.css: -------------------------------------------------------------------------------- 1 | #expand { 2 | width: 70px; 3 | height: 70px; 4 | margin-left: -35px; 5 | margin-top: -70px; 6 | background-color: #fff; 7 | color: #000; 8 | border-radius: 50%; 9 | text-align: center; 10 | cursor: pointer; 11 | transition: width .3s ease-in-out, 12 | height .3s ease-in-out, 13 | background-color .3s ease-in-out, 14 | color .3s ease-in-out, 15 | margin .3s ease-in-out; 16 | } 17 | 18 | #expand::after { 19 | content: ''; 20 | position: absolute; 21 | width: 0; 22 | height: 0; 23 | top: 68px; 24 | left: 25px; 25 | border: solid transparent; 26 | border-color: transparent; 27 | border-top-color: #fff; 28 | border-width: 10px; 29 | transition: border-top-color .3s ease-in-out, 30 | border-width .3s ease-in-out, 31 | left .3s ease-in-out, 32 | top .3s ease-in-out; 33 | } 34 | 35 | #expand .title{ 36 | line-height: 66px; 37 | } 38 | 39 | #expand .icon, 40 | #expand p{ 41 | opacity: 0; 42 | pointer-events: none; 43 | } 44 | 45 | 46 | #expand .icon{ 47 | width: 0; 48 | height: 0; 49 | margin-top: auto; 50 | transition: all .3s ease-in-out; 51 | } 52 | 53 | #expand p{ 54 | width: 90%; 55 | margin: auto; 56 | font-style: italic; 57 | font-size: 12px; 58 | margin-top: 10px; 59 | transition: opacity .2s ease-in-out; 60 | } 61 | 62 | 63 | #expand:hover { 64 | width: 200px; 65 | height: 200px; 66 | margin-top: -200px; 67 | margin-left: -100px; 68 | background-color: #222; 69 | color: #fff; 70 | z-index: 2; 71 | } 72 | 73 | #expand:hover .icon{ 74 | width: 50px; 75 | height: 50px; 76 | opacity: 1; 77 | } 78 | 79 | #expand:hover p{ 80 | opacity: 1; 81 | transition: opacity .3s ease-in-out .3s; 82 | } 83 | 84 | 85 | #expand:hover::after{ 86 | border-top-color: transparent; 87 | border-width: 0; 88 | left: 95px; 89 | top: 198px; 90 | } 91 | 92 | 93 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/expand.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#expand"), { yaw: 0.42, pitch: -0.03 }); 2 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/hintspot.css: -------------------------------------------------------------------------------- 1 | #hintspot { 2 | width: 60px; 3 | height: 60px; 4 | margin-left: -30px; 5 | margin-top: -30px; 6 | 7 | opacity: 0.8; 8 | transition: opacity 0.2s; 9 | 10 | cursor: pointer; 11 | } 12 | 13 | #hintspot img { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | #hintspot:hover { 19 | opacity: 1; 20 | } 21 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/hintspot.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#hintspot"), { yaw: 2.15, pitch: 0 }); 2 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/info.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#info"), { yaw: -2.93, pitch: -0.15 }); 2 | 3 | document.querySelector("#info .icon_wrapper").addEventListener('click', function() { 4 | document.querySelector("#info").classList.toggle('expanded'); 5 | document.querySelector("#inner_icon").classList.toggle('closeIcon'); 6 | }); 7 | 8 | document.querySelector("#info .close").addEventListener('click', function() { 9 | document.querySelector("#info").classList.remove('expanded'); 10 | document.querySelector("#inner_icon").classList.remove('closeIcon'); 11 | }); 12 | 13 | 14 | document.querySelector('#info input[type="text"]').addEventListener('keydown', function(evt) { 15 | evt.stopPropagation(); 16 | }); -------------------------------------------------------------------------------- /hotspot-styles/hotspots/reveal.css: -------------------------------------------------------------------------------- 1 | #reveal{ 2 | width: 80px; 3 | height: 80px; 4 | background-color: #25aae1; 5 | border-radius: 50%; 6 | margin-left: 0; 7 | text-align: center; 8 | cursor: pointer; 9 | transition: height .3s ease-in-out, 10 | width .3s ease-in-out, 11 | border-radius .3s ease-in-out, 12 | margin .3s ease-in-out; 13 | } 14 | 15 | #reveal > img{ 16 | width: 50px; 17 | margin: 15px 0; 18 | } 19 | 20 | .reveal-content{ 21 | width: 180px; 22 | height: 160px; 23 | padding: 10px; 24 | background-color: #fff; 25 | opacity: 0; 26 | text-align: center; 27 | pointer-events: none; 28 | transition: opacity .01s ease-in-out; 29 | } 30 | 31 | .reveal-content img{ 32 | width: 120px; 33 | opacity: 0; 34 | transition: width .01s ease-in-out, 35 | opacity .01s ease-in-out; 36 | } 37 | 38 | .reveal-content p{ 39 | margin: 10px 0; 40 | color: #2d2d2d; 41 | margin-top: -20px; 42 | opacity: 0; 43 | transition: margin .01s ease-in-out, 44 | opacity .01s ease-in-out; 45 | } 46 | 47 | #reveal:hover{ 48 | width: 180px; 49 | height: 240px; 50 | border-radius: 5px; 51 | margin-left: -50px; 52 | } 53 | 54 | #reveal:hover .reveal-content{ 55 | opacity: 1; 56 | pointer-events: all; 57 | border-bottom-left-radius: 5px; 58 | border-bottom-right-radius: 5px; 59 | transition: opacity .3s ease-in-out .3s; 60 | } 61 | 62 | #reveal:hover .reveal-content img{ 63 | width: 160px; 64 | opacity: 1; 65 | transition: width .3s ease-in-out .4s, 66 | opacity .3s ease-in-out .4s; 67 | } 68 | 69 | #reveal:hover .reveal-content p{ 70 | margin-top: 10px; 71 | opacity: 1; 72 | transition: margin .3s ease-in-out .6s, 73 | opacity .3s ease-in-out .6s; 74 | } -------------------------------------------------------------------------------- /hotspot-styles/hotspots/reveal.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#reveal"), { yaw: -0.92, pitch: -0.1 }); 2 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/rotate.css: -------------------------------------------------------------------------------- 1 | .rotate-hotspot { 2 | width: 150px; 3 | height: 150px; 4 | border-radius: 50%; 5 | cursor: pointer; 6 | } 7 | 8 | .rotate-hotspot:hover { 9 | z-index: 3; 10 | } 11 | 12 | 13 | .rotate-img, 14 | .rotate-content{ 15 | display: block; 16 | position: absolute; 17 | width: 100%; 18 | height: 100%; 19 | border-radius: 50%; 20 | background-position: center center; 21 | transition: all 0.4s ease-in-out; 22 | -webkit-transform-origin: 50% 0%; 23 | transform-origin: 50% 0%; 24 | 25 | } 26 | 27 | 28 | .rotate-img{ 29 | background: url('../img/marzipanner-logo.png') no-repeat center center; 30 | -webkit-background-size: cover; 31 | -moz-background-size: cover; 32 | -o-background-size: cover; 33 | background-size: cover; 34 | } 35 | 36 | .rotate-content{ 37 | -webkit-transform: translate3d(0,0,-150px) rotate3d(1,0,0,90deg); 38 | transform: translate3d(0,0,-150px) rotate3d(1,0,0,90deg); 39 | background: #fff; 40 | color: #000; 41 | text-align: center; 42 | padding: 20px; 43 | opacity: 0; 44 | } 45 | 46 | 47 | .rotate-content h1{ 48 | font-weight: bolder; 49 | font-size: 20px; 50 | padding: 10px 0; 51 | border-bottom: 1px solid #000; 52 | } 53 | 54 | .rotate-content p{ 55 | font-size: 14px; 56 | line-height: 20px; 57 | padding: 10px 0; 58 | font-weight: lighter; 59 | } 60 | 61 | 62 | .rotate-hotspot:hover .rotate-img{ 63 | -webkit-transform: translate3d(0,150px,0) rotate3d(1,0,0,-90deg); 64 | transform: translate3d(0,130px,0) rotate3d(1,0,0,-90deg); 65 | opacity: 0; 66 | } 67 | 68 | .rotate-hotspot:hover .rotate-content{ 69 | -webkit-transform: rotate3d(1,0,0,0deg); 70 | transform: rotate3d(1,0,0,0deg); 71 | opacity: 1; 72 | } 73 | 74 | 75 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/rotate.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#rotate-hotspot"), { yaw: -1.78, pitch: -0.2 }); 2 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/textInfo.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#textInfo"), { yaw: 0.1, pitch: 0.13 }); 2 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/tooltip.css: -------------------------------------------------------------------------------- 1 | #tooltip { 2 | width: 60px; 3 | height: 60px; 4 | margin-left: -30px; 5 | margin-top: -30px; 6 | 7 | transition: opacity 0.2s; 8 | -webkit-transition: opacity 0.2s; 9 | 10 | perspective: 500px; 11 | -webkit-perspective: 500px; 12 | 13 | } 14 | 15 | #tooltip img { 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | #tooltip:hover { 21 | z-index: 3; 22 | } 23 | 24 | #tooltip .tip { 25 | position: absolute; 26 | left: 80px; 27 | top: 0; 28 | width: 200px; 29 | 30 | background-color: white; 31 | color: black; 32 | border-radius: 5px; 33 | 34 | opacity: 0; 35 | pointer-events: none; 36 | transform: rotateZ(5deg) rotateY(40deg); 37 | -webkit-transform: rotateZ(5deg) rotateY(40deg); 38 | 39 | transform-origin: left center; 40 | -webkit-transform-origin: left center; 41 | 42 | transition: all 0.25s; 43 | -webkit-transition: all 0.25s; 44 | } 45 | 46 | #tooltip:hover .tip { 47 | opacity: 1; 48 | pointer-events: all; 49 | transform: none; 50 | -webkit-transform: none; 51 | font-size: 0; 52 | } 53 | 54 | #tooltip .tip p { 55 | font-size: 16px; 56 | padding: .5em; 57 | text-align: center; 58 | background-color: #25aae1; 59 | border-top-right-radius: 5px; 60 | border-top-left-radius: 5px; 61 | color: #eee; 62 | } 63 | 64 | #tooltip .tip img { 65 | font-size: 16px; 66 | padding: .5em; 67 | } 68 | 69 | 70 | #tooltip .out{ 71 | position: relative; 72 | width: 70px; 73 | height: 70px; 74 | padding: 5px; 75 | border: 5px solid rgba(255,255,255,0); 76 | border-radius: 50%; 77 | cursor: pointer; 78 | transition: border .3s ease-in-out; 79 | } 80 | 81 | 82 | #tooltip .in{ 83 | width: 100%; 84 | height: 100%; 85 | background-color: #25aae1; 86 | padding: 10px; 87 | border-radius: 50%; 88 | color: #444; 89 | text-align: center; 90 | line-height: 60px; 91 | font-size: 2em; 92 | font-family: cursive; 93 | transition: background-color .3s ease-in-out; 94 | } 95 | 96 | 97 | #tooltip .in .image{ 98 | width: 30px; 99 | height: 30px; 100 | background-image: url(../img/info.png); 101 | background-size: 30px; 102 | background-position: 0 30px; 103 | } 104 | 105 | 106 | #tooltip .out:hover{ 107 | border: 5px solid #fff; 108 | } 109 | 110 | 111 | #tooltip .out:hover .in{ 112 | background-color: #fff; 113 | } 114 | 115 | 116 | #tooltip .out:hover .in .image{ 117 | background-position: 0 0px; 118 | } 119 | 120 | 121 | -------------------------------------------------------------------------------- /hotspot-styles/hotspots/tooltip.js: -------------------------------------------------------------------------------- 1 | scene.hotspotContainer().createHotspot(document.querySelector("#tooltip"), { yaw: 2.95, pitch: -0.05 }); 2 | -------------------------------------------------------------------------------- /hotspot-styles/img/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/bullet.png -------------------------------------------------------------------------------- /hotspot-styles/img/forno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/forno.png -------------------------------------------------------------------------------- /hotspot-styles/img/hotspot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/hotspot.png -------------------------------------------------------------------------------- /hotspot-styles/img/human.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/human.png -------------------------------------------------------------------------------- /hotspot-styles/img/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/info.png -------------------------------------------------------------------------------- /hotspot-styles/img/marzipanner-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/marzipanner-logo.png -------------------------------------------------------------------------------- /hotspot-styles/img/marzipano.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/marzipano.png -------------------------------------------------------------------------------- /hotspot-styles/img/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/photo.jpg -------------------------------------------------------------------------------- /hotspot-styles/img/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/hotspot-styles/img/photo.png -------------------------------------------------------------------------------- /hotspot-styles/img/tooltip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /hotspot-styles/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Marzipano = window.Marzipano; 4 | 5 | // Viewer options. 6 | var viewerOpts = { swfPath: 'vendor/marzipano.swf' }; 7 | 8 | // Initialize viewer and scene 9 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 10 | 11 | var source = Marzipano.ImageUrlSource.fromString( 12 | "../common-media/museu-cinzeiros/{z}/{f}/{y}/{x}.jpg", 13 | { cubeMapPreviewUrl: "../common-media/museu-cinzeiros/preview.jpg" }); 14 | 15 | var geometry = new Marzipano.CubeGeometry([ 16 | { "tileSize": 256, "size": 256, "fallbackOnly": true }, 17 | { "size": 512, "tileSize": 512 }, 18 | { "size": 1024, "tileSize": 512 }, 19 | { "size": 2048, "tileSize": 512 } 20 | ]); 21 | 22 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(2048, 120*Math.PI/180); 23 | 24 | var view = new Marzipano.RectilinearView(null, limiter); 25 | var scene = viewer.createScene({ 26 | source: source, 27 | geometry: geometry, 28 | view: view, 29 | pinFirstLevel: true 30 | }); 31 | 32 | scene.switchTo({ transitionDuration: 0 }); 33 | -------------------------------------------------------------------------------- /hotspot-styles/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | font-family: Helvetica, Arial, sans-serif; 21 | font-size: 16px; 22 | background-color: #000; 23 | color: #fff; 24 | } 25 | 26 | #pano { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | } -------------------------------------------------------------------------------- /hotspot-styles/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /hotspots-embedded/hotspotHtml.js: -------------------------------------------------------------------------------- 1 | window.hotspotHtml = { 2 | youtube: '', 3 | youtubeWithControls: '', 4 | googleMaps: '', 5 | koloreyes: '', 6 | roundme: '' 7 | } 8 | -------------------------------------------------------------------------------- /hotspots-embedded/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Embedded Hotspots | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |
Google AdSense waiting for approval...
18 |
19 | 20 | 21 | 25 | 28 |
29 |
30 | 31 | 32 | 33 |
Tweets by @JavaScriptDaily
34 | 35 | 36 | 37 |
38 | 45 | 46 |
47 |
48 |
49 | 50 | 51 |
52 |
Select something to play!
53 |
54 | 55 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /hotspots-embedded/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | // Create Source 11 | var source = Marzipano.ImageUrlSource.fromString( 12 | "../common-media/outdoor/{z}/{f}/{y}/{x}.jpg", 13 | { cubeMapPreviewUrl: "../common-media/outdoor/preview.jpg" }); 14 | 15 | // Create Geometry 16 | var geometry = new Marzipano.CubeGeometry([ 17 | { tileSize: 256, size: 256, fallbackOnly: true }, 18 | { tileSize: 512, size: 512 }, 19 | { tileSize: 512, size: 1024 }, 20 | { tileSize: 512, size: 2048 }, 21 | { tileSize: 512, size: 4096 } 22 | ]); 23 | 24 | // Create View 25 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(4096, 100*Math.PI/180); 26 | var view = new Marzipano.RectilinearView(null, limiter); 27 | 28 | // Create and display Scene 29 | var scene = viewer.createScene({ 30 | source: source, 31 | geometry: geometry, 32 | view: view, 33 | pinFirstLevel: true 34 | }); 35 | 36 | scene.switchTo(); 37 | 38 | var container = scene.hotspotContainer(); 39 | 40 | // Create hotspot for the AdSense widget 41 | container.createHotspot(document.getElementById('adsense'), { yaw: -1.525, pitch: -0.395 }, { perspective: { radius: 1050, extraRotations: "rotateX(23deg) rotateY(2deg) rotateZ(0deg)" }}); 42 | 43 | // Create hotspot for the Twitter widget 44 | container.createHotspot(document.getElementById('twitter'), { yaw: -1.434, pitch: -0.8 }, { perspective: { radius: 950, extraRotations: "rotateX(42deg) rotateY(6deg) rotateZ(1deg)" }}); 45 | 46 | // Create hotspot for the Facebook Like button 47 | container.createHotspot(document.getElementById('facebook'), { yaw: 0.8, pitch: -0.3 }, { perspective: { radius: 750, extraRotations: "rotateX(17deg) rotateY(-10deg) rotateZ(0deg)" }}); 48 | 49 | // Create hotspot with different sources 50 | container.createHotspot(document.getElementById('iframespot'), { yaw: 0.0335, pitch: -0.102 }, { perspective: { radius: 1640, extraRotations: "rotateX(5deg)" }}); 51 | container.createHotspot(document.getElementById('iframeselect'), { yaw: -0.35, pitch: -0.239 }); 52 | 53 | // Switch sources when clicked 54 | function switchHotspot(id) { 55 | var wrapper = document.getElementById('iframespot'); 56 | wrapper.innerHTML = window.hotspotHtml[id]; 57 | } 58 | 59 | var switchElements = document.querySelectorAll('[data-source]'); 60 | for(var i = 0; i < switchElements.length; i++) { 61 | var element = switchElements[i]; 62 | addClickEvent(element); 63 | } 64 | 65 | function addClickEvent(element) { 66 | element.addEventListener('click', function() { 67 | switchHotspot(element.getAttribute('data-source')); 68 | }); 69 | } 70 | })(); -------------------------------------------------------------------------------- /hotspots-embedded/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | font-family: helvetica, sans-serif; 21 | } 22 | 23 | #pano { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | [data-source] { 32 | display: inline-block; 33 | cursor: pointer; 34 | } 35 | 36 | #iframespot{ 37 | } 38 | 39 | #iframeselect { 40 | position: absolute; 41 | width: 120px; 42 | margin-left: -140px; 43 | border-radius: 10px; 44 | overflow: hidden; 45 | opacity: 0.95; 46 | } 47 | 48 | 49 | #iframeselect li{ 50 | width: 100%; 51 | padding: 1em; 52 | font-size: 12px; 53 | text-align: center; 54 | background-color: #444; 55 | color: #ddd; 56 | transition: .3s background-color ease-in-out, 57 | .3s color ease-in-out; 58 | } 59 | 60 | #iframeselect li:hover{ 61 | background-color: #666; 62 | color: #fff; 63 | } 64 | 65 | #iframespot { 66 | background-color: #444; 67 | position: relative; 68 | width: 1280px; 69 | height: 480px; 70 | } 71 | 72 | #iframespot .message { 73 | text-align: center; 74 | padding-top: 190px; 75 | font-size: 70px; 76 | color: #ddd; 77 | } 78 | 79 | #adsense { 80 | background-color: #fff; 81 | color: #000; 82 | } 83 | 84 | .adsense-fallback { 85 | padding: 1em; 86 | position: absolute; 87 | top: 0; 88 | left: 0; 89 | } -------------------------------------------------------------------------------- /hotspots-embedded/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /hotspots-rect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hotspots with Rect Effect | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /hotspots-rect/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | var stage = viewer.stage(); 10 | 11 | // Create Source, Geometry and View 12 | var source = Marzipano.ImageUrlSource.fromString("../common-media/cube-single-res/{f}.jpg"); 13 | var geometry = new Marzipano.CubeGeometry([{ tileSize: 1024, size: 1024 }]); 14 | 15 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(1024, 100*Math.PI/180); 16 | 17 | // Create scenes with different `rect` parameters and with hotspots 18 | var rects = [ 19 | null, 20 | { relativeWidth: 0.6, relativeHeight: 0.3, relativeX: 0.6 }, 21 | { relativeWidth: 0.6, relativeHeight: 0.7, relativeX: 0.4, relativeY: 0.3 } 22 | ]; 23 | 24 | var marzipanoObjects = rects.map(function(rect) { 25 | var view = new Marzipano.RectilinearView(null); 26 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 27 | var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore, { effects: { rect: rect }}); 28 | var hotspotContainer = new Marzipano.HotspotContainer(viewer.domElement(), stage, view, viewer.renderLoop(), { rect: rect }); 29 | 30 | var hotspotElement = document.createElement('div'); 31 | hotspotElement.className = 'hotspot'; 32 | var hotspot = hotspotContainer.createHotspot(hotspotElement, { yaw: 0.1, pitch: -0.3 }); 33 | 34 | stage.addLayer(layer); 35 | 36 | return { layer: layer, hotspotContainer: hotspotContainer, hotspot: hotspot} 37 | }); 38 | 39 | window.marzipanoObjects = marzipanoObjects; 40 | })(); -------------------------------------------------------------------------------- /hotspots-rect/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } 29 | 30 | .hotspot { 31 | background-color: red; 32 | width: 30px; 33 | height: 30px; 34 | margin-left: -15px; 35 | margin-top: -15px; 36 | } -------------------------------------------------------------------------------- /hotspots-rect/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /layers/createEquirectLayer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function createEquirectLayer(stage, view, canvas) { 4 | var Marzipano = window.Marzipano; 5 | 6 | var asset = new Marzipano.DynamicCanvasAsset(canvas); 7 | var source = new Marzipano.SingleAssetSource(asset); 8 | var geometry = new Marzipano.EquirectGeometry([{ width: canvas.width }]); 9 | 10 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 11 | 12 | var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore); 13 | 14 | return layer; 15 | } 16 | 17 | window.createEquirectLayer = createEquirectLayer; -------------------------------------------------------------------------------- /layers/fileToCanvas.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function fileToCanvas(file, cb) { 4 | var canvas = document.createElement('canvas'); 5 | var ctx = canvas.getContext('2d'); 6 | 7 | var img = document.createElement('img'); 8 | 9 | img.onload = function() { 10 | canvas.width = img.naturalWidth; 11 | canvas.height = img.naturalHeight; 12 | ctx.drawImage(img, 0, 0); 13 | cb(null, canvas); 14 | }; 15 | 16 | img.onerror = function(err) { 17 | cb(err); 18 | }; 19 | 20 | img.src = URL.createObjectURL(file); 21 | } 22 | 23 | window.fileToCanvas = fileToCanvas; -------------------------------------------------------------------------------- /layers/img/hotspot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/layers/img/hotspot.png -------------------------------------------------------------------------------- /layers/ko-element.js: -------------------------------------------------------------------------------- 1 | var ko = window.ko; 2 | 3 | ko.bindingHandlers.element = { 4 | init: function(element, valueAccessor) { 5 | var value = valueAccessor(); 6 | element.appendChild(value); 7 | } 8 | }; -------------------------------------------------------------------------------- /layers/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | font-family: Helvetica, Arial, sans-serif; 21 | font-size: 16px; 22 | background-color: #000; 23 | color: #fff; 24 | } 25 | 26 | a, a:hover, a:active, a:visited { 27 | text-decoration: none; 28 | color: inherit; 29 | } 30 | 31 | #wrapper { 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | } 38 | 39 | 40 | #pano, #sidebar { 41 | height: 100%; 42 | display: inline-block; 43 | vertical-align: top; 44 | } 45 | 46 | #sidebar { 47 | width: 300px; 48 | height: auto; 49 | max-height: 100%; 50 | overflow-y: auto; 51 | background-color: rgb(58,68,84); 52 | padding: 10px; 53 | } 54 | 55 | .instructions p{ 56 | padding: 10px 0; 57 | } 58 | 59 | #pano { 60 | width: calc(100% - 300px); 61 | position: relative; 62 | } 63 | 64 | .thumbnail { 65 | width: 100%; 66 | } 67 | 68 | .thumbnail canvas { 69 | width: 100%; 70 | } 71 | 72 | .layerControls{ 73 | padding: 10px 0; 74 | border-top: 1px solid rgb(103,115,131); 75 | } 76 | 77 | .layerControls .name{ 78 | padding: 10px; 79 | background-color: rgb(103,115,131); 80 | } 81 | 82 | input[type="number"] { 83 | width: 54px; 84 | height: 25px; 85 | margin-right: 5px; 86 | margin-bottom: 5px; 87 | color: #FFF; 88 | font-size: .8em; 89 | padding: 5px; 90 | background-color: rgb(103,115,131); 91 | border: none; 92 | } 93 | input[type="range"] { 94 | width: 100px; 95 | } 96 | 97 | table{ 98 | display: inline-block; 99 | vertical-align: top; 100 | } 101 | 102 | .label{ 103 | margin: 5px 0; 104 | } 105 | 106 | summary { 107 | cursor: pointer; 108 | } 109 | 110 | details{ 111 | margin: 5px 0; 112 | border: 2px solid rgb(103,115,131); 113 | } 114 | 115 | details:focus, 116 | details summary:focus{ 117 | outline: none; 118 | border: none; 119 | } 120 | 121 | .label p{ 122 | display: inline-block; 123 | width: 60px; 124 | margin-left: 5px; 125 | } 126 | 127 | summary{ 128 | background-color: rgb(103,115,131); 129 | padding: 5px; 130 | } 131 | 132 | button{ 133 | width: 100%; 134 | font-size: .8em; 135 | padding: .5em 7em; 136 | background-color: #25aae1; 137 | border: 2px solid #25aae1; 138 | color: #fff; 139 | border-radius: 5px; 140 | cursor: pointer; 141 | } 142 | 143 | button:hover { 144 | background-color: #51BBE7; 145 | border: 2px solid #51BBE7; 146 | } 147 | 148 | 149 | select { 150 | width: 120px; 151 | height: 25px; 152 | margin: 10px 0; 153 | margin-left: 5px; 154 | color: #FFF; 155 | font-size: .8em; 156 | background-color: rgb(103,115,131); 157 | border: none; 158 | } 159 | -------------------------------------------------------------------------------- /layers/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /side-by-side/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/side-by-side/img/close.png -------------------------------------------------------------------------------- /side-by-side/img/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/side-by-side/img/open.png -------------------------------------------------------------------------------- /side-by-side/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Side-by-side | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
Projection Center
18 |
19 |
20 |
21 | 22 | 23 |
Panorama by
24 |
Thomas Sharpless
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /side-by-side/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: 'webgl' }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | var stage = viewer.stage(); 10 | 11 | // Create left and right layers 12 | var geometry = new Marzipano.CubeGeometry([ 13 | { tileSize: 256, size: 256, fallbackOnly: true }, 14 | { tileSize: 512, size: 512 }, 15 | { tileSize: 512, size: 1024 }, 16 | { tileSize: 512, size: 2048 }, 17 | { tileSize: 512, size: 4096 } 18 | ]); 19 | 20 | // View can be reused because both layers have the same size 21 | var viewLimiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(3100, 100*Math.PI/180); 22 | 23 | var viewLeft = new Marzipano.RectilinearView(null, viewLimiter); 24 | var viewRight = new Marzipano.RectilinearView(null, viewLimiter); 25 | 26 | var left = createLayer(viewer.stage(), viewLeft, geometry, 'left', { relativeWidth: 0.5, relativeX: 0 }); 27 | var right = createLayer(viewer.stage(), viewRight, geometry, 'right', { relativeWidth: 0.5, relativeX: 0.5 }); 28 | 29 | stage.addLayer(right); 30 | stage.addLayer(left); 31 | 32 | function createLayer(stage, view, geometry, eye, rect) { 33 | var source = new Marzipano.ImageUrlSource.fromString( 34 | "../common-media/music-room/" + eye + ".tiles/{z}/{f}/{y}/{x}.jpg", 35 | { cubeMapPreviewUrl: "../common-media/music-room/" + eye + ".tiles/preview.jpg" }); 36 | 37 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 38 | var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore, { effects: { rect: rect }}); 39 | 40 | layer.pinFirstLevel(); 41 | 42 | return layer; 43 | } 44 | 45 | // Adjust projection center 46 | var projectionCenterXElement = document.querySelector("#projection-center-x"); 47 | var projectionCenterYElement = document.querySelector("#projection-center-y"); 48 | 49 | projectionCenterXElement.addEventListener('input', function() { 50 | var projectionCenterX = projectionCenterXElement.value; 51 | viewLeft.setProjectionCenterX(parseFloat(projectionCenterX)); 52 | viewRight.setProjectionCenterX(parseFloat(-projectionCenterX)); 53 | }); 54 | projectionCenterYElement.addEventListener('input', function() { 55 | var projectionCenterY = projectionCenterYElement.value; 56 | viewLeft.setProjectionCenterY(parseFloat(projectionCenterY)); 57 | viewRight.setProjectionCenterY(parseFloat(projectionCenterY)); 58 | }); 59 | 60 | })(); -------------------------------------------------------------------------------- /side-by-side/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } 29 | 30 | .info { 31 | position: absolute; 32 | top: 0; 33 | right: 0; 34 | 35 | background-color: rgb(30, 30, 30); 36 | background-color: rgba(30, 30, 30, 0.8); 37 | color: #fff; 38 | 39 | padding: 1em 1em; 40 | 41 | font-family: Helvetica, Arial, sans-serif; 42 | font-size: 16px; 43 | } 44 | 45 | .info .label { 46 | display: block; 47 | text-align: center; 48 | margin-bottom: 0.5em; 49 | 50 | } -------------------------------------------------------------------------------- /side-by-side/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /simple-tour/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/close.png -------------------------------------------------------------------------------- /simple-tour/img/collapse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/collapse.png -------------------------------------------------------------------------------- /simple-tour/img/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/down.png -------------------------------------------------------------------------------- /simple-tour/img/expand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/expand.png -------------------------------------------------------------------------------- /simple-tour/img/fullscreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/fullscreen.png -------------------------------------------------------------------------------- /simple-tour/img/hotspot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/hotspot.png -------------------------------------------------------------------------------- /simple-tour/img/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/info.png -------------------------------------------------------------------------------- /simple-tour/img/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/left.png -------------------------------------------------------------------------------- /simple-tour/img/link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/link.png -------------------------------------------------------------------------------- /simple-tour/img/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/minus.png -------------------------------------------------------------------------------- /simple-tour/img/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/open.png -------------------------------------------------------------------------------- /simple-tour/img/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/pause.png -------------------------------------------------------------------------------- /simple-tour/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/play.png -------------------------------------------------------------------------------- /simple-tour/img/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/plus.png -------------------------------------------------------------------------------- /simple-tour/img/powered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/powered.png -------------------------------------------------------------------------------- /simple-tour/img/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/right.png -------------------------------------------------------------------------------- /simple-tour/img/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/up.png -------------------------------------------------------------------------------- /simple-tour/img/windowed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/simple-tour/img/windowed.png -------------------------------------------------------------------------------- /simple-tour/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Project Title 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 32 |
33 | 34 |
35 |

36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /simple-tour/vendor/bowser.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bowser - a browser detector 3 | * https://github.com/ded/bowser 4 | * MIT License | (c) Dustin Diaz 2014 5 | */ 6 | !function(e,t){typeof module!="undefined"&&module.exports?module.exports.browser=t():typeof define=="function"&&define.amd?define(t):this[e]=t()}("bowser",function(){function t(t){function n(e){var n=t.match(e);return n&&n.length>1&&n[1]||""}var r=n(/(ipod|iphone|ipad)/i).toLowerCase(),i=/like android/i.test(t),s=!i&&/android/i.test(t),o=n(/version\/(\d+(\.\d+)?)/i),u=/tablet/i.test(t),a=!u&&/[^-]mobi/i.test(t),f;/opera|opr/i.test(t)?f={name:"Opera",opera:e,version:o||n(/(?:opera|opr)[\s\/](\d+(\.\d+)?)/i)}:/windows phone/i.test(t)?f={name:"Windows Phone",windowsphone:e,msie:e,version:n(/iemobile\/(\d+(\.\d+)?)/i)}:/msie|trident/i.test(t)?f={name:"Internet Explorer",msie:e,version:n(/(?:msie |rv:)(\d+(\.\d+)?)/i)}:/chrome|crios|crmo/i.test(t)?f={name:"Chrome",chrome:e,version:n(/(?:chrome|crios|crmo)\/(\d+(\.\d+)?)/i)}:r?(f={name:r=="iphone"?"iPhone":r=="ipad"?"iPad":"iPod"},o&&(f.version=o)):/sailfish/i.test(t)?f={name:"Sailfish",sailfish:e,version:n(/sailfish\s?browser\/(\d+(\.\d+)?)/i)}:/seamonkey\//i.test(t)?f={name:"SeaMonkey",seamonkey:e,version:n(/seamonkey\/(\d+(\.\d+)?)/i)}:/firefox|iceweasel/i.test(t)?(f={name:"Firefox",firefox:e,version:n(/(?:firefox|iceweasel)[ \/](\d+(\.\d+)?)/i)},/\((mobile|tablet);[^\)]*rv:[\d\.]+\)/i.test(t)&&(f.firefoxos=e)):/silk/i.test(t)?f={name:"Amazon Silk",silk:e,version:n(/silk\/(\d+(\.\d+)?)/i)}:s?f={name:"Android",version:o}:/phantom/i.test(t)?f={name:"PhantomJS",phantom:e,version:n(/phantomjs\/(\d+(\.\d+)?)/i)}:/blackberry|\bbb\d+/i.test(t)||/rim\stablet/i.test(t)?f={name:"BlackBerry",blackberry:e,version:o||n(/blackberry[\d]+\/(\d+(\.\d+)?)/i)}:/(web|hpw)os/i.test(t)?(f={name:"WebOS",webos:e,version:o||n(/w(?:eb)?osbrowser\/(\d+(\.\d+)?)/i)},/touchpad\//i.test(t)&&(f.touchpad=e)):/bada/i.test(t)?f={name:"Bada",bada:e,version:n(/dolfin\/(\d+(\.\d+)?)/i)}:/tizen/i.test(t)?f={name:"Tizen",tizen:e,version:n(/(?:tizen\s?)?browser\/(\d+(\.\d+)?)/i)||o}:/safari/i.test(t)?f={name:"Safari",safari:e,version:o}:f={},/(apple)?webkit/i.test(t)?(f.name=f.name||"Webkit",f.webkit=e,!f.version&&o&&(f.version=o)):!f.opera&&/gecko\//i.test(t)&&(f.name=f.name||"Gecko",f.gecko=e,f.version=f.version||n(/gecko\/(\d+(\.\d+)?)/i)),s||f.silk?f.android=e:r&&(f[r]=e,f.ios=e);var l="";r?(l=n(/os (\d+([_\s]\d+)*) like mac os x/i),l=l.replace(/[_\s]/g,".")):s?l=n(/android[ \/-](\d+(\.\d+)*)/i):f.windowsphone?l=n(/windows phone (?:os)?\s?(\d+(\.\d+)*)/i):f.webos?l=n(/(?:web|hpw)os\/(\d+(\.\d+)*)/i):f.blackberry?l=n(/rim\stablet\sos\s(\d+(\.\d+)*)/i):f.bada?l=n(/bada\/(\d+(\.\d+)*)/i):f.tizen&&(l=n(/tizen[\/\s](\d+(\.\d+)*)/i)),l&&(f.osversion=l);var c=l.split(".")[0];if(u||r=="ipad"||s&&(c==3||c==4&&!a)||f.silk)f.tablet=e;else if(a||r=="iphone"||r=="ipod"||s||f.blackberry||f.webos||f.bada)f.mobile=e;return f.msie&&f.version>=10||f.chrome&&f.version>=20||f.firefox&&f.version>=20||f.safari&&f.version>=6||f.opera&&f.version>=10||f.ios&&f.osversion&&f.osversion.split(".")[0]>=6||f.blackberry&&f.version>=10.1?f.a=e:f.msie&&f.version<10||f.chrome&&f.version<20||f.firefox&&f.version<20||f.safari&&f.version<6||f.opera&&f.version<10||f.ios&&f.osversion&&f.osversion.split(".")[0]<6?f.c=e:f.x=e,f}var e=!0,n=t(typeof navigator!="undefined"?navigator.userAgent:"");return n._detect=t,n}) -------------------------------------------------------------------------------- /simple-tour/vendor/requestAnimationFrame.js: -------------------------------------------------------------------------------- 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 3 | 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel 5 | 6 | // MIT license 7 | 8 | (function() { 9 | var lastTime = 0; 10 | var vendors = ['ms', 'moz', 'webkit', 'o']; 11 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 12 | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 13 | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 14 | || window[vendors[x]+'CancelRequestAnimationFrame']; 15 | } 16 | 17 | if (!window.requestAnimationFrame) 18 | window.requestAnimationFrame = function(callback, element) { 19 | var currTime = new Date().getTime(); 20 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 21 | var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 22 | timeToCall); 23 | lastTime = currTime + timeToCall; 24 | return id; 25 | }; 26 | 27 | if (!window.cancelAnimationFrame) 28 | window.cancelAnimationFrame = function(id) { 29 | clearTimeout(id); 30 | }; 31 | }()); -------------------------------------------------------------------------------- /simple-tour/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /simple-tour/vendor/screenfull.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * screenfull 3 | * v2.0.0 - 2014-12-22 4 | * (c) Sindre Sorhus; MIT License 5 | */ 6 | !function(){"use strict";var a="undefined"!=typeof module&&module.exports,b="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,c=function(){for(var a,b,c=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],d=0,e=c.length,f={};e>d;d++)if(a=c[d],a&&a[1]in document){for(d=0,b=a.length;b>d;d++)f[c[0][d]]=a[d];return f}return!1}(),d={request:function(a){var d=c.requestFullscreen;a=a||document.documentElement,/5\.1[\.\d]* Safari/.test(navigator.userAgent)?a[d]():a[d](b&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){document[c.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},raw:c};return c?(Object.defineProperties(d,{isFullscreen:{get:function(){return!!document[c.fullscreenElement]}},element:{enumerable:!0,get:function(){return document[c.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return!!document[c.fullscreenEnabled]}}}),void(a?module.exports=d:window.screenfull=d)):void(a?module.exports=!1:window.screenfull=!1)}(); -------------------------------------------------------------------------------- /slide-deck/SlideDeck.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var eventEmitter = window.eventEmitter; 4 | 5 | function SlideDeck(sections, opts) { 6 | opts = opts || {}; 7 | 8 | this.sections = sections; 9 | this.wrapAround = opts.wrapAround || false; 10 | 11 | this.currentSection = 0; 12 | this.currentSlide = 0; 13 | this.changeEnabled = true; 14 | } 15 | eventEmitter(SlideDeck); 16 | 17 | 18 | SlideDeck.prototype.atDeckStart = function() { 19 | return this.currentSection === 0 && this.currentSlide === 0; 20 | } 21 | 22 | SlideDeck.prototype.atDeckEnd = function() { 23 | return this.currentSection === this.sections.length - 1 && this.currentSlide === this.sections[this.currentSection].length - 1; 24 | } 25 | 26 | SlideDeck.prototype.atSectionStart = function() { 27 | return this.currentSlide === 0; 28 | } 29 | 30 | SlideDeck.prototype.atSectionEnd = function() { 31 | return this.currentSlide === this.sections[this.currentSection].length - 1; 32 | } 33 | 34 | SlideDeck.prototype.slideExists = function(section, slide) { 35 | return 0 <= section && section < this.sections.length && 0 <= slide && slide < this.sections[section].length; 36 | } 37 | 38 | SlideDeck.prototype.getSlide = function() { 39 | return [ this.currentSection, this.currentSlide ]; 40 | } 41 | 42 | SlideDeck.prototype.setSlide = function(newSection, newSlide) { 43 | if(this.changeEnabled) { 44 | if (!this.slideExists(newSection, newSlide)) { 45 | console.warn("Trying to jump to non-existent section " + newSection + " slide " + newSlide); 46 | return; 47 | } 48 | var oldSection = this.currentSection; 49 | var oldSlide = this.currentSlide; 50 | this.currentSection = newSection; 51 | this.currentSlide = newSlide; 52 | if (newSection != oldSection || newSlide != oldSlide) 53 | this.emit('slideChanged', newSection, newSlide, oldSection, oldSlide); 54 | } 55 | } 56 | 57 | SlideDeck.prototype.prevSlide = function() { 58 | var newSection, newSlide; 59 | if (this.atDeckStart() && !this.wrapAround) { 60 | //console.warn("Refusing to wrap around deck start"); 61 | return; 62 | } 63 | if (this.atSectionStart()) { 64 | newSection = (this.currentSection - 1 + this.sections.length) % this.sections.length; 65 | newSlide = deck.sections[newSection].length - 1; 66 | } 67 | else { 68 | newSection = this.currentSection; 69 | newSlide = this.currentSlide - 1; 70 | } 71 | this.setSlide(newSection, newSlide); 72 | } 73 | 74 | SlideDeck.prototype.nextSlide = function() { 75 | var newSection, newSlide; 76 | if (this.atDeckEnd() && !this.wrapAround) { 77 | //console.warn("Refusing to wrap around deck end"); 78 | return; 79 | } 80 | if (this.atSectionEnd()) { 81 | newSection = (this.currentSection + 1) % this.sections.length; 82 | newSlide = 0; 83 | } 84 | else { 85 | newSection = this.currentSection; 86 | newSlide = this.currentSlide + 1; 87 | } 88 | this.setSlide(newSection, newSlide); 89 | } 90 | 91 | SlideDeck.prototype.disableSlideChange = function() { this.changeEnabled = false; } 92 | SlideDeck.prototype.enableSlideChange = function() { this.changeEnabled = true; } -------------------------------------------------------------------------------- /slide-deck/eventEmitter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function EventEmitter() {} 4 | 5 | EventEmitter.prototype.addEventListener = function(event, fn) { 6 | var eventMap = this.__events = this.__events || {}; 7 | var handlerList = eventMap[event] = eventMap[event] || []; 8 | handlerList.push(fn); 9 | }; 10 | 11 | EventEmitter.prototype.removeEventListener = function(event, fn) { 12 | var eventMap = this.__events = this.__events || {}; 13 | var handlerList = eventMap[event]; 14 | if (handlerList) { 15 | var index = handlerList.indexOf(fn); 16 | if (index >= 0) { 17 | handlerList.splice(index, 1); 18 | } 19 | } 20 | }; 21 | 22 | EventEmitter.prototype.emit = function(event, arg1, arg2, arg3, arg4, arg5) { 23 | var eventMap = this.__events = this.__events || {}; 24 | var handlerList = eventMap[event]; 25 | if (handlerList) { 26 | for (var i = 0; i < handlerList.length; i++) { 27 | var fn = handlerList[i]; 28 | fn.call(this, arg1, arg2, arg3, arg4, arg5); 29 | } 30 | } 31 | }; 32 | 33 | function eventEmitter(ctor) { 34 | var propList = Object.keys(EventEmitter.prototype); 35 | for (var i = 0; i < propList.length; i++) { 36 | var prop = propList[i]; 37 | ctor.prototype[prop] = EventEmitter.prototype[prop]; 38 | } 39 | } 40 | 41 | window.eventEmitter = eventEmitter; 42 | -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Black-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Black-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Black-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Black-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Black-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Black-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Black.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Black.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Black.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Bold-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Bold-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Bold-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Bold-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Bold-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Bold-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Bold.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Bold.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Bold.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Book-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Book-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Book-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Book-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Book-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Book-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Book.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Book.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Book.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Book.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Book.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Book.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Heavy-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Heavy-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Heavy-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Heavy-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Heavy-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Heavy-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Heavy.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Heavy.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Heavy.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Heavy.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Heavy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Heavy.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Light-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Light-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Light-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Light-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Light-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Light-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Light.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Light.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Light.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Regular-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Regular-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Regular-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Regular-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Regular-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Regular-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Regular.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Regular.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Regular.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Thin-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Thin-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Thin-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Thin-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Thin-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Thin-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Thin.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Thin.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-Thin.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-XBold-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-XBold-Italic.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-XBold-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-XBold-Italic.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-XBold-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-XBold-Italic.woff -------------------------------------------------------------------------------- /slide-deck/font/Nexa-XBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-XBold.eot -------------------------------------------------------------------------------- /slide-deck/font/Nexa-XBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-XBold.ttf -------------------------------------------------------------------------------- /slide-deck/font/Nexa-XBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/font/Nexa-XBold.woff -------------------------------------------------------------------------------- /slide-deck/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: 'Nexa-Black-Italic';src: url('font/Nexa-Black-Italic.eot');src: url('font/Nexa-Black-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Black-Italic.woff') format('woff'),url('font/Nexa-Black-Italic.ttf') format('truetype');} 2 | @font-face {font-family: 'Nexa-Bold-Italic';src: url('font/Nexa-Bold-Italic.eot');src: url('font/Nexa-Bold-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Bold-Italic.woff') format('woff'),url('font/Nexa-Bold-Italic.ttf') format('truetype');} 3 | @font-face {font-family: 'Nexa-Bold';src: url('font/Nexa-Bold.eot');src: url('font/Nexa-Bold.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Bold.woff') format('woff'),url('font/Nexa-Bold.ttf') format('truetype');} 4 | @font-face {font-family: 'Nexa-Book-Italic';src: url('font/Nexa-Book-Italic.eot');src: url('font/Nexa-Book-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Book-Italic.woff') format('woff'),url('font/Nexa-Book-Italic.ttf') format('truetype');} 5 | @font-face {font-family: 'Nexa-Book';src: url('font/Nexa-Book.eot');src: url('font/Nexa-Book.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Book.woff') format('woff'),url('font/Nexa-Book.ttf') format('truetype');} 6 | @font-face {font-family: 'Nexa-Heavy-Italic';src: url('font/Nexa-Heavy-Italic.eot');src: url('font/Nexa-Heavy-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Heavy-Italic.woff') format('woff'),url('font/Nexa-Heavy-Italic.ttf') format('truetype');} 7 | @font-face {font-family: 'Nexa-Light-Italic';src: url('font/Nexa-Light-Italic.eot');src: url('font/Nexa-Light-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Light-Italic.woff') format('woff'),url('font/Nexa-Light-Italic.ttf') format('truetype');} 8 | @font-face {font-family: 'Nexa-Regular-Italic';src: url('font/Nexa-Regular-Italic.eot');src: url('font/Nexa-Regular-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Regular-Italic.woff') format('woff'),url('font/Nexa-Regular-Italic.ttf') format('truetype');} 9 | @font-face {font-family: 'Nexa-Light';src: url('font/Nexa-Light.eot');src: url('font/Nexa-Light.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Light.woff') format('woff'),url('font/Nexa-Light.ttf') format('truetype');} 10 | @font-face {font-family: 'Nexa-XBold-Italic';src: url('font/Nexa-XBold-Italic.eot');src: url('font/Nexa-XBold-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-XBold-Italic.woff') format('woff'),url('font/Nexa-XBold-Italic.ttf') format('truetype');} 11 | @font-face {font-family: 'Nexa-Black';src: url('font/Nexa-Black.eot');src: url('font/Nexa-Black.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Black.woff') format('woff'),url('font/Nexa-Black.ttf') format('truetype');} 12 | @font-face {font-family: 'Nexa-Heavy';src: url('font/Nexa-Heavy.eot');src: url('font/Nexa-Heavy.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Heavy.woff') format('woff'),url('font/Nexa-Heavy.ttf') format('truetype');} 13 | @font-face {font-family: 'Nexa-Thin-Italic';src: url('font/Nexa-Thin-Italic.eot');src: url('font/Nexa-Thin-Italic.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Thin-Italic.woff') format('woff'),url('font/Nexa-Thin-Italic.ttf') format('truetype');} 14 | @font-face {font-family: 'Nexa-Regular';src: url('font/Nexa-Regular.eot');src: url('font/Nexa-Regular.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Regular.woff') format('woff'),url('font/Nexa-Regular.ttf') format('truetype');} 15 | @font-face {font-family: 'Nexa-XBold';src: url('font/Nexa-XBold.eot');src: url('font/Nexa-XBold.eot?#iefix') format('embedded-opentype'),url('font/Nexa-XBold.woff') format('woff'),url('font/Nexa-XBold.ttf') format('truetype');} 16 | @font-face {font-family: 'Nexa-Thin';src: url('font/Nexa-Thin.eot');src: url('font/Nexa-Thin.eot?#iefix') format('embedded-opentype'),url('font/Nexa-Thin.woff') format('woff'),url('font/Nexa-Thin.ttf') format('truetype');} 17 | -------------------------------------------------------------------------------- /slide-deck/getSlidesFromDom.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function getSlidesFromDom() { 4 | 5 | function parseSection(element) { 6 | var yaw = parseFloat(element.getAttribute('data-yaw')); 7 | var pitch = parseFloat(element.getAttribute('data-pitch')); 8 | var perspectiveRadius = parseFloat(element.getAttribute('data-perspective-radius')); 9 | 10 | if(isNaN(yaw)) { 11 | throw new Error("Section is missing data-yaw attribute"); 12 | } 13 | if(isNaN(pitch)) { 14 | throw new Error("Section is missing data-pitch attribute"); 15 | } 16 | if(isNaN(perspectiveRadius)) { 17 | throw new Error("Section is missing data-perspective-radius attribute"); 18 | } 19 | 20 | var section = { 21 | element: element, 22 | yaw: yaw, 23 | pitch: pitch, 24 | perspectiveRadius: perspectiveRadius 25 | }; 26 | 27 | var domSlides = element.querySelectorAll('[data-slide]'); 28 | section.slides = nodeListToArray(domSlides); 29 | section.length = section.slides.length; 30 | 31 | return section; 32 | } 33 | 34 | var domSections = document.querySelectorAll("[data-section]"); 35 | return nodeListToArray(domSections).map(parseSection); 36 | } 37 | 38 | function nodeListToArray(nodeList) { 39 | return Array.prototype.slice.call(nodeList); 40 | } 41 | 42 | window.getSlidesFromDom = getSlidesFromDom; -------------------------------------------------------------------------------- /slide-deck/img/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/bullet.png -------------------------------------------------------------------------------- /slide-deck/img/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/check.png -------------------------------------------------------------------------------- /slide-deck/img/digisfera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/digisfera.png -------------------------------------------------------------------------------- /slide-deck/img/dubai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/dubai.png -------------------------------------------------------------------------------- /slide-deck/img/fifa_2014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/fifa_2014.png -------------------------------------------------------------------------------- /slide-deck/img/hero_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/hero_bg.png -------------------------------------------------------------------------------- /slide-deck/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/logo.png -------------------------------------------------------------------------------- /slide-deck/img/o2_galaxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/o2_galaxy.png -------------------------------------------------------------------------------- /slide-deck/img/quick_start.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/quick_start.jpg -------------------------------------------------------------------------------- /slide-deck/img/talon_vista.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/talon_vista.jpg -------------------------------------------------------------------------------- /slide-deck/img/visit_london.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/slide-deck/img/visit_london.png -------------------------------------------------------------------------------- /slide-deck/updateHashWithDeck.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function updateHashWithDeck(deck) { 4 | /* Bind page hash to slide */ 5 | 6 | // Set hash if none is set 7 | if(!getRoute()) { 8 | setRoute(0, 0); 9 | } 10 | 11 | // Update hash when slide changes. 12 | deck.addEventListener('slideChanged', setRoute); 13 | 14 | // Set slide from initial hash, also update whenever the hash changes. 15 | updateDeckFromUrl(); 16 | window.addEventListener('hashchange', updateDeckFromUrl); 17 | 18 | function updateDeckFromUrl() { 19 | deck.setSlide.apply(deck, getRoute()); 20 | } 21 | } 22 | 23 | function getRoute() { 24 | var regex = /^#([0-9]+)\-([0-9]+)$/; 25 | var match = window.location.hash.match(regex); 26 | 27 | if (!match) { 28 | return null; 29 | } else { 30 | return [ parseInt(match[1]), parseInt(match[2]) ]; 31 | } 32 | } 33 | 34 | function setRoute(newSection, newSlide) { 35 | window.location.hash = newSection + '-' + newSlide; 36 | } 37 | 38 | window.updateHashWithDeck = updateHashWithDeck; -------------------------------------------------------------------------------- /slide-deck/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /square-flat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Multiresolution Square Flat | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /square-flat/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: null }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | // Create Source 11 | var tileUrl = function(face, z, x, y) { 12 | return "../common-media/prague.tiles/" + z + "/" + face + "/" + y + "/" + x + ".jpg"; 13 | }; 14 | 15 | var source = new Marzipano.ImageUrlSource(function(tile) { 16 | return { url: tileUrl('f', tile.z+1, tile.x+1, tile.y+1) }; 17 | }); 18 | 19 | // Create Geometry 20 | var geometry = new Marzipano.FlatGeometry([ 21 | //{ tileWidth: 256, width: 256, fallbackOnly: true }, 22 | { tileWidth: 512, tileHeight: 512, width: 512, height: 512 }, 23 | { tileWidth: 512, tileHeight: 512, width: 1024, height: 1024 }, 24 | { tileWidth: 512, tileHeight: 512, width: 2048, height: 2048 }, 25 | { tileWidth: 512, tileHeight: 512, width: 4096, height: 4096 }, 26 | { tileWidth: 512, tileHeight: 512, width: 8192, height: 8192 }, 27 | { tileWidth: 512, tileHeight: 512, width: 16384, height: 16384 }, 28 | { tileWidth: 512, tileHeight: 512, width: 32768, height: 32768 }, 29 | { tileWidth: 512, tileHeight: 512, width: 65536, height: 65536 } 30 | ]); 31 | 32 | // Create View 33 | var limiter = Marzipano.util.compose( 34 | Marzipano.FlatView.limit.visibleX(0, 1), 35 | Marzipano.FlatView.limit.visibleY(0, 1) 36 | ); 37 | var view = new Marzipano.FlatView({ mediaAspectRatio: 1}, limiter); 38 | 39 | // Create and display Scene 40 | var scene = viewer.createScene({ 41 | source: source, 42 | geometry: geometry, 43 | view: view, 44 | pinFirstLevel: true 45 | }); 46 | 47 | scene.switchTo(); 48 | })(); -------------------------------------------------------------------------------- /square-flat/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } -------------------------------------------------------------------------------- /square-flat/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /touch-gestures/data.js: -------------------------------------------------------------------------------- 1 | var APP_DATA = { 2 | "scenes": [ 3 | { 4 | "id": "gare_do_oriente", 5 | "name": "Oriente Station", 6 | "levels": [ 7 | { "tileSize": 256, "size": 256, "fallbackOnly": true }, 8 | { "size": 512, "tileSize": 512 }, 9 | { "size": 1024, "tileSize": 512 }, 10 | { "size": 2048, "tileSize": 512 } 11 | ], 12 | "hotspots": [ 13 | { 14 | "yaw": 0, 15 | "pitch": 0, 16 | "target": "jeronimos" 17 | } 18 | ], 19 | "initialViewParameters": { 20 | "pitch": 0, 21 | "yaw": 0, 22 | "fov": 1.5707963267948966 23 | } 24 | }, 25 | { 26 | "id": "jeronimos", 27 | "name": "Jerónimos Monastery", 28 | "levels": [ 29 | { "tileSize": 256, "size": 256, "fallbackOnly": true }, 30 | { "size": 512, "tileSize": 512 }, 31 | { "size": 1024, "tileSize": 512 }, 32 | { "size": 2048, "tileSize": 512 } 33 | ], 34 | "hotspots": [ 35 | { 36 | "yaw": 0.5, 37 | "pitch": 0.2, 38 | "target": "museu_da_electricidade" 39 | } 40 | ], 41 | "initialViewParameters": { 42 | "pitch": 0, 43 | "yaw": 0, 44 | "fov": 0.9 45 | } 46 | }, 47 | { 48 | "id": "museu_da_electricidade", 49 | "name": "Eletricity Museum", 50 | "levels": [ 51 | { "tileSize": 256, "size": 256, "fallbackOnly": true }, 52 | { "size": 512, "tileSize": 512 }, 53 | { "size": 1024, "tileSize": 512 }, 54 | { "size": 2048, "tileSize": 512 } 55 | ], 56 | "hotspots": [ 57 | { 58 | "yaw": 1.6, 59 | "pitch": 0, 60 | "target": "jeronimos" 61 | } 62 | ], 63 | "initialViewParameters": { 64 | "pitch": -0.6, 65 | "yaw": 0.9, 66 | "fov": 1.0 67 | } 68 | } 69 | ], 70 | "name": "Marzipano Demo", 71 | "settings": { 72 | "mouseViewMode": "drag", 73 | "autorotateEnabled": "true" 74 | } 75 | }; 76 | -------------------------------------------------------------------------------- /touch-gestures/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/touch-gestures/img/close.png -------------------------------------------------------------------------------- /touch-gestures/img/hotspot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/touch-gestures/img/hotspot.png -------------------------------------------------------------------------------- /touch-gestures/img/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/touch-gestures/img/open.png -------------------------------------------------------------------------------- /touch-gestures/img/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/touch-gestures/img/pause.png -------------------------------------------------------------------------------- /touch-gestures/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/touch-gestures/img/play.png -------------------------------------------------------------------------------- /touch-gestures/img/powered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/touch-gestures/img/powered.png -------------------------------------------------------------------------------- /touch-gestures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Extra Touch Gestures | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |

19 |
20 | 21 | 23 | 24 | 26 | 27 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /touch-gestures/vendor/easing-min.js: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- 2 | // easing.js v0.5.4 3 | // Generic set of easing functions with AMD support 4 | // https://github.com/danro/easing-js 5 | // This code may be freely distributed under the MIT license 6 | // http://danro.mit-license.org/ 7 | // -------------------------------------------------- 8 | // All functions adapted from Thomas Fuchs & Jeremy Kahn 9 | // Easing Equations (c) 2003 Robert Penner, BSD license 10 | // https://raw.github.com/danro/easing-js/master/LICENSE 11 | // -------------------------------------------------- 12 | (function(a,b){typeof define=="function"?define(b):typeof module!="undefined"?module.exports=b:this[a]=b})("easing",{easeInQuad:function(a){return Math.pow(a,2)},easeOutQuad:function(a){return-(Math.pow(a-1,2)-1)},easeInOutQuad:function(a){return(a/=.5)<1?.5*Math.pow(a,2):-0.5*((a-=2)*a-2)},easeInCubic:function(a){return Math.pow(a,3)},easeOutCubic:function(a){return Math.pow(a-1,3)+1},easeInOutCubic:function(a){return(a/=.5)<1?.5*Math.pow(a,3):.5*(Math.pow(a-2,3)+2)},easeInQuart:function(a){return Math.pow(a,4)},easeOutQuart:function(a){return-(Math.pow(a-1,4)-1)},easeInOutQuart:function(a){return(a/=.5)<1?.5*Math.pow(a,4):-0.5*((a-=2)*Math.pow(a,3)-2)},easeInQuint:function(a){return Math.pow(a,5)},easeOutQuint:function(a){return Math.pow(a-1,5)+1},easeInOutQuint:function(a){return(a/=.5)<1?.5*Math.pow(a,5):.5*(Math.pow(a-2,5)+2)},easeInSine:function(a){return-Math.cos(a*(Math.PI/2))+1},easeOutSine:function(a){return Math.sin(a*(Math.PI/2))},easeInOutSine:function(a){return-0.5*(Math.cos(Math.PI*a)-1)},easeInExpo:function(a){return a===0?0:Math.pow(2,10*(a-1))},easeOutExpo:function(a){return a===1?1:-Math.pow(2,-10*a)+1},easeInOutExpo:function(a){return a===0?0:a===1?1:(a/=.5)<1?.5*Math.pow(2,10*(a-1)):.5*(-Math.pow(2,-10*--a)+2)},easeInCirc:function(a){return-(Math.sqrt(1-a*a)-1)},easeOutCirc:function(a){return Math.sqrt(1-Math.pow(a-1,2))},easeInOutCirc:function(a){return(a/=.5)<1?-0.5*(Math.sqrt(1-a*a)-1):.5*(Math.sqrt(1-(a-=2)*a)+1)},easeOutBounce:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},easeInBack:function(a){var b=1.70158;return a*a*((b+1)*a-b)},easeOutBack:function(a){var b=1.70158;return(a-=1)*a*((b+1)*a+b)+1},easeInOutBack:function(a){var b=1.70158;return(a/=.5)<1?.5*a*a*(((b*=1.525)+1)*a-b):.5*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)},elastic:function(a){return-1*Math.pow(4,-8*a)*Math.sin((a*6-1)*2*Math.PI/2)+1},swingFromTo:function(a){var b=1.70158;return(a/=.5)<1?.5*a*a*(((b*=1.525)+1)*a-b):.5*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)},swingFrom:function(a){var b=1.70158;return a*a*((b+1)*a-b)},swingTo:function(a){var b=1.70158;return(a-=1)*a*((b+1)*a+b)+1},bounce:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},bouncePast:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?2-(7.5625*(a-=1.5/2.75)*a+.75):a<2.5/2.75?2-(7.5625*(a-=2.25/2.75)*a+.9375):2-(7.5625*(a-=2.625/2.75)*a+.984375)},easeFromTo:function(a){return(a/=.5)<1?.5*Math.pow(a,4):-0.5*((a-=2)*Math.pow(a,3)-2)},easeFrom:function(a){return Math.pow(a,4)},easeTo:function(a){return Math.pow(a,.25)}}); -------------------------------------------------------------------------------- /touch-gestures/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /transitions/img/hotspot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transitions/img/hotspot.png -------------------------------------------------------------------------------- /transitions/img/human.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transitions/img/human.png -------------------------------------------------------------------------------- /transitions/img/marzipanner-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transitions/img/marzipanner-logo.png -------------------------------------------------------------------------------- /transitions/img/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transitions/img/photo.png -------------------------------------------------------------------------------- /transitions/img/tooltip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /transitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Transitions | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Transitions

21 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /transitions/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Marzipano = window.Marzipano; 4 | var easing = window.easing; 5 | var transitionUpdateFunctions = window.transitionUpdateFunctions; 6 | 7 | // Viewer options. 8 | var viewerOpts = { swfPath: 'vendor/marzipano.swf' }; 9 | 10 | // Initialize viewer and scene 11 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 12 | 13 | var geometry = new Marzipano.CubeGeometry([ 14 | { "tileSize": 256, "size": 256, "fallbackOnly": true }, 15 | { "size": 512, "tileSize": 512 }, 16 | { "size": 1024, "tileSize": 512 }, 17 | { "size": 2048, "tileSize": 512 } 18 | ]); 19 | 20 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(2048, 120*Math.PI/180); 21 | 22 | var view1 = new Marzipano.RectilinearView(null, limiter); 23 | 24 | var source1 = Marzipano.ImageUrlSource.fromString( 25 | "../common-media/museu_da_electricidade/{z}/{f}/{y}/{x}.jpg", 26 | { cubeMapPreviewUrl: "../common-media/museu_da_electricidade/preview.jpg" }); 27 | 28 | var scene1 = viewer.createScene({ 29 | source: source1, 30 | geometry: geometry, 31 | view: view1, 32 | pinFirstLevel: true 33 | }); 34 | 35 | var view2 = new Marzipano.RectilinearView(null, limiter); 36 | 37 | var source2 = Marzipano.ImageUrlSource.fromString( 38 | "../common-media/jeronimos/{z}/{f}/{y}/{x}.jpg", 39 | { cubeMapPreviewUrl: "../common-media/jeronimos/preview.jpg" }); 40 | 41 | var scene2 = viewer.createScene({ 42 | source: source2, 43 | geometry: geometry, 44 | view: view2, 45 | pinFirstLevel: true 46 | }); 47 | 48 | var currentScene = scene1; 49 | 50 | currentScene.switchTo({ transitionDuration: 0 }); 51 | 52 | function changeScene(transitionDuration, transitionUpdate) { 53 | swapScenes().switchTo({ transitionDuration: transitionDuration, transitionUpdate: transitionUpdate }); 54 | } 55 | 56 | function swapScenes() { 57 | if(currentScene === scene1) { 58 | currentScene = scene2; 59 | return scene2; 60 | } 61 | else if(currentScene === scene2) { 62 | currentScene = scene1; 63 | return scene1; 64 | } 65 | else { 66 | throw new Error("Something went wrong"); 67 | } 68 | } 69 | 70 | // Export the variables to window 71 | window.viewer = viewer; 72 | 73 | // Display the initial scene. 74 | window.changeScene = changeScene; 75 | 76 | 77 | // Transition when a menu item is clicked 78 | var menuItems = document.querySelectorAll("[data-easing]"); 79 | 80 | for(var i = 0; i < menuItems.length; i++) { 81 | initMenuItem(menuItems[i]); 82 | } 83 | 84 | function initMenuItem(item) { 85 | var fun = transitionUpdateFunctions[item.getAttribute('data-fun')]; 86 | var time = parseInt(item.getAttribute('data-time')); 87 | var ease = easing[item.getAttribute('data-easing')]; 88 | 89 | item.onclick = function() { 90 | changeScene(time, fun(ease)); 91 | } 92 | } 93 | 94 | // Populate custom animation easings 95 | var easingSelect = document.getElementById("easing"); 96 | for(var key in easing) { 97 | var el = document.createElement('option'); 98 | el.value = key; 99 | el.innerHTML = key; 100 | easingSelect.appendChild(el); 101 | } 102 | 103 | // Populate custom animation functions 104 | var funSelect = document.getElementById("fun"); 105 | for(var key in transitionUpdateFunctions) { 106 | var el = document.createElement('option'); 107 | el.value = key; 108 | el.innerHTML = key; 109 | funSelect.appendChild(el); 110 | } 111 | 112 | var timeInput = document.getElementById("time"); 113 | document.getElementById('customForm').onsubmit = function(e) { 114 | var time = timeInput.value; 115 | var fun = transitionUpdateFunctions[funSelect.value]; 116 | var ease = easing[easingSelect.value]; 117 | 118 | changeScene(time, fun(ease)); 119 | 120 | e.preventDefault(); 121 | } -------------------------------------------------------------------------------- /transitions/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | font-family: Helvetica, Arial, sans-serif; 21 | font-size: 16px; 22 | background-color: #000; 23 | color: #fff; 24 | } 25 | 26 | a, a:hover, a:active, a:visited { 27 | text-decoration: none; 28 | color: inherit; 29 | } 30 | 31 | #pano { 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | } 38 | 39 | #transitionList { 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | width: 220px; 44 | max-height: 100%; 45 | overflow-x: hidden; 46 | overflow-y: auto; 47 | } 48 | 49 | .title{ 50 | width: 100%; 51 | padding: .5em; 52 | font-size: 1.2em; 53 | background-color: rgb(103,115,131); 54 | background-color: rgba(103,115,131,.9); 55 | } 56 | 57 | #transitionList .transitions { 58 | width: 100%; 59 | } 60 | 61 | #transitionList li { 62 | display: block; 63 | width: 100%; 64 | cursor: pointer; 65 | padding: 0.5em; 66 | background-color: rgb(58,68,84); 67 | background-color: rgba(58,68,84,0.8); 68 | border-top: 1px solid rgb(103,115,131); 69 | border-top: 1px solid rgba(103,115,131,.5); 70 | } 71 | 72 | #transitionList li:hover { 73 | background-color: rgb(103,115,131); 74 | background-color: rgba(103,115,131,0.8); 75 | } 76 | 77 | #custom{ 78 | background-color: rgb(38,48,64) !important; 79 | background-color: rgba(38,48,64,0.9) !important; 80 | } 81 | 82 | #customForm > * { 83 | display: block; 84 | margin-top: 0.5em; 85 | } 86 | 87 | #customForm #time { 88 | width: 160px; 89 | color: #FFF; 90 | font-size: .8em; 91 | background-color: rgb(103,115,131); 92 | background-color: rgba(103,115,131,.8); 93 | border: none; 94 | border-radius: 5px; 95 | padding: .5em; 96 | } 97 | 98 | #customForm select { 99 | min-width: 200px; 100 | height: 25px; 101 | color: #FFF; 102 | font-size: .8em; 103 | background-color: rgb(103,115,131); 104 | background-color: rgba(103,115,131,.8); 105 | border: none; 106 | } 107 | 108 | #customForm select:focus, 109 | #customForm #time:focus { 110 | background-color: rgb(133,145,161); 111 | outline: none; 112 | } 113 | 114 | #customForm .submit { 115 | margin-top: 10px; 116 | font-size: .8em; 117 | padding: .5em 7em; 118 | background-color: #25aae1; 119 | border: 2px solid #25aae1; 120 | color: #fff; 121 | border-radius: 5px; 122 | cursor: pointer; 123 | } 124 | 125 | #customForm .submit:hover { 126 | background-color: #51BBE7; 127 | border: 2px solid #51BBE7; 128 | } 129 | 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /transitions/transitionUpdateFunctions.js: -------------------------------------------------------------------------------- 1 | function linear(val) { return val; } 2 | 3 | var transitionUpdateFunctions = { 4 | 5 | opacity: function(ease) { 6 | ease = ease || linear; 7 | return function(val, newScene) { 8 | val = ease(val); 9 | newScene.layer().setEffects({ opacity: val }); 10 | } 11 | }, 12 | 13 | 14 | fromRight: function(ease) { 15 | ease = ease || linear; 16 | return function(val, newScene) { 17 | val = ease(val); 18 | newScene.layer().setEffects({ rect: { relativeX: 1 - val }}); 19 | } 20 | }, 21 | 22 | 23 | fromTop: function(ease) { 24 | ease = ease || linear; 25 | return function(val, newScene) { 26 | val = ease(val); 27 | newScene.layer().setEffects({ rect: { relativeY: -1 + val }}); 28 | } 29 | }, 30 | 31 | 32 | fromBottom: function(ease) { 33 | ease = ease || linear; 34 | return function(val, newScene) { 35 | val = ease(val); 36 | newScene.layer().setEffects({ rect: { relativeY: 1 - val }}); 37 | } 38 | }, 39 | 40 | 41 | width: function(ease) { 42 | ease = ease || linear; 43 | return function(val, newScene) { 44 | val = ease(val); 45 | newScene.layer().setEffects({ rect: { relativeWidth: val }}); 46 | } 47 | }, 48 | 49 | 50 | fromCenter: function(ease) { 51 | ease = ease || linear; 52 | return function(val, newScene) { 53 | val = ease(val); 54 | newScene.layer().setEffects({ rect: { 55 | relativeWidth: val, 56 | relativeHeight: val, 57 | relativeX: 0.5 - val / 2, 58 | relativeY: 0.5 - val / 2 59 | }}); 60 | } 61 | }, 62 | 63 | 64 | fromCenterAndOpacity: function(ease) { 65 | ease = ease || linear; 66 | return function(val, newScene) { 67 | eased = ease(val); 68 | newScene.layer().setEffects({ rect: { 69 | relativeWidth: eased, 70 | relativeHeight: eased, 71 | relativeX: 0.5 - eased / 2, 72 | relativeY: 0.5 - eased / 2 73 | }, 74 | opacity: val }); 75 | } 76 | }, 77 | 78 | 79 | fromTopAndOpacity: function(ease) { 80 | ease = ease || linear; 81 | return function(val, newScene) { 82 | var eased = ease(val); 83 | newScene.layer().setEffects({ opacity: val, rect: { relativeY: -1 + eased }}); 84 | } 85 | }, 86 | 87 | fromWhite: function(ease) { 88 | ease = ease || linear; 89 | return function(val, newScene) { 90 | var eased = ease(val); 91 | newScene.layer().setEffects({ colorOffset: [ 1-val, 1-val, 1-val, 0 ] }); 92 | } 93 | }, 94 | 95 | 96 | throughBlack: function(ease) { 97 | ease = ease || linear; 98 | return function(val, newScene, oldScene) { 99 | var eased = ease(val); 100 | var offset; 101 | 102 | if(eased < 0.5) { 103 | offset = eased * 2; 104 | newScene.layer().setEffects({ opacity: 0 }); 105 | oldScene.layer().setEffects({ colorOffset: [ -offset, -offset, -offset, 0 ] }) 106 | } 107 | else { 108 | offset = 1 - ((eased - 0.5) * 2); 109 | newScene.layer().setEffects({ opacity: 1, colorOffset: [ -offset, -offset, -offset, 0 ] }) 110 | } 111 | } 112 | } 113 | 114 | }; 115 | 116 | window.transitionUpdateFunctions = transitionUpdateFunctions; -------------------------------------------------------------------------------- /transitions/vendor/easing-min.js: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- 2 | // easing.js v0.5.4 3 | // Generic set of easing functions with AMD support 4 | // https://github.com/danro/easing-js 5 | // This code may be freely distributed under the MIT license 6 | // http://danro.mit-license.org/ 7 | // -------------------------------------------------- 8 | // All functions adapted from Thomas Fuchs & Jeremy Kahn 9 | // Easing Equations (c) 2003 Robert Penner, BSD license 10 | // https://raw.github.com/danro/easing-js/master/LICENSE 11 | // -------------------------------------------------- 12 | (function(a,b){typeof define=="function"?define(b):typeof module!="undefined"?module.exports=b:this[a]=b})("easing",{easeInQuad:function(a){return Math.pow(a,2)},easeOutQuad:function(a){return-(Math.pow(a-1,2)-1)},easeInOutQuad:function(a){return(a/=.5)<1?.5*Math.pow(a,2):-0.5*((a-=2)*a-2)},easeInCubic:function(a){return Math.pow(a,3)},easeOutCubic:function(a){return Math.pow(a-1,3)+1},easeInOutCubic:function(a){return(a/=.5)<1?.5*Math.pow(a,3):.5*(Math.pow(a-2,3)+2)},easeInQuart:function(a){return Math.pow(a,4)},easeOutQuart:function(a){return-(Math.pow(a-1,4)-1)},easeInOutQuart:function(a){return(a/=.5)<1?.5*Math.pow(a,4):-0.5*((a-=2)*Math.pow(a,3)-2)},easeInQuint:function(a){return Math.pow(a,5)},easeOutQuint:function(a){return Math.pow(a-1,5)+1},easeInOutQuint:function(a){return(a/=.5)<1?.5*Math.pow(a,5):.5*(Math.pow(a-2,5)+2)},easeInSine:function(a){return-Math.cos(a*(Math.PI/2))+1},easeOutSine:function(a){return Math.sin(a*(Math.PI/2))},easeInOutSine:function(a){return-0.5*(Math.cos(Math.PI*a)-1)},easeInExpo:function(a){return a===0?0:Math.pow(2,10*(a-1))},easeOutExpo:function(a){return a===1?1:-Math.pow(2,-10*a)+1},easeInOutExpo:function(a){return a===0?0:a===1?1:(a/=.5)<1?.5*Math.pow(2,10*(a-1)):.5*(-Math.pow(2,-10*--a)+2)},easeInCirc:function(a){return-(Math.sqrt(1-a*a)-1)},easeOutCirc:function(a){return Math.sqrt(1-Math.pow(a-1,2))},easeInOutCirc:function(a){return(a/=.5)<1?-0.5*(Math.sqrt(1-a*a)-1):.5*(Math.sqrt(1-(a-=2)*a)+1)},easeOutBounce:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},easeInBack:function(a){var b=1.70158;return a*a*((b+1)*a-b)},easeOutBack:function(a){var b=1.70158;return(a-=1)*a*((b+1)*a+b)+1},easeInOutBack:function(a){var b=1.70158;return(a/=.5)<1?.5*a*a*(((b*=1.525)+1)*a-b):.5*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)},elastic:function(a){return-1*Math.pow(4,-8*a)*Math.sin((a*6-1)*2*Math.PI/2)+1},swingFromTo:function(a){var b=1.70158;return(a/=.5)<1?.5*a*a*(((b*=1.525)+1)*a-b):.5*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)},swingFrom:function(a){var b=1.70158;return a*a*((b+1)*a-b)},swingTo:function(a){var b=1.70158;return(a-=1)*a*((b+1)*a+b)+1},bounce:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},bouncePast:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?2-(7.5625*(a-=1.5/2.75)*a+.75):a<2.5/2.75?2-(7.5625*(a-=2.25/2.75)*a+.9375):2-(7.5625*(a-=2.625/2.75)*a+.984375)},easeFromTo:function(a){return(a/=.5)<1?.5*Math.pow(a,4):-0.5*((a-=2)*Math.pow(a,3)-2)},easeFrom:function(a){return Math.pow(a,4)},easeTo:function(a){return Math.pow(a,.25)}}); -------------------------------------------------------------------------------- /transitions/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /transparent-layers/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transparent-layers/img/close.png -------------------------------------------------------------------------------- /transparent-layers/img/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transparent-layers/img/open.png -------------------------------------------------------------------------------- /transparent-layers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Transparent Layer | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 21 | 22 | 23 |
Train panorama by
24 |
Willy Kaemena
25 | 26 | 27 | 28 |
Milky Way panorama by
29 |
ESO
30 | 31 | 32 | 33 |
Also Sprach Zarathustra
34 |
Kevin MacLeod
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /transparent-layers/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize viewer. 7 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', controls: { mouseViewMode: 'qtvr' } }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | var stage = viewer.stage(); 10 | 11 | // Create foreground and background layers and add them to the stage 12 | var fov = 50 * Math.PI / 180; 13 | var pitch = 0.5521458744758476; 14 | var viewLimiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(2048, 100*Math.PI/180); 15 | 16 | var background = createBackground(viewer, pitch, fov, viewLimiter); 17 | var foreground = createForeground(viewer, pitch, fov, viewLimiter); 18 | 19 | stage.addLayer(background); 20 | stage.addLayer(foreground); 21 | 22 | 23 | function createForeground(viewer, pitch, fov, viewLimiter) { 24 | //ake_apvm1pm_sphere 25 | //ake_avm_gang_sphere_fenster 26 | //ake_speisewagen2_fenster 27 | //aussichtswagen3_alpen1_vers2 28 | //avm_2_abteil_sb_sphere 29 | //bar2_fenster_backdrop - zona de aussichtswagen sem janelas tratadas 30 | 31 | var stage = viewer.stage(); 32 | 33 | var source = new Marzipano.ImageUrlSource.fromString( 34 | "../common-media/transparent-panos/ake_speisewagen2_fenster/{z}/{f}/tile-{y}-{x}.png", 35 | { cubeMapPreviewUrl: "../common-media/transparent-panos/ake_speisewagen2_fenster/preview.png" }); 36 | 37 | var geometry = new Marzipano.CubeGeometry([ 38 | { tileSize: 256, size: 256, fallbackOnly: true }, 39 | { tileSize: 512, size: 512 }, 40 | { tileSize: 512, size: 1024 }, 41 | { tileSize: 512, size: 2048 }, 42 | ]); 43 | 44 | var viewParameters = { yaw: -0.3758316134782458, pitch: pitch, fov: fov }; 45 | var view = new Marzipano.RectilinearView(viewParameters, viewLimiter); 46 | 47 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 48 | var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore); 49 | 50 | layer.pinFirstLevel(); 51 | 52 | return layer; 53 | } 54 | 55 | 56 | function createBackground(viewer, pitch, fov, viewLimiter) { 57 | var stage = viewer.stage(); 58 | 59 | var source = new Marzipano.ImageUrlSource.fromString( 60 | "../common-media/eso0932a/{z}/{f}/{y}/{x}.jpg", 61 | { cubeMapPreviewUrl: "../common-media/eso0932a/preview.jpg" }); 62 | 63 | var geometry = new Marzipano.CubeGeometry([ 64 | { tileSize: 256, size: 256, fallbackOnly: true }, 65 | { tileSize: 512, size: 512 }, 66 | { tileSize: 512, size: 1024 }, 67 | { tileSize: 512, size: 2048 } 68 | ]); 69 | 70 | var view = new Marzipano.RectilinearView({ pitch: pitch, fov: fov }, viewLimiter); 71 | 72 | var textureStore = new Marzipano.TextureStore(geometry, source, stage); 73 | 74 | var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore); 75 | 76 | layer.pinFirstLevel(); 77 | 78 | /* Setup autorotate */ 79 | var renderLoop = viewer.renderLoop(); 80 | 81 | var autorotateStart = Marzipano.autorotate({ targetPitch: null, yawSpeed: 0.05 }); 82 | var autorotateStep = autorotateStart(); 83 | var startTime = performance.now(); 84 | 85 | var params = {}; 86 | 87 | function updateView() { 88 | var elapsed = performance.now() - startTime; 89 | 90 | // view.parameters() writes result to object rather than returning to 91 | // prevent garbage generation 92 | view.parameters(params); 93 | autorotateStep(params, elapsed); 94 | view.setParameters(params); 95 | 96 | renderLoop.renderOnNextFrame(); 97 | } 98 | 99 | renderLoop.addEventListener('beforeRender', updateView); 100 | 101 | return layer; 102 | } 103 | 104 | window.foreground = foreground; 105 | })(); -------------------------------------------------------------------------------- /transparent-layers/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transparent-layers/music.mp3 -------------------------------------------------------------------------------- /transparent-layers/music.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/transparent-layers/music.ogg -------------------------------------------------------------------------------- /transparent-layers/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } -------------------------------------------------------------------------------- /transparent-layers/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /video-multi-res/CanvasHackVideoElementWrapper.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | 5 | function CanvasHackVideoElementWrapper(videoElement) { 6 | this._videoElement = videoElement; 7 | this._drawElement = document.createElement('canvas'); 8 | } 9 | 10 | CanvasHackVideoElementWrapper.prototype.videoElement = function() { 11 | return this._videoElement; 12 | }; 13 | 14 | CanvasHackVideoElementWrapper.prototype.drawElement = function() { 15 | this._drawElement.width = this._videoElement.videoWidth; 16 | this._drawElement.height = this._videoElement.videoHeight; 17 | this._drawElement.getContext("2d").drawImage(this._videoElement, 0, 0); 18 | return this._drawElement; 19 | }; 20 | 21 | CanvasHackVideoElementWrapper.prototype.destroy = function() { 22 | this._videoElement.pause(); 23 | this._videoElement.volume = 0; 24 | this._videoElement.removeAttribute('src'); 25 | }; 26 | 27 | window.CanvasHackVideoElementWrapper = CanvasHackVideoElementWrapper; 28 | 29 | })(); -------------------------------------------------------------------------------- /video-multi-res/EventEmitter.js: -------------------------------------------------------------------------------- 1 | function EventEmitter() {} 2 | 3 | EventEmitter.prototype.addEventListener = function(event, fn) { 4 | var eventMap = this.__events = this.__events || {}; 5 | var handlerList = eventMap[event] = eventMap[event] || []; 6 | handlerList.push(fn); 7 | }; 8 | 9 | EventEmitter.prototype.removeEventListener = function(event, fn) { 10 | var eventMap = this.__events = this.__events || {}; 11 | var handlerList = eventMap[event]; 12 | if (handlerList) { 13 | var index = handlerList.indexOf(fn); 14 | if (index >= 0) { 15 | handlerList.splice(index, 1); 16 | } 17 | } 18 | }; 19 | 20 | EventEmitter.prototype.emit = function(event, arg1, arg2, arg3, arg4, arg5) { 21 | var eventMap = this.__events = this.__events || {}; 22 | var handlerList = eventMap[event]; 23 | if (handlerList) { 24 | for (var i = 0; i < handlerList.length; i++) { 25 | var fn = handlerList[i]; 26 | fn.call(this, arg1, arg2, arg3, arg4, arg5); 27 | } 28 | } 29 | }; 30 | 31 | window.EventEmitter = EventEmitter; -------------------------------------------------------------------------------- /video-multi-res/NullVideoElementWrapper.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | 5 | function NullVideoElementWrapper(videoElement) { 6 | this._videoElement = videoElement; 7 | } 8 | 9 | NullVideoElementWrapper.prototype.videoElement = function() { 10 | return this._videoElement; 11 | }; 12 | 13 | NullVideoElementWrapper.prototype.drawElement = function() { 14 | return this._videoElement; 15 | }; 16 | 17 | NullVideoElementWrapper.prototype.destroy = function() { 18 | this._videoElement.pause(); 19 | this._videoElement.volume = 0; 20 | this._videoElement.removeAttribute('src'); 21 | }; 22 | 23 | window.NullVideoElementWrapper = NullVideoElementWrapper; 24 | 25 | })(); -------------------------------------------------------------------------------- /video-multi-res/img/options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/options.png -------------------------------------------------------------------------------- /video-multi-res/img/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/pause.png -------------------------------------------------------------------------------- /video-multi-res/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/play.png -------------------------------------------------------------------------------- /video-multi-res/img/resolution-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/resolution-icon.png -------------------------------------------------------------------------------- /video-multi-res/img/sound-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/sound-off.png -------------------------------------------------------------------------------- /video-multi-res/img/sound-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/sound-on.png -------------------------------------------------------------------------------- /video-multi-res/img/spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/img/spinner.png -------------------------------------------------------------------------------- /video-multi-res/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Video | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
Video by
19 |
Visualise
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 |

42 | 43 |
Changing...
44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 | 52 |
53 | 54 |
55 |
56 | 57 |
58 | 68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /video-multi-res/init.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var multiResVideo = window.multiResVideo; 5 | 6 | multiResVideo.setResolutionIndex(1); 7 | })(); -------------------------------------------------------------------------------- /video-multi-res/loadVideoInSync.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | 5 | // Attempts to load a video element in sync with another video element 6 | function loadVideoInSync(url, syncElement, cb) { 7 | cb = once(cb); 8 | var element = document.createElement('video'); 9 | element.crossOrigin = 'anonymous'; 10 | 11 | element.onerror = function(e) { 12 | cb(e.target.error); 13 | }; 14 | 15 | // The new video will be loaded at currentTime + 5s, to allow time for 16 | // the video to be ready to play 17 | var syncTime = 5000; 18 | 19 | element.src = url; 20 | 21 | // Checking readyState on an interval seems to be more reliable than using events 22 | waitForReadyState(element, element.HAVE_CURRENT_DATA, 0.2, function() { 23 | 24 | 25 | if(syncElement) { 26 | if(syncElement.paused) { 27 | // If the video is not playing, we can load the new one to the correct time 28 | element.currentTime = syncElement.currentTime; 29 | } 30 | else { 31 | //If it is playing, we will need to load to a time ahead of the current, 32 | // to account for the time that the loading will take 33 | element.currentTime = syncElement.currentTime + syncTime / 1000; 34 | } 35 | } 36 | 37 | waitForReadyState(element, element.HAVE_ENOUGH_DATA, 0.2, function() { 38 | 39 | if(!syncElement) { 40 | // If there is no element to sync with we are done 41 | cb(null, element); 42 | } 43 | else if(syncElement.paused) { 44 | // If the element to sync with is paused, we are done 45 | cb(null, element); 46 | } 47 | else { 48 | if(element.currentTime <= syncElement.currentTime) { 49 | // The loading took too long, start playing immediately 50 | // We will be a bit out of sync 51 | element.play(); 52 | cb(null, element); 53 | } 54 | else { 55 | // If the loading was too fast, wait before playing 56 | // We should be in sync 57 | setTimeout(function() { 58 | element.play(); 59 | cb(null, element); 60 | }, (element.currentTime - syncElement.currentTime) * 1000); 61 | } 62 | } 63 | }); 64 | }); 65 | } 66 | 67 | function waitForReadyState(element, readyState, interval, callback) { 68 | var timer = setInterval(function() { 69 | if(element.readyState >= readyState) { 70 | clearInterval(timer); 71 | callback(null, true); 72 | } 73 | }, interval); 74 | } 75 | 76 | function once(f) { 77 | var called = false; 78 | return function() { 79 | if(!called) { 80 | called = true; 81 | f.apply(null, arguments); 82 | } 83 | }; 84 | } 85 | 86 | window.loadVideoInSync = loadVideoInSync; 87 | 88 | })(); -------------------------------------------------------------------------------- /video-multi-res/multiResVideo.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Marzipano does not have a high-level API for 360º video with multiple levels yet 4 | // This code manages the currently playing video using the low-level API 5 | 6 | (function() { 7 | var EventEmitter = window.EventEmitter; 8 | var EventEmitterProxy = window.EventEmitterProxy; 9 | var viewer = window.viewer; 10 | var Marzipano = window.Marzipano; 11 | var loadVideoInSync = window.loadVideoInSync; 12 | var NullVideoElementWrapper = window.NullVideoElementWrapper; 13 | var CanvasHackVideoElementWrapper = window.CanvasHackVideoElementWrapper; 14 | 15 | // Use canvas hack for IE10 16 | var browser = Marzipano.dependencies.bowser.browser; 17 | var useCanvasHack = browser.msie; 18 | 19 | // Create layer 20 | var asset = new Marzipano.VideoAsset(); 21 | var source = new Marzipano.SingleAssetSource(asset); 22 | var geometry = new Marzipano.EquirectGeometry([ { width: 1 } ]); 23 | 24 | var limiter = Marzipano.RectilinearView.limit.maxResolutionAndMaxFov(2560, 100*Math.PI/180); 25 | var view = new Marzipano.RectilinearView(null, limiter); 26 | 27 | var scene = viewer.createScene({ source: source, geometry: geometry, view: view, pinFirstLevel: false }); 28 | 29 | scene.switchTo({ transitionDuration: 0 }); 30 | 31 | 32 | var emitter = new EventEmitter(); 33 | var videoEmitter = new EventEmitterProxy(); 34 | 35 | var resolutions = [ 36 | { width: 720 }, 37 | { width: 1280 }, 38 | { width: 1920 }, 39 | { width: 2880 } 40 | ]; 41 | 42 | var currentState = { 43 | resolutionIndex: null, 44 | resolutionChanging: false 45 | }; 46 | 47 | function setResolutionIndex(index, cb) { 48 | cb = cb || function() {}; 49 | 50 | currentState.resolutionChanging = true; 51 | 52 | videoEmitter.setObject(null); 53 | 54 | emitter.emit('change'); 55 | emitter.emit('resolutionSet'); 56 | 57 | var level = resolutions[index]; 58 | var videoSrc = '../common-media/video/mercedes-f1-' + level.width + 'x' + level.width/2 + '.mp4'; 59 | 60 | var previousVideo = asset.video() && asset.video().videoElement(); 61 | 62 | loadVideoInSync(videoSrc, previousVideo, function(err, element) { 63 | if(err) { 64 | cb(err); 65 | return; 66 | } 67 | 68 | if(previousVideo) { 69 | previousVideo.pause(); 70 | previousVideo.volume = 0; 71 | previousVideo.removeAttribute('src'); 72 | } 73 | 74 | var VideoElementWrapper = useCanvasHack ? CanvasHackVideoElementWrapper : NullVideoElementWrapper; 75 | var wrappedVideo = new VideoElementWrapper(element); 76 | asset.setVideo(wrappedVideo); 77 | 78 | currentState.resolutionIndex = index; 79 | currentState.resolutionChanging = false; 80 | 81 | videoEmitter.setObject(element); 82 | 83 | emitter.emit('change'); 84 | emitter.emit('resolutionChange'); 85 | 86 | cb(); 87 | }); 88 | } 89 | 90 | 91 | window.multiResVideo = { 92 | layer: function() { 93 | return scene.layer(); 94 | }, 95 | element: function() { 96 | return asset.video() && asset.video().videoElement(); 97 | }, 98 | resolutions: function() { 99 | return resolutions; 100 | }, 101 | resolutionIndex: function() { 102 | return currentState.resolutionIndex; 103 | }, 104 | resolution: function() { 105 | return currentState.resolutionIndex != null ? 106 | resolutions[currentState.resolutionIndex] : 107 | null; 108 | }, 109 | setResolutionIndex: setResolutionIndex, 110 | resolutionChanging: function() { 111 | return currentState.resolutionChanging; 112 | }, 113 | addEventListener: emitter.addEventListener.bind(emitter), 114 | 115 | // events from proxy to videoElement 116 | addEventListenerVideo: videoEmitter.addEventListener.bind(videoEmitter) 117 | }; 118 | })(); -------------------------------------------------------------------------------- /video-multi-res/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marzipano/marzipano-demos/5b872b7549313dfeb375a2c05c55454d5d388cee/video-multi-res/placeholder.png -------------------------------------------------------------------------------- /video-multi-res/stage.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var Marzipano = window.Marzipano; 5 | 6 | // Initialize Viewer 7 | var viewerOpts = { stageType: 'webgl', watermarkPosition: { top: 15 } }; 8 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 9 | 10 | window.viewer = viewer; 11 | })(); -------------------------------------------------------------------------------- /video-multi-res/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /webvr/no-polyfill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebVR | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
Panorama by
21 |
Thomas Sharpless
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /webvr/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | #pano { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | } 29 | 30 | .vr-button { 31 | position: absolute; 32 | top: 10px; 33 | left: 10px; 34 | background-color: black; 35 | 36 | font-family: Helvetica, Arial, sans-serif; 37 | font-size: 16px; 38 | padding: 12px; 39 | color: white; 40 | } 41 | 42 | #enter-vr { 43 | cursor: pointer; 44 | font-size: .9em; 45 | padding: .5em 2em; 46 | background-color: #25aae1; 47 | border: 2px solid #25aae1; 48 | color: #fff; 49 | border-radius: 5px; 50 | } 51 | 52 | #enter-vr:hover { 53 | background-color: #51BBE7; 54 | border: 2px solid #51BBE7; 55 | } 56 | 57 | #no-vr { cursor: default; } 58 | -------------------------------------------------------------------------------- /webvr/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /webvr/vendor/wakelock.js: -------------------------------------------------------------------------------- 1 | // Adapted from webvr-boilerplate 2 | // https://github.com/borismus/webvr-boilerplate 3 | 4 | /** 5 | * Android and iOS compatible wakelock implementation. 6 | * 7 | * Thanks to dkovalev@. 8 | */ 9 | (function() { 10 | 11 | function AndroidWakeLock() { 12 | var video = document.createElement('video'); 13 | 14 | video.addEventListener('ended', function() { 15 | video.play(); 16 | }); 17 | 18 | this.request = function() { 19 | if (video.paused) { 20 | // Base64 version of videos_src/no-sleep.webm. 21 | video.src = base64('video/webm', 'GkXfowEAAAAAAAAfQoaBAUL3gQFC8oEEQvOBCEKChHdlYm1Ch4ECQoWBAhhTgGcBAAAAAAACWxFNm3RALE27i1OrhBVJqWZTrIHfTbuMU6uEFlSua1OsggEuTbuMU6uEHFO7a1OsggI+7AEAAAAAAACkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmAQAAAAAAAEMq17GDD0JATYCMTGF2ZjU2LjQuMTAxV0GMTGF2ZjU2LjQuMTAxc6SQ20Yv/Elws73A/+KfEjM11ESJiEBkwAAAAAAAFlSuawEAAAAAAABHrgEAAAAAAAA+14EBc8WBAZyBACK1nIN1bmSGhVZfVlA4g4EBI+ODhAT3kNXgAQAAAAAAABKwgRC6gRBTwIEBVLCBEFS6gRAfQ7Z1AQAAAAAAALHngQCgAQAAAAAAAFyho4EAAIAQAgCdASoQABAAAEcIhYWIhYSIAgIADA1gAP7/q1CAdaEBAAAAAAAALaYBAAAAAAAAJO6BAaWfEAIAnQEqEAAQAABHCIWFiIWEiAICAAwNYAD+/7r/QKABAAAAAAAAQKGVgQBTALEBAAEQEAAYABhYL/QACAAAdaEBAAAAAAAAH6YBAAAAAAAAFu6BAaWRsQEAARAQABgAGFgv9AAIAAAcU7trAQAAAAAAABG7j7OBALeK94EB8YIBgfCBAw=='); 22 | video.play(); 23 | } 24 | }; 25 | 26 | this.release = function() { 27 | video.pause(); 28 | video.src = ''; 29 | }; 30 | } 31 | 32 | function iOSWakeLock() { 33 | var timer = null; 34 | 35 | this.request = function() { 36 | if (!timer) { 37 | timer = setInterval(function() { 38 | window.location = window.location; 39 | setTimeout(window.stop, 0); 40 | }, 30000); 41 | } 42 | } 43 | 44 | this.release = function() { 45 | if (timer) { 46 | clearInterval(timer); 47 | timer = null; 48 | } 49 | } 50 | } 51 | 52 | 53 | function getWakeLock() { 54 | var userAgent = navigator.userAgent || navigator.vendor || window.opera; 55 | if (userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) { 56 | return iOSWakeLock; 57 | } else { 58 | return AndroidWakeLock; 59 | } 60 | } 61 | 62 | function base64(mimeType, base64) { 63 | return 'data:' + mimeType + ';base64,' + base64; 64 | }; 65 | 66 | 67 | window.getWakeLock = getWakeLock; 68 | })(); -------------------------------------------------------------------------------- /webvr/with-polyfill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebVR with Polyfill | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
Panorama by
21 |
Thomas Sharpless
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /world-map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | World map | Marzipano 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | Map style:
17 |
18 | 19 |
20 |

© Mapbox © OpenStreetMap

21 |

Improve this map

22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /world-map/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var _ = window._; 5 | var ko = window.ko; 6 | var Marzipano = window.Marzipano; 7 | 8 | // Mapbox API access token 9 | var accessToken = "pk.eyJ1IjoiZGlnaXNmZXJhIiwiYSI6ImMzZTBlMDY0MTNiNGFmM2U3NTE1ZTIxMzc5MDlhODU1In0.OWJGMKKQKgNwlMr5DoWFLQ"; 10 | 11 | // Number of zoom levels 12 | var numLevels = 18; 13 | 14 | // Map styles 15 | var styleMap = { 16 | "Streets": "mapbox.streets", 17 | "Satellite": "mapbox.streets-satellite", 18 | "Light": "mapbox.light", 19 | "Dark": "mapbox.dark", 20 | }; 21 | 22 | // Initialize viewer 23 | var viewerOpts = { swfPath: '../common-marzipano/marzipano.swf', stageType: 'webgl' }; 24 | var viewer = new Marzipano.Viewer(document.querySelector('#pano'), viewerOpts); 25 | 26 | // Generate the URL for a tile 27 | var tileUrl = function(style, z, x, y) { 28 | return "http://api.tiles.mapbox.com/v4/" + style + "/" + z + "/" + x + "/" + y + "@2x.png?access_token=" + accessToken; 29 | }; 30 | 31 | // Create view shared by all scenes 32 | var limiter = Marzipano.util.compose( 33 | Marzipano.FlatView.limit.resolution(512*Math.pow(2, numLevels-1)), 34 | Marzipano.FlatView.limit.letterbox() 35 | ); 36 | var view = new Marzipano.FlatView({ mediaAspectRatio: 1 }, limiter); 37 | 38 | // Create geometry shared by all scenes 39 | var geometry = new Marzipano.FlatGeometry(_.map(_.range(numLevels), function(i) { 40 | return { 41 | width: 512*Math.pow(2, i), 42 | height: 512*Math.pow(2, i), 43 | tileWidth: 512, 44 | tileHeight: 512 45 | }; 46 | })); 47 | 48 | // Create a source for the given map style 49 | var createSource = function(name) { 50 | var style = styleMap[name]; 51 | return new Marzipano.ImageUrlSource(function(tile) { 52 | return { url: tileUrl(style, tile.z, tile.x, tile.y) }; 53 | }); 54 | }; 55 | 56 | // Create one scene for each map style 57 | var sceneMap = {}; 58 | for (var name in styleMap) { 59 | sceneMap[name] = viewer.createScene({ 60 | source: createSource(name), 61 | geometry: geometry, 62 | view: view, 63 | pinFirstLevel: true 64 | }); 65 | } 66 | 67 | // Create an observable for the currently selected map style 68 | var selectedStyle = ko.observable(); 69 | 70 | // Switch to the selected style 71 | selectedStyle.subscribe(function(name) { 72 | var scene = sceneMap[name]; 73 | if (scene != null) { 74 | scene.switchTo(); 75 | } 76 | }); 77 | 78 | // Apply knockout bindings against the view model 79 | ko.applyBindings({ 80 | styleList: Object.keys(styleMap), 81 | selectedStyle: selectedStyle 82 | }); 83 | 84 | })(); -------------------------------------------------------------------------------- /world-map/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | -moz-user-select: none; 6 | -webkit-user-select: none; 7 | -ms-user-select: none; 8 | user-select: none; 9 | -webkit-user-drag: none; 10 | -webkit-touch-callout: none; 11 | -ms-content-zooming: none; 12 | } 13 | 14 | html, body { 15 | width: 100%; 16 | height: 100%; 17 | padding: 0; 18 | margin: 0; 19 | overflow: hidden; 20 | background-color: #000; 21 | } 22 | 23 | #pano { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | #style { 32 | position: absolute; 33 | top: 10px; 34 | right: 10px; 35 | padding: 10px; 36 | background-color: rgb(38,48,64); 37 | background-color: rgba(38,48,64,0.9); 38 | border-radius: 5px; 39 | color: #fff; 40 | font-family: arial, helvetica, sans-serif; 41 | font-size: 15px; 42 | } 43 | 44 | #dropdown { 45 | width: 100px; 46 | } 47 | 48 | #attribution { 49 | position: absolute; 50 | left: 10px; 51 | bottom: 10px; 52 | font-family: arial, helvetica, sans-serif; 53 | font-size: 12px; 54 | color: #fff; 55 | line-height: 1.3em; 56 | } 57 | 58 | #attribution a, #attribution a:hover, #attribution a:active, #attribution a:visited { 59 | color: inherit; 60 | text-decoration: inherit; 61 | } 62 | 63 | select { 64 | min-width: 200px; 65 | height: 25px; 66 | margin-top: 10px; 67 | color: #FFF; 68 | font-size: .8em; 69 | background-color: rgb(103,115,131); 70 | background-color: rgba(103,115,131,.8); 71 | border: none; 72 | } -------------------------------------------------------------------------------- /world-map/vendor/reset.min.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} --------------------------------------------------------------------------------