Skip to content
GitLab
Commit b045e623 authored by BujarMuharemi's avatar BujarMuharemi
Browse files

added beautify extension and formated all files

parent 613d4534
master dev
1 merge request!1Finale Merge of the dev branch into master
Hide whitespace changes
Inline Side-by-side
Showing
with 434 additions and 416 deletions
+434 -416
.jsbeautifyrc 0 → 100644
+ 22
- 0
View file @ b045e623
{
"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
public/js/connectToAPI.js
+ 69
- 69
View file @ b045e623
...@@ -19,23 +19,23 @@ var uValueSortPick ...@@ -19,23 +19,23 @@ var uValueSortPick
var shadowdata var shadowdata
async function fetchPvPotentialJSON() { async function fetchPvPotentialJSON() {
var bottomLat = coordinatesBB[1] var bottomLat = coordinatesBB[1]
var leftLng = coordinatesBB[0] var leftLng = coordinatesBB[0]
var rightLng = coordinatesBB[2] var rightLng = coordinatesBB[2]
var topLat = coordinatesBB[3] var topLat = coordinatesBB[3]
const response = await fetch(pvURL, { const response = await fetch(pvURL, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
"boundingBox": { "boundingBox": {
"bottomLat": bottomLat, //48.779004965, "bottomLat": bottomLat, //48.779004965,
"leftLng": leftLng, //9.1686843081, "leftLng": leftLng, //9.1686843081,
"lodType": "LOD2", "lodType": "LOD2",
"rightLng": rightLng, //9.175336684, "rightLng": rightLng, //9.175336684,
"topLat": topLat //48.7822869656 "topLat": topLat //48.7822869656
}, },
"cityGMLRef": "campusLOD2" "cityGMLRef": "campusLOD2"
}), }),
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
...@@ -51,17 +51,17 @@ async function fetchshadowDataJSON() { ...@@ -51,17 +51,17 @@ async function fetchshadowDataJSON() {
var bottomLat = coordinatesBB[1] var bottomLat = coordinatesBB[1]
var leftLng = coordinatesBB[0] var leftLng = coordinatesBB[0]
var rightLng = coordinatesBB[2] var rightLng = coordinatesBB[2]
var topLat = coordinatesBB[3]// var topLat = coordinatesBB[3] //
var day = "1"; var day = "1";
const response = await fetch(url2 + day, { const response = await fetch(url2 + day, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
"boundingBox": { "boundingBox": {
"bottomLat": bottomLat, //48.779004965, "bottomLat": bottomLat, //48.779004965,
"leftLng": leftLng, //9.1686843081, "leftLng": leftLng, //9.1686843081,
"lodType": "LOD2", "lodType": "LOD2",
"rightLng": rightLng, //9.175336684, "rightLng": rightLng, //9.175336684,
"topLat": topLat //48.7822869656 "topLat": topLat //48.7822869656
}, },
"cityGMLRef": "campusLOD2" "cityGMLRef": "campusLOD2"
}), }),
...@@ -80,17 +80,17 @@ async function fetchDataJSON() { ...@@ -80,17 +80,17 @@ async function fetchDataJSON() {
var bottomLat = coordinatesBB[1] var bottomLat = coordinatesBB[1]
var leftLng = coordinatesBB[0] var leftLng = coordinatesBB[0]
var rightLng = coordinatesBB[2] var rightLng = coordinatesBB[2]
var topLat = coordinatesBB[3]// var topLat = coordinatesBB[3] //
const response = await fetch(url, { const response = await fetch(url, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
"boundingBox": { "boundingBox": {
"bottomLat": bottomLat, //48.779004965, "bottomLat": bottomLat, //48.779004965,
"leftLng": leftLng, //9.1686843081, "leftLng": leftLng, //9.1686843081,
"lodType": "LOD2", "lodType": "LOD2",
"rightLng": rightLng, //9.175336684, "rightLng": rightLng, //9.175336684,
"topLat": topLat //48.7822869656 "topLat": topLat //48.7822869656
}, },
"cityGMLRef": "campusLOD2", "cityGMLRef": "campusLOD2",
"interestedAttributes": [ "interestedAttributes": [
...@@ -104,7 +104,7 @@ const response = await fetch(url, { ...@@ -104,7 +104,7 @@ const response = await fetch(url, {
"monthlyCooling", "monthlyCooling",
"pvPotential", "pvPotential",
"roofType", "roofType",
"totalSurfaceArea" "totalSurfaceArea"
], ],
"properies": { "properies": {
"physicsUseScenario": false "physicsUseScenario": false
...@@ -121,39 +121,39 @@ const response = await fetch(url, { ...@@ -121,39 +121,39 @@ const response = await fetch(url, {
document.getElementById("loader").style.visibility = "hidden" document.getElementById("loader").style.visibility = "hidden"
async function getLocalShadowdata(){ async function getLocalShadowdata() {
// gets the response from the api and put it inside a constant // gets the response from the api and put it inside a constant
const response = await fetch(localShadowData); const response = await fetch(localShadowData);
//the response have to be converted to json type file, so it can be used //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) console.log(data)
// shadowData=data; // shadowData=data;
return data; return data;
} }
function processData() { function processData() {
console.log(coordinatesBB) console.log(coordinatesBB)
console.log("Waiting for data....") console.log("Waiting for data....")
timeout(25000, fetchshadowDataJSON()).then((response)=>{ timeout(25000, fetchshadowDataJSON()).then((response) => {
console.log(response) console.log(response)
shadowdata = response ; shadowdata = response;
}).catch((error)=>{ //catching the error(no connection)/ timeout and displaying an alert for the user }).catch((error) => { //catching the error(no connection)/ timeout and displaying an alert for the user
// shadowdata= getLocalShadowdata(); // shadowdata= getLocalShadowdata();
console.log(shadowdata); console.log(shadowdata);
//loadLocalAPIshadowData here... //loadLocalAPIshadowData here...
}) })
timeout(10000, fetchPvPotentialJSON()).then((response)=>{ timeout(10000, fetchPvPotentialJSON()).then((response) => {
console.log(response) console.log(response)
}).catch((error) => { }).catch((error) => {
console.log(error) console.log(error)
}) })
timeout(10000, fetchDataJSON()).then((response)=>{ timeout(10000, fetchDataJSON()).then((response) => {
calculateData(response); calculateData(response);
}).catch((error) => { }).catch((error) => {
console.log(error) console.log(error)
/* /*
fetch("/3dclient4simstadtapi/public/test/APIdata/buildingInformation.json") fetch("/3dclient4simstadtapi/public/test/APIdata/buildingInformation.json")
...@@ -162,14 +162,14 @@ function processData() { ...@@ -162,14 +162,14 @@ function processData() {
*/ */
}) })
} }
function calculateData(data){ function calculateData(data) {
console.log(data); console.log(data);
document.getElementById("cesiumContainer").style.opacity = "1"; document.getElementById("cesiumContainer").style.opacity = "1";
document.getElementById("loader").style.visibility = "hidden" document.getElementById("loader").style.visibility = "hidden"
...@@ -199,7 +199,7 @@ function calculateData(data){ ...@@ -199,7 +199,7 @@ function calculateData(data){
p.attributes.monthlyCooling, p.attributes.monthlyCooling,
p.attributes.roofType))) 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){ ...@@ -299,7 +299,7 @@ function calculateData(data){
availableAttributes() availableAttributes()
//color buildings with heating demand //color buildings with heating demand
document.getElementById("checkbox2").addEventListener("change", function () { document.getElementById("checkbox2").addEventListener("change", function() {
if (this.checked) { if (this.checked) {
tileContent.forEach(t => { tileContent.forEach(t => {
let tileID = t.getProperty("gml_parent_id") let tileID = t.getProperty("gml_parent_id")
...@@ -318,7 +318,7 @@ function calculateData(data){ ...@@ -318,7 +318,7 @@ function calculateData(data){
}) })
//color surfaces with uValue //color surfaces with uValue
document.getElementById("checkbox1").addEventListener("change", function () { document.getElementById("checkbox1").addEventListener("change", function() {
if (this.checked) { if (this.checked) {
tileContent.forEach(t => { tileContent.forEach(t => {
let tileID = t.getProperty("gml_id") let tileID = t.getProperty("gml_id")
...@@ -377,13 +377,13 @@ var modal = document.getElementById("myModal"); ...@@ -377,13 +377,13 @@ var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0]; var span = document.getElementsByClassName("close")[0];
//close the modal //close the modal
span.onclick = function () { span.onclick = function() {
modal.style.display = "none"; modal.style.display = "none";
deleteTilesetButtons() deleteTilesetButtons()
} }
// modal closes, when the user clicks anywhere outside of the modal // modal closes, when the user clicks anywhere outside of the modal
window.onclick = function (event) { window.onclick = function(event) {
if (event.target == modal) { if (event.target == modal) {
modal.style.display = "none"; modal.style.display = "none";
deleteTilesetButtons() deleteTilesetButtons()
...@@ -401,24 +401,24 @@ var localTestTileset = '/3dclient4simstadtapi/public/test/gmlTileset_v1.json'; ...@@ -401,24 +401,24 @@ var localTestTileset = '/3dclient4simstadtapi/public/test/gmlTileset_v1.json';
function timeout(ms, promise) { function timeout(ms, promise) {
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
setTimeout(function() { setTimeout(function() {
reject(new Error("timeout")) reject(new Error("timeout"))
}, ms) }, ms)
promise.then(resolve, reject) promise.then(resolve, reject)
}) })
} }
//fetching the tileset and handling the connection //fetching the tileset and handling the connection
async function fetchTileset(){ async function fetchTileset() {
timeout(1000, fetch(tilesetURL)).then((response)=>{ timeout(1000, fetch(tilesetURL)).then((response) => {
loadAndZoomToTileset(tilesetURL); loadAndZoomToTileset(tilesetURL);
}).catch((error)=>{ //catching the error(no connection)/ timeout and displaying an alert for the user }).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 //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"); console.log("Using local test data");
loadAndZoomToTileset(localTestTileset); //TODO#3: fix the link so the local tileset can be loaded loadAndZoomToTileset(localTestTileset); //TODO#3: fix the link so the local tileset can be loaded
}) })
} }
...@@ -436,26 +436,26 @@ async function fetchTileset(){ ...@@ -436,26 +436,26 @@ async function fetchTileset(){
//loads tileset after submit button is clicked //loads tileset after submit button is clicked
function loadTileset() { function loadTileset() {
viewer.scene.primitives.remove(tileset); viewer.scene.primitives.remove(tileset);
tileContent = []; tileContent = [];
modal.style.display = "block"; modal.style.display = "block";
fetchTileset(); fetchTileset();
//var userurl = document.getElementById("3Durl").value; //returns the chosen area from the dropdown //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 //loads the tileset from the url into the cesium viewer and zooms to it
function loadAndZoomToTileset(url){ function loadAndZoomToTileset(url) {
tileset=viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url url: url
})); }));
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0)); viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
modal.style.display = "none"; modal.style.display = "none";
saveTilesetContent(tileset) saveTilesetContent(tileset)
deleteTilesetButtons() deleteTilesetButtons()
} }
...@@ -469,7 +469,7 @@ function useContent(content) { ...@@ -469,7 +469,7 @@ function useContent(content) {
document.getElementById("myList").appendChild(element); document.getElementById("myList").appendChild(element);
element.onclick = function () { element.onclick = function() {
tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: cont.href url: cont.href
})); }));
...@@ -494,13 +494,13 @@ function saveTilesetContent(tileset) { ...@@ -494,13 +494,13 @@ function saveTilesetContent(tileset) {
function deleteTilesetButtons() { function deleteTilesetButtons() {
var x = document.getElementsByName("individualTileset") var x = document.getElementsByName("individualTileset")
var len = x.length var len = x.length
//checking if there are even tileset to delete //checking if there are even tileset to delete
if(x.length>0){ if (x.length > 0) {
parentNode = x[0].parentNode; parentNode = x[0].parentNode;
for (var i = 0; i < len; i++) { for (var i = 0; i < len; i++) {
parentNode.removeChild(x[0]); parentNode.removeChild(x[0]);
} }
} }
} }
public/js/globe.js
+ 275
- 275
View file @ b045e623
...@@ -9,7 +9,7 @@ var viewer = new Cesium.Viewer('cesiumContainer', { ...@@ -9,7 +9,7 @@ var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, animation: false,
sceneModePicker: false, sceneModePicker: false,
geocoder: false, geocoder: false,
}); });
viewer.scene.globe.depthTestAgainstTerrain = true; viewer.scene.globe.depthTestAgainstTerrain = true;
...@@ -31,11 +31,11 @@ nameOverlay.style.padding = "4px"; ...@@ -31,11 +31,11 @@ nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "white"; 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 //getting clicked Date from the timeline element
viewer.timeline.container.onmouseup = (e) => { viewer.timeline.container.onmouseup = (e) => {
var julianDate=viewer.clock.currentTime; var julianDate = viewer.clock.currentTime;
Cesium.JulianDate.toGregorianDate(julianDate, chosenDate); Cesium.JulianDate.toGregorianDate(julianDate, chosenDate);
//console.log(chosenDate); //console.log(chosenDate);
} }
...@@ -69,7 +69,7 @@ var radio = document.getElementById('radio-group'); ...@@ -69,7 +69,7 @@ var radio = document.getElementById('radio-group');
var gmlID; var gmlID;
radio.addEventListener('click', function () { radio.addEventListener('click', function() {
//hide chart for individual buildings //hide chart for individual buildings
singleChart.style.visibility = 'hidden'; singleChart.style.visibility = 'hidden';
...@@ -89,105 +89,105 @@ radio.addEventListener('click', function () { ...@@ -89,105 +89,105 @@ radio.addEventListener('click', function () {
// Color a feature yellow on hover. // Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) { viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
pickedselect = true; pickedselect = true;
// If a feature was previously highlighted, undo the highlight // If a feature was previously highlighted, undo the highlight
tileContent.forEach(t => { tileContent.forEach(t => {
if (t.getProperty("gml_parent_id") === hoverpid) { if (t.getProperty("gml_parent_id") === hoverpid) {
highlightedFeatures.forEach(h => { highlightedFeatures.forEach(h => {
if (Cesium.defined(h.feature) && (t.getProperty("gml_id") === h.feature.getProperty("gml_id"))) { if (Cesium.defined(h.feature) && (t.getProperty("gml_id") === h.feature.getProperty("gml_id"))) {
t.color = h.originalColor; 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 hoverpid = pickedFeature.getProperty("gml_parent_id");
if (document.getElementById("surface").checked) {
// A feature was picked, so show it's overlay content if (pickedselect) {
nameOverlay.style.display = "block"; tileContent.forEach(t => {
nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px"; if (t === pickedFeature) {
nameOverlay.style.left = movement.endPosition.x + "px"; 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; if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
// Highlight the feature if it's not already selected. nameOverlay.style.display = 'none';
selectedFeatures.forEach(s => { return;
if (s.feature === pickedFeature) {
pickedselect = false;
} }
});
hoverpid = pickedFeature.getProperty("gml_parent_id");
if (pickedselect) { name = pickedFeature.getProperty("gml_parent_id");
tileContent.forEach(t => { hoverpid = name;
if (t === pickedFeature) {
if(t.getProperty("feature_type")==="RoofSurface"){
highlightedFeatures.push(new featurevar(t, t.color));
t.color = Cesium.Color.GREEN;
}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)); highlightedFeatures.push(new featurevar(t, t.color));
t.color = Cesium.Color.YELLOW; 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;
} }
//Roof View
name = pickedFeature.getProperty("gml_parent_id"); else if (document.getElementById("roof").checked) {
hoverpid = name; console.log("clicked when in roof view and on hover");
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");
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE); Cesium.ScreenSpaceEventType.MOUSE_MOVE);
...@@ -199,220 +199,220 @@ var pickHeatedVolume ...@@ -199,220 +199,220 @@ var pickHeatedVolume
var pickTotalSurfaceArea = 0 var pickTotalSurfaceArea = 0
var pickRoofType var pickRoofType
var pickUValue var pickUValue
var shadowHourValue=0; var shadowHourValue = 0;
//Color a feature on selection and show metadata in the InfoBox //Color a feature on selection and show metadata in the InfoBox
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//hide chart for individual buildings //hide chart for individual buildings
singleChart.style.visibility = 'hidden'; singleChart.style.visibility = 'hidden';
pickedhigh = false; pickedhigh = false;
pickedalreadyselect = false; pickedalreadyselect = false;
// If a feature was previously selected, undo the highlight // If a feature was previously selected, undo the highlight
tileContent.forEach(t => { tileContent.forEach(t => {
if (t.getProperty("gml_parent_id") === selectpid) { if (t.getProperty("gml_parent_id") === selectpid) {
selectedFeatures.forEach(s => { selectedFeatures.forEach(s => {
if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) { if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
t.color = s.originalColor; 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 = pickedFeature.getProperty("gml_parent_id");
selectpid = 0;
selectedFeatures = [];
//pick a new feature //Show chart for individual buildings. But only if building view is activated
var pickedFeature = viewer.scene.pick(movement.position); if (Cesium.defined(pickedFeature) && (!document.getElementById("surface").checked)) {
if (!Cesium.defined(pickedFeature)) { singleChart.style.visibility = 'visible';
clickHandler(movement); }
return;
}
selectpid = pickedFeature.getProperty("gml_parent_id");
//Show chart for individual buildings. But only if building view is activated /*select the feature if it's not already selected
if (Cesium.defined(pickedFeature) && (!document.getElementById("surface").checked)) { selectedFeatures.forEach(s => {
singleChart.style.visibility = 'visible'; if (pickedFeature === s.feature) {
} console.log("return");
pickedalreadyselect = true;
}
});
/*select the feature if it's not already selected if(pickedalreadyselect){
selectedFeatures.forEach(s => { return;
if (pickedFeature === s.feature) { }*/
console.log("return");
pickedalreadyselect = true;
}
});
if(pickedalreadyselect){ highlightedFeatures.forEach(h => {
return; if (h.feature === pickedFeature) {
}*/ pickedhigh = true;
}
});
highlightedFeatures.forEach(h => { //fill individual charts
if (h.feature === pickedFeature) { gmlID = pickedFeature.getProperty("gml_parent_id");
pickedhigh = true; 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 //highlight newly selected feature
gmlID = pickedFeature.getProperty("gml_parent_id"); tileContent.forEach(t => {
surID = pickedFeature.getProperty("gml_id") if (t === pickedFeature) {
console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_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 t.color = Cesium.Color.LIME;
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;
}
});
}
var shadowhourvaluepercent = 100-(shadowHourValue*100) //color surfaces depending on their shadow value
//set feature infobox description (surface view) for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
var featureName = pickedFeature.getProperty("name"); if (key === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
selectedEntity.name = featureName; //console.log("hour:",chosenDate.hour);
selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>'; shadowHourValue = value[chosenDate.hour - 1] //getting the current chosen hour from the timeline
viewer.selectedEntity = selectedEntity; //console.log("shadowHourValue",shadowHourValue);
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>";
} 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) { } else {
highlightedFeatures.forEach(h => { tileContent.forEach(t => {
if (h.feature.getProperty("gml_parent_id") === selectpid) { if (t === pickedFeature) {
selectedFeatures.push(new featurevar(h.feature, h.originalColor)); selectedFeatures.push(new featurevar(t, t.color));
} }
}); });
highlightedFeatures = []; //highlight newly selected feature
tileContent.forEach(t => {
if (t === pickedFeature) {
t.color = Cesium.Color.LIME;
}
});
}
//highlight newly selected feature var shadowhourvaluepercent = 100 - (shadowHourValue * 100)
tileContent.forEach(t => { //set feature infobox description (surface view)
if (t.getProperty("gml_parent_id") === selectpid) { var featureName = pickedFeature.getProperty("name");
t.color = Cesium.Color.LIME; 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) //Building View
else if (document.getElementById("building").checked) {
//set feature infobox description (building view) resetRoofColors();
var featureName = pickedFeature.getProperty("name"); //save the selected feature's original color
selectedEntity.name = featureName; if (pickedhigh) {
selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>'; highlightedFeatures.forEach(h => {
viewer.selectedEntity = selectedEntity; if (h.feature.getProperty("gml_parent_id") === selectpid) {
selectedEntity.description = selectedFeatures.push(new featurevar(h.feature, h.originalColor));
'<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>" + highlightedFeatures = [];
"<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>";
} //highlight newly selected feature
tileContent.forEach(t => {
if (t.getProperty("gml_parent_id") === selectpid) {
t.color = Cesium.Color.LIME;
}
});
//Roof View } else {
//BUG: shows random attributes ui element ?? tileContent.forEach(t => {
else if(document.getElementById("roof").checked){ if (t.getProperty("gml_parent_id") === selectpid) {
console.log("clicked when in roof view and on click"); selectedFeatures.push(new featurevar(t, t.color));
}
});
//looping threw all surfaces //highlight newly selected feature
tileContent.forEach(t => { tileContent.forEach(t => {
if(t.getProperty("description").includes("Roof")){ //HACK: checking if the are a roof surface (should come from feature_type) if (t.getProperty("gml_parent_id") === selectpid) {
for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array t.color = Cesium.Color.LIME;
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
} }
} });
} }
});
}
}, 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); Cesium.ScreenSpaceEventType.LEFT_CLICK);
...@@ -483,14 +483,14 @@ function fillTableProperties(gID, sID) { ...@@ -483,14 +483,14 @@ function fillTableProperties(gID, sID) {
} }
function resetRoofColors(){ function resetRoofColors() {
tileContent.forEach(t => { tileContent.forEach(t => {
if(t.getProperty("description").includes("Roof")){ if (t.getProperty("description").includes("Roof")) {
for (const [key, value] of Object.entries(shadowdata)) { for (const [key, value] of Object.entries(shadowdata)) {
if(key === t.getProperty("gml_id")){ if (key === t.getProperty("gml_id")) {
t.color = Cesium.Color.WHITE; t.color = Cesium.Color.WHITE;
} }
} }
} }
}); });
} }
public/js/shadowPalette.js
+ 4
- 5
View file @ b045e623
//Shadow palette for coloring the roofs //Shadow palette for coloring the roofs
//color pallet white->black //color pallet white->black
var colorPalette = ['#ffffff','#f0f0f0','#d9d9d9','#bdbdbd','#969696','#737373','#525252','#252525']; var colorPalette = ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'];
const shadowPalette = colorPalette.reverse(); const shadowPalette = colorPalette.reverse();
//returns the responding color from the shadowPalette, depending on the inputShadowValue(0 to 1 in float) //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 //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]); //console.log(inputShadowValue,"---",shadowPalette[index]);
return shadowPalette[index]; return shadowPalette[index];
} }
public/js/sidebar.js
+ 61
- 63
View file @ b045e623
...@@ -4,75 +4,73 @@ var radio = document.getElementById('radio-group'); ...@@ -4,75 +4,73 @@ var radio = document.getElementById('radio-group');
var filterswitches = document.getElementById('filterswitches'); var filterswitches = document.getElementById('filterswitches');
//Show / hide chart //Show / hide chart
chartButton.addEventListener('click', function () { chartButton.addEventListener('click', function() {
//sets as default attribute building function //sets as default attribute building function
myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR); myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length) addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)
if (drawBox === false) { if (drawBox === false) {
swal("CAN'T LOAD DATA!", "mark an area first!", "error"); 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';
} else { } else {
//button.firstChild.data = "Hide chart"; var x = document.getElementById('areaChartContainer');
x.style.visibility = 'visible';
}
}
}, false);
heatingdemand.addEventListener('click', function () { if (x.style.visibility === 'visible') {
var x = document.getElementById('heat-demand-legend'); //button.firstChild.data = "Show chart";
if (!document.getElementById('checkbox2').checked) { x.style.visibility = 'hidden';
x.style.visibility = 'hidden'; } else {
} else { //button.firstChild.data = "Hide chart";
x.style.visibility = 'visible'; x.style.visibility = 'visible';
} }
}
}, false); }, false);
radio.addEventListener('click', function () { heatingdemand.addEventListener('click', function() {
if (document.getElementById("surface").checked) { var x = document.getElementById('heat-demand-legend');
document.getElementById("checkbox1").disabled = false; if (!document.getElementById('checkbox2').checked) {
document.getElementById("checkbox2").disabled = true; x.style.visibility = 'hidden';
if (document.getElementById("checkbox2").checked) { } else {
document.getElementById("checkbox2").checked = false; x.style.visibility = 'visible';
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))
} }
}
}, false); }, false);
filterswitches.addEventListener('click', function () { radio.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) { if (document.getElementById("surface").checked) {
document.getElementById("checkbox1").disabled = false; document.getElementById("checkbox1").disabled = false;
document.getElementById("checkbox2").disabled = true; 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 { }, false);
document.getElementById("checkbox1").disabled = true;
document.getElementById("checkbox2").disabled = 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); }, false);
function toggleSidebar(ref) { 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 //loop through all dropdown buttons to toggle between hiding and showing its dropdown content
...@@ -80,13 +78,13 @@ var dropdown = document.getElementsByClassName("dropdown-btn"); ...@@ -80,13 +78,13 @@ var dropdown = document.getElementsByClassName("dropdown-btn");
var i; var i;
for (i = 0; i < dropdown.length; i++) { for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function () { dropdown[i].addEventListener("click", function() {
this.classList.toggle("active"); this.classList.toggle("active");
var dropdownContent = this.nextElementSibling; var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") { if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none"; dropdownContent.style.display = "none";
} else { } else {
dropdownContent.style.display = "block"; dropdownContent.style.display = "block";
} }
}); });
} }
public/js/testingAPIValues.js
+ 3
- 4
View file @ b045e623
...@@ -27,7 +27,7 @@ function test() { ...@@ -27,7 +27,7 @@ function test() {
p.attributes.monthlyHeating, p.attributes.monthlyHeating,
p.attributes.monthlyCooling))) 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() { ...@@ -104,7 +104,7 @@ function test() {
sortMap() sortMap()
//color buildings with heating demand //color buildings with heating demand
document.getElementById("checkbox2").addEventListener("change", function () { document.getElementById("checkbox2").addEventListener("change", function() {
if (this.checked) { if (this.checked) {
tileContent.forEach(t => { tileContent.forEach(t => {
let tileID = t.getProperty("gml_parent_id") let tileID = t.getProperty("gml_parent_id")
...@@ -124,7 +124,7 @@ function test() { ...@@ -124,7 +124,7 @@ function test() {
}) })
//color surfaces with uValue //color surfaces with uValue
document.getElementById("checkbox1").addEventListener("change", function () { document.getElementById("checkbox1").addEventListener("change", function() {
if (this.checked) { if (this.checked) {
tileContent.forEach(t => { tileContent.forEach(t => {
let tileID = t.getProperty("gml_id") let tileID = t.getProperty("gml_id")
...@@ -143,4 +143,3 @@ function test() { ...@@ -143,4 +143,3 @@ function test() {
} }
}) })
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal