Merge pull request #38 from amosproj/sprint-04-release-candidate-

Merge Sprint 04 release candidate to main

.gitignore

@@ -6,4 +6,5 @@
 *.code-workspace
 
 # Local History for Visual Studio Code
-.history/
+.history/
+assets/*

assets/data.json

@@ -39,7 +39,7 @@
             "i":[
                 [
                     0,
-                    300
+                    3
                 ]
             ],
             "map":{

src/js/main.js

@@ -3,57 +3,42 @@ import { ViewerImageAPI } from "./viewer/ViewerImageAPI.js";
 import { ViewerViewState } from "./viewer/ViewerViewState.js";
 import { ViewerPanoAPI } from "./viewer/ViewerPanoAPI.js";
 import { MAX_FOV, DEFAULT_FOV } from "./viewer/Globals.js"
+import { ViewerAPI } from "./viewer/ViewerAPI.js";
+import { ViewerMapAPI } from "./viewer/ViewerMapAPI.js"
 
 
-let viewerPanoAPI, viewerViewState, cameraMap, sceneMap, renderer;
-let spriteMap; // for createHUDSprites and updateHUDSprites
+let viewerPanoAPI, viewerMapAPI, viewerViewState, renderer, viewerAPI, viewerImageAPI;
 
 let onPointerDownMouseX = 0, onPointerDownMouseY = 0, onPointerDownLon = 0, onPointerDownLat = 0;
 
-init();
-animate();
+// Load the metadata only once
+const jsonImageDataFilepath = "../assets/data.json";
+$.getJSON(jsonImageDataFilepath, function(data) {
+    viewerImageAPI = new ViewerImageAPI(data);
+
+    init();
+    animate();
+});
+
 
 function init() {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
 
     const container = document.getElementById('pano-viewer');
     // the only html element we work with (the pano-viewer div)
 
+    // ----- init Map scene -----
+    viewerMapAPI = new ViewerMapAPI("../assets/map-wb50.png", viewerImageAPI); // load in map texture 
+
     // ----- init Panorama scene -----
     viewerPanoAPI = new ViewerPanoAPI();
     viewerViewState = new ViewerViewState(DEFAULT_FOV, 0, 0)
 
-    // Create a Sphere for the image texture to be displayed on
-    const sphere = new THREE.SphereGeometry(500, 60, 40);
-    // invert the geometry on the x-axis so that we look out from the middle of the sphere
-    sphere.scale( -1, 1, 1);
-
-    // load the 360-panorama image data (one specific hardcoded for now)
-    const texturePano = new THREE.TextureLoader().load( '../assets/0/0r3.jpg' );
-    texturePano.mapping = THREE.EquirectangularReflectionMapping; // not sure if this line matters
-
-    // put the texture on the spehere and add it to the scene
-    const material = new THREE.MeshBasicMaterial({ map: texturePano });
-    const mesh = new THREE.Mesh(sphere, material);
-    viewerPanoAPI.scene.add(mesh);
-    // ----- -----
-
-    // ----- init Map scene -----
-    cameraMap = new THREE.OrthographicCamera( -width / 2, width / 2, height / 2, -height / 2, 1, 10 );
-    cameraMap.position.z = 10;
-    sceneMap = new THREE.Scene();
-
-    //Create new camera for 2D display
-    const textureLoader = new THREE.TextureLoader();
-    textureLoader.load( "../assets/map-small.jpg", createHUDSprites );
-    // ----- -----
-
     // create the renderer, and embed the attributed dom element in the html page
     renderer = new THREE.WebGLRenderer();
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.autoClear = false; // To allow render overlay on top of panorama scene
+    renderer.sortObjects = false; 
 
     container.appendChild(renderer.domElement);
 
@@ -62,16 +47,11 @@ function init() {
     document.addEventListener('wheel', onDocumentMouseWheel);
     //document.addEventListener('resize', onWindowResize);
 
+    // Add listener for keyboard
+    //document.body.addEventListener('keydown', keyPressed, false);
 
-    let viewerImageAPI;
-
-    // hardcoded to work with assets/ for now
-    const jsonImageDataFilepath = "../assets/data.json";
-
-    $.getJSON(jsonImageDataFilepath, function(data) {
-        viewerImageAPI = new ViewerImageAPI(data);
-    });
-
+    viewerAPI = new ViewerAPI(viewerImageAPI, viewerPanoAPI);
+    setTimeout(function () { viewerAPI.move(15, 15, 1); }, 5000);
 }
 
 function animate() {
@@ -99,7 +79,7 @@ function onPointerDown(event) {
 // handles continues update of the distance mouse moved
 function onPointerMove(event) {
 
-    let scalingFactor = viewerPanoAPI.camera().fov / MAX_FOV;
+    let scalingFactor = viewerPanoAPI.camera.fov / MAX_FOV;
 
     viewerViewState.lonov = (onPointerDownMouseX - event.clientX) * 0.1 * scalingFactor + onPointerDownLon;
     viewerViewState.latov = (event.clientY - onPointerDownMouseY) * 0.1 * scalingFactor + onPointerDownLat;
@@ -119,61 +99,49 @@ function onPointerUp() {
 
 function onDocumentMouseWheel(event) {
     // the 0.05 constant determines how quick scrolling in and out feels for the user
-    viewerViewState.fov = viewerPanoAPI.camera().fov + event.deltaY * 0.05;
+    viewerViewState.fov = viewerPanoAPI.camera.fov + event.deltaY * 0.05;
 
     viewerPanoAPI.view(viewerViewState.lonov, viewerViewState.latov, viewerViewState.fov);
 
-    viewerPanoAPI.camera().updateProjectionMatrix();
+    viewerPanoAPI.camera.updateProjectionMatrix();
 
 }
 
+// function keyPressed(e){
+//     switch(e.key) {
+//         case 'm':
+//             //viewerAPI.move(15,15,1);
+//     }
+//     e.preventDefault();
+//   }
+
+
 // currently not supported
 function onWindowResize() {
 
     const width = window.innerWidth;
     const height = window.innerHeight;
 
-    viewerPanoAPI.camera().aspect = width / height;
-    viewerPanoAPI.camera().updateProjectionMatrix();
+    viewerPanoAPI.camera.aspect = width / height;
+    viewerPanoAPI.camera.updateProjectionMatrix();
 
-    cameraMap.left = - width / 2;
-    cameraMap.right = width / 2;
-    cameraMap.top = height / 2;
-    cameraMap.bottom = - height / 2;
-    cameraMap.updateProjectionMatrix();
-    updateHUDSprites();
+    viewerMapAPI.camera.left = - width / 2;
+    viewerMapAPI.camera.right = width / 2;
+    viewerMapAPI.camera.top = height / 2;
+    viewerMapAPI.camera.bottom = - height / 2;
+    viewerMapAPI.camera.updateProjectionMatrix();
 
     renderer.setSize(width, height);
-
-}
-
-
-function createHUDSprites( texture ) {
-    //Texture is Map
-    const material = new THREE.SpriteMaterial( { map: texture } );
-    const width = material.map.image.width;
-    const height = material.map.image.height;
-    spriteMap = new THREE.Sprite( material );
-    spriteMap.center.set( 1.0, 0.0 ); // bottom right
-    spriteMap.scale.set( width, height, 1 );
-    sceneMap.add( spriteMap );
-    updateHUDSprites();
-
-}
-
-function updateHUDSprites() {
-
-    spriteMap.position.set(window.innerWidth / 2, -window.innerHeight / 2, 1 ); // bottom right
+    render();
 
 }
 
 function render() {
 
     viewerPanoAPI.view(viewerViewState.lonov, viewerViewState.latov, viewerViewState.fov);
-
     renderer.clear();
-    renderer.render( viewerPanoAPI.scene, viewerPanoAPI.camera() );
+    renderer.render(viewerPanoAPI.scene, viewerPanoAPI.camera);
     renderer.clearDepth();
-    renderer.render( sceneMap, cameraMap );
+    renderer.render(viewerMapAPI.scene, viewerMapAPI.camera);
 
 }

src/js/viewer/Globals.js

@@ -1 +1,12 @@
-export const DEFAULT_FOV = 80, MAX_FOV = 100, MIN_FOV = 10;
+export const DEFAULT_FOV = 80, MAX_FOV = 100, MIN_FOV = 10;
+
+export function distanceWGS84TwoPoints(lon1, lat1, lon2, lat2) {
+    // Distance calculation math roughly taken from here https://www.mkompf.com/gps/distcalc.html
+    let dx, dy; // distance to origin in kilometers
+
+    const avgLat = (lat1 + lat2) / 2 * 0.01745;
+    dx = 111.3 * Math.cos(THREE.MathUtils.degToRad(avgLat)) * (lon1 - lon2);
+    dy = 111.3 * (lat1 - lat2);
+
+    return [dx, dy];
+}

src/js/viewer/ViewerAPI.js

@@ -0,0 +1,69 @@
+"use strict";
+
+// API provided by the viewer
+export class ViewerAPI {
+
+    constructor(viewerImageAPI, viewerPanoAPI) {
+        this.min = 1;
+        this.viewerImageAPI = viewerImageAPI;
+        this.viewerPanoAPI = viewerPanoAPI;
+    }
+
+
+    //Move the view to the given position.
+    move(lon, lat, z) {
+
+        let temp = [lon, lat, z];
+        let resultset = [];
+        let minval;
+        let minkey;
+
+        //console.log(viewerImageAPI.viewerImages);
+        for (let i in this.viewerImageAPI.currentFloor.viewerImages) {
+            //console.log(viewerImageAPI.viewerImages[i].pos);
+            //console.log(viewerImageAPI.viewerImages[i].pos[0]);
+            //console.log(temp[0]);
+            let result = Math.sqrt(
+                Math.pow(this.viewerImageAPI.currentFloor.viewerImages[i].pos[0] - temp[0], 2) +
+                Math.pow(this.viewerImageAPI.currentFloor.viewerImages[i].pos[1] - temp[1], 2) +
+                Math.pow(this.viewerImageAPI.currentFloor.viewerImages[i].pos[2] - temp[2], 2) );
+            //console.log(result);
+            resultset.push(result);  
+        }
+
+        console.log(resultset);
+        minkey = 0;
+        minval = resultset[0];
+        for (let i in resultset) {
+            if (resultset[i] < minval) {
+                minval = resultset[i];
+                minkey = i;
+            }
+        }
+        console.log(minkey);
+        console.log(minval);
+
+        this.min = minkey;
+
+        // Create a Sphere for the image texture to be displayed on
+        const sphere = new THREE.SphereGeometry(500, 60, 40);
+        // invert the geometry on the x-axis so that we look out from the middle of the sphere
+        sphere.scale( -1, 1, 1);
+
+        // load the 360-panorama image data (one specific hardcoded for now)
+        const texturePano = new THREE.TextureLoader().load( '../assets/0/'+this.min+'r3.jpg' );
+        texturePano.mapping = THREE.EquirectangularReflectionMapping; // not sure if this line matters
+
+        // put the texture on the spehere and add it to the scene
+        const material = new THREE.MeshBasicMaterial({ map: texturePano });
+        const mesh = new THREE.Mesh(sphere, material);
+
+        this.viewerPanoAPI.scene.add(mesh);
+
+        //console.log(minkey);
+        //console.log(minval);
+
+    }
+
+
+}

src/js/viewer/ViewerImage.js

@@ -3,9 +3,9 @@
 // Panorama Image
 export class ViewerImage {
 
-    constructor([panoLon, panoLat, panoZ, w, x, y, z, floorZ], imageIdx) {
+    constructor([panoLon, panoLat, panoZ, w, x, y, z, floorZ], imageIdx, name) {
 
-        this.floor; // : String // Name of floor which contains this image
+        this.floor = name; // : String // Name of floor which contains this image
 
         this.floorZ = floorZ; // : Number // Z coordinate of this image on the floor
 
@@ -16,6 +16,8 @@ export class ViewerImage {
         this.pos = [panoLon, panoLat, panoZ]; // : [Number] // WGS 84 coordinates [longitude, latitude, z] of this image
 
         this.orientation = new THREE.Quaternion(x, y, z, w);
+
+        this.mapOffset; // : [offsetX, offsetY] // in pixels, offset from map png. Values initalized in ViewerMapAPI shortly after object creation
     }
 
 }