Merge pull request #83 from amosproj/sprint-08-release

Sprint 08 release
amosproj · Jun 9, 2021 · b21a148 · b21a148
2 parents 28c3e6d + 7454a46
commit b21a148
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 139 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,62 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>360 Pano Image Viewer</title>
-    <link rel="stylesheet" href="css/main.css">
-</head>
-    <body>
-        <script src="libs/three.min.js"></script>
-        <script src="libs/jQuery.min.js"></script>
-        <script src="libs/ol.js"></script>
-
-        <script type="module">
-            import { ViewerWindow } from "./js/viewer/ViewerWindow.js";
-
-            const getUrlParameter = function getUrlParameter(sParam) {
-                let sPageURL = window.location.search.substring(1),
-                    sURLVariables = sPageURL.split('&'),
-                    sParameterName;
-
-                for (let i = 0; i < sURLVariables.length; i++) {
-                    sParameterName = sURLVariables[i].split('=');
-
-                    if (sParameterName[0].toUpperCase() === sParam.toUpperCase()) {
-                        return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
-                    }
-                }
+    <link rel="stylesheet" href="css/main.css" />
 
-                return false;
-            };
-
-            const onLoadStr = getUrlParameter("onLoad");
-            const parts = decodeURIComponent(onLoadStr).split('.');
-
-            let onLoadFunc = window.parent;
-            for (let i = 0; i < parts.length; i++) {
-                try {
-                    onLoadFunc = onLoadFunc[parts[i]];
-                }
-                catch (e) {
-                    onLoadFunc = null;
+    <script src="libs/three.min.js"></script>
+    <script src="libs/jQuery.min.js"></script>
+    <script src="libs/ol.js"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css" />
+    <script src="libs/contextMenu.min.js"></script>
+
+    <!-- Initializing the Viewer with the onload function in the URL -->
+    <script type="module" defer>
+        import { ViewerWindow } from './js/viewer/ViewerWindow.js'
+
+        const getUrlParameter = function getUrlParameter(sParam) {
+            let sPageURL = window.location.search.substring(1),
+                sURLVariables = sPageURL.split('&'),
+                sParameterName
+
+            for (let i = 0; i < sURLVariables.length; i++) {
+                sParameterName = sURLVariables[i].split('=')
+
+                if (
+                    sParameterName[0].toUpperCase() === sParam.toUpperCase()
+                ) {
+                    return typeof sParameterName[1] === undefined
+                        ? true
+                        : decodeURIComponent(sParameterName[1])
                 }
             }
 
-            if ('function' === typeof(onLoadFunc)) {
-                onLoadFunc(window, ViewerWindow.viewerAsync);
+            return false
+        }
+
+        const onLoadStr = getUrlParameter('onLoad')
+        const parts = decodeURIComponent(onLoadStr).split('.')
+
+        let onLoadFunc = window.parent
+        for (let i = 0; i < parts.length; i++) {
+            try {
+                onLoadFunc = onLoadFunc[parts[i]]
+            } catch (e) {
+                onLoadFunc = null
             }
-        </script>
-
-        <div id="pano-viewer">
-            <div id="map" class="map"></div>
-
-            <div class = "control-OL" id="floorOL">
-                <div id="cfOL"></div>
-                <select name="dropdown-OL" id="dropdown-floors-OL" ></select>
-                <button id="buttonUpOL" class="code">Floor Up</button>
-                <button id="buttonDownOL" class="code">Floor Down</button>
-            </div>
-
+        }
+
+        if ('function' === typeof onLoadFunc) {
+            onLoadFunc(window, ViewerWindow.viewerAsync)
+        }
+    </script>
+
+</head>
+
+<body>
+    <div id="pano-viewer"></div>
+
+    <div id="map" class="map">
+        <div class="control-OL" id="floorOL">
+            <div id="cfOL"></div>
+            <select name="dropdown-OL" id="dropdown-floors-OL"></select>
+            <button id="buttonUpOL" class="code">Floor Up</button>
+            <button id="buttonDownOL" class="code">Floor Down</button>
         </div>
-    </body>
+    </div>
+</body>
+
 </html>
diff --git a/src/js/viewer/EventLayer.js b/src/js/viewer/EventLayer.js
@@ -1,29 +1,32 @@
 "use strict";
-
-// Event position in viewer
-
-export class EventPosition {
-    constructor() {
-
-        this.x; //  Number // y coordinate of this image on the floor
-
-        this.y; // Number // y coordinate of this image on the floor
-    }
-
-}
-
+import { ViewerContextItem } from "./ViewerContextItem.js";
 
 export class EventLayer {
     constructor() {
-        this.viewer_contex; 
+        this.viewer_contex;
     }
-    
-    vwr_oncontext (xy, location){
+
+    vwr_oncontext(xy, location) {
         //Parameters: 
         //xy EventPosition:  Pointer position
         //location THREE.Vector3 : Local coordinates for pointer position+
-        viewer_contex = new ViewerContextItem();
-        return viewer_contex;
+
+        //Showing pointer location and viewing direction in the terminal:
+        console.log("xy: ", xy);
+        console.log("Viewing Direction: ", location);
+
+        //Creating callback function for context menu item:
+        let callback = function (key, options) {
+            var msg = 'clicked: ' + key;
+            (window.console && console.log(msg)) || alert(msg);
+        };
+
+        //Creating item objects
+        let itemEdit = new ViewerContextItem(callback, "edit", null, "Edit");
+        let itemCut = new ViewerContextItem(callback, "cut", null, "Cut");
+
+        //Creating list of item objects.
+        return [itemEdit, itemCut];
     }
 
 }
diff --git a/src/js/viewer/EventPosition.js b/src/js/viewer/EventPosition.js
@@ -0,0 +1,11 @@
+"use strict";
+
+//Event position in viewer
+export class EventPosition {
+    constructor(event) {
+
+        this.x = event.clientX;
+        this.y = event.clientY;
+
+    }
+}
diff --git a/src/js/viewer/ViewerAPI.js b/src/js/viewer/ViewerAPI.js
@@ -63,7 +63,7 @@ export class ViewerAPI {
 
     animate() {
         window.requestAnimationFrame(() => this.animate());
-        this.pano.viewInternal();
+        this.pano.view(this.pano.viewerViewState.lonov, this.pano.viewerViewState.latov, this.pano.viewerViewState.fov);
         this.renderer.clear();
         this.renderer.render(this.pano.scene, this.pano.camera);
         this.renderer.clearDepth();
@@ -79,14 +79,13 @@ export class ViewerAPI {
 
         this.floor.currentFloor.viewerImages.forEach(element => {
             const currLocalPos = this.toLocal(element.pos);
-            const currDistances = [localPos.x - currLocalPos.x, localPos.y - currLocalPos.y];
-            const currDistance = Math.sqrt(currDistances[0] * currDistances[0] + currDistances[1] * currDistances[1]);
+            const [dx, dz] = [localPos.x - currLocalPos.x, localPos.z - currLocalPos.z];
+            const currDistance = Math.sqrt(dx * dx + dz * dz);
 
             if (currDistance < minDistance) {
                 minDistance = currDistance;
                 bestImg = element;
             }
-
         });
 
         // avoid duplication
@@ -142,25 +141,25 @@ export class ViewerAPI {
         // localCoords : THREE.Vector3 // Local coordinates used by the viewer
         const globalX = this.floor.origin[0] - (localCoords.x / 71.5);
         const globalY = this.floor.origin[1] - (localCoords.y / 111.3);
-        const globalZ = this.floor.currentFloor.z + localCoords.z;
+        const globalZ = localCoords.z - this.floor.currentFloor.z;
 
-        return [globalX, globalY, globalZ];
+        // the three js scene sees the y axis as the up-down axis so we have to swap with z
+        return [globalX, globalZ, globalY];
         // Returns: [Number] : WGS 84 coordinates [longitude, latitude, z] (z value is floorZ + panoZ, where localCoords is just the panoZ)
     }
 
     // Convert WGS 84 coordinates (globalCoords : [longitude, latitude, z]) to the local metric three.js coordinates used by the viewer.
-    // z value should be the panoZ + floorZ or image
+    // z value should be the panoZ + floorZ of image
     toLocal(globalCoords) {
         // Distance calculation math taken from here https://www.mkompf.com/gps/distcalc.html
+        // The more accurate calculation breaks the pixel offset on the pre-created maps
         const dx = 71.5 * (this.floor.origin[0] - globalCoords[0]);
         const dy = 111.3 * (this.floor.origin[1] - globalCoords[1]);
-
-        // The more accurate calculation breaks the pixel offset on the precreated maps
-        //const avgLat = (lat1 + lat2) / 2 * 0.01745;
-        //dx = 111.3 * Math.cos(THREE.MathUtils.degToRad(avgLat)) * (lon1 - lon2);
 
-        return new this.THREE.Vector3(dx * 1000, dy * 1000, globalCoords[2] - this.floor.currentFloor.z);
-        // Returns: THREE.Vector3 : Local coordinates
+        return new this.THREE.Vector3(
+            dx * 1000,
+            globalCoords[2] + this.floor.currentFloor.z,
+            dy * 1000);
     }
 
     // TODO: swap() and big(wanted)

diff --git a/src/js/viewer/ViewerContextItem.js b/src/js/viewer/ViewerContextItem.js
@@ -0,0 +1,16 @@
+"use strict";
+
+export class ViewerContextItem {
+
+  constructor(callback, icon, items, name) {
+
+    //Callback to execute for this context menu item
+    this.callback = callback;
+    //Icon class for this context menu item
+    this.icon = icon;
+    //Sub items below this context menu item
+    this.items = items;
+    //Human readable name of this item in the displayed context menu
+    this.name = name;
+  }
+}