From c9736cf651e9ee9dd7d2b4cdd3484ce52fcdf8b5 Mon Sep 17 00:00:00 2001
From: BujarMuharemi <bujar.muharemi.28@gmail.com>
Date: Tue, 18 Jan 2022 18:00:52 +0100
Subject: [PATCH] split up codebase; adden base for solarPlanner
---
public/js/draw.js | 4 +-
public/js/fillTableProperties.js | 65 +++++++++
public/js/globe.js | 195 +++++++-------------------
public/js/pvPotentialNormalization.js | 23 +--
public/js/searchadress.js | 40 ++++++
public/main.html | 16 ++-
6 files changed, 187 insertions(+), 156 deletions(-)
create mode 100644 public/js/fillTableProperties.js
create mode 100644 public/js/searchadress.js
diff --git a/public/js/draw.js b/public/js/draw.js
index c4bc9fc..74bd526 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -8,7 +8,7 @@ var rectVisible = false;
var Pickers_3DTile_Activated = true;
var bboxactivated = false;
var currentLayer;
-var drawBox = false
+var drawBox = false;
//draw rectangle
function drawBounding() {
@@ -19,6 +19,8 @@ function drawBounding() {
drawBox = true
}
+
+
//fills coordinates array (used to fetch data)
function createRequest_BB() {
console.log("-->clicked confirm button")
diff --git a/public/js/fillTableProperties.js b/public/js/fillTableProperties.js
new file mode 100644
index 0000000..fa2ab17
--- /dev/null
+++ b/public/js/fillTableProperties.js
@@ -0,0 +1,65 @@
+//filling the table in the info sidebar with data
+function fillTableProperties(gID, sID) {
+
+ if (drawBox === false) {
+ swal("CAN'T LOAD DATA!", "mark an area first!", "error");
+ document.getElementById("singleChartContainer").style.visibility = "hidden"
+ document.getElementsByClassName('cesium-infoBox-defaultTable').style.display = 'none';
+
+ } else {
+
+ //Property BuildingFunction
+ buildingFunctionSortPick.forEach((value, key) => {
+ if (key === gID) {
+ pickBuildingFunction = value
+ }
+ })
+
+ //Property Year of Construction
+ constructionYearSortPick.forEach((value, key) => {
+ if (key === gID) {
+ pickYearOfConstruction = value
+ }
+ })
+
+ //Property height
+ heightSortPick.forEach((value, key) => {
+ if (key === gID) {
+ pickHeight = value
+ }
+ })
+
+ //Property HeatedVolume
+ heatedVolumeSortPick.forEach((value, key) => {
+ if (key === gID) {
+ pickHeatedVolume = value
+ }
+ })
+
+ //Property TotalSurfaceArea
+ totalSurfaceAreaSortPick.forEach((value, key) => {
+ if (key === gID) {
+ var sum = 0
+ value.forEach(element => {
+ sum += element.totalSurfaceArea
+ });
+ pickTotalSurfaceArea = sum
+ }
+ })
+
+ //Property RoofType
+ roofTypeSortPick.forEach((value, key) => {
+ if (key === gID) {
+ pickRoofType = value
+ }
+ })
+
+ //Property UValue
+ uValueSortPick.forEach((value, key) => {
+ if (key === sID) {
+ pickUValue = value
+ }
+ })
+ }
+
+}
\ No newline at end of file
diff --git a/public/js/globe.js b/public/js/globe.js
index 0fc7010..1c7db6f 100644
--- a/public/js/globe.js
+++ b/public/js/globe.js
@@ -19,47 +19,10 @@ var singleChart = document.getElementById('singleChartContainer');
var roofViewActivated = false;
var chosenAttributeRadioBtnFlag = "shadowValue";
-
-
function chosenAttributeHandler(radioBtnValue) {
chosenAttributeRadioBtnFlag = radioBtnValue.value;
}
-//load address
-var request = new XMLHttpRequest();
-request.onreadystatechange = function() {
- if (this.readyState == 4 && this.status == 200) {
-
- var coordinate = JSON.parse(request.responseText);
- var lat = coordinate.results[0].geometry.lat;
- var lng = coordinate.results[0].geometry.lng;
- console.log(lat + " " + lng);
- fly(lat, lng);
- }
-}
-
-function searchaddress() {
- var query = document.getElementById('SearchAddress').value;
- request.open("GET", 'https://api.opencagedata.com/geocode/v1/json?key=c73da14969e6408ab4535b3ad6dc43ea&pretty=1&no_annotations=1&q=' + query, true);
- request.send();
-}
-
-function fly(lat, lng) {
- var pinBuilder = new Cesium.PinBuilder();
-
- var bluePin = viewer.entities.add({
- name: "Blank blue pin",
- position: Cesium.Cartesian3.fromDegrees(lng, lat),
- billboard: {
- image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- },
- });
- viewer.zoomTo(bluePin);
-
- viewer.flyTo(bluePin);
-
-}
// HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement("div");
@@ -169,7 +132,8 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
var name = pickedFeature.getProperty("gml_id");
var shadowhourvaluepercent = 0;
- nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
+ nameOverlay.textContent = "ID: " + name;
+ //nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
// Highlight the feature if it's not already selected.
selectedFeatures.forEach(s => {
if (s.feature === pickedFeature) {
@@ -190,11 +154,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
highlightedFeatures.push(new featurevar(t, t.color));
t.color = Cesium.Color.YELLOW;
}
-
}
});
}
-
}
//Building View
@@ -226,7 +188,10 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
}
//Roof View
- else if (document.getElementById("roof").checked) {
+ // else if (document.getElementById("roof").checked) {
+ // console.log("clicked when in roof view and on hover");
+ // }
+ else if (document.getElementById("solarPlanner").checked) {
console.log("clicked when in roof view and on hover");
}
@@ -235,12 +200,12 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
//-----------------------------------------------------------------------------------------------
-var pickBuildingFunction
-var pickYearOfConstruction
-var pickHeight
-var pickHeatedVolume
-var pickTotalSurfaceArea = 0
-var pickRoofType
+var pickBuildingFunction;
+var pickYearOfConstruction;
+var pickHeight;
+var pickHeatedVolume;
+var pickTotalSurfaceArea = 0;
+var pickRoofType;
var pickUValue
var shadowHourValue = 0;
@@ -276,25 +241,14 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
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';
}
- /*select the feature if it's not already selected
- selectedFeatures.forEach(s => {
- if (pickedFeature === s.feature) {
- console.log("return");
- pickedalreadyselect = true;
- }
- });
-
- if(pickedalreadyselect){
- return;
- }*/
-
highlightedFeatures.forEach(h => {
if (h.feature === pickedFeature) {
pickedhigh = true;
@@ -316,11 +270,14 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//fill variables for Single Building Properties
fillTableProperties(gmlID, surID)
+ //########################################################################################################################
+ //Different Views from here
//Surface View @onLeftClick
if (document.getElementById("surface").checked) {
resetRoofColors();
setMinAndMax(chosenAttributeRadioBtnFlag);
+
//save the selected feature's original color
if (pickedhigh) {
highlightedFeatures.forEach(h => {
@@ -336,8 +293,6 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//used for debugging, when clicking on a surface
//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
@@ -350,17 +305,16 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
}
}
- console.log(pvPotentialSurfaces);
+ //console.log(pvPotentialSurfaces);
//coloring surfaces on pv potential
-
- console.log("minie maus", minAndMaxPvPotentials);
+ //console.log("minie maus", minAndMaxPvPotentials);
for (const [key, value] of Object.entries(pvPotentialSurfaces)) {
if (value["id"] === t.getProperty("gml_id") && chosenAttributeRadioBtnFlag !== "shadowValue") { //checking if the ids of the current surface match the id in the shadowdata array
//console.log("hour:",chosenDate.hour);
var normalizedPvValue="";
chosenPvPotentialValue = value["attributes"]["pvPotential"][chosenAttributeRadioBtnFlag];
- console.log("chosenPvPotentialValue",chosenPvPotentialValue);
+ //console.log("chosenPvPotentialValue",chosenPvPotentialValue);
normalizedPvValue = getNormalizedValue(chosenPvPotentialValue);
console.log("normalisierter", normalizedPvValue);
@@ -388,6 +342,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
});
}
+ //show the attributes of the chosen surface in the table
var chosenAttribute2Show = "";
var shadowhourvaluepercent = shadowHourValue * 100;
console.log("shadowHourValue:",shadowHourValue*100,"\n shadowhourvaluepercent:",shadowhourvaluepercent);
@@ -469,12 +424,40 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
}
- //DEPRECATED: Roof View
- //BUG: shows random attributes ui element ??
- //TODO: Remove this deprecated code bit
- else if (document.getElementById("roof").checked && roofViewActivated) {
- console.log("clicked when in roof view and on click");
+ //solarPlanner View
+ else if (document.getElementById("solarPlanner").checked) {
+ resetRoofColors();
+
+ //looping threw all surfaces
+ tileContent.forEach(t => {
+ for (const [key, value] of Object.entries(pvPotentialSurfaces)) {
+ if (value["id"] === t.getProperty("gml_id") && chosenAttributeRadioBtnFlag !== "shadowValue") { //checking if the ids of the current surface match the id in the shadowdata array
+ //console.log("hour:",chosenDate.hour);
+ var normalizedPvValue="";
+ chosenPvPotentialValue = value["attributes"]["pvPotential"][chosenAttributeRadioBtnFlag];
+ //console.log("chosenPvPotentialValue",chosenPvPotentialValue);
+
+ normalizedPvValue = getNormalizedValue(chosenPvPotentialValue);
+ console.log("normalisierter", normalizedPvValue);
+ t.color = Cesium.Color.fromCssColorString(getColorFromPalette(normalizedPvValue, "pvPotential")); //coloring the surface
+ SurfacePvPotential = chosenPvPotentialValue;
+ SurfacePvPotentialObject = value["attributes"]["pvPotential"];
+ console.log(SurfacePvPotentialObject);
+ }
+ }
+ });
+
+
+ }
+
+ /**
+ * @deprecated roofview is not used anymore, maybe later for "color all surface, depending on one attribute"
+ */
+ else if (document.getElementById("roofView").checked){
+ console.log(pickedhigh,highlightedFeatures,tileContent);
+ resetRoofColors();
+
//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)
@@ -485,84 +468,14 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
}
}
-
}
-
});
}
- //DEPRECATED: Roof View
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
-//filling the table in the info sidebar with data
-function fillTableProperties(gID, sID) {
-
- if (drawBox === false) {
- swal("CAN'T LOAD DATA!", "mark an area first!", "error");
- document.getElementById("singleChartContainer").style.visibility = "hidden"
- document.getElementsByClassName('cesium-infoBox-defaultTable').style.display = 'none';
-
- } else {
-
- //Property BuildingFunction
- buildingFunctionSortPick.forEach((value, key) => {
- if (key === gID) {
- pickBuildingFunction = value
- }
- })
-
- //Property Year of Construction
- constructionYearSortPick.forEach((value, key) => {
- if (key === gID) {
- pickYearOfConstruction = value
- }
- })
-
- //Property height
- heightSortPick.forEach((value, key) => {
- if (key === gID) {
- pickHeight = value
- }
- })
-
- //Property HeatedVolume
- heatedVolumeSortPick.forEach((value, key) => {
- if (key === gID) {
- pickHeatedVolume = value
- }
- })
-
- //Property TotalSurfaceArea
- totalSurfaceAreaSortPick.forEach((value, key) => {
- if (key === gID) {
- var sum = 0
- value.forEach(element => {
- sum += element.totalSurfaceArea
- });
- pickTotalSurfaceArea = sum
- }
- })
-
- //Property RoofType
- roofTypeSortPick.forEach((value, key) => {
- if (key === gID) {
- pickRoofType = value
- }
- })
-
- //Property UValue
- uValueSortPick.forEach((value, key) => {
- if (key === sID) {
- pickUValue = value
- }
- })
- }
-
-}
-
-
function resetRoofColors() {
tileContent.forEach(t => {
if (t.getProperty("description").includes("Roof")) {
diff --git a/public/js/pvPotentialNormalization.js b/public/js/pvPotentialNormalization.js
index e1442ba..58de127 100644
--- a/public/js/pvPotentialNormalization.js
+++ b/public/js/pvPotentialNormalization.js
@@ -1,10 +1,11 @@
-/* TODO: issue #128
-write a function which normalizes each value from the pvPotential array
-and
-*/
-var minAndMaxPvPotentials = [];
+/** Documentation:
+ * Function is used to calculate normalized pvPotential data
+ * it normalizes every value from the array
+ */
+var minAndMaxPvPotentials = [];
+//getting the min and max for each attributes
function setMinAndMax(pvPotentialValue) {
let pvPotentials = [];
pvPotentialSurfaces.forEach(t => {
@@ -15,19 +16,19 @@ function setMinAndMax(pvPotentialValue) {
}
});
pvPotentials = pvPotentials.sort(function(a, b) { return a - b; });
- minAndMaxPvPotentials=[];
+ minAndMaxPvPotentials = [];
minAndMaxPvPotentials.push(pvPotentials[0]);
minAndMaxPvPotentials.push(pvPotentials[pvPotentials.length - 1]);
console.log("setMinAndMax calculated");
}
+//calculating the normalized value for the selected pvPotential value
function getNormalizedValue(selectedPvPotentialValue) {
var normalizedValue;
- if(minAndMaxPvPotentials[1]-minAndMaxPvPotentials[0]!==0){
- normalizedValue = (selectedPvPotentialValue-minAndMaxPvPotentials[0])/(minAndMaxPvPotentials[1]-minAndMaxPvPotentials[0]);
- }
- else{
- normalizedValue=1;
+ if (minAndMaxPvPotentials[1] - minAndMaxPvPotentials[0] !== 0) {
+ normalizedValue = (selectedPvPotentialValue - minAndMaxPvPotentials[0]) / (minAndMaxPvPotentials[1] - minAndMaxPvPotentials[0]);
+ } else {
+ normalizedValue = 1;
}
return normalizedValue;
}
diff --git a/public/js/searchadress.js b/public/js/searchadress.js
new file mode 100644
index 0000000..2015c39
--- /dev/null
+++ b/public/js/searchadress.js
@@ -0,0 +1,40 @@
+/**
+ * Used for the search address feature
+ */
+
+//load address
+var request = new XMLHttpRequest();
+request.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+
+ var coordinate = JSON.parse(request.responseText);
+ var lat = coordinate.results[0].geometry.lat;
+ var lng = coordinate.results[0].geometry.lng;
+ console.log(lat + " " + lng);
+ fly(lat, lng);
+ }
+}
+
+//sending a request to the opencage api to convert the input to coordinates
+function searchaddress() {
+ var query = document.getElementById('SearchAddress').value;
+ request.open("GET", 'https://api.opencagedata.com/geocode/v1/json?key=c73da14969e6408ab4535b3ad6dc43ea&pretty=1&no_annotations=1&q=' + query, true);
+ request.send();
+}
+
+//used to fly to the found position
+function fly(lat, lng) {
+ var pinBuilder = new Cesium.PinBuilder();
+
+ var bluePin = viewer.entities.add({
+ name: "Blank blue pin",
+ position: Cesium.Cartesian3.fromDegrees(lng, lat),
+ billboard: {
+ image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ },
+ });
+ viewer.zoomTo(bluePin);
+
+ viewer.flyTo(bluePin);
+}
\ No newline at end of file
diff --git a/public/main.html b/public/main.html
index 5b8e717..3be891f 100644
--- a/public/main.html
+++ b/public/main.html
@@ -251,6 +251,10 @@
<div class="lang" key="surfaceview">Surface-View</div>
<label class="drinkcard-cc surface" for="surface"></label>
+ <input id="solarPlanner" type="radio" name="credit-card" value="solarPlanner">
+ <div class="lang" key="solarPlannerView">Solar-Planner</div>
+ <label class="drinkcard-cc surface" for="solarPlanner"></label>
+
<!-- deprecated: Used for roof-view
<input id="roof" type="radio" name="credit-card" value="roof">
<div class="lang" key="roofview">Roof-View</div>
@@ -302,9 +306,7 @@
<input id="shadowValue" type="radio" name="dropp" value="shadowValue" onclick="chosenAttributeHandler(this);" checked> </label>
</div>
</div>
- <div id="chartButton" class="button">
- <div class='lang' key='chart'>Chart</div>
- </div>
+
<!--Draw-menu-->
<button class="dropdown-btn"><span class='lang' key='drawbox'>Draw box</span><i class="fa fa-caret-down"></i></button>
<div class="dropdown-container">
@@ -338,6 +340,10 @@
</label>
</div>
</div>
+
+ <div id="chartButton" class="button">
+ <div class='lang' key='chart'>Chart</div>
+ </div>
</div>
</div>
@@ -389,6 +395,10 @@
</script>
<script type="text/javascript" src="js/colorPalettes.js"></script>
+ <script type="text/javascript" src="js/searchadress.js"></script>
+ <script type="text/javascript" src="js/fillTableProperties.js"></script>
+
+
<script type="text/javascript" src="js/sidebar.js"></script>
--
GitLab