I want to replace the source image for the panorama but can't seem to figure out to do it...
I tried everything I think but with no success! The given URL works fine:
var source = Marzipano.ImageUrlSource.fromString("https://storage.googleapis.com/marzipano-demos-media/equirect/angra.jpg");
but it's the only thing. If I copy the image locally, it doesn't work.
Can anybody help??

Hey,

I'm new to marzipano. I would like to build something like the marzipano tool using the marzipano viewer. Is there any way to detect the location of the click to insert a hotspot at that location?

Thanks!

It would be great if you could save and then load a project or edit an existing zip file created from an export.
This would make working on a project in an incremental basis very easy.

Is it possible to have a multi-resolution with equirectangular images?
How would you do it?

Hihi, as mentioned in the subject. Reason being, my page is one-pager kind with a few sections. And this 360 tour will be in one of the section. I looked through the documentation and there isn't any options for me to set the canvas and it will just take up 100% width height of the browser.
Is there a way to set the size?

How to Marzipano non-minified version js file?. I need to implement drag and drop functionality for the hotspot. I Want to see whole code of marizpano.js file.

When printing the web page on Firefox or Safari the marzipano viewer is not showing. It displays whitespace instead.

Example: http://www.marzipano.net/demos/cube-single-res/index.html

Tested on the latest versions of Chrome, Firefox and Safari. It is working in Chrome.

Note: Firefox and Safari are able to print (very large) 2D images. Tested on my own site (http://www.hdpuzzles.com/#/puzzles/1587) and Google Maps Streetview.

Update: print isn't working when stageType is in 'webgl' mode. It is working when using the CSS stageType.

new Marzipano.Viewer(domElement, {
stageType: 'css'
});

Hi

I want to set max and min zoom level for marzipano. I am using this code to set min and max but it doesn't work.

var viewer = new Marzipano.Viewer(document.getElementById('pano'));
var source = Marzipano.ImageUrlSource.fromString(
imagesPath
);
var geometry = new Marzipano.CubeGeometry([{ size: 1024, tileSize: 1024 }]);
var limiter = Marzipano.RectilinearView.limit;
limiter.traditional(1024, 120 * Math.PI / 180);
limiter.vfov(startFov, startFov)
limiter.hfov(startFov, startFov);
view = new Marzipano.RectilinearView(initialView, limiter);
scene = viewer.createScene({
source: source,
geometry: geometry,
view: view,
pinFirstLevel: true
});

If I am using limiter as below it works fine but do not set limit in zoom.
var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120 * Math.PI / 180);

Please help me to to set this.

Thanks

Is there a way to provide the image as object not path to it?

Hi,
I want to use editable layer the one showed in demo, but i want to add hostpots also. I have checked the example where hotspots are added and they are added on the scene. In case of editable we have layer not scene, so how we can add hotspots on that?

Hi! I am a graphic designer, not a programmer. I like the Marzipano viewer a lot, the Marzipano tool is easy and straightforward, but I cant find any tutorial to guide me in other issues, like applying the transitions shown as demos in the site. I have downloaded all the code, buy its too hard for me. Any help please?

Hello,

Is it possible to get rid of the tiles and use a full 3d image as is, without resizing it?

Thanks

Hi,

I got an error in chrome v.53 when trying to play a file locally in kiosk mode (no web server).
any idea?

not working got error: Uncaught (in promise) DOMException: Failed to load because no supported source was found.

var video = document.createElement('video');
      video.src = 'mercedes-f1-1920x960.mp4';
      video.autoplay = true;
      video.crossOrigin = 'anonymous';
      //video.loop = true;
      video.play();
      waitForReadyState(video, video.HAVE_METADATA, 100, function() {
        waitForReadyState(video, video.HAVE_ENOUGH_DATA, 100, function() {
          asset.setVideo(new NullVideoElementWrapper(video));
            });
      });

Hi

Lot of 360 camera provider generate videos and can be displayed on their website and application.
I tried to play a video generated by insta360 device. I got an error "index.html:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found."

Here are my video stream links:
https://goo.gl/XOEzLH
https://goo.gl/zv4Rqm

What kind of camera can make a video for marzipano?

Thanks

Hihi, my page is one-pager kind with a few sections. And this 360 tour will be in one of the section.
On desktop I'll be allowing the user to be able to pan around. But on mobile, I'm just allowing the user to pan left right. So that the pan up and down is to allow them to scroll up and down the page to the other sections.
So far, I managed to get to the pan up and down event after adding panRecognizer to the hammerManageTouch. But how can I actually stop the panning up and down movement and allow them to scroll the page?

