How to... show static image on layer

[Harold F]

I'm working with layer but I can't show 2 static images.

Let me explain you:

On this example you can upload 2 images then change opacity and other stuff. But I want to show 2 predefined static images.

The original Marzipano code is something like this:

// Set up the user interface for importing layers.

var selectFilesInput = document.getElementById('selectFilesInput');
selectFilesInput.addEventListener('change', function() {
  if (this.files && this.files.length > 0) {
    for (var i = 0; i < this.files.length; i++) {
      importLayer(this.files[i]);
    }
  }
  this.value = null;
});

var selectFilesButton = document.getElementById('selectFilesButton');
selectFilesButton.addEventListener('click', function() {
  selectFilesInput.click();
});


// Convert an image file into a canvas.
function fileToCanvas(file, done) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = document.createElement('img');
  img.onload = function() {
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    ctx.drawImage(img, 0, 0);
    done(null, canvas);
  };
  img.onerror = function(err) {
    done(err);
  };
  img.src = URL.createObjectURL(file);
}

As yo can see is getting the source from an input file but I want to change this source to get from an specific folder.

Any thoughts? 

Cheers

Harold

[Manuel Cabral]

Are the images available on some URL or only on the local filesystem? I think it is not possible to load a local file on the browser without the user selecting it somehow, for security reasons. If the images are available on a URL it is possible to load them.

[Harold F]

Hi Manuel

I don't want user select the image. I want to show the images

What I'm looking?

I want to show 2 scenes moving at the same time. Then you can jump from scene 1 to 2 (and 2 to 1) using the last pitch and yaw.

Let me explain with an example: Bot scenes are from a room. First room dark, second room bright. If I move from the window to the table (is just an example) when I jump to the first image I want to see the table (that was my last pitch and yaw position)

Let me know if you understand me

And sorry for my English

[Tiago Quelhas]

On Fri, Jun 3, 2016 at 8:21 AM, Harold F <ar...@wearetheweather.co.uk> wrote:

Let me explain with an example: Bot scenes are from a room. First room dark, second room bright. If I move from the window to the table (is just an example) when I jump to the first image I want to see the table (that was my last pitch and yaw position)

This can be accomplished with two scenes that share the same view. As Manuel said, the images need to be available at some URL, since browsers don't have unrestricted access to the filesystem. Then you can do something like:

var viewer = new Marzipano.Viewer(document.getElementById('pano'));

// Create a view to be shared by the two scenes.

var limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);

var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);

// Create the first scene.

var scene1 = viewer.createScene({

  source: Marzipano.ImageUrlSource.fromString("http://path/to/first/scene.jpg"),

  geometry: new Marzipano.EquirectGeometry([{ width: 1024 }]),

  view: view,

  pinFirstLevel: true

});

// Create the second scene.

var scene2 = viewer.createScene({

  source: Marzipano.ImageUrlSource.fromString("http://path/to/second/scene.jpg"),

  geometry: new Marzipano.EquirectGeometry([{ width: 1024 }]),

  view: view,

  pinFirstLevel: true

});