Merge pull request #95 from amosproj/release-candidate-10

Merge Release candidate 10 into main

starter.html → index.html

@@ -27,6 +27,7 @@
             callback: function(viewerWindow, viewerAsync) {
                 console.info("initial callback called:", viewerWindow, viewerAsync);
                 viewerAsync("../assets/", (api) => {
+
                     console.info("loaded callback called with API:", api);
                 });
             }

src/css/main.css

@@ -25,9 +25,9 @@ body {
 #map{
     position: fixed;
     bottom: 1%;
-    right: 3%;
+    right: 1%;
     width: 20%;
-    height:20%;
+    height: 20%;
     color: #fff;
 }
 
@@ -37,9 +37,16 @@ body {
 
 .control-OL{
     position: fixed;
-    bottom:20.5%;
-    right: 3%;
+    bottom: 22%;
+    right: 1%;
     color: #fff;
 }
 
+#menu {
+    float: left;
+    position: absolute;
+    top: 0 px;
+    left: 0%;
+    z-index: 2000;
+}
 

src/index.html

@@ -60,6 +60,11 @@
     <div id="pano-viewer"></div>
 
     <div id="map" class="map">
+        <div id="menu">
+            <button id="zoom-in"> + </button>
+            <button id="zoom-out"> - </button>
+            <button id="full-screen"> Full Screen </button>
+        </div>
         <div class="control-OL" id="floorOL">
             <div id="cfOL"></div>
             <select name="dropdown-OL" id="dropdown-floors-OL"></select>

src/js/viewer/ViewerAPI.js

@@ -7,6 +7,8 @@ import { ViewerMapAPI } from "./ViewerMapAPI.js"
 import { ViewerState } from "./ViewerState.js";
 import { libraryInfo } from "./LibraryInfo.js";
 import { ViewerVersionAPI } from "./ViewerVersionAPI.js";
+import { ViewerContextItem } from "./ViewerContextItem.js";
+import { LON_SCALAR, LAN_SCALAR } from "./ViewerConfig.js";
 
 
 // API provided by the viewer
