Merge branch 'main' of https://github.com/amosproj/amos-ss2021-3d-viewer

 into main

index.html

@@ -34,9 +34,8 @@
 
                     // test the API
                     const test = new TestViewerAPI(api);
-                    //test.eventMeshTest(0, 0, -2, ["vwr_onclick", "vwr_oncontext", "vwr_onpointer"]);
-                    //test.eventMeshTest(0, 5);
                     test.addListeners();
+                    //test.eventMeshTest();
                 });
             }
         };

src/index.html

@@ -64,9 +64,10 @@
             <button id="zoom-in"> + </button>
             <button id="zoom-out"> - </button>
             <button id="full-screen"> Full Screen </button>
+            <button id="close-full-screen"> Close Full Screen </button>
         </div>
         <div class="control-OL" id="floorOL">
-            <div id="cfOL"></div>
+            <span> Current Floor: </span>
             <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>

src/js/viewer/ViewerConfig.js

@@ -8,16 +8,23 @@ export const DEFAULT_FOV = 80;
 export const MAX_FOV = 100;
 export const MIN_FOV = 10;
 
-
 // Describes how much mouse wheel scrolling is needed to zoom in the picture. 
 // A higher value means zooming is faster (also more stuttered)
 export const ZOOM_SPEED = 0.05;
 
-
 // Describes how much the mouse has to be moved for the picture to pan
 // A higher value means panning is quicker
 export const PAN_SPEED = 0.1;
 
+// Amount of degrees changed on one arrow key press left-right
+export const ARROW_LEFT_RIGHT_SPEED = 3;
+
+// Distance walked forward-backward (meter) on arrow key press
+export const ARROW_UP_DOWN_DISTANCE = 2.5;
+
+// Change in FOV (degrees) on +/- keyboard buttons;
+export const PLUS_MINUS_ZOOM_SPEED = 5;
+
 
 //Configurable values to change some aspects of the ViewerMapAPI
 
@@ -31,4 +38,4 @@ export const MAP_ZOOM = 4;
 export const LON_SCALAR = 71.5;
 
 // Scalar for Langitude from degree to km
-export const LAN_SCALAR = 111.3;
+export const LAN_SCALAR = 111.3;

src/js/viewer/ViewerFloorAPI.js

@@ -53,6 +53,9 @@ export class ViewerFloorAPI {
         viewerAPI.image.currentImageId = this.floors[this.currentFloorId].i[0][0];
 
         this.createControlMenuButtonsOL();
+
+        // event listener for up/down with keyboard
+        document.addEventListener('keydown', (event) => this.upDownKeyboard(event));
     }
 
     all(callback) {
@@ -92,9 +95,6 @@ export class ViewerFloorAPI {
         $('button[name="buttonDown"]').hide();
         $('.control select').hide();
 
-        // Show current floor
-        $("#cfOL").text("Current Floor: " + this.currentFloor.name + ". ");
-
         // push all floor names into an array
         let totalFloorsname = [];
         this.floors.forEach(function (item) {
@@ -134,8 +134,6 @@ export class ViewerFloorAPI {
             let selectValue = dropdownFloorsOL.value;
             let index_in_floor_name = totalFloorsname.indexOf(selectValue);
             selfRef.currentFloorId = index_in_floor_name;
-
-            $("#cfOL").text("Current Floor: " + selfRef.currentFloor.name + ". ");
 
             buttonUp.disabled = false;
             buttonDown.disabled = false;
@@ -162,8 +160,6 @@ export class ViewerFloorAPI {
 
             selfRef.currentFloorId++;
 
-            $("#cfOL").text("Current Floor: " + selfRef.currentFloor.name + ". ");
-
             // change to higher floor
             if (selfRef.currentFloorId == selfRef.floors.length - 1) {
 
@@ -193,7 +189,6 @@ export class ViewerFloorAPI {
         buttonDown.addEventListener('click', function () {
 
             selfRef.currentFloorId--;
-            $("#cfOL").text("Current Floor: " + selfRef.currentFloor.name + ". ");
 
             // change to lower floor
             if (selfRef.currentFloorId < 1 ) {
@@ -220,6 +215,74 @@ export class ViewerFloorAPI {
         });
     }
 
+    upDownKeyboard(event) {
+        // reference needed for scope of $ functions
+        const selfRef = this;
+
+        // push all floor names into an array
+        const totalFloorsname = [];
+        this.floors.forEach(function (item) {
+            totalFloorsname.push(item.name);
+        });
+
+        // get buttonUp and buttonDown for enable/disable
+        const buttonUp = document.getElementById('buttonUpOL');
+        const buttonDown = document.getElementById('buttonDownOL');
+
+        // get droplist
+        const dropdownFloorsOL = document.getElementById("dropdown-floors-OL");
+
+        switch (event.key) {
+            case "u":
+            case "U":
+                // already on highest floor
+                if (selfRef.currentFloorId == selfRef.floors.length - 1) return;
+
+                selfRef.currentFloorId++;
+
+                $("#cfOL").text("Current Floor: " + selfRef.currentFloor.name + ". ");
+
+                // change to higher floor
+                if (selfRef.currentFloorId == selfRef.floors.length - 1) {
+                    // disable the up button if it's already at the highest floor
+                    buttonUp.disabled = true;
+                    buttonDown.disabled = false;  
+                } else {
+                    //enable the up button if it's not in the highest floor
+                    buttonUp.disabled = false;
+                    buttonDown.disabled = false; 
+                }
+
+                dropdownFloorsOL.value = totalFloorsname[selfRef.currentFloorId];
+
+                selfRef.set(dropdownFloorsOL.value);
+                break;
+            case "d":
+            case "D":
+                // alredy on lowest floor
+                if (selfRef.currentFloorId < 1) return;
+
+                selfRef.currentFloorId--;
+
+                $("#cfOL").text("Current Floor: " + selfRef.currentFloor.name + ". ");
+
+                // change to lower floor
+                if (selfRef.currentFloorId < 1) {
+                    // disable the down button if it's already at the lowest floor
+                    buttonUp.disabled = false;
+                    buttonDown.disabled = true;
+                } else {
+                    //enable the down button if it's not in the lowest floor
+                    buttonUp.disabled = false;
+                    buttonDown.disabled = false;
+                }
+
+                dropdownFloorsOL.value = totalFloorsname[selfRef.currentFloorId];
+
+                selfRef.set(dropdownFloorsOL.value);
+                break;
+        }
+    }
 }
 
 class ViewerFloor {

src/js/viewer/ViewerMapAPI.js

@@ -307,7 +307,9 @@ export class ViewerMapAPI {
         var zoom_in = document.getElementById('zoom-in');
         var zoom_out = document.getElementById('zoom-out');
         var full_screen = document.getElementById('full-screen');
+        var close_full_screen = document.getElementById('close-full-screen');
         var map = this.map;
+        close_full_screen.style.display = "none";
 
         zoom_in.addEventListener('click', function () {
             var view = map.getView();
@@ -324,6 +326,15 @@ export class ViewerMapAPI {
         full_screen.addEventListener('click', function () {
             var elem = document.getElementById('map');
             elem.requestFullscreen();
+            full_screen.style.display = "none"; //hide.
+            close_full_screen.style.display = "";
+        })
+
+        close_full_screen.addEventListener('click', function () {
+            document.getElementById('map');
+            document.exitFullscreen();
+            close_full_screen.style.display = "none";
+            full_screen.style.display = "";;
         })
     }
 }