split up codebase; adden base for solarPlanner

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

public/js/fillTableProperties.js

+//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

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")) {

public/js/pvPotentialNormalization.js

-/* 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;
 }

public/js/searchadress.js

+/**
+ * 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

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>