@@ -27,7 +29,7 @@ export class ViewerAPI {
         this.baseURL = baseURL;
 
         this.listeners = [];
-        
+
         this.renderer;
         // Load the metadata only once
         $.ajax({
@@ -43,6 +45,7 @@ export class ViewerAPI {
             this.pano = new ViewerPanoAPI(this);
             this.map = new ViewerMapAPI(this);
         }).then(() => {
+            document.addEventListener('mousedown', function (e) { e.preventDefault(); }, false);
             // the only html element we work with (the pano-viewer div)
             const panoDiv = document.getElementById('pano-viewer');
 
@@ -54,7 +57,7 @@ export class ViewerAPI {
             this.renderer.sortObjects = false;
 
             panoDiv.appendChild(this.renderer.domElement);
-            
+
             // start animation loop
             this.animate();
         });
@@ -73,12 +76,12 @@ export class ViewerAPI {
 
         let minDistance = 1000000000;
         let bestImg;
-        
+
         this.floor.currentFloor.viewerImages.forEach(element => {
             const currLocalPos = this.toLocal(element.pos);
-            const [dx, dz] = [localPos.x - currLocalPos.x, localPos.z - currLocalPos.z];
-            const currDistance = Math.sqrt(dx * dx + dz * dz);
-        
+            const [dx, dy, dz] = [localPos.x - currLocalPos.x, localPos.y - currLocalPos.y, localPos.z - currLocalPos.z];
+            const currDistance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+
             if (currDistance < minDistance) {
                 minDistance = currDistance;
                 bestImg = element;
@@ -136,11 +139,10 @@ export class ViewerAPI {
     // Convert the local metric three.js coordinates used by the viewer to WGS 84 coordinates [longitude, latitude, z].
     toGlobal(localCoords) {
         // localCoords : THREE.Vector3 // Local coordinates used by the viewer
-        const globalX = this.floor.origin[0] - ((localCoords.x / 1000) / 71.5);
-        const globalY = this.floor.origin[1] - ((-localCoords.z / 1000) / 111.3);
-        const globalZ = localCoords.y - this.floor.currentFloor.z;
+        const globalX = this.floor.origin[0] - ((localCoords.x / 1000) / LON_SCALAR);
+        const globalY = this.floor.origin[1] - ((localCoords.y / 1000) / LAN_SCALAR);
+        const globalZ = localCoords.z - this.floor.currentFloor.z;
 
-        // the three js scene sees the y axis as the up-down axis so we have to swap with z
         return [globalX, globalY, globalZ];
         // Returns: [Number] : WGS 84 coordinates [longitude, latitude, z] (z value is floorZ + panoZ, where localCoords is just the panoZ)
     }
@@ -150,13 +152,61 @@ export class ViewerAPI {
     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 dz = 111.3 * (this.floor.origin[1] - globalCoords[1]);
+        const dx = LON_SCALAR * (this.floor.origin[0] - globalCoords[0]);
+        const dy = LAN_SCALAR * (this.floor.origin[1] - globalCoords[1]);
 
         return new this.THREE.Vector3(
             dx * 1000,
-            globalCoords[2] + this.floor.currentFloor.z,
-            -dz * 1000);
+            dy * 1000,
+            globalCoords[2] + this.floor.currentFloor.z);
+    }
+
+    eventMeshTest(x = 0, y = 0, z = -2) {
+        // visual test, spawn in white sphere at first image position in scene (offset specified by parameters)
+        const sphere = new THREE.SphereGeometry(1 / 5, 10, 10);
+        const testMesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial());
+        const startPos = this.toLocal(this.image.currentImage.pos);
+        testMesh.position.set(startPos.x + x, startPos.y + y, startPos.z + z);
+
+        testMesh.vwr_onclick = function (xy, position) {
+            this.material.color.set(0xff0000); // as a test set color red
+            console.log("vwr_onclick is triggered.");
+            console.log("Pointer position: " , xy);
+            console.log("Local coordinate for pointer position: " , position);
+            return true;
+        }
+
+        testMesh.vwr_oncontext = function (xy, position) {
+            this.material.color.set(0x00ff00); // as a test set color green
+            console.log("vwr_oncontext is triggered.");
+            console.log("Pointer position: " , xy);
+            console.log("Local coordinate for pointer position: " , position);
+
+            //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];
+        }
+
+        testMesh.vwr_onpointerenter = function () {
+            this.material.color.set(0xffff00); // as a test set color yellow
+            console.log("vwr_onpointerenter is triggered.");
+        }
+
+        testMesh.vwr_onpointerleave = function () {
+            this.material.color.set(0x0000ff); // as a test set color blue
+            console.log("vwr_onpointerleave is triggered.");
+        }
+
+        this.pano.addLayer(testMesh);
     }
 
     // TODO: swap() and big(wanted)

src/js/viewer/ViewerConfig.js

@@ -26,3 +26,9 @@ export const SCALING_MAP = 0.2;
 
 // Describes the maximum zoom of the map. 
 export const MAP_ZOOM = 4;
+
+// Scalar for Longitude from degree to km
+export const LON_SCALAR = 71.5;
+
+// Scalar for Langitude from degree to km
+export const LAN_SCALAR = 111.3;

src/js/viewer/ViewerFloorAPI.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import { LON_SCALAR, LAN_SCALAR } from "./ViewerConfig.js";
+
+
 export class ViewerFloorAPI {
 
     constructor(data, viewerAPI) {
@@ -28,7 +31,7 @@ export class ViewerFloorAPI {
                     if (currentImage.id >= interval[0] && currentImage.id <= interval[1]) {
                         currentImage.floor = key;
 
-                        const [dx, dy] = [71.5 * (data.lon0 - currentImage.pos[0]), 111.3 * (data.lat0 - currentImage.pos[1])];
+                        const [dx, dy] = [LON_SCALAR * (data.lon0 - currentImage.pos[0]), LAN_SCALAR * (data.lat0 - currentImage.pos[1])];
 
                         const offsetX = currentFloor.mapData.x + currentFloor.mapData.density * (dx * 1000);
                         const offsetY = currentFloor.mapData.y - currentFloor.mapData.density * (dy * 1000);

src/js/viewer/ViewerImage.js

@@ -16,12 +16,7 @@ export class ViewerImage {
 
         this.pos = [panoLon, panoLat, panoZ]; // : [Number] // WGS 84 coordinates [longitude, latitude, z] of this image
 
-        // The quaternion data available in the json is not quite compatible with the translation we need in our scene
-        const threeX = y;
-        const threeY = z;
-        const threeZ = x;
-
-        this.orientation = new THREE.Quaternion(threeX, threeY, threeZ, w);
+        this.orientation = new THREE.Quaternion(x, y, z, w);
 
         this.mapOffset; // : [offsetX, offsetY] // in pixels, offset from map png
 

src/js/viewer/ViewerMapAPI.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { MAX_FOV, SCALING_MAP, MAP_ZOOM } from "./ViewerConfig.js";
+import { MAX_FOV, SCALING_MAP, MAP_ZOOM, LON_SCALAR, LAN_SCALAR } from "./ViewerConfig.js";
 // Map (2D) Viewer API
 
 // Specific API for the Map View
@@ -29,6 +29,16 @@ export class ViewerMapAPI {
         this.lastLayerDirection = [];
 
         this.redraw();
+
+        this.viewerAPI = viewerAPI;
+        let map = document.getElementById('map');
+        map.addEventListener('dblclick', (event) => this.onDoubleClick(event));
+
+        map.addEventListener('fullscreenchange', (event) => {
+            // If map set to full screen, hide the floor setting buttons
+            hideButtons( "floorOL"); 
+        });
+        this.control_button();
     }
 
     // Method: Add an event layer to the map (2D) view.
@@ -64,15 +74,15 @@ export class ViewerMapAPI {
             }),
             controls: ol.control.defaults({
                 // Hide Map rotation button
-                rotate: false
-            }).extend([
-                // create fullScreen button
-                new ol.control.FullScreen(),
-            ]),
+                rotate: false,
+                zoom: false
+            }),
             //Disable Zoom Control on MAP
-            interactions: ol.interaction.defaults({ mouseWheelZoom: false }),
+            interactions: ol.interaction.defaults({doubleClickZoom :false}),
         });
 
+
+
         // create image layers for each floors 
         for (var i = 0; i < this.viewerFloorAPI.floors.length; i++) {
             let mapData = this.viewerFloorAPI.floors[i].mapData
@@ -179,6 +189,9 @@ export class ViewerMapAPI {
 
         this.map.addLayer(vectorLayerRed);
 
+        // set view to middle
+        this.setMiddle(this.posLon,this.posLan);
+
         // save last vector layers for deleting next time
         this.lastVectorLayer = currentVectorLayer;
         this.lastVectorLayerRed = vectorLayerRed;
@@ -193,7 +206,7 @@ export class ViewerMapAPI {
         var lonov = this.viewerViewState.lonov;
 
         // temporary using 170 degree for correcting the starting zero degree of 2D map
-        var direction = -(lonov + 180) * (Math.PI / 180) % 360;
+        var direction = lonov * (Math.PI / 180) % 360;
 
         // remove prvious vector layers 
 
@@ -259,9 +272,70 @@ export class ViewerMapAPI {
 
     getLonLanCoordinates(position, mapdata){
         // Compute the latitude and longitude  in reference to the origin in WGS84 and aff offset of the map 
-        let lon = 87000 *  (position[0] - this.viewerFloorAPI.origin[0]) + (mapdata.x / mapdata.density);
-        let lan = 111000 * (position[1] - this.viewerFloorAPI.origin[1]) + (mapdata.y / mapdata.density);
+        let lon = LON_SCALAR * 1000 *  (position[0] - this.viewerFloorAPI.origin[0]) + (mapdata.x / mapdata.density);
+        let lan = LAN_SCALAR * 1000 * (position[1] - this.viewerFloorAPI.origin[1]) + (mapdata.y / mapdata.density);
         return [lon, lan]; 
     }
+
+    onDoubleClick(event) {
+
+        var coord = [];
+        var mousePosition = [];
+        var mapdata = this.viewerFloorAPI.floors[this.viewerFloorAPI.currentFloorId].mapData;
+        var floor = this.viewerFloorAPI;
+        var z = this.viewerFloorAPI.floors[this.viewerFloorAPI.currentFloorId].z;
+        var viewerAPI = this.viewerAPI; 
+
+        this.map.on('dblclick', function(event){
+
+            coord = event.coordinate;
+            mousePosition.push(((coord[0] - (mapdata.x / mapdata.density)) / (LON_SCALAR * 1000) ) + floor.origin[0]);
+            mousePosition.push(((coord[1] - (mapdata.y / mapdata.density)) / (LAN_SCALAR * 1000) ) + floor.origin[1]);
+
+            // move 
+            viewerAPI.move(mousePosition[0],mousePosition[1],z);
+
+        })
+    }
+
+    setMiddle(poslon, poslan){
+            this.map.getView().setCenter([poslon,poslan]);
+    }
+
+    control_button(){
+        var zoom_in = document.getElementById('zoom-in');
+        var zoom_out = document.getElementById('zoom-out');
+        var full_screen = document.getElementById('full-screen');
+        var map = this.map;
+
+        zoom_in.addEventListener('click', function () {
+            var view = map.getView();
+			var zoom = view.getZoom();
+			view.setZoom(zoom + 1);
+        })
+
+        zoom_out.addEventListener('click', function () {
+            var view = map.getView();
+			var zoom = view.getZoom();
+            view.setZoom(zoom - 1);
+        })
+
+        full_screen.addEventListener('click', function () {
+            var elem = document.getElementById('map');
+            elem.requestFullscreen();
+        })
+    }
 }
 
+function hideButtons(divId) {
+
+    //let divId = "floorOL"; 
+    var element = document.getElementById(divId); 
+
+    /* Toggle to hide HTML div */
+    if (element.style.display === "none") {
+      element.style.display = "block";
+    } else {
+      element.style.display = "none";
+    }
+  }