Request for the Marzipano creators - Add target yaw/pitch to linkhotspot

[Joost]

Hi,

I have the feeling that the project is kinda "dead" but I want to do a request I know MANY people are looking for. So asking the creators to make this. (And is it otherwise possible to get the source to contribute in creating this? Thanks in advance).

The problem

An example to explain; You have three rooms A <-> B <-> C. 

When you go from room A to B, upon entering you should face room C. Done with InitialView. (works)

When you go from room B to C, upon entering you should face the wall in room C. Done with InitialView. (works)

When you go from room C to B, upon entering you should face room A. But points to InitialView. (This option is not available)

When you go from room B to A, upon entering you should face the wall in room A. Bit points to InitialView. (This option is not available).

Request

The community would like to request an option in the Marzipano tool that not only lets you select the InitialView but also the Initial View for LinkHotspot.

 

My question; can you please create an extra option in Marzipano to have Initial Views for LinkHotspots? Maybe you can build something like Theasys.io

thanks in advance,

Joost

[Joost]

Hi,

 So I was puzzling on how to solve this myself.
Basically you need two steps to easily create Link Hotspots;

1. Something that gives quick access to yaw and pitch values in your scenes.
2. A way to have link hotspots with target yaw/pitch.

 

First things first, I have now created a way to easily grab yaw and pitch values. Here is STEP 1. I will come up with the second part somewhere this week.

__

In your index.js file goto the function “updateSceneName(scene)”, and change it from

  function updateSceneName(scene) {
    sceneNameElement.innerHTML = sanitize(scene.data.name);
  }

 To

   function updateSceneName(scene) {
    sceneNameElement.innerHTML = sanitize(scene.data.name);   
    window.marzipano_viewer = viewer;
  }

__

 

__

In your index.html file goto the end of the file and just before </body> paste the following code.
This code will implement a small target in your pano. When you click inside the red dot of the target, it will give you the Yaw + Pitch. You can save these to a text file for further use.

 

<style>
.circledot{
  height: 18px;
  width: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:1;
}

.biggestdot{
  height: 15px;
  width: 15px;
  background-color: #abcdef;
  border-radius: 50%;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:1;
}

 .biggerdot{
  height: 10px;
  width: 10px;
  background-color: #abbddd;
  border-radius: 50%;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:1;
}

 .dot {
  height: 5px;
  width: 5px;
  background-color: #ff0000;
  border-radius: 50%;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:1;
}

</style>

<span class="circledot"></span>

<span class="biggestdot"></span>

<span class="biggerdot"></span>

<span class="dot" id="dotje"></span>

<script>

document.getElementById('dotje').addEventListener('click', function(e) {

  var lOutputString  = "\"new_scene_view_params\": { \"yaw\": " + marzipano_viewer.view().screenToCoordinates({ x: e.clientX, y: e.clientY }).yaw + ", ";

  var lOutputString = lOutputString +             "\"pitch\": " + marzipano_viewer.view().screenToCoordinates({ x: e.clientX, y: e.clientY }).pitch + ", ";

  var lOutputString = lOutputString + "\"roll\": 0, \"fov\": 0.0 }";

  console.log(lOutputString); 

  window.prompt("Here are the values you are looking for;",lOutputString);

});

</script>

 

__

Op zaterdag 27 februari 2021 om 11:25:30 UTC+1 schreef Joost:

[Joost]

Ok, so the previous code will give help you obtain target yaw/pitches.

For example it outputs;  "new_scene_view_params": { "yaw": -3.1180898641804156, "pitch": -0.016879444563187462, "roll": 0, "fov": 0.0 }

You can add these to your LinkHotspot in the data.js file.

Now to make the tool actually switch to a new scene with the target-yaw and pitch. Edit the index.js file and change 

    wrapper.addEventListener('click', function() {
      switchScene(findSceneById(hotspot.target));
    });

to

    wrapper.addEventListener('click', function() {
    if(hotspot.hasOwnProperty('new_scene_view_params'))
    {
    console.log('target view params detected, changing initialViewParameters');
    var lYaw   = hotspot.new_scene_view_params.yaw;
    var lPitch = hotspot.new_scene_view_params.pitch;
    findSceneById(hotspot.target).data.initialViewParameters.yaw = lYaw;
    findSceneById(hotspot.target).data.initialViewParameters.pitch = lPitch;
    }
      switchScene(findSceneById(hotspot.target));
    });

A demo can be seen HERE: https://greenfield.qbasiq.com

Note that the initial view of the first scene(kitchen north) is set to the inside of the kitchen.

Move from north to kitchen south, this scene is initially set to look at the curtain. 

Now turn around and go back to kitchen north. The scene will now be pointed at the cupboard.

Hope you guys can use this. 

Joost

Op dinsdag 2 maart 2021 om 17:10:31 UTC+1 schreef Joost:

[lol 257]

I had the problem and created a little tool to help me: https://github.com/gamebeaker/marzipano-hotspot-view