Oops I shouldn't post here. Have moved this question to https://groups.google.com/forum/?nomobile=true#!topic/marzipano/aHdwjnYZifE
Thank you.

When I run npm run dev, I have following errors!


Anyone has some ideas about it?
Thank you very much!

Hi,

I want to show progress bar with marzipano while my view is getting ready for display. Is there any way in marzipano which will help me to show progress bar.

Thanks

I want to draw hotspot on mouse click event, for this I need yaw and pitch of mouse. Please help me to find yaw and pitch of mouse cursor.

Hi,

I am implementing Marzipano in my project and need to draw line between two hotspots. I am not getting any way to draw line. Please help me to draw line between hotspots.

Thanks

Hi,

I am using marzipano and trying to use images from my locale folder. it works fine on windows as well as android devices. But it doesn't work on IOS. Please help me to figure the issue what is missing in my code.

var imagesPath = "panoimages/{f}.jpg";
var source = Marzipano.ImageUrlSource.fromString(
imagesPath
);
var geometry = new Marzipano.CubeGeometry([{ size: 1024, tileSize: 1024 }]);
var limiter = Marzipano.RectilinearView.limit.traditional(4096, 100 * Math.PI / 180);
var view = new Marzipano.RectilinearView(initialView, limiter);
var scene = viewer.createScene({
source: source,
geometry: geometry,
view: view,
pinFirstLevel: true
});
scene.switchTo();

I've just built a test Marzipano Tour and as result of testing on different devices I've noticed that Hotspot or Info Buttons applied to individual panoramas don't respond on iOS (iPhone or iPad).

On the Desktop in the latest versions of Chrome, Safari and Firefox the hotspots work as expected.

On Galaxy Tab A in the latest versions of Chrome and Firefox the hotspots work as expected.

On iOS iPhone 6 and iPad Air 2 the hotspots don't work in Chrome or Safari.

Any ideas on how to make that functionality valid for iOS

I honestly tried everything but it always seem to fail to install dependencies or get from git. Any ideas?

Hi all,

As what the title says, I'm having problem compiling the viewer in Windows 7 64bit machine.

I tried to follow the workaround explained in issue #3 (running the script from git Bash / Cygwin), but I have error like:

cd "`dirname $0`/.."
dirname $0

PATH=./scripts:./node_modules/.bin:$PATH

SRC=src
BUILD=build

mkdir -p $BUILD

