504 lines
23 KiB
JavaScript
Executable File
504 lines
23 KiB
JavaScript
Executable File
"use strict";
|
|
var __extends = (this && this.__extends) || (function () {
|
|
var extendStatics = function (d, b) {
|
|
extendStatics = Object.setPrototypeOf ||
|
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
return extendStatics(d, b);
|
|
};
|
|
return function (d, b) {
|
|
extendStatics(d, b);
|
|
function __() { this.constructor = d; }
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
};
|
|
})();
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
// #region Initialization
|
|
console.log("\nBegin initialization ##################################################");
|
|
var angular_1 = __importDefault(require("angular"));
|
|
angular_1.default != undefined
|
|
? console.log("\tLoaded AngularJs.")
|
|
: console.error("\tFailed to load AngularJs.");
|
|
var leaflet_1 = __importDefault(require("leaflet"));
|
|
leaflet_1.default != undefined
|
|
? console.log("\tLoaded Leaflet.")
|
|
: console.error("\tFailed to load Leaflet.");
|
|
var utm_latlng_1 = __importDefault(require("utm-latlng"));
|
|
utm_latlng_1.default != undefined
|
|
? console.log("\tLoaded utm-latlng.")
|
|
: console.error("\tFailed to load utm-latlng.");
|
|
var isMobile = /Android/i.test(navigator.userAgent); // Check for mobile browser
|
|
console.log("\tDetected " + (isMobile ? "mobile browser." : "desktop browser, disabling AR features."));
|
|
// AngularJS
|
|
var ngApp = angular_1.default.module("main", []);
|
|
console.log("\tInitialized AngularJs.");
|
|
console.log("Initialization finished ###############################################");
|
|
// #endregion
|
|
// #region Helpers
|
|
var Calc;
|
|
(function (Calc) {
|
|
// Converts radians to degrees
|
|
function RadToDeg(rad) {
|
|
return rad * (180 / Math.PI);
|
|
}
|
|
Calc.RadToDeg = RadToDeg;
|
|
// Converts degrees to radians
|
|
function DegToRad(deg) {
|
|
return (deg * Math.PI) / 180;
|
|
}
|
|
Calc.DegToRad = DegToRad;
|
|
// Rotates a point around 0,0 by an angle in radians
|
|
function RotatePoint(point, angle) {
|
|
return {
|
|
x: point.x * Math.cos(angle) - point.y * Math.sin(angle),
|
|
y: point.x * Math.sin(angle) + point.y * Math.cos(angle)
|
|
};
|
|
}
|
|
Calc.RotatePoint = RotatePoint;
|
|
// UTM Coordinates
|
|
var UTM = /** @class */ (function () {
|
|
function UTM(e, n, zn, zl) {
|
|
this.Easting = e;
|
|
this.Northing = n;
|
|
this.ZoneNumber = zn;
|
|
this.ZoneLetter = zl;
|
|
}
|
|
return UTM;
|
|
}());
|
|
var _precision = 7; // Precision for LatLon to UTM conversion
|
|
var _utm = new utm_latlng_1.default("WGS 84"); // Create UTM/LatLng converter for WGS84 projection
|
|
// Wrapper for LatLon to UTM conversion
|
|
function LatLonToUtm(lat, lon) {
|
|
return _utm.convertLatLngToUtm(lat, lon, _precision);
|
|
}
|
|
Calc.LatLonToUtm = LatLonToUtm;
|
|
// Wrapper for UTM to LatLon conversion
|
|
function UtmToLatLon(utm) {
|
|
var temp = _utm.convertUtmToLatLng(utm.Easting, utm.Northing, utm.ZoneNumber, utm.ZoneLetter);
|
|
return { lat: temp.lat, lon: temp.lng };
|
|
}
|
|
Calc.UtmToLatLon = UtmToLatLon;
|
|
})(Calc || (Calc = {}));
|
|
// Leaflet marker with additional info to represent a mounting point
|
|
var MountingPoint = /** @class */ (function (_super) {
|
|
__extends(MountingPoint, _super);
|
|
function MountingPoint() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.SupportedAssets = [];
|
|
_this.ID = -1;
|
|
return _this;
|
|
}
|
|
return MountingPoint;
|
|
}(leaflet_1.default.Marker));
|
|
// Represents all levels with the same designation,
|
|
// Stores the mounting points of those levels
|
|
var Layer = /** @class */ (function () {
|
|
function Layer(name) {
|
|
this.Name = name;
|
|
this.Ids = [];
|
|
this.Selected = true;
|
|
this.LLayer = leaflet_1.default.layerGroup(undefined);
|
|
}
|
|
return Layer;
|
|
}());
|
|
// Returns true if str is undefined, empty or null
|
|
function IsStringEmpty(str) {
|
|
return str == undefined || str == "" || str == null;
|
|
}
|
|
// jQuery like shortcut to get html elements
|
|
function $(query) {
|
|
return document.querySelector(query);
|
|
}
|
|
// Retrieves the angular $scope from outside a controller
|
|
function GetScope() {
|
|
return angular_1.default.element($("body")).scope();
|
|
}
|
|
function Status(str) {
|
|
GetScope().status = str;
|
|
console.log(str);
|
|
$("#progressBar").value++;
|
|
}
|
|
// #endregion
|
|
// Main AngularJs controller
|
|
ngApp.controller("ctrl", function ($scope) {
|
|
var data = {}; // Will hold the websocket response
|
|
var t0 = null; // Measures the time it takes to load and parse
|
|
$scope.disableInput = false; // True when loadData kicks in, disables the inputs
|
|
$scope.connected = false; // True when websocket response was received
|
|
$scope.status = undefined; // String that will be shown while connecting
|
|
// Writes the websocket response to data when the load button is clicked
|
|
/** @function */ $scope.loadDataFromWS = function (ip) {
|
|
$scope.disableInput = true;
|
|
console.log("Begin loading data ####################################################");
|
|
t0 = performance.now(); // Get start time
|
|
// Default value for ip if nothing was entered
|
|
ip = IsStringEmpty(ip) ? "ws://192.168.133.140:2080" : ip;
|
|
// Catch invalid ips
|
|
try {
|
|
var ws = new WebSocket(ip); // Connect to the websocket
|
|
}
|
|
catch (e) {
|
|
alert("Invalid IP");
|
|
return;
|
|
}
|
|
Status("\tConnecting to " + ip + "...");
|
|
// Connect to the web socket
|
|
ws.onopen = function () {
|
|
console.log("\tConnected.");
|
|
ws.send(JSON.stringify({
|
|
type: "getEssentials",
|
|
uuid: "UUID"
|
|
}));
|
|
};
|
|
// Handles the response of the websocket
|
|
ws.onmessage = function (response) {
|
|
console.log("\tFetched " + Math.round(new TextEncoder().encode(response.data).length / 1000) + "kb.");
|
|
data = JSON.parse(response.data).data; // Parse websocket response to data
|
|
window.localStorage.setItem("data", escape(response.data));
|
|
$scope.$broadcast("dataLoaded"); // Call response event to kick in the map and selection GUI
|
|
};
|
|
// Handle bad websocket responses
|
|
ws.onclose = function (event) {
|
|
if (event.code > 1000) {
|
|
t0 = null;
|
|
$scope.status = "";
|
|
alert("Error when getting websocket response.\n" + event.code);
|
|
$scope.disableInput = false;
|
|
}
|
|
};
|
|
};
|
|
/** @function */ $scope.loadDataFromCache = function () {
|
|
$scope.disableInput = true;
|
|
console.log("Begin loading data ####################################################");
|
|
t0 = performance.now();
|
|
Status("Loading data from cache...");
|
|
try {
|
|
if (window.localStorage.getItem("data") == null)
|
|
throw new Error();
|
|
var _data = unescape(window.localStorage.getItem("data"));
|
|
data = JSON.parse(_data).data;
|
|
console.log("\tLoaded " + Math.round(new TextEncoder().encode(_data).length / 1000) + "kb from cache.");
|
|
$scope.$broadcast("dataLoaded");
|
|
}
|
|
catch (_a) {
|
|
$scope.status = "";
|
|
$scope.disableInput = false;
|
|
t0 = null;
|
|
console.log("\tCould not load data from cache.");
|
|
alert("No data cached.");
|
|
}
|
|
};
|
|
// Handles websocket response event
|
|
$scope.$on("dataLoaded", function () {
|
|
var _data = data;
|
|
$scope.connected = true; // Switches the connection menu for the mounting point selection
|
|
$scope.loading = true; // Disables the GUI while doing stuff
|
|
// #region MAP
|
|
console.log("\tCreating map.");
|
|
// Create the map, set view and image
|
|
var map = new leaflet_1.default.Map("map").setView(new leaflet_1.default.LatLng(53.0528064472226, 8.89412999153137), 8);
|
|
var imageBounds = new leaflet_1.default.LatLngBounds([
|
|
[53.0528064472226, 8.89412999153137],
|
|
[53.056520842139, 8.90030980110168]
|
|
]);
|
|
var mapImage = leaflet_1.default.imageOverlay("img/RDE2.jpg", imageBounds);
|
|
map.addLayer(mapImage);
|
|
map.fitBounds(imageBounds);
|
|
// #endregion
|
|
// #region BUILDINGS
|
|
// Get buildings
|
|
var buildings = _data.objects;
|
|
Status("\tParsing " + buildings.length + " buildings...");
|
|
// Create GeoJson from buidling footprints
|
|
var footprintPolygons = {
|
|
type: "FeatureCollection",
|
|
features: []
|
|
};
|
|
for (var _i = 0, buildings_1 = buildings; _i < buildings_1.length; _i++) {
|
|
var currentBuilding = buildings_1[_i];
|
|
// Check if current builing has footprint data, if not: skip
|
|
if (!(currentBuilding.path[0] == undefined)) {
|
|
// Holds footprint coordinates of the current building
|
|
var footprintCoords = [[]];
|
|
// Parse footprint coordinates from current building
|
|
for (var _a = 0, _b = currentBuilding.path; _a < _b.length; _a++) {
|
|
var pos = _b[_a];
|
|
footprintCoords[0].push([
|
|
// Convert from radians to degrees and add to the array
|
|
Calc.RadToDeg(pos.lon),
|
|
Calc.RadToDeg(pos.lat)
|
|
]);
|
|
}
|
|
// Last point has to be the same as the first point so we add it again
|
|
footprintCoords[0].push([
|
|
Calc.RadToDeg(currentBuilding.path[0].lon),
|
|
Calc.RadToDeg(currentBuilding.path[0].lat)
|
|
]);
|
|
// Create new GeoJson Feature with building footprint
|
|
var currentFootprint = {
|
|
type: "Feature",
|
|
properties: {
|
|
name: currentBuilding.designation
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: footprintCoords
|
|
}
|
|
};
|
|
// Add GeoJson feature to feature collection
|
|
footprintPolygons.features.push(currentFootprint);
|
|
}
|
|
}
|
|
// Draw building footprints to map, add name popups
|
|
var footprintGeoJson = leaflet_1.default.geoJSON(footprintPolygons, {
|
|
onEachFeature: function (feature, layer) {
|
|
layer.bindPopup("<h2>" + feature.properties.name + "</h2>");
|
|
}
|
|
}).addTo(map);
|
|
// #endregion
|
|
// #region LEVELS
|
|
var levels = _data.levels; // Levels are the actual floors in the building
|
|
var layers = []; // Layers are their representation on the map
|
|
Status("\tParsing " + levels.length + " levels...");
|
|
for (var _c = 0, levels_1 = levels; _c < levels_1.length; _c++) {
|
|
var level = levels_1[_c];
|
|
// Create a layer for each level
|
|
var add = true;
|
|
for (var _d = 0, layers_1 = layers; _d < layers_1.length; _d++) {
|
|
var layer = layers_1[_d];
|
|
// Levels with duplicate names will be on the same layer
|
|
if (level.designation === layer.Name) {
|
|
add = false;
|
|
layer.Ids.push(level.id);
|
|
break;
|
|
}
|
|
}
|
|
if (add) {
|
|
// Create new Layer if level is not a duplicate
|
|
var newLayer = new Layer(level.designation);
|
|
newLayer.Ids.push(level.id);
|
|
layers.push(newLayer);
|
|
}
|
|
}
|
|
var outdoorLayer = new Layer("outdoor"); // Create a layer for mounting points outside of buildings
|
|
outdoorLayer.Ids = [-1];
|
|
var footprintLayer = new Layer("buildings"); // Create a layer for the building footprint
|
|
footprintLayer.LLayer = footprintGeoJson;
|
|
layers.push(outdoorLayer); // Add outdoor and footprint layers
|
|
layers.push(footprintLayer);
|
|
$scope.layers = layers; // Add layers to the checkbox menu
|
|
// #endregion
|
|
// #region MOUNTING POINTS
|
|
// Get mounting points
|
|
var mountingPoints = _data.mountingPoints;
|
|
Status("\tParsing " + mountingPoints.length + " mounting points...");
|
|
for (var _e = 0, mountingPoints_1 = mountingPoints; _e < mountingPoints_1.length; _e++) {
|
|
var m = mountingPoints_1[_e];
|
|
for (var _f = 0, buildings_2 = buildings; _f < buildings_2.length; _f++) {
|
|
var b = buildings_2[_f];
|
|
if (b.id == m.objectId) {
|
|
// Current mounting point is in current buidling?
|
|
b.utmRefPoint = Calc.LatLonToUtm(Calc.RadToDeg(b.refPoint.lat), Calc.RadToDeg(b.refPoint.lon)); // Converts refPoint of the building to UTM
|
|
m.fixedPosition = Calc.RotatePoint({ x: m.position3d.x, y: m.position3d.y }, Calc.DegToRad(b.rotationDegree)); // Rotates coords of the mounting point by rotationDegree of the building
|
|
m.absoluteUtm = b.utmRefPoint;
|
|
m.absoluteUtm.Easting += m.fixedPosition.x;
|
|
m.absoluteUtm.Northing += m.fixedPosition.y;
|
|
m.absoluteLatLon = Calc.UtmToLatLon(m.absoluteUtm);
|
|
// Add refPoint to the relative position and convert back to lat/lng
|
|
var arButtonHtml = isMobile
|
|
? "<button\n\t\t\t\t\t\t\t\tonclick=\"window.Functions.DisplayInAr(" + m.id + ")\"\n\t\t\t\t\t\t\t\tid=\"arButton\"\n\t\t\t\t\t\t >\n\t\t\t\t\t\t\t\tShow in AR\n\t\t\t\t\t\t\t</button>"
|
|
: "<i>AR not supported on desktop.</i>";
|
|
for (var _g = 0, layers_2 = layers; _g < layers_2.length; _g++) {
|
|
var l = layers_2[_g];
|
|
for (var _h = 0, _j = l.Ids; _h < _j.length; _h++) {
|
|
var i = _j[_h];
|
|
if (i == m.levelId) {
|
|
// Current mouting point is on current level?
|
|
var marker = new MountingPoint(
|
|
// Create a marker for the mounting point
|
|
new leaflet_1.default.LatLng(m.absoluteLatLon.lat, m.absoluteLatLon.lon), {
|
|
icon: leaflet_1.default.icon({
|
|
iconUrl: "img/marker.png",
|
|
iconSize: [30, 30]
|
|
})
|
|
})
|
|
.bindPopup(
|
|
// Create a popup with info about the mounting point
|
|
"<h2>\n\t\t\t\t\t\t\t\t\t\t" + (IsStringEmpty(m.tag) ? m.designation : m.tag) + "\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t<table>\n\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<td>ID</td>\n\t\t\t\t\t\t\t\t\t\t\t\t<td>" + m.id + "</td>\n\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<td>Object ID</td>\n\t\t\t\t\t\t\t\t\t\t\t\t<td>" + m.objectId + "</td>\n\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<td>Supported Asset Type IDs</td>\n\t\t\t\t\t\t\t\t\t\t\t\t<td>" + m.supportedAssetTypeIds + "</td>\n\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t</table>\n\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t" + arButtonHtml + "\n\t\t\t\t\t\t\t\t\t\t")
|
|
.addTo(map); // Add it to the map
|
|
marker.SupportedAssets = // Add info about supported asset types
|
|
m.supportedAssetTypeIds;
|
|
marker.ID = m.id; // Add mounting point id
|
|
l.LLayer.addLayer(marker); // Add marker to corresponding layer
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
$scope.mountingPoints = mountingPoints;
|
|
// #endregion
|
|
// #region ASSETS
|
|
// Get asset types
|
|
var assets = _data.assetTypes;
|
|
Status("\tParsing " + assets.length + " assets...");
|
|
// Add asset types to the dropdown menu
|
|
$scope.assets = {
|
|
availableAssets: assets,
|
|
selectedAsset: assets[0]
|
|
};
|
|
// #endregion
|
|
// #region ANGULAR FUNCTIONS
|
|
// Called by either the layer or asset selection
|
|
/** @function */ $scope.SelectionChanged = function () {
|
|
var points = 0;
|
|
for (var _i = 0, layers_3 = layers; _i < layers_3.length; _i++) {
|
|
var layer = layers_3[_i];
|
|
if (layer.Selected) {
|
|
map.addLayer(layer.LLayer); // Add selected layers
|
|
// Hacky type conversion to get the supported asset types from each mounting point on a layer
|
|
// If it's stupid but it works it's not stupid
|
|
for (var _a = 0, _b = layer.LLayer.getLayers(); _a < _b.length; _a++) {
|
|
var m = _b[_a];
|
|
try {
|
|
for (var _c = 0, _d = m.SupportedAssets; _c < _d.length; _c++) {
|
|
var a = _d[_c];
|
|
if (a == $scope.assets.selectedAsset.id) {
|
|
m.addTo(map); // Add markers for selected asset type
|
|
++points;
|
|
}
|
|
else {
|
|
m.removeFrom(map); // Remove all other markers
|
|
}
|
|
}
|
|
}
|
|
catch (_e) {
|
|
/** Sometimes theres an error here...
|
|
* Doesn't seem to interfere with anything though and
|
|
* I don't want to see it in the console
|
|
*/
|
|
}
|
|
}
|
|
}
|
|
else
|
|
map.removeLayer(layer.LLayer); // Remove unselected layers
|
|
}
|
|
console.log("Selected " + points + " mounting point" + (points == 1 ? "" : "s") + ".");
|
|
};
|
|
// Filter for selected mounting point table and count
|
|
/** @function */ $scope.MountingPointFilter = function () {
|
|
return function (mp) {
|
|
var correctAssetType = false;
|
|
for (var _i = 0, _a = mp.supportedAssetTypeIds; _i < _a.length; _i++) {
|
|
var i = _a[_i];
|
|
if (i == $scope.assets.selectedAsset.id) {
|
|
correctAssetType = true;
|
|
break;
|
|
}
|
|
} // Current mounting point supports selected asset type
|
|
var correctLayer = false;
|
|
for (var _b = 0, layers_4 = layers; _b < layers_4.length; _b++) {
|
|
var layer = layers_4[_b];
|
|
for (var _c = 0, _d = layer.Ids; _c < _d.length; _c++) {
|
|
var i = _d[_c];
|
|
if (layer.Selected && i == mp.levelId) {
|
|
correctLayer = true;
|
|
break;
|
|
}
|
|
}
|
|
} // Current mounting point is on a selected layer
|
|
var foundBySearch = IsStringEmpty($scope.mpSearch)
|
|
? true // Automatically true if search input empty
|
|
: (IsStringEmpty(mp.tag) ? mp.designation : mp.tag).indexOf($scope.mpSearch) >= 0 || mp.id.toString().indexOf($scope.mpSearch) >= 0;
|
|
// true if tag, designation or id contain search input
|
|
return correctAssetType && correctLayer && foundBySearch;
|
|
};
|
|
};
|
|
// Function for the Show button
|
|
/** @function */ $scope.ShowMp = function (mp) {
|
|
for (var _i = 0, layers_5 = layers; _i < layers_5.length; _i++) {
|
|
var l = layers_5[_i];
|
|
// Not this again...
|
|
for (var _a = 0, _b = l.LLayer.getLayers(); _a < _b.length; _a++) {
|
|
var m = _b[_a];
|
|
if (m.ID == mp.id) {
|
|
// Find clicked mounting point
|
|
m.openPopup(); // Open corresponding popup
|
|
map.panTo(m.getLatLng()); // Center map on the popup
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// #endregion
|
|
// Get final time and format it
|
|
var time = t0 != null
|
|
? "Finished loading data in " + (performance.now() -
|
|
t0) + "ms ########################################"
|
|
: "Finished loading data #################################################";
|
|
console.log(time);
|
|
$scope.SelectionChanged(); // Make initial map state fit the initial menu state
|
|
$scope.loading = false; // Done loading
|
|
$scope.$apply();
|
|
});
|
|
});
|
|
// #region WIKITUDE FUNCTIONS
|
|
var currentPOI = undefined; // Holds current wikitude ar marker
|
|
// Shows an augmented reality marker vor the selected mounting point
|
|
function _displayInAr(id) {
|
|
var $scope = GetScope(); // Retrieve angular scope
|
|
var mountingPoint;
|
|
for (var _i = 0, _a = $scope.mountingPoints; _i < _a.length; _i++) {
|
|
var mp = _a[_i];
|
|
if (mp.id == id) {
|
|
mountingPoint = mp;
|
|
break;
|
|
}
|
|
} // Get correct mounting point
|
|
var name = IsStringEmpty(mountingPoint.tag)
|
|
? mountingPoint.designation
|
|
: mountingPoint.tag;
|
|
$scope.arMountingPoint = name;
|
|
// Display mounting point tag/designation
|
|
currentPOI = new AR.GeoObject([
|
|
new AR.GeoLocation(mountingPoint.absoluteLatLon.lat, mountingPoint.absoluteLatLon.lon)
|
|
], {
|
|
drawables: {
|
|
cam: [
|
|
new AR.ImageDrawable(new AR.ImageResource("img/armarker.png"), 2.5, { zOrder: 0, opacity: 1 }),
|
|
new AR.Label(name, 1, {
|
|
zOrder: 1,
|
|
style: { textColor: "#ffffff" }
|
|
})
|
|
],
|
|
indicator: new AR.ImageDrawable(new AR.ImageResource("img/arindicator.png"), 0.1, {
|
|
enabled: true,
|
|
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
|
|
})
|
|
}
|
|
}); // Create AR marker
|
|
$scope.arMode = true; // Hide map and menu
|
|
$scope.$apply();
|
|
console.log("Switched to AR mode.");
|
|
}
|
|
// Goes back to the map view
|
|
function _backFromAr() {
|
|
var $scope = GetScope(); // Retrieve angular scope
|
|
$scope.arMountingPoint = ""; // Clear name display
|
|
$scope.arMode = false; // Show map and menu again
|
|
currentPOI.destroy();
|
|
currentPOI = undefined;
|
|
$scope.$apply();
|
|
console.log("Switched to map mode.");
|
|
}
|
|
// Attach functions
|
|
window.Functions = window.Functions || {
|
|
DisplayInAr: _displayInAr,
|
|
BackFromAr: _backFromAr
|
|
};
|
|
// #endregion
|
|
// #endregion
|