Update app.py

app.py

@@ -705,7 +705,7 @@ async(c, o, p, d, n, m, s)=>{
         window.video = document.getElementById("depth_video").getElementsByTagName("video")[0];
         window.parallax = 0;
         window.xdir = new BABYLON.Vector3(1, 0, 0);
-        window.rdir = new BABYLON.Vector3(1, 0, 0);
+        window.rdir = new BABYLON.Vector3(0, 0, 0);
         window.videoDomeMesh = BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1];
 
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointermove', function(evt) {
@@ -714,24 +714,24 @@ async(c, o, p, d, n, m, s)=>{
           videoDomeMesh.position.x = parallax * rdir.x;
           videoDomeMesh.position.z = parallax * rdir.z;
           
+          try {
+            compass.style.transform = "rotateX(" + (BABYLON.Engine.LastCreatedScene.activeCamera.beta-Math.PI/2) + "rad) rotateZ(" + BABYLON.Engine.LastCreatedScene.activeCamera.alpha + "rad)";
+          } catch(e) {alert(e);}
+        }
+        if (rd === true) {
           x = parseInt(evt.clientX - evt.target.getBoundingClientRect().x);
           y = parseInt(evt.clientY - evt.target.getBoundingClientRect().y);
           
-          if (rd === true) {
-            if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius) > (1.57-0.157)*16) {
-              BABYLON.Engine.LastCreatedScene.activeCamera.radius = (1.57-0.157)*16;
-            } else {
-              BABYLON.Engine.LastCreatedScene.activeCamera.fov = BABYLON.Engine.LastCreatedScene.activeCamera.radius/16 + 0.157;
-            }
-            document.getElementById('zoom').value = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
-            document.getElementById('zoom').parentNode.childNodes[2].innerText = document.getElementById('zoom').value;
-          
-            xold=x;
-            yold=y;
+          if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius) > (1.57-0.157)*16) {
+            BABYLON.Engine.LastCreatedScene.activeCamera.radius = (1.57-0.157)*16;
+          } else {
+            BABYLON.Engine.LastCreatedScene.activeCamera.fov = BABYLON.Engine.LastCreatedScene.activeCamera.radius/16 + 0.157;
           }
-          try {
-            compass.style.transform = "rotateX(" + (BABYLON.Engine.LastCreatedScene.activeCamera.beta-Math.PI/2) + "rad) rotateZ(" + BABYLON.Engine.LastCreatedScene.activeCamera.alpha + "rad)";
-          } catch(e) {alert(e);}
+          document.getElementById('zoom').value = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
+          document.getElementById('zoom').parentNode.childNodes[2].innerText = document.getElementById('zoom').value;
+          
+          xold=x;
+          yold=y;
         }
         });
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerdown', function() {
@@ -1055,7 +1055,7 @@ window.play = play;
         //mesh.position.z = coords[counter].lat;
         //mesh.position.x = coords[counter].lng;
         mesh.rotation.y = coords[counter].heading / 180 * Math.PI;
-        mesh.rotation.z = -coords[counter].pitch / 180 * Math.PI;
+        mesh.rotation.z = coords[counter].pitch / 180 * Math.PI;
         
         return mesh;
     }
@@ -1306,7 +1306,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
 
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].material.pointSize/2.0*Math.sqrt(2.0) + \"px)\";
             '/><span>0.8</span></span><br/>
-            <span><label for='pan' style='width:8em'>Pan</label><input id='pan' type='range' style='width:128px;height:1em;' value='0' min='-64' max='64' step='0.001' oninput='
+            <span><label for='pan' style='width:8em'>Pan</label><input id='pan' type='range' style='width:128px;height:1em;' value='0' min='-16' max='16' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1314,10 +1314,9 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               }
               parallax = this.value;
               rdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(xdir);
-              this.parentNode.childNodes[2].innerText = JSON.stringify(videoDomeMesh.position);
               videoDomeMesh.position.x = parallax * rdir.x;
               videoDomeMesh.position.z = parallax * rdir.z;
-              //this.parentNode.childNodes[2].innerText = parallax;
+              this.parentNode.childNodes[2].innerText = parallax;
             '/><span>0.0</span></span><br/>
             <span><label for='contrast' style='width:8em'>Contrast</label><input id='contrast' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {