From 61a2b52a95ef3dd824d5cfbd8b4097867514cc4d Mon Sep 17 00:00:00 2001
From: BujarMuharemi <bujar.muharemi.28@gmail.com>
Date: Tue, 11 Jan 2022 22:35:51 +0100
Subject: [PATCH] issues #128: toogle between attributes is possible
---
public/js/colorPalettes.js | 39 +++++++++++++++++++++++++++
public/js/connectToAPI.js | 6 ++---
public/js/globe.js | 38 ++++++++++++++++++--------
public/js/pvPotentialNormalization.js | 4 +++
public/js/shadowPalette.js | 14 ----------
public/main.html | 6 ++---
6 files changed, 75 insertions(+), 32 deletions(-)
create mode 100644 public/js/colorPalettes.js
create mode 100644 public/js/pvPotentialNormalization.js
delete mode 100644 public/js/shadowPalette.js
diff --git a/public/js/colorPalettes.js b/public/js/colorPalettes.js
new file mode 100644
index 0000000..712af39
--- /dev/null
+++ b/public/js/colorPalettes.js
@@ -0,0 +1,39 @@
+//Shadow palette for coloring the roofs
+// color pallet from https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3
+
+var pvPotentialPallet = ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#034e7b']
+pvPotentialPallet = pvPotentialPallet.reverse();
+
+//color pallet white->black
+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) {
+ //checking for the float values
+ var index = Math.ceil((shadowPalette.length - 1) * inputShadowValue);
+ //console.log(inputShadowValue,"---",shadowPalette[index]);
+ return shadowPalette[index];
+}
+
+/** returns a color from the chosen colorpalette, depending on the inputvalue
+ * @param {float} inputValue - inputValue on which the colorpalette should be calculated (normalized range 0.0-1.0)
+ * @param {string} colorPalette - "pvPotential" or "shadowValue"
+ * @returns {string} a hex color string
+ */
+function getColorFromPalette(inputValue,colorPalette) {
+
+ //returns the responding color from the shadowPalette, depending on the inputShadowValue(0 to 1 in float)
+ if(colorPalette==="shadowValue"){
+ var index = Math.ceil((shadowPalette.length - 1) * inputValue); //checking for the float values
+ return shadowPalette[index];
+
+ }else if(colorPalette==="pvPotential"){
+ var index = Math.ceil((pvPotentialPallet.length - 1) * inputValue); //checking for the float values
+ return pvPotentialPallet[index];
+ }else{
+ throw "chose wrong colorPalette";
+ }
+
+
+}
diff --git a/public/js/connectToAPI.js b/public/js/connectToAPI.js
index c573ac7..00d6c01 100644
--- a/public/js/connectToAPI.js
+++ b/public/js/connectToAPI.js
@@ -4,9 +4,7 @@ var url = "http://vm24.fkc.hft-stuttgart.de:8082/workflow/execute" // URL to API
var url2 = "http://vm24.fkc.hft-stuttgart.de:8082/workflow/timedShadowValueByDay/"
var pvURL = "http://vm24.fkc.hft-stuttgart.de:8082/workflow/readPVPotential"
-/*TODO#1: -get current data from the api and create local test data (apiData foler)
- -add connection handeling (error messages when there isnt a connection and then using the local test data)
-*/
+
var localShadowData = "/public/test/APIdata/shadowData.json"
var localPvpotentialData = "/public/test/APIdata/buildingInformation.json"
@@ -432,7 +430,7 @@ function fetchTileset() {
//var errorString = error["stack"]+"\n"+error["message"]; // formatting the error array
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
+ loadAndZoomToTileset(localTestTileset);
})
}
diff --git a/public/js/globe.js b/public/js/globe.js
index 0586b98..f85d779 100644
--- a/public/js/globe.js
+++ b/public/js/globe.js
@@ -17,6 +17,12 @@ viewer.scene.globe.depthTestAgainstTerrain = true;
var singleChart = document.getElementById('singleChartContainer');
var roofViewActivated = false;
+var chosenAttributeRadioBtnFlag = "shadowValue";
+
+
+function chosenAttributeHandler(radioBtnValue){
+ chosenAttributeRadioBtnFlag=radioBtnValue.value;
+}
//load address
var request = new XMLHttpRequest();
@@ -147,7 +153,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
return;
}
- //SURFACE-VIEW
+ //Surface-View @onMouseMove
if (document.getElementById("surface").checked) {
// A feature was picked, so show it's overlay content
@@ -238,6 +244,7 @@ var pickUValue
var shadowHourValue = 0;
var SurfacePvPotential = [];
+var SurfacePvPotentialObject = []; //object which stores all the pvPotential data
//Color a feature on selection and show metadata in the InfoBox
@@ -308,8 +315,8 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//fill variables for Single Building Properties
fillTableProperties(gmlID, surID)
-
- //Surface View
+
+ //Surface View @onLeftClick
if (document.getElementById("surface").checked) {
resetRoofColors();
//save the selected feature's original color
@@ -334,23 +341,30 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
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
-
+
+ if(chosenAttributeRadioBtnFlag==="shadowValue"){
+ t.color = Cesium.Color.fromCssColorString(getColorFromPalette(shadowHourValue,"shadowValue")); //coloring the surface
+ }else if(chosenAttributeRadioBtnFlag==="pvPotential"){
+ t.color = Cesium.Color.fromCssColorString(getColorFromPalette(shadowHourValue,"pvPotential")); //coloring the surface
+ }
+ //t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
+
}
}
-
+ console.log(pvPotentialSurfaces);
//coloring surfaces on pv potential
for (const [key, value] of Object.entries(pvPotentialSurfaces)) { //looping threw the shadowdata array
if (value["id"] === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
- //console.log("hour:",chosenDate.hour);
- //console.log(value);
+ //console.log("hour:",chosenDate.hour);
+
SurfacePvPotential = value["attributes"]["pvPotential"]["totalInvestment"];
+ SurfacePvPotentialObject = value["attributes"]["pvPotential"];
+ //console.log(SurfacePvPotentialObject);
}
}
}
});
+
} else {
tileContent.forEach(t => {
if (t === pickedFeature) {
@@ -439,8 +453,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
}
- //Roof View
+ //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");
@@ -459,6 +474,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
});
}
+ //DEPRECATED: Roof View
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
diff --git a/public/js/pvPotentialNormalization.js b/public/js/pvPotentialNormalization.js
new file mode 100644
index 0000000..b9244ba
--- /dev/null
+++ b/public/js/pvPotentialNormalization.js
@@ -0,0 +1,4 @@
+/* TODO: issue #128
+write a function which normalizes each value from the pvPotential array
+and
+*/
\ No newline at end of file
diff --git a/public/js/shadowPalette.js b/public/js/shadowPalette.js
deleted file mode 100644
index 0482acd..0000000
--- a/public/js/shadowPalette.js
+++ /dev/null
@@ -1,14 +0,0 @@
-//Shadow palette for coloring the roofs
-
-//color pallet white->black
-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) {
- //checking for the float values
- var index = Math.ceil((shadowPalette.length - 1) * inputShadowValue);
- //console.log(inputShadowValue,"---",shadowPalette[index]);
- return shadowPalette[index];
-
-}
diff --git a/public/main.html b/public/main.html
index e10ea3b..fd36b2f 100644
--- a/public/main.html
+++ b/public/main.html
@@ -272,10 +272,10 @@
</div>
<div class="dropp-body">
<label for="pvPotential">PV-Value
- <input type="radio" key="pvPotential" name="dropp" value="PV-Value">
+ <input id="pvPotential" type="radio" key="pvPotential" name="dropp" value="pvPotential" onclick="chosenAttributeHandler(this);">
</label>
<label for="shadowData">Shadow-Value
- <input type="radio" id="shadowData" name="dropp" value="Shadow-Value">
+ <input id="shadowValue" type="radio" name="dropp" value="shadowValue" checked onclick="chosenAttributeHandler(this);">
</label>
</div>
</div>
@@ -369,7 +369,7 @@
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
- <script type="text/javascript" src="js/shadowPalette.js"></script>
+ <script type="text/javascript" src="js/colorPalettes.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/globe.js"></script>
--
GitLab