made hourly shadowData pickable by timeline

public/js/globe.js

@@ -26,6 +26,16 @@ nameOverlay.style["pointer-events"] = "none";
 nameOverlay.style.padding = "4px";
 nameOverlay.style.backgroundColor = "white";
 
+
+var chosenDate = new Cesium.GregorianDate; //the chosen Date from the Timeline
+
+//getting clicked Date from the timeline element
+viewer.timeline.container.onmouseup = (e) => {
+    var julianDate=viewer.clock.currentTime;    
+    Cesium.JulianDate.toGregorianDate(julianDate, chosenDate);
+    //console.log(chosenDate);
+}
+
 // An entity object which will hold info about the currently selected feature for infobox display
 var selectedEntity = new Cesium.Entity();
 
@@ -127,7 +137,6 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
                 if (t === pickedFeature) {
                     if(t.getProperty("feature_type")==="RoofSurface"){
                         highlightedFeatures.push(new featurevar(t, t.color));
-                        //t.color = randomRoofColor();  
                         t.color = Cesium.Color.GREEN;                      
 
                     }else{
@@ -135,14 +144,6 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
                         t.color = Cesium.Color.YELLOW;
                     }
 
-                    //debugging - getting all info of the clicked surface
-                    //console.log(t.getPropertyNames());                    
-                    console.log(t.getProperty("description")+"\n"+t.getProperty("feature_type")+"\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
-                    for (const [key, value] of Object.entries(shadowdata)) {
-                        if(key === t.getProperty("gml_id")){
-                            console.log(key, value);
-                        }
-                    }              
                 }
             });
         }
@@ -258,6 +259,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
     //fill variables for Single Building Properties
     fillTableProperties(gmlID, surID)
+    var shadowHourValue=0;
 
     if (document.getElementById("surface").checked) {
 
@@ -269,10 +271,27 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                 }
             });
             highlightedFeatures = [];
+
             //highlight newly selected feature
             tileContent.forEach(t => {
-                if (t === pickedFeature) {
+                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;
+
+                    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;                      
+                            }
+                        }
+                    }
+
+                    
                 }
             });
         } else {
@@ -290,7 +309,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
         }
 
 
-        //set feature infobox description
+        //set feature infobox description (surface view)
         var featureName = pickedFeature.getProperty("name");
         selectedEntity.name = featureName;
         selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
@@ -301,10 +320,14 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
             "<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>" + shadowHourValue + "</td></tr>" +
+
+            
             "</tbody></table>";
           
 
     }
+
     else {
         //save the selected feature's original color
         if (pickedhigh) {
@@ -339,7 +362,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
         buildings(gmlID)
 
-        //set feature infobox description
+        //set feature infobox description (building view)
         var featureName = pickedFeature.getProperty("name");
         selectedEntity.name = featureName;
         selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';