diff --git a/README.md b/README.md index e690fe3..1784ac5 100644 --- a/README.md +++ b/README.md @@ -50,9 +50,6 @@ The computer science department would like to use this viewer to display its 50 textual deliverables, i.e. documents (pdf, doc, etc.), or software deliverables -- **/assets**: - panaroma image dataset as an example to try the viewer software - - **/src**: stands for source, and is the raw code before minification or concatenation or some other compilation - used to read/edit the code @@ -75,7 +72,7 @@ It includes css(inside PanoViewer div),js,libs and index.html includes the general viewer files * **/src/libs**: - includes jQuery and Three.js Library files + includes jQuery, OpenLayers and Three.js Library files ## Folder Structure @@ -96,6 +93,7 @@ Includes the js files and main.js - [License | jQuery Foundation](https://jquery.org/license/): JavaScript library for simple HTML DOM manipulation +- [OpenLayers](https://openlayers.org): JavaScript library for displaying a dynamic map and markers on it diff --git a/assets/0/0r3.jpg b/assets/0/0r3.jpg deleted file mode 100644 index 2d6c453..0000000 Binary files a/assets/0/0r3.jpg and /dev/null differ diff --git a/assets/0/1r3.jpg b/assets/0/1r3.jpg deleted file mode 100644 index 28e53e1..0000000 Binary files a/assets/0/1r3.jpg and /dev/null differ diff --git a/assets/0/2r3.jpg b/assets/0/2r3.jpg deleted file mode 100644 index d30482d..0000000 Binary files a/assets/0/2r3.jpg and /dev/null differ diff --git a/assets/map0.png b/assets/map0.png deleted file mode 100644 index 776fc18..0000000 Binary files a/assets/map0.png and /dev/null differ diff --git a/src/js/main.js b/src/js/main.js deleted file mode 100644 index c943783..0000000 --- a/src/js/main.js +++ /dev/null @@ -1,108 +0,0 @@ -"use strict"; - -import { ViewerState} from "./viewer/ViewerState.js"; -import { ViewerVersionAPI } from "./viewer/ViewerVersionAPI.js"; -import { ViewerWindow } from "./viewer/ViewerWindow.js"; - -let trackPosLon, trackPosLat, trackPosVert = 0.0; - -let trackImageID, trackFloorName = 0.0; - -let viewerState = null; - -let viewerAPI, viewerViewState, viewerFloorAPI; - - -// only call executed in this file -new ViewerWindow().viewerAsync("https://bora.bup-nbg.de/amos2floors/", (x) => console.log(x.listen(logIt))); -//viewerAPI = new ViewerAPI("https://bora.bup-nbg.de/amos2floors/"); - -function logIt(name, payload, human) { - if (name == "moved") { - console.log(name + " to " + payload); - } else if (name == "viewed") { - console.log(name + " " + payload.lonov + " " + payload.latov + " " + payload.fov); - } else if (name == "floor") { - console.log(name + " " + payload); - } -} - - -function basicSetUp() { - var loc_para1; - var loc_para2; - var loc_para3; - var imageId; - var floors_name; - if (trackPosVert == 0 && trackPosLat == null || trackPosVert == 0 && trackPosLon == null) { - imageId = viewerFloorAPI.floors[viewerFloorAPI.currentFloorId].viewerImages[viewerFloorAPI.currentFloorId].id; - floors_name = viewerFloorAPI.floors[viewerFloorAPI.currentFloorId].name; - loc_para1 = viewerFloorAPI.floors[viewerFloorAPI.currentFloorId].viewerImages[viewerFloorAPI.currentFloorId].pos[0]; - loc_para2 = viewerFloorAPI.floors[viewerFloorAPI.currentFloorId].viewerImages[viewerFloorAPI.currentFloorId].pos[1]; - loc_para3 = viewerFloorAPI.floors[viewerFloorAPI.currentFloorId].viewerImages[viewerFloorAPI.currentFloorId].pos[2]; - - } else { - loc_para1 = trackPosLon; - loc_para2 = trackPosLat; - loc_para3 = trackPosVert; - imageId = trackImageID; - floors_name = trackFloorName; - - } - var latov_rad = viewerViewState.latov * Math.PI / 180.0; - var lonov_rad = viewerViewState.lonov * Math.PI / 180.0; - var viewer_fov = viewerViewState.fov; - var vMajor = viewerAPI.MAJOR; - var vMinor = viewerAPI.MINOR; - var view_para = []; - viewerState = new ViewerState([loc_para1, loc_para2, loc_para3], imageId, floors_name, [viewer_fov, latov_rad, lonov_rad]); - view_para = viewerState.view; - viewerAPI.viewerVersionAPI = new ViewerVersionAPI(vMajor, vMinor, view_para); - -} - -function drawArrow(position , scene ){ - console.log(position ); - direction = new THREE.Vector3(position); - //normalize the direction vector (convert to vector of length 1) - direction.normalize(); - - - //Create the arrow vetor - const origin = new THREE.Vector3(0, 0, 0); - const length = 20; - const hex = 0xff0000; // red color - var arrowHelper = new THREE.ArrowHelper(direction, origin, length, hex); - scene.add(arrowHelper); - -} - -function updateArrow(arrowHelper, direction){ - // update the arrow position - var newSourcePos = new THREE.Vector3(10, 10, 10); - var newTargetPos = new THREE.Vector3(60, 10, 10); - arrowHelper.position.set(newSourcePos); - direction = new THREE.Vector3().sub(newTargetPos, newSourcePos); - arrowHelper.setDirection(direction.normalize()); - arrowHelper.setLength(direction.length()); -} - -//Configuration File for Parameters - -var config = {}; - -config.zooming = {}; -config.rotation = {}; -config.initialFOV = {}; -config.MAX_FOV = {}; -config.MIN_FOV = {}; -config.web = {}; - -config.zooming.speed = process.env.loc_para1; -config.rotation.speed = process.env.loc_para2; -config.initial.FOV = "80"; -config.MAX.fov = "100"; -config.MIN.FOV = "10"; -config.web.port = process.env.WEB_PORT || 5500; - -module.exports = config; \ No newline at end of file diff --git a/src/js/viewer/ViewerAPI.js b/src/js/viewer/ViewerAPI.js index f8c70d1..54a71ba 100644 --- a/src/js/viewer/ViewerAPI.js +++ b/src/js/viewer/ViewerAPI.js @@ -15,7 +15,7 @@ export class ViewerAPI { constructor(baseURL) { this.libs = libraryInfo(); // : [ViewerLibrary] // List of used third party libraries this.version = new ViewerVersionAPI( // : ViewerVersionAPI // Version API - 0.6, // Sprint 6 + 0.7, // Sprint 7 NaN, "three.js 0.128.0 360 pano image viewer" ); diff --git a/src/js/viewer/ViewerMapAPI.js b/src/js/viewer/ViewerMapAPI.js index d194c1d..104be46 100644 --- a/src/js/viewer/ViewerMapAPI.js +++ b/src/js/viewer/ViewerMapAPI.js @@ -24,7 +24,6 @@ export class ViewerMapAPI { this.spriteGroup = new THREE.Group(); //create an sprite group this.mapScalingFactor = 0.2; - // const baseURL = "https://bora.bup-nbg.de/amos2floors/"; this.baseURL = viewerAPI.baseURL; // create Map and Layers @@ -61,26 +60,27 @@ export class ViewerMapAPI { // Method : Schedule a redraw of the three.js scene overlayed over the map (2D) view. redraw() { + /* this.spriteGroup.clear(); - //* remove comment to draw all points on map - let allImages = this.viewerFloorAPI.currentFloor.viewerImages; - - allImages.forEach(image => { - this.addPoint("black", image.mapOffset); - }); - //*/ + // remove comment to draw all points on map + // let allImages = this.viewerFloorAPI.currentFloor.viewerImages; + + // allImages.forEach(image => { + // this.addPoint("black", image.mapOffset); + // }); + // this.location = this.addPoint("red", this.viewerImageAPI.currentImage.mapOffset); //this.addViewingDirection("yellow", this.viewerImageAPI.currentImage.mapOffset); - + */ var floorIndex = this.viewerFloorAPI.currentFloorId; this.updateDisplayMap(floorIndex); } - // draws a point in *color* on the map at *offset*, also returns the THREE.Sprite after it is drawn + /* draws a point in *color* on the map at *offset*, also returns the THREE.Sprite after it is drawn addPoint(color, offset) { const texture = new THREE.Texture(generateCircularSprite(color)); texture.needsUpdate = true; @@ -103,7 +103,7 @@ export class ViewerMapAPI { this.spriteGroup.add(pointSprite); return pointSprite; - } + }*/ // Method scale() { @@ -111,7 +111,7 @@ export class ViewerMapAPI { return this.viewerFloorAPI.currentFloor.mapData.density; // (in meter / pixel) } - addViewingDirection(color, position){ + /*addViewingDirection(color, position){ const texture = new THREE.Texture(generateTriangleCanvas(color)); texture.needsUpdate = true; var mat = new THREE.SpriteMaterial({ @@ -131,7 +131,7 @@ export class ViewerMapAPI { triangleSprite.scale.set(10, 10, 1); this.spriteGroup.add(triangleSprite); - } + }*/ initDisplayMap(){ @@ -188,6 +188,7 @@ export class ViewerMapAPI { } +/* function generateCircularSprite(color) { var canvas = document.createElement('canvas'); canvas.height = 16;