issues #128: toogle between attributes is possible

public/js/shadowPalette.js → public/js/colorPalettes.js

 //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'];
@@ -10,5 +14,26 @@ function getShadowPalette(inputShadowValue) {
     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";
+    }
 
+    
 }

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); 
     })
 }
 

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);

public/js/pvPotentialNormalization.js

+/* TODO: issue #128
+write a function which normalizes each value from the pvPotential array
+and 
+*/
\ No newline at end of file

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>