From 363df3707d11ae8e5e7cfd03fc7044ae0718e211 Mon Sep 17 00:00:00 2001
From: BujarMuharemi <bujar.muharemi.28@gmail.com>
Date: Thu, 2 Dec 2021 13:12:33 +0100
Subject: [PATCH] added shadowPalette; RoofView works;
---
public/js/globe.js | 74 ++++++++++++++++++++++++--------------
public/js/shadowPalette.js | 23 ++++++++++++
public/main.html | 4 +++
3 files changed, 75 insertions(+), 26 deletions(-)
create mode 100644 public/js/shadowPalette.js
diff --git a/public/js/globe.js b/public/js/globe.js
index 5da84ee..f9ce889 100644
--- a/public/js/globe.js
+++ b/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;
-}
diff --git a/public/js/shadowPalette.js b/public/js/shadowPalette.js
new file mode 100644
index 0000000..7b7ed6a
--- /dev/null
+++ b/public/js/shadowPalette.js
@@ -0,0 +1,23 @@
+//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];
+ }
+
+}
+
diff --git a/public/main.html b/public/main.html
index 134f095..fef43da 100644
--- a/public/main.html
+++ b/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>
--
GitLab