added shadowPalette; RoofView works;

public/js/globe.js

@@ -5,15 +5,19 @@ var viewer = new Cesium.Viewer('cesiumContainer', {
     baseLayerPicker: false,
     navigationHelpButton: false,
     timeline: true,
+    //shadows:true,
     animation: false,
     sceneModePicker: false,
     geocoder: false,
+    
 });
 
 viewer.scene.globe.depthTestAgainstTerrain = true;
 //--------------------hover over surfaces--------------------
 var singleChart = document.getElementById('singleChartContainer');
 
+console.log(viewer.ShadowMap);
+
 // HTML overlay for showing feature name on mouseover
 var nameOverlay = document.createElement("div");
 viewer.container.appendChild(nameOverlay);
@@ -27,7 +31,7 @@ nameOverlay.style.padding = "4px";
 nameOverlay.style.backgroundColor = "white";
 
 
-var chosenDate = new Cesium.GregorianDate; //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) => {
@@ -150,8 +154,8 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
 
     }
     
-    else {
-
+    //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";
@@ -177,6 +181,12 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
             });
         }
     }
+
+    //Roof View
+    else if(document.getElementById("roof").checked){
+        console.log("clicked when in roof view and on hover");
+    }
+    
 },
     Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
@@ -261,6 +271,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
     fillTableProperties(gmlID, surID)
    
 
+    //Surface View
     if (document.getElementById("surface").checked) {
 
         //save the selected feature's original color
@@ -279,19 +290,17 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
                     t.color = Cesium.Color.LIME;
 
-                    for (const [key, value] of Object.entries(shadowdata)) {
-                        if(key === t.getProperty("gml_id")){
-                            console.log("hour:",chosenDate.hour);
-                            shadowHourValue = value[chosenDate.hour-1]
-                            console.log(value[chosenDate.hour-1]);
-
-                            if(value[chosenDate.hour-1]===0){
-                                t.color = Cesium.Color.BLACK;                      
-                            }
+                    //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 {
@@ -328,7 +337,8 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
     }
 
-    else {
+    //Building View
+    else if(document.getElementById("building").checked){
         //save the selected feature's original color
         if (pickedhigh) {
             highlightedFeatures.forEach(h => {
@@ -380,6 +390,28 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
     }
 
+    //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
+                        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);
 
@@ -449,13 +481,3 @@ function fillTableProperties(gID, sID) {
     }
 
 }
-
-function randomRoofColor(){
-    var r = Math.floor(Math.random() * 10);
-    var shade =29*r;
-    
-    var color = new Cesium.Color;
-    Cesium.Color.fromBytes(shade,shade,shade,255,color);
-    //console.log(color);
-    return color;
-}

public/js/shadowPalette.js

+//Shadow palette for coloring the roofs
+
+//color pallet      white->black
+var shadowPalette = ['#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){ 
+    //TODO: add check for wrong inputShadowValues
+    //checking for the float values
+    if(!Number.isInteger(inputShadowValue)){ 
+        var index = Math.ceil((shadowPalette.length-1)*inputShadowValue);
+        //console.log(shadowPalette[index]);
+        return shadowPalette[index];
+    }
+    //edge case for 0 and 1
+    else{
+        //console.log("black",shadowPalette[shadowPalette.length-1]);
+        return shadowPalette[shadowPalette.length-1];
+    }
+    
+}
+

public/main.html

@@ -242,6 +242,7 @@
 						<input id="building" type="radio" name="credit-card" value="building" checked>
 						<div class="lang" key="buildingview">Building-View</div>
 						<label class="drinkcard-cc building" for="building"></label>
+						
 						<input id="surface" type="radio" name="credit-card" value="surface">
 						<div class="lang" key="surfaceview">Surface-View</div>
 						<label class="drinkcard-cc surface" for="surface"></label>
@@ -342,6 +343,9 @@
 		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
 			integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
 		</script>
+
+		<script type="text/javascript" src="js/shadowPalette.js"></script>
+
 		<script type="text/javascript" src="js/sidebar.js"></script>
 		<script type="text/javascript" src="js/globe.js"></script>
 		<script type="text/javascript" src="js/areaCharts.js"></script>