make-swf $BUILD/marzipano.swf
fatal: No names found, cannot describe anything.
{ [Error: Command failed: git describe --tags HEAD
fatal: No names found, cannot describe anything.

Would appreciate any help. Thank you.

If I want to play streaming videos, for example, rtmp, rtsp, hls and etc. Does marzipano support them?

Is there a way to play 360 video without using webgl?

Hi,
I m trying to convert equirectangular to a multi resolution cube, client side, like on marzipano tool, So upload the jpeg (blob) files to a server. Is that Possible?

Hi,

I am using multiple image (f,b,u etc). I want createEditableLayers function to use to create layers and this function accepts single image. Can you help me how can i provide multiple images to this?

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 silly lifecycle [email protected]predev: no script for predev, continuing
7 info lifecycle [email protected]dev: [email protected]
8 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]dev: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\Skylar\documents\web\marzipano\node_modules.bin;C:\Users\Skylar\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Skylar\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Common Files\Autodesk Shared;C:\Program Files (x86)\Autodesk\Backburner;C:\Program Files\nodejs;C:\Users\Skylar\AppData\Local\atom\bin;C:\Users\Skylar\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
10 verbose lifecycle [email protected]dev: CWD: C:\Users\Skylar\documents\web\marzipano
11 silly lifecycle [email protected]dev: Args: [ '/d /s /c', 'scripts/dev' ]
12 silly lifecycle [email protected]dev: Returned: code: 1 signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: scripts/dev
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at EventEmitter.emit (events.js:185:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at ChildProcess.emit (events.js:185:7)
14 verbose stack at maybeClose (internal/child_process.js:827:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Users\Skylar\documents\web\marzipano
17 error Windows_NT 10.0.10586
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
19 error node v5.6.0
20 error npm v3.6.0
21 error code ELIFECYCLE
22 error [email protected] dev: scripts/dev
22 error Exit status 1
23 error Failed at the [email protected] dev script 'scripts/dev'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the marzipano package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error scripts/dev
23 error You can get information on how to open an issue for this project with:
23 error npm bugs marzipano
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls marzipano
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

First of all, what a great plugin!

Is there a way to access this plugin in a CDN or public URL?

I am trying out to stop the panaromic movement on dragging of my hotspot element.

I have one hotspot with slider but whenever i move slider it rotates panaroma also.

Can anyone suggest any solution for this.

Thanks.

Hi,
I tried to open the video demo posted on marzipano site on ios 9.3.1 (Iphone) and ios 9.0.2 (Ipad) without any success, The video doesn't play on both devices with the same behavior; it loads the video player bar and when I press the play button nothing happens.

Note: I made sure that both devices support webgl and all other demos that holds a panoramic image works fine

I need to use Marzipano within an angular js application, So is there some wrapper for marzipano to be used in client side app, and if not what would your advice be?

Getting this issue when trying to install using npm + webpack. Looks like a /tmp directory is missing.

client:47 ./~/marzipano/src/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../tmp/version in /Users/code/node_modules/marzipano/src
resolve file
  /Users/code/node_modules/marzipano/tmp/version doesn't exist

Error: WebGL: texImage2D: Incurred CPU-side conversion, which is very slow. marzipano.js:22:10625
Error: WebGL: texImage2D: Incurred CPU pixel conversion, which is very slow. marzipano.js:22:10625
Error: WebGL: texImage2D: Chosen format/type incurred an expensive reformat: 0x1908/0x1401 marzipano.js:22:10625

npm run dev is throwing errors. Please help

I think it says "scripts" is an unrecognized command, where the package.json has scripts : "scripts/dev"

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\s.zarekar\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 silly lifecycle [email protected]predev: no script for predev, continuing
7 info lifecycle [email protected]dev: [email protected]
8 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]dev: PATH: C:\Users\s.zarekar\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Shrikant\VR\Code\new\marzipano\node_modules.bin;C:\Program Files\nodejs;C:\Program Files\Docker\Docker\Resources\bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x64;C:\ProgramData\Lenovo\ReadyApps;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files (x86)\Skype\Phone;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Ruby23-x64\bin;C:\MongoDB\bin;C:\Program Files\Java\jdk1.8.0_101\bin;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit;C:\Program Files (x86)\Mitov\Visuino;C:\Users\s.zarekar\AppData\Local\Android\sdk\platform-tools;C:\Users\s.zarekar\AppData\Local\Android\sdk\ndk-bundle;C:\Python27;C:\Program Files\Anaconda3;C:\Program Files\Anaconda3\Scripts;C:\Program Files\Anaconda3\Library\bin;C:\Users\s.zarekar\AppData\Roaming\npm;C:\Users\s.zarekar\AppData\Local.meteor;C:\Users\s.zarekar\AppData\Local\Google\Cloud SDK\google-cloud-sdk\bin;%USERPROFILE%\AppData\Local\Microsoft\WindowsApps;;C:\Program Files\Docker Toolbox
10 verbose lifecycle [email protected]dev: CWD: C:\Shrikant\VR\Code\new\marzipano
11 silly lifecycle [email protected]dev: Args: [ '/d /s /c', 'dev' ]
12 silly lifecycle [email protected]dev: Returned: code: 1 signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: dev
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\s.zarekar\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:242:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (C:\Users\s.zarekar\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:827:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Shrikant\VR\Code\new\marzipano
17 error Windows_NT 10.0.14393
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Users\s.zarekar\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "dev"
19 error node v4.4.7
20 error npm v3.10.5
21 error code ELIFECYCLE
22 error [email protected] dev: dev
22 error Exit status 1
23 error Failed at the [email protected] dev script 'dev'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the marzipano package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error dev
23 error You can get information on how to open an issue for this project with:
23 error npm bugs marzipano
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls marzipano
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

From ImageUrl.js, Line 146

var valueFromTile = tile[templateProperties[property]] || '';

If tile.x == 0, or tile.y == 0, or tile.z == 0, where (numeric) 0 is a valid tile number, then the r-value becomes '' (i.e., empty string). Hence the code below

Marzipano.ImageUrlSource.fromString("/{z}/{x}{y}.jpg");

produces

"//.jpg"

Do you know if it would be possible to add a pointer to the webVR viewer to allow people to interact with different hotspots keeping the goggles on??

I see the "yaw" and "pitch" values in my data.js file and recognize it as radians but how do I determine what those values should be after the panorama has been made and exported (for instance, if I wanted to move a hotspot manually)?

Hello All
I want to have my own keyboard event listener for navigation and zooming, so is there any documentation fro this section.
Regards

Very hard to me when adding Embedded Hotspots, like video (own video or youtube).
Any suggestion about size of video and how to find yaw, pitch and perspective value.

Thanks the awesome project, can the marzipan integrated with Mobile?

hihi, would like to ask if there is a way to preload the images before the scene shows up.
Currently I already have the preload function to load all my images, but the moment i init my marzi, the ImageUrlSource.fromString seems to be loading the images again.

Hi.
I'm taking the Single Resolution Cube demo as a starting point.
And I noticed something.

Creating a DOM element on the fly and appending it to the Document works just fine.

// Create element
var element = $('<div class="panorama">')[0];

// Append element to document
document.body.appendChild(element);

// Single Resolution Cube Demo Code
var viewer = new Marzipano.Viewer(element);
var source = Marzipano.ImageUrlSource.fromString("http://www.marzipano.net/media/cubemap/{f}.jpg");
...

But if I try to do the same into a fragment nothing happens, not even an error.

// Create element
var element = $('<div class="panorama">')[0];

// Single Resolution Cube Demo Code
var viewer = new Marzipano.Viewer(element);
var source = Marzipano.ImageUrlSource.fromString("http://www.marzipano.net/media/cubemap/{f}.jpg");
var geometry = new Marzipano.CubeGeometry([{ tileSize: 1024, size: 1024 }]);
var limiter = Marzipano.RectilinearView.limit.traditional(4096, 100*Math.PI/180);
var view = new Marzipano.RectilinearView(null, limiter);

viewer.createScene({ source: source, geometry: geometry, view: view, pinFirstLevel: true }).switchTo();

// Append element to document
document.body.appendChild(element);

Is there a way to "render" to a fragment first and later append to the document?

Hi,

Is there a way to detect if a hotspot is now visible, or at a certain position on the screen?

Example:

1. Let's say the crosshair is the center of the screen. From this position, say I drag the scene to the left..
   

2. ...until the hotspot is now under the crosshair
   

It appears that the problem originates within glslify package and its /browser.js file, throwing an error:

Error: It appears that you're using glslify in browserify without its transform applied.
Make sure that you've set up glslify as a source transform:
https://github.com/substack/node-browserify#browserifytransform

Tried using both ify-loader (automatically applying browserify transforms on each and every required package from the modules tree, reading browserify.transform from its package.json) and glslify-loader (transform the files when required - only they are not required but loaded with glslify('file-name')) - all without any luck.

Any ideas on how to fix this, or what exactly is causing the problem? Webpack is the other major browser javascript compiler, we should be able to make it work with such an awesome lib.

Hi,

I have added multiple hotspots (15000) on my scene and start auto rotation. Now panorama doesn't work smoothly it starts vibrating. I don't understand what's wrong with my code this even I didn't find any example related to this.

var iconWrapper = document.createElement('div');
iconWrapper.classList.add('info-hotspot-icon-wrapper');
var icon = document.createElement('img');
icon.src = 'images/blue_droneview.png';
icon.classList.add('info-hotspot-icon');
iconWrapper.appendChild(icon);
var position = { yaw: view.yaw(), pitch: view.pitch(), fov: view.fov()};
scene.hotspotContainer().createHotspot(iconWrapper, position);

Is there any way to handle this situation.

Thanks

Hi,
I am not able to compile it.
npm install does create respective npm-modules, but give error at chokidar/fsevents
https://gyazo.com/5ed5f100219499b24c1c63440cfc7cd0

after that when you do npm run dev : it does not work
These are the error which you come across:

npm ERR! Failed at the [email protected] dev script 'scripts/dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the marzipano package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! scripts/dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs marzipano
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls marzipano
npm ERR! There is likely additional logging output above.

Thanks.

I have slider on marzipano as hotspot which is working fine with click and mousedown that is when i slide the slider panaroma doesn't move but similar thing is not working for touchstart as it moves with the touch movement

Can anyone suggest how to restrict panaromic movement on hotspot on mobile devices also.

When using the tool to support a virtual tour it would add to the feeling of immersion if your could enter a room view the appropriate initial view.
e.g. when entering the living room from room 1 (rm 1) the initial view setting (iv1) should be different then when enter the living room from room 2 (rm 2) i.e. iv2

|-----------|
| ....iv1....|----------|
| .............|............|
| iv2............rm 2..|
| .............|............|
|..............|----------|
|----- . -----|
|..............|
|...rm 1... |

Hi folks,

Any chance of a bower installation for Marzipano? It behaves reasonably well with bower install "git://github.com/google/marzipano" if you download a built version of the library and drop "main": "build/marzipano.js" into the .bower.json, but that feels a lot like cheating.

Alternatively any advice on how to hook it up so it builds with my standard gulp build?

... or should I just give up and push a built version through in the gulp file?

Thanks!
Roland.