From b045e62363b1ef153d07694b37f24c374dfaf830 Mon Sep 17 00:00:00 2001
From: BujarMuharemi <bujar.muharemi.28@gmail.com>
Date: Sun, 19 Dec 2021 14:05:34 +0100
Subject: [PATCH] added beautify extension and formated all files
---
.jsbeautifyrc | 22 ++
public/js/connectToAPI.js | 138 ++++-----
public/js/globe.js | 550 +++++++++++++++++-----------------
public/js/shadowPalette.js | 9 +-
public/js/sidebar.js | 124 ++++----
public/js/testingAPIValues.js | 7 +-
6 files changed, 434 insertions(+), 416 deletions(-)
create mode 100644 .jsbeautifyrc
diff --git a/.jsbeautifyrc b/.jsbeautifyrc
new file mode 100644
index 0000000..1f0e79b
--- /dev/null
+++ b/.jsbeautifyrc
@@ -0,0 +1,22 @@
+{
+ "indent_size": 4,
+ "indent_char": " ",
+ "indent_level": 0,
+ "end-with-newline": true,
+ "indent_with_tabs": false,
+ "preserve_newlines": true,
+ "max_preserve_newlines": 10,
+ "jslint_happy": false,
+ "space_after_anon_function": false,
+ "brace_style": "collapse,preserve-inline",
+ "keep_array_indentation": false,
+ "keep_function_indentation": false,
+ "space_before_conditional": true,
+ "break_chained_methods": false,
+ "eval_code": false,
+ "unescape_strings": false,
+ "wrap_line_length": 0,
+ "css": {
+ "selector_separator_newline": false
+ }
+}
\ No newline at end of file
diff --git a/public/js/connectToAPI.js b/public/js/connectToAPI.js
index 37d6ee9..8ae2e99 100644
--- a/public/js/connectToAPI.js
+++ b/public/js/connectToAPI.js
@@ -19,23 +19,23 @@ var uValueSortPick
var shadowdata
-async function fetchPvPotentialJSON() {
+async function fetchPvPotentialJSON() {
var bottomLat = coordinatesBB[1]
var leftLng = coordinatesBB[0]
var rightLng = coordinatesBB[2]
var topLat = coordinatesBB[3]
- const response = await fetch(pvURL, {
+ const response = await fetch(pvURL, {
method: "POST",
body: JSON.stringify({
"boundingBox": {
"bottomLat": bottomLat, //48.779004965,
- "leftLng": leftLng, //9.1686843081,
+ "leftLng": leftLng, //9.1686843081,
"lodType": "LOD2",
- "rightLng": rightLng, //9.175336684,
- "topLat": topLat //48.7822869656
- },
- "cityGMLRef": "campusLOD2"
+ "rightLng": rightLng, //9.175336684,
+ "topLat": topLat //48.7822869656
+ },
+ "cityGMLRef": "campusLOD2"
}),
headers: {
"Content-Type": "application/json",
@@ -51,17 +51,17 @@ async function fetchshadowDataJSON() {
var bottomLat = coordinatesBB[1]
var leftLng = coordinatesBB[0]
var rightLng = coordinatesBB[2]
- var topLat = coordinatesBB[3]//
+ var topLat = coordinatesBB[3] //
var day = "1";
- const response = await fetch(url2 + day, {
+ const response = await fetch(url2 + day, {
method: "POST",
body: JSON.stringify({
"boundingBox": {
"bottomLat": bottomLat, //48.779004965,
- "leftLng": leftLng, //9.1686843081,
+ "leftLng": leftLng, //9.1686843081,
"lodType": "LOD2",
- "rightLng": rightLng, //9.175336684,
- "topLat": topLat //48.7822869656
+ "rightLng": rightLng, //9.175336684,
+ "topLat": topLat //48.7822869656
},
"cityGMLRef": "campusLOD2"
}),
@@ -80,17 +80,17 @@ async function fetchDataJSON() {
var bottomLat = coordinatesBB[1]
var leftLng = coordinatesBB[0]
var rightLng = coordinatesBB[2]
- var topLat = coordinatesBB[3]//
+ var topLat = coordinatesBB[3] //
-const response = await fetch(url, {
+ const response = await fetch(url, {
method: "POST",
body: JSON.stringify({
"boundingBox": {
"bottomLat": bottomLat, //48.779004965,
- "leftLng": leftLng, //9.1686843081,
+ "leftLng": leftLng, //9.1686843081,
"lodType": "LOD2",
- "rightLng": rightLng, //9.175336684,
- "topLat": topLat //48.7822869656
+ "rightLng": rightLng, //9.175336684,
+ "topLat": topLat //48.7822869656
},
"cityGMLRef": "campusLOD2",
"interestedAttributes": [
@@ -104,7 +104,7 @@ const response = await fetch(url, {
"monthlyCooling",
"pvPotential",
"roofType",
- "totalSurfaceArea"
+ "totalSurfaceArea"
],
"properies": {
"physicsUseScenario": false
@@ -121,39 +121,39 @@ const response = await fetch(url, {
document.getElementById("loader").style.visibility = "hidden"
-async function getLocalShadowdata(){
+async function getLocalShadowdata() {
// gets the response from the api and put it inside a constant
const response = await fetch(localShadowData);
//the response have to be converted to json type file, so it can be used
- const data = await response.json();
+ const data = await response.json();
console.log(data)
- // shadowData=data;
+ // shadowData=data;
return data;
- }
+}
function processData() {
console.log(coordinatesBB)
console.log("Waiting for data....")
- timeout(25000, fetchshadowDataJSON()).then((response)=>{
- console.log(response)
- shadowdata = response ;
- }).catch((error)=>{ //catching the error(no connection)/ timeout and displaying an alert for the user
- // shadowdata= getLocalShadowdata();
+ timeout(25000, fetchshadowDataJSON()).then((response) => {
+ console.log(response)
+ shadowdata = response;
+ }).catch((error) => { //catching the error(no connection)/ timeout and displaying an alert for the user
+ // shadowdata= getLocalShadowdata();
console.log(shadowdata);
//loadLocalAPIshadowData here...
- })
+ })
- timeout(10000, fetchPvPotentialJSON()).then((response)=>{
- console.log(response)
- }).catch((error) => {
+ timeout(10000, fetchPvPotentialJSON()).then((response) => {
+ console.log(response)
+ }).catch((error) => {
console.log(error)
- })
-
-
- timeout(10000, fetchDataJSON()).then((response)=>{
- calculateData(response);
- }).catch((error) => {
+ })
+
+
+ timeout(10000, fetchDataJSON()).then((response) => {
+ calculateData(response);
+ }).catch((error) => {
console.log(error)
/*
fetch("/3dclient4simstadtapi/public/test/APIdata/buildingInformation.json")
@@ -162,14 +162,14 @@ function processData() {
*/
})
-
-
+
+
}
-function calculateData(data){
+function calculateData(data) {
console.log(data);
document.getElementById("cesiumContainer").style.opacity = "1";
document.getElementById("loader").style.visibility = "hidden"
@@ -199,7 +199,7 @@ function calculateData(data){
p.attributes.monthlyCooling,
p.attributes.roofType)))
- buildingsMAP.set(bu.id, new Building(bu.id, partsArray)) //puts buildings with parts and surfaces in a map
+ buildingsMAP.set(bu.id, new Building(bu.id, partsArray)) //puts buildings with parts and surfaces in a map
})
@@ -299,7 +299,7 @@ function calculateData(data){
availableAttributes()
//color buildings with heating demand
- document.getElementById("checkbox2").addEventListener("change", function () {
+ document.getElementById("checkbox2").addEventListener("change", function() {
if (this.checked) {
tileContent.forEach(t => {
let tileID = t.getProperty("gml_parent_id")
@@ -318,7 +318,7 @@ function calculateData(data){
})
//color surfaces with uValue
- document.getElementById("checkbox1").addEventListener("change", function () {
+ document.getElementById("checkbox1").addEventListener("change", function() {
if (this.checked) {
tileContent.forEach(t => {
let tileID = t.getProperty("gml_id")
@@ -377,13 +377,13 @@ var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
//close the modal
-span.onclick = function () {
+span.onclick = function() {
modal.style.display = "none";
deleteTilesetButtons()
}
// modal closes, when the user clicks anywhere outside of the modal
-window.onclick = function (event) {
+window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
deleteTilesetButtons()
@@ -401,24 +401,24 @@ var localTestTileset = '/3dclient4simstadtapi/public/test/gmlTileset_v1.json';
function timeout(ms, promise) {
return new Promise(function(resolve, reject) {
- setTimeout(function() {
- reject(new Error("timeout"))
- }, ms)
- promise.then(resolve, reject)
+ setTimeout(function() {
+ reject(new Error("timeout"))
+ }, ms)
+ promise.then(resolve, reject)
})
}
-
+
//fetching the tileset and handling the connection
-async function fetchTileset(){
- timeout(1000, fetch(tilesetURL)).then((response)=>{
- loadAndZoomToTileset(tilesetURL);
- }).catch((error)=>{ //catching the error(no connection)/ timeout and displaying an alert for the user
+async function fetchTileset() {
+ timeout(1000, fetch(tilesetURL)).then((response) => {
+ loadAndZoomToTileset(tilesetURL);
+ }).catch((error) => { //catching the error(no connection)/ timeout and displaying an alert for the user
//var errorString = error["stack"]+"\n"+error["message"]; // formatting the error array
- swal({text:"Could not connect to Server. Using now: local data",icon:"info" } );
+ swal({ text: "Could not connect to Server. Using now: local data", icon: "info" });
console.log("Using local test data");
loadAndZoomToTileset(localTestTileset); //TODO#3: fix the link so the local tileset can be loaded
- })
+ })
}
@@ -436,26 +436,26 @@ async function fetchTileset(){
//loads tileset after submit button is clicked
-function loadTileset() {
+function loadTileset() {
viewer.scene.primitives.remove(tileset);
tileContent = [];
modal.style.display = "block";
-
+
fetchTileset();
-
+
//var userurl = document.getElementById("3Durl").value; //returns the chosen area from the dropdown
}
//loads the tileset from the url into the cesium viewer and zooms to it
-function loadAndZoomToTileset(url){
- tileset=viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+function loadAndZoomToTileset(url) {
+ tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url
}));
-
+
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
- modal.style.display = "none";
- saveTilesetContent(tileset)
- deleteTilesetButtons()
+ modal.style.display = "none";
+ saveTilesetContent(tileset)
+ deleteTilesetButtons()
}
@@ -469,7 +469,7 @@ function useContent(content) {
document.getElementById("myList").appendChild(element);
- element.onclick = function () {
+ element.onclick = function() {
tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: cont.href
}));
@@ -494,13 +494,13 @@ function saveTilesetContent(tileset) {
function deleteTilesetButtons() {
var x = document.getElementsByName("individualTileset")
var len = x.length
-
+
//checking if there are even tileset to delete
- if(x.length>0){
+ if (x.length > 0) {
parentNode = x[0].parentNode;
for (var i = 0; i < len; i++) {
parentNode.removeChild(x[0]);
}
}
-
+
}
diff --git a/public/js/globe.js b/public/js/globe.js
index e292bf6..c1a6367 100644
--- a/public/js/globe.js
+++ b/public/js/globe.js
@@ -9,7 +9,7 @@ var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
sceneModePicker: false,
geocoder: false,
-
+
});
viewer.scene.globe.depthTestAgainstTerrain = true;
@@ -31,11 +31,11 @@ nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "white";
-var chosenDate = new Cesium.GregorianDate(2021,12,2,11); //the chosen Date from the Timeline
+var chosenDate = new Cesium.GregorianDate(2021, 12, 2, 11); //the chosen Date from the Timeline
//getting clicked Date from the timeline element
viewer.timeline.container.onmouseup = (e) => {
- var julianDate=viewer.clock.currentTime;
+ var julianDate = viewer.clock.currentTime;
Cesium.JulianDate.toGregorianDate(julianDate, chosenDate);
//console.log(chosenDate);
}
@@ -69,7 +69,7 @@ var radio = document.getElementById('radio-group');
var gmlID;
-radio.addEventListener('click', function () {
+radio.addEventListener('click', function() {
//hide chart for individual buildings
singleChart.style.visibility = 'hidden';
@@ -89,105 +89,105 @@ radio.addEventListener('click', function () {
// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
- pickedselect = true;
+ pickedselect = true;
- // If a feature was previously highlighted, undo the highlight
- tileContent.forEach(t => {
- if (t.getProperty("gml_parent_id") === hoverpid) {
- highlightedFeatures.forEach(h => {
- if (Cesium.defined(h.feature) && (t.getProperty("gml_id") === h.feature.getProperty("gml_id"))) {
- t.color = h.originalColor;
+ // If a feature was previously highlighted, undo the highlight
+ tileContent.forEach(t => {
+ if (t.getProperty("gml_parent_id") === hoverpid) {
+ highlightedFeatures.forEach(h => {
+ if (Cesium.defined(h.feature) && (t.getProperty("gml_id") === h.feature.getProperty("gml_id"))) {
+ t.color = h.originalColor;
+ }
+ });
+ }
+ });
+ highlightedFeatures = [];
+ hoverpid = 0;
+
+ // Pick a new feature
+ var pickedFeature = viewer.scene.pick(movement.endPosition);
+ if (!Cesium.defined(pickedFeature)) {
+ nameOverlay.style.display = "none";
+ return;
+ }
+
+ //SURFACE-VIEW
+ if (document.getElementById("surface").checked) {
+
+ // A feature was picked, so show it's overlay content
+ nameOverlay.style.display = "block";
+ nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
+ nameOverlay.style.left = movement.endPosition.x + "px";
+
+ if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
+ nameOverlay.style.display = 'none';
+ return;
+ }
+
+ var name = pickedFeature.getProperty("gml_id");
+ var shadowhourvaluepercent = 0;
+ nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
+ // Highlight the feature if it's not already selected.
+ selectedFeatures.forEach(s => {
+ if (s.feature === pickedFeature) {
+ pickedselect = false;
}
});
- }
- });
- highlightedFeatures = [];
- hoverpid = 0;
-
- // Pick a new feature
- var pickedFeature = viewer.scene.pick(movement.endPosition);
- if (!Cesium.defined(pickedFeature)) {
- nameOverlay.style.display = "none";
- return;
- }
- //SURFACE-VIEW
- if (document.getElementById("surface").checked) {
+ hoverpid = pickedFeature.getProperty("gml_parent_id");
- // A feature was picked, so show it's overlay content
- nameOverlay.style.display = "block";
- nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
- nameOverlay.style.left = movement.endPosition.x + "px";
+ if (pickedselect) {
+ tileContent.forEach(t => {
+ if (t === pickedFeature) {
+ if (t.getProperty("feature_type") === "RoofSurface") {
+ highlightedFeatures.push(new featurevar(t, t.color));
+ t.color = Cesium.Color.GREEN;
+
+ } else {
+ highlightedFeatures.push(new featurevar(t, t.color));
+ t.color = Cesium.Color.YELLOW;
+ }
+
+ }
+ });
+ }
- if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
- nameOverlay.style.display = 'none';
- return;
}
- var name = pickedFeature.getProperty("gml_id");
+ //Building View
+ else if (document.getElementById("building").checked) {
+ // A feature was picked, so show it's overlay content
+ nameOverlay.style.display = "block";
+ nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
+ nameOverlay.style.left = movement.endPosition.x + "px";
- nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
- // Highlight the feature if it's not already selected.
- selectedFeatures.forEach(s => {
- if (s.feature === pickedFeature) {
- pickedselect = false;
+ if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
+ nameOverlay.style.display = 'none';
+ return;
}
- });
- hoverpid = pickedFeature.getProperty("gml_parent_id");
- if (pickedselect) {
- tileContent.forEach(t => {
- if (t === pickedFeature) {
- if(t.getProperty("feature_type")==="RoofSurface"){
- highlightedFeatures.push(new featurevar(t, t.color));
- t.color = Cesium.Color.GREEN;
+ name = pickedFeature.getProperty("gml_parent_id");
+ hoverpid = name;
- }else{
+ nameOverlay.textContent = name;
+ // Highlight the feature if it's not already selected.
+ if (hoverpid !== selectpid) {
+ tileContent.forEach(t => {
+ if (t.getProperty("gml_parent_id") === hoverpid) {
highlightedFeatures.push(new featurevar(t, t.color));
t.color = Cesium.Color.YELLOW;
}
-
- }
- });
- }
-
- }
-
- //Building View
- else if(document.getElementById("building").checked){
- // A feature was picked, so show it's overlay content
- nameOverlay.style.display = "block";
- nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
- nameOverlay.style.left = movement.endPosition.x + "px";
-
- if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
- nameOverlay.style.display = 'none';
- return;
+ });
+ }
}
-
- name = pickedFeature.getProperty("gml_parent_id");
- hoverpid = name;
-
- nameOverlay.textContent = name;
- // Highlight the feature if it's not already selected.
- if (hoverpid !== selectpid) {
- tileContent.forEach(t => {
- if (t.getProperty("gml_parent_id") === hoverpid) {
- highlightedFeatures.push(new featurevar(t, t.color));
- t.color = Cesium.Color.YELLOW;
- }
- });
+ //Roof View
+ else if (document.getElementById("roof").checked) {
+ console.log("clicked when in roof view and on hover");
}
- }
- //Roof View
- else if(document.getElementById("roof").checked){
- console.log("clicked when in roof view and on hover");
- }
-
-},
+ },
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
@@ -199,220 +199,220 @@ var pickHeatedVolume
var pickTotalSurfaceArea = 0
var pickRoofType
var pickUValue
-var shadowHourValue=0;
+var shadowHourValue = 0;
//Color a feature on selection and show metadata in the InfoBox
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
- //hide chart for individual buildings
- singleChart.style.visibility = 'hidden';
+ //hide chart for individual buildings
+ singleChart.style.visibility = 'hidden';
- pickedhigh = false;
+ pickedhigh = false;
- pickedalreadyselect = false;
+ pickedalreadyselect = false;
- // If a feature was previously selected, undo the highlight
- tileContent.forEach(t => {
- if (t.getProperty("gml_parent_id") === selectpid) {
- selectedFeatures.forEach(s => {
- if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
- t.color = s.originalColor;
- }
- });
+ // If a feature was previously selected, undo the highlight
+ tileContent.forEach(t => {
+ if (t.getProperty("gml_parent_id") === selectpid) {
+ selectedFeatures.forEach(s => {
+ if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
+ t.color = s.originalColor;
+ }
+ });
+ }
+ });
+ selectpid = 0;
+ selectedFeatures = [];
+
+ //pick a new feature
+ var pickedFeature = viewer.scene.pick(movement.position);
+ if (!Cesium.defined(pickedFeature)) {
+ clickHandler(movement);
+ return;
}
- });
- selectpid = 0;
- selectedFeatures = [];
+ selectpid = pickedFeature.getProperty("gml_parent_id");
- //pick a new feature
- var pickedFeature = viewer.scene.pick(movement.position);
- if (!Cesium.defined(pickedFeature)) {
- clickHandler(movement);
- return;
- }
- selectpid = pickedFeature.getProperty("gml_parent_id");
+ //Show chart for individual buildings. But only if building view is activated
+ if (Cesium.defined(pickedFeature) && (!document.getElementById("surface").checked)) {
+ singleChart.style.visibility = 'visible';
+ }
- //Show chart for individual buildings. But only if building view is activated
- if (Cesium.defined(pickedFeature) && (!document.getElementById("surface").checked)) {
- singleChart.style.visibility = 'visible';
- }
+ /*select the feature if it's not already selected
+ selectedFeatures.forEach(s => {
+ if (pickedFeature === s.feature) {
+ console.log("return");
+ pickedalreadyselect = true;
+ }
+ });
- /*select the feature if it's not already selected
- selectedFeatures.forEach(s => {
- if (pickedFeature === s.feature) {
- console.log("return");
- pickedalreadyselect = true;
- }
- });
+ if(pickedalreadyselect){
+ return;
+ }*/
- if(pickedalreadyselect){
- return;
- }*/
+ highlightedFeatures.forEach(h => {
+ if (h.feature === pickedFeature) {
+ pickedhigh = true;
+ }
+ });
- highlightedFeatures.forEach(h => {
- if (h.feature === pickedFeature) {
- pickedhigh = true;
- }
- });
+ //fill individual charts
+ gmlID = pickedFeature.getProperty("gml_parent_id");
+ surID = pickedFeature.getProperty("gml_id")
+
+ pickBuildingFunction = "Not Defined"
+ pickYearOfConstruction = "Not Defined"
+ pickHeight = "Not Defined"
+ pickHeatedVolume = "Not Defined"
+ pickTotalSurfaceArea = 0
+ pickRoofType = "Not Defined"
+ pickUValue = "Not Defined"
+
+ //fill variables for Single Building Properties
+ fillTableProperties(gmlID, surID)
+
+
+ //Surface View
+ if (document.getElementById("surface").checked) {
+ resetRoofColors();
+ //save the selected feature's original color
+ if (pickedhigh) {
+ highlightedFeatures.forEach(h => {
+ if (h.feature === pickedFeature) {
+ selectedFeatures.push(new featurevar(h.feature, h.originalColor));
+ }
+ });
+ highlightedFeatures = [];
- //fill individual charts
- gmlID = pickedFeature.getProperty("gml_parent_id");
- surID = pickedFeature.getProperty("gml_id")
-
- pickBuildingFunction = "Not Defined"
- pickYearOfConstruction = "Not Defined"
- pickHeight = "Not Defined"
- pickHeatedVolume = "Not Defined"
- pickTotalSurfaceArea = 0
- pickRoofType = "Not Defined"
- pickUValue = "Not Defined"
-
- //fill variables for Single Building Properties
- fillTableProperties(gmlID, surID)
-
-
- //Surface View
- if (document.getElementById("surface").checked) {
- resetRoofColors();
- //save the selected feature's original color
- if (pickedhigh) {
- highlightedFeatures.forEach(h => {
- if (h.feature === pickedFeature) {
- selectedFeatures.push(new featurevar(h.feature, h.originalColor));
- }
- });
- highlightedFeatures = [];
+ //highlight newly selected feature
+ tileContent.forEach(t => {
+ if (t === pickedFeature) {
+ console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
- //highlight newly selected feature
- tileContent.forEach(t => {
- if (t === pickedFeature) {
- console.log(t.getProperty("description")+"\n"+t.getProperty("feature_type")+"\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
-
- t.color = Cesium.Color.LIME;
-
- //color surfaces depending on their shadow value
- for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
- if(key === t.getProperty("gml_id")){ //checking if the ids of the current surface match the id in the shadowdata array
- //console.log("hour:",chosenDate.hour);
- shadowHourValue = value[chosenDate.hour-1] //getting the current chosen hour from the timeline
- //console.log("shadowHourValue",shadowHourValue);
-
- t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
-
- }
- }
- }
- });
- } else {
- tileContent.forEach(t => {
- if (t === pickedFeature) {
- selectedFeatures.push(new featurevar(t, t.color));
- }
- });
- //highlight newly selected feature
- tileContent.forEach(t => {
- if (t === pickedFeature) {
- t.color = Cesium.Color.LIME;
- }
- });
- }
+ t.color = Cesium.Color.LIME;
- var shadowhourvaluepercent = 100-(shadowHourValue*100)
- //set feature infobox description (surface view)
- var featureName = pickedFeature.getProperty("name");
- selectedEntity.name = featureName;
- selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
- viewer.selectedEntity = selectedEntity;
- selectedEntity.description =
- '<table class="cesium-infoBox-defaultTable"><tbody>' +
- "<tr><th>Surface_ID</th><td>" + pickedFeature.getProperty("gml_id") + "</td></tr>" +
- "<tr><th>u_Value</th><td>" + pickUValue + "</td></tr>" +
- "<tr><th>description</th><td>" + pickedFeature.getProperty("description") + "</td></tr>" +
- "<tr><th>feature_type</th><td>" + pickedFeature.getProperty("feature_type") + "</td></tr>" +
- "<tr><th>shadow value</th><td>" + shadowhourvaluepercent.toFixed(1) + "%" + "</td></tr>" +
-
-
- "</tbody></table>";
-
+ //color surfaces depending on their shadow value
+ for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
+ if (key === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
+ //console.log("hour:",chosenDate.hour);
+ shadowHourValue = value[chosenDate.hour - 1] //getting the current chosen hour from the timeline
+ //console.log("shadowHourValue",shadowHourValue);
- }
+ t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
- //Building View
- else if(document.getElementById("building").checked){
- resetRoofColors();
- //save the selected feature's original color
- if (pickedhigh) {
- highlightedFeatures.forEach(h => {
- if (h.feature.getProperty("gml_parent_id") === selectpid) {
- selectedFeatures.push(new featurevar(h.feature, h.originalColor));
- }
- });
- highlightedFeatures = [];
+ }
+ }
+ }
+ });
+ } else {
+ tileContent.forEach(t => {
+ if (t === pickedFeature) {
+ selectedFeatures.push(new featurevar(t, t.color));
+ }
+ });
+ //highlight newly selected feature
+ tileContent.forEach(t => {
+ if (t === pickedFeature) {
+ t.color = Cesium.Color.LIME;
+ }
+ });
+ }
- //highlight newly selected feature
- tileContent.forEach(t => {
- if (t.getProperty("gml_parent_id") === selectpid) {
- t.color = Cesium.Color.LIME;
- }
- });
+ var shadowhourvaluepercent = 100 - (shadowHourValue * 100)
+ //set feature infobox description (surface view)
+ var featureName = pickedFeature.getProperty("name");
+ selectedEntity.name = featureName;
+ selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+ viewer.selectedEntity = selectedEntity;
+ selectedEntity.description =
+ '<table class="cesium-infoBox-defaultTable"><tbody>' +
+ "<tr><th>Surface_ID</th><td>" + pickedFeature.getProperty("gml_id") + "</td></tr>" +
+ "<tr><th>u_Value</th><td>" + pickUValue + "</td></tr>" +
+ "<tr><th>description</th><td>" + pickedFeature.getProperty("description") + "</td></tr>" +
+ "<tr><th>feature_type</th><td>" + pickedFeature.getProperty("feature_type") + "</td></tr>" +
+ "<tr><th>shadow value</th><td>" + shadowhourvaluepercent.toFixed(1) + "%" + "</td></tr>" +
+
+
+ "</tbody></table>";
- } else {
- tileContent.forEach(t => {
- if (t.getProperty("gml_parent_id") === selectpid) {
- selectedFeatures.push(new featurevar(t, t.color));
- }
- });
- //highlight newly selected feature
- tileContent.forEach(t => {
- if (t.getProperty("gml_parent_id") === selectpid) {
- t.color = Cesium.Color.LIME;
- }
- });
}
- buildings(gmlID)
-
- //set feature infobox description (building view)
- var featureName = pickedFeature.getProperty("name");
- selectedEntity.name = featureName;
- selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
- viewer.selectedEntity = selectedEntity;
- selectedEntity.description =
- '<table class="cesium-infoBox-defaultTable"><tbody>' +
- "<tr><th>Building_ID</th><td>" + pickedFeature.getProperty("gml_parent_id") + "</td></tr>" +
- "<tr><th>buildingFunction</th><td>" + pickBuildingFunction + "</td></tr>" +
- "<tr><th>yearOfConstruction</th><td>" + pickYearOfConstruction + "</td></tr>" +
- "<tr><th>height</th><td>" + pickHeight + "</td></tr>" +
- "<tr><th>heatedVolume</th><td>" + pickHeatedVolume + "</td></tr>" +
- "<tr><th>Total_Surface_Area</th><td>" + pickTotalSurfaceArea + "</td></tr>" +
- "<tr><th>rooftype</th><td>" + pickRoofType + "</td></tr>" +
- "</tbody></table>";
+ //Building View
+ else if (document.getElementById("building").checked) {
+ resetRoofColors();
+ //save the selected feature's original color
+ if (pickedhigh) {
+ highlightedFeatures.forEach(h => {
+ if (h.feature.getProperty("gml_parent_id") === selectpid) {
+ selectedFeatures.push(new featurevar(h.feature, h.originalColor));
+ }
+ });
+ highlightedFeatures = [];
- }
+ //highlight newly selected feature
+ tileContent.forEach(t => {
+ if (t.getProperty("gml_parent_id") === selectpid) {
+ t.color = Cesium.Color.LIME;
+ }
+ });
- //Roof View
- //BUG: shows random attributes ui element ??
- else if(document.getElementById("roof").checked){
- console.log("clicked when in roof view and on click");
+ } else {
+ tileContent.forEach(t => {
+ if (t.getProperty("gml_parent_id") === selectpid) {
+ selectedFeatures.push(new featurevar(t, t.color));
+ }
+ });
- //looping threw all surfaces
- tileContent.forEach(t => {
- if(t.getProperty("description").includes("Roof")){ //HACK: checking if the are a roof surface (should come from feature_type)
- for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
- if(key === t.getProperty("gml_id")){ //checking the id
- console.log(value);
- shadowHourValue = value[chosenDate.hour-1]; //getting the current chosen hour from the timeline
- t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
+ //highlight newly selected feature
+ tileContent.forEach(t => {
+ if (t.getProperty("gml_parent_id") === selectpid) {
+ t.color = Cesium.Color.LIME;
}
- }
-
+ });
}
-
- });
- }
-},
+ buildings(gmlID)
+
+ //set feature infobox description (building view)
+ var featureName = pickedFeature.getProperty("name");
+ selectedEntity.name = featureName;
+ selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+ viewer.selectedEntity = selectedEntity;
+ selectedEntity.description =
+ '<table class="cesium-infoBox-defaultTable"><tbody>' +
+ "<tr><th>Building_ID</th><td>" + pickedFeature.getProperty("gml_parent_id") + "</td></tr>" +
+ "<tr><th>buildingFunction</th><td>" + pickBuildingFunction + "</td></tr>" +
+ "<tr><th>yearOfConstruction</th><td>" + pickYearOfConstruction + "</td></tr>" +
+ "<tr><th>height</th><td>" + pickHeight + "</td></tr>" +
+ "<tr><th>heatedVolume</th><td>" + pickHeatedVolume + "</td></tr>" +
+ "<tr><th>Total_Surface_Area</th><td>" + pickTotalSurfaceArea + "</td></tr>" +
+ "<tr><th>rooftype</th><td>" + pickRoofType + "</td></tr>" +
+ "</tbody></table>";
+
+ }
+
+ //Roof View
+ //BUG: shows random attributes ui element ??
+ else if (document.getElementById("roof").checked) {
+ console.log("clicked when in roof view and on click");
+
+ //looping threw all surfaces
+ tileContent.forEach(t => {
+ if (t.getProperty("description").includes("Roof")) { //HACK: checking if the are a roof surface (should come from feature_type)
+ for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
+ if (key === t.getProperty("gml_id")) { //checking the id
+ //console.log(value);
+ shadowHourValue = value[chosenDate.hour - 1]; //getting the current chosen hour from the timeline
+ t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
+ }
+ }
+
+ }
+
+ });
+ }
+
+ },
Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -483,14 +483,14 @@ function fillTableProperties(gID, sID) {
}
-function resetRoofColors(){
+function resetRoofColors() {
tileContent.forEach(t => {
- if(t.getProperty("description").includes("Roof")){
- for (const [key, value] of Object.entries(shadowdata)) {
- if(key === t.getProperty("gml_id")){
- t.color = Cesium.Color.WHITE;
+ if (t.getProperty("description").includes("Roof")) {
+ for (const [key, value] of Object.entries(shadowdata)) {
+ if (key === t.getProperty("gml_id")) {
+ t.color = Cesium.Color.WHITE;
}
- }
- }
+ }
+ }
});
}
diff --git a/public/js/shadowPalette.js b/public/js/shadowPalette.js
index 8dbe915..0482acd 100644
--- a/public/js/shadowPalette.js
+++ b/public/js/shadowPalette.js
@@ -1,15 +1,14 @@
//Shadow palette for coloring the roofs
//color pallet white->black
-var colorPalette = ['#ffffff','#f0f0f0','#d9d9d9','#bdbdbd','#969696','#737373','#525252','#252525'];
-const shadowPalette = colorPalette.reverse();
+var colorPalette = ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'];
+const shadowPalette = colorPalette.reverse();
//returns the responding color from the shadowPalette, depending on the inputShadowValue(0 to 1 in float)
-function getShadowPalette(inputShadowValue){
+function getShadowPalette(inputShadowValue) {
//checking for the float values
- var index = Math.ceil((shadowPalette.length-1)*inputShadowValue);
+ var index = Math.ceil((shadowPalette.length - 1) * inputShadowValue);
//console.log(inputShadowValue,"---",shadowPalette[index]);
return shadowPalette[index];
}
-
diff --git a/public/js/sidebar.js b/public/js/sidebar.js
index 6416ddb..05931d0 100644
--- a/public/js/sidebar.js
+++ b/public/js/sidebar.js
@@ -4,75 +4,73 @@ var radio = document.getElementById('radio-group');
var filterswitches = document.getElementById('filterswitches');
//Show / hide chart
-chartButton.addEventListener('click', function () {
- //sets as default attribute building function
- myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
- addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)
+chartButton.addEventListener('click', function() {
+ //sets as default attribute building function
+ myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
+ addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)
- if (drawBox === false) {
- swal("CAN'T LOAD DATA!", "mark an area first!", "error");
- } else {
- var x = document.getElementById('areaChartContainer');
-
- if (x.style.visibility === 'visible') {
- //button.firstChild.data = "Show chart";
- x.style.visibility = 'hidden';
+ if (drawBox === false) {
+ swal("CAN'T LOAD DATA!", "mark an area first!", "error");
} else {
- //button.firstChild.data = "Hide chart";
- x.style.visibility = 'visible';
- }
- }
-}, false);
+ var x = document.getElementById('areaChartContainer');
-heatingdemand.addEventListener('click', function () {
- var x = document.getElementById('heat-demand-legend');
- if (!document.getElementById('checkbox2').checked) {
- x.style.visibility = 'hidden';
- } else {
- x.style.visibility = 'visible';
- }
+ if (x.style.visibility === 'visible') {
+ //button.firstChild.data = "Show chart";
+ x.style.visibility = 'hidden';
+ } else {
+ //button.firstChild.data = "Hide chart";
+ x.style.visibility = 'visible';
+ }
+ }
}, false);
-radio.addEventListener('click', function () {
- if (document.getElementById("surface").checked) {
- document.getElementById("checkbox1").disabled = false;
- document.getElementById("checkbox2").disabled = true;
- if (document.getElementById("checkbox2").checked) {
- document.getElementById("checkbox2").checked = false;
- document.getElementById('heat-demand-legend').style.visibility = 'hidden';
- tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
- }
- }
- else {
- document.getElementById("checkbox1").disabled = true;
- document.getElementById("checkbox2").disabled = false;
- if (document.getElementById("checkbox1").checked) {
- document.getElementById("checkbox1").checked = false;
- tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
+heatingdemand.addEventListener('click', function() {
+ var x = document.getElementById('heat-demand-legend');
+ if (!document.getElementById('checkbox2').checked) {
+ x.style.visibility = 'hidden';
+ } else {
+ x.style.visibility = 'visible';
}
- }
}, false);
-filterswitches.addEventListener('click', function () {
- if (drawBox === false) {
- swal("CAN'T LOAD DATA!", "mark an area first!", "error");
- document.getElementById("checkbox2").disabled = true;
- document.getElementById("checkbox1").disabled = true;
- } else {
+radio.addEventListener('click', function() {
if (document.getElementById("surface").checked) {
- document.getElementById("checkbox1").disabled = false;
- document.getElementById("checkbox2").disabled = true;
+ document.getElementById("checkbox1").disabled = false;
+ document.getElementById("checkbox2").disabled = true;
+ if (document.getElementById("checkbox2").checked) {
+ document.getElementById("checkbox2").checked = false;
+ document.getElementById('heat-demand-legend').style.visibility = 'hidden';
+ tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
+ }
+ } else {
+ document.getElementById("checkbox1").disabled = true;
+ document.getElementById("checkbox2").disabled = false;
+ if (document.getElementById("checkbox1").checked) {
+ document.getElementById("checkbox1").checked = false;
+ tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
+ }
}
- else {
- document.getElementById("checkbox1").disabled = true;
- document.getElementById("checkbox2").disabled = false;
+}, false);
+
+filterswitches.addEventListener('click', function() {
+ if (drawBox === false) {
+ swal("CAN'T LOAD DATA!", "mark an area first!", "error");
+ document.getElementById("checkbox2").disabled = true;
+ document.getElementById("checkbox1").disabled = true;
+ } else {
+ if (document.getElementById("surface").checked) {
+ document.getElementById("checkbox1").disabled = false;
+ document.getElementById("checkbox2").disabled = true;
+ } else {
+ document.getElementById("checkbox1").disabled = true;
+ document.getElementById("checkbox2").disabled = false;
+ }
}
- }
}, false);
function toggleSidebar(ref) {
- document.getElementById("sidebar").classList.toggle('active');
+ document.getElementById("sidebar").classList.toggle('active');
}
//loop through all dropdown buttons to toggle between hiding and showing its dropdown content
@@ -80,13 +78,13 @@ var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
- dropdown[i].addEventListener("click", function () {
- this.classList.toggle("active");
- var dropdownContent = this.nextElementSibling;
- if (dropdownContent.style.display === "block") {
- dropdownContent.style.display = "none";
- } else {
- dropdownContent.style.display = "block";
- }
- });
+ dropdown[i].addEventListener("click", function() {
+ this.classList.toggle("active");
+ var dropdownContent = this.nextElementSibling;
+ if (dropdownContent.style.display === "block") {
+ dropdownContent.style.display = "none";
+ } else {
+ dropdownContent.style.display = "block";
+ }
+ });
}
diff --git a/public/js/testingAPIValues.js b/public/js/testingAPIValues.js
index f9c39c6..83840d7 100644
--- a/public/js/testingAPIValues.js
+++ b/public/js/testingAPIValues.js
@@ -27,7 +27,7 @@ function test() {
p.attributes.monthlyHeating,
p.attributes.monthlyCooling)))
- buildingsMAP.set(bu.id, new Building(bu.id, partsArray)) //puts buildings with parts and surfaces in a map
+ buildingsMAP.set(bu.id, new Building(bu.id, partsArray)) //puts buildings with parts and surfaces in a map
})
@@ -104,7 +104,7 @@ function test() {
sortMap()
//color buildings with heating demand
- document.getElementById("checkbox2").addEventListener("change", function () {
+ document.getElementById("checkbox2").addEventListener("change", function() {
if (this.checked) {
tileContent.forEach(t => {
let tileID = t.getProperty("gml_parent_id")
@@ -124,7 +124,7 @@ function test() {
})
//color surfaces with uValue
- document.getElementById("checkbox1").addEventListener("change", function () {
+ document.getElementById("checkbox1").addEventListener("change", function() {
if (this.checked) {
tileContent.forEach(t => {
let tileID = t.getProperty("gml_id")
@@ -143,4 +143,3 @@ function test() {
}
})
}
-
--
GitLab