Reload a panorama

[Joost]

Hi, 

I want to create a custom hotspot with a "switch" image. When I click on it, the scene should load a night-version of the pano. When I click it again, it should load a day-version of the pano. I just don't want to reload the whole page again.

Just wondering how you guys/girls would approach this?

thanks in advance,

Joost

[ReubenMRU]

Make 2 panoramas, modify the code to load a Url instead of just a scene... Pass the Url as argument... In each pano you pass the url of the other ;) 

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/bfd74fe9-c0ae-4d91-b440-bafa17a88700n%40googlegroups.com.

[Kris]

I would dearly love this feature for my panoramas too, Joost.  It's one of several features I really would love to have.  

I have tried, without much success unfortunately.  

Storygraaf have managed to implement it superbly into Marzipano tours here: https://lofttobe.storygraaf.be/.  If somebody could dissect their code (I don't know if they are active here) it would be great.   

[Joost]

I think I can create code to make this happen. Just need some time. Ill try to code a bit on friday.

Joost

Op wo 9 jun. 2021 om 10:42 schreef Kris <trailb...@gmail.com>:

You received this message because you are subscribed to a topic in the Google Groups "marzipano" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/marzipano/tQtJ3ppRV3g/unsubscribe.
To unsubscribe from this group and all its topics, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/b24e49a3-5238-479f-a1df-75c98688652fn%40googlegroups.com.

[Jamshid kodirov]

Hi everyone

I've been trying realize this https://lofttobe.storygraaf.be/# day/night effect for 2 weeks but unfortunately it doesn't work. Is here anyone who can share me with piece of code which they could.

thanks in advance 

 

Jamshid

среда, 9 июня 2021 г. в 13:46:20 UTC+5, joostva...@gmail.com:

[Kris]

Yes, I would still love this feature ( and I know my clients would too) and I have tried several times to dissect storygraaf's  code but to no avail.

Such as shame and I hate to see that the marzipano project now appears dead, or with little interest at least even for bugfixes, as it is by far my favourite of all tour software, including even the commercial ones. 

[Stephen Sandison]

Hi Kris,

As far as I can see this is how their code works:

In index.js they have a function that switches the scene between night and day scenes. The images for the scenes are taken at identical positions so when switching scenes all they need to do is keep the exact same yaw, pitch and fov values. The scenes in data.js are named in a way so that they can determine which one is day or night in the code. The scenes are ordered so that day and night are always next to each other.

Day

      "id": "4-pano3a",
      "name": "industrial 1 dag",

Night

      "id": "5-pano3b",
      "name": "industrial 1 nacht",

Here is the function that is attached to the click event of the night/day button that they are using to switch the scenes. It is in index.js and I have commented throughout what it's doing:

$("a#mode").click(function() {
    console.log(curscene.data.id);
    var scene;

    // Get current scene index
    var index=	scenes.indexOf(curscene);

    /*
    This seems to determine whether the current scene is night or day.
    Scene IDs ending in "a" are day ones and ones ending in "b" are night ones.
    This code says to select one ahead in the scene array or one before dependng on if the current 
    scene is night or day.
    */
    if (curscene.data.id.indexOf('a', curscene.data.id.length - 1) !== -1){
        index=index+1;

    
        
    }else{
        index=index-1;
    }
    
    // Get new scene from scenes array
    scene = scenes[index];

    // Get current view
    var view = curscene.marzipanoObject.view(); 

        // Change the scene to the new scene determined above
        switchScene(scene);

        // Create an object with the current views coordinates
        var destinationViewParameters = {
            yaw : view.yaw(),
            pitch : view.pitch(),
            fov:view.fov()
            
        };
        var options = {
            transitionDuration : 1
        }
    
    // Change the view of the new scene just set with the previous scenes view coordinates
    scene.marzipanoObject.lookTo(destinationViewParameters, options);
        
});

Hopefully that helps to explain what is going on?

Cheers,

Steve

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/7e69677e-53b4-4805-8011-83b3adcf23abn%40googlegroups.com.

[Joost]

Hi, 

Here is a sample + instruction of my implemenation:

First: You need two pictures: The authors of the day/night scene used two pictures; a day picture and a night picture. Since I don't have those kind of pictures i'm using two of my pictures that show the inside of a virtual bunker. One picture has the door OPEN, the other picture has the door CLOSED.

Second: Upon changing the picture, you want use the same pitch, yaw and FOV values.

Third: I did this quick & dirty and place javascript/css in the index.html file. You can also make seperate files for this to make it more clean.

You can view a demo here: https://www.qbasiq.com/openclosedoor/  (The only thing that changes when switch is the door on the left side)

(Look at index.html source in the demo. index.js source is here: https://www.qbasiq.com/openclosedoor/index.js  )

Instructions of recreating demo:

Add a button to the pano in index.html:

I added the following code for the button style 

<style>
.button {
  z-index: 1;
  position:absolute;  
  top: 110px;
  left: 10px;
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

Add a button to the pano in index.html:

<button class="button" id="mybutton" onclick="changeDoor()">Press to open</button>

Here I also added a function that actually changes the image.

Add the changeDoor() script to index.html, and in the switchDoor function set the scenes to switch to

<script>
function changeDoor() {
if (document.getElementById("mybutton").innerHTML == "Press to open")
{
   document.getElementById("mybutton").innerHTML = "Press to close";
   switchDoor("1-room1_main_dooropen");
 }
 else
 {
  document.getElementById("mybutton").innerHTML = "Press to open";
  switchDoor("0-room1_main_doorclosed");
 }
}
</script>

Changes in index.js

1) Make the index.js accessible from the index.html file

Comment the first and last line of code of the index.js file;

//(function() {

//})();

2) Add the italic line to the function to make the viewer accesible;

  function updateSceneName(scene) {
    sceneNameElement.innerHTML = sanitize(scene.data.name);
    window.marzipano_viewer = viewer; //!@#$
  }

3) Add the new function to switch the image. It actually grabs the current yaw/pitch/fov, gets the target scene, sets the initialViewParameters of the target, and switches the scene.

  function switchDoor(scene) { //THIS IS AN ACTUAL COPY OF switchScene
  stopAutorotate();
    var lmyScene   = findSceneById(scene);
    var lYaw       = marzipano_viewer.view().yaw();
    var lPitch     = marzipano_viewer.view().pitch();
    var lFOV       = marzipano_viewer.view().fov();
    var lTarget    = findSceneById(scene).data.id ;
    lmyScene.data.initialViewParameters.yaw = lYaw;
    lmyScene.data.initialViewParameters.pitch = lPitch;
    lmyScene.data.initialViewParameters.fov = lFOV;
    switchScene(lmyScene);
    lmyScene.scene.switchTo();
    startAutorotate();
    updateSceneName(lmyScene);
    updateSceneList(lmyScene);
  }  

Good luck in creating your day/night pano.

greetings

Joost

Op do 11 nov. 2021 om 10:48 schreef Stephen Sandison <stephen....@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/CADx4c5MGbWAfFXYE1VCxa-xKBLK_jESd16k%3D1sHqUmGUcvYqYw%40mail.gmail.com.

[Joost]

In my previous post i overwrite the values set as InitialViewParameters (i don't use the header to navigate).

But you can also use this function to not change the InitialViewParameters;

  function switchDoor(scene) { //!@#$ THIS IS AN ACTUAL COPY OF switchScene

  stopAutorotate();

    var lmyScene   = findSceneById(scene);

    var lYaw       = marzipano_viewer.view().yaw();

    var lPitch     = marzipano_viewer.view().pitch();

    var lFOV       = marzipano_viewer.view().fov();

    var destinationViewParameters = {

    yaw: lYaw,

    pitch: lPitch,

    fov: lFOV

    }

    var options = {

    transitionDuration: 0

    }

    switchScene(lmyScene);

    lmyScene.scene.switchTo();

    lmyScene.scene.lookTo(destinationViewParameters, options);

    startAutorotate();

    updateSceneName(lmyScene);

    updateSceneList(lmyScene);

  }    

Op donderdag 11 november 2021 om 11:07:58 UTC+1 schreef Joost:

[Kris]

Thanks so much, both!

I'll try and see if I can get a handle on it over the weekend.