Commit 640d9de6 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Updated Stoekack energy dashboard example

parent 5fc00242
Pipeline #7539 passed with stages
in 10 seconds
/*
html,
body,
*/
#Navbar {
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
background-color: #ffffff;
}
.cesium-container {
grid-column: 1;
background: #000;
}
.chart-container {
max-width: 800px;
margin: 20px auto;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
#myChart2 {
max-width: 400px;
max-height: 400px;
width: 100%;
height: 100%;
}
.backdrop {
display: inline-block;
background: rgba(42, 42, 42, 0.7);
border-radius: 5px;
border: 1px solid #444;
color: #fff;
line-height: 150%;
font-size: small;
box-shadow: 0 0 10px 1px #000;
}
button.cesium-infoBox-camera {
display: none;
}
.cesium-infoBox {
width: 80%;
height: auto;
right: 5px;
background: rgba(0, 0, 0, 0.65);
border-radius: 10px;
border: 1px solid #444;
padding: 5px 10px;
color: #fff;
font: 1em "Fira Sans", sans-serif;
float: right;
}
.cesium-infoBox-title {
background: rgba(0, 0, 0, 0);
font: 1em "Fira Sans", sans-serif;
}
.cesium-infoBox-close {
z-index: 99999;
}
#legend {
position: relative;
left: 5px;
top: 5px;
}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.my-legend a {
color: #777;
}
.credit {
width: 100px;
height: 100px;
overflow: hidden;
position: fixed;
z-index: 99999;
background: url(Images/hft.jpg) no-repeat;
background-size: 100px;
bottom: 40px;
left: 10px;
box-shadow: 0 0 10px 1px #000;
}
.backdrop {
display: inline-block;
background: rgba(42, 42, 42, 0.7);
border-radius: 5px;
border: 1px solid #444;
padding: 5px 10px;
color: #fff;
line-height: 150%;
font-size: small;
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
#heightSliderLabel, #heightValue {
vertical-align: top;
button.cesium-infoBox-camera {
display: none;
}
.backdrop a:link, .backdrop a:visited, .backdrop a:hover {
color: #fff
#Navbar {
overflow: hidden;
}
.loadingIndicator {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin-top: -33px;
margin-left: -33px;
width: 66px;
height: 66px;
background: url(Source/Images/ajax-loader.gif) center no-repeat;
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
background-color: #ffffff;
}
.cover {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.75);
top: 0;
left: 0;
right: 0;
bottom: 0;
.cesium-container {
grid-column: 1;
background: #000;
}
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
background: #000;
}
.chart-container {
max-width: 800px;
margin: 20px auto;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
#menu {
......@@ -48,21 +57,100 @@
.nowrap {
white-space: nowrap;
}
html, body, #cesiumContainer {
#myChart2 {
max-width: 400px;
max-height: 400px;
width: 100%;
height: 100%;
}
.backdrop {
display: inline-block;
background: rgba(42, 42, 42, 0.7);
border-radius: 5px;
border: 1px solid #444;
color: #fff;
line-height: 150%;
font-size: small;
box-shadow: 0 0 10px 1px #000;
}
.cesium-infoBox {
width: 80%;
height: auto;
right: 5px;
background: rgba(0, 0, 0, 0.65);
border-radius: 10px;
border: 1px solid #444;
padding: 5px 10px;
color: #fff;
font: 1em "Fira Sans", sans-serif;
float: right;
}
.cesium-infoBox-title {
background: rgba(0, 0, 0, 0);
font: 1em "Fira Sans", sans-serif;
}
.cesium-infoBox-close {
z-index: 99999;
}
#legend {
position: relative;
left: 5px;
top: 5px;
}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
overflow: hidden;
font-family: sans-serif;
background: #000;
float: left;
list-style: none;
}
button.cesium-infoBox-camera {
display: none;
.my-legend .legend-scale ul li {
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
#3DTiles {
padding-top: 10px;
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.my-legend a {
color: #777;
}
.credit {
width: 100px;
height: 100px;
overflow: hidden;
position: fixed;
z-index: 99999;
background: url(Images/hft.jpg) no-repeat;
background-size: 100px;
bottom: 40px;
left: 10px;
box-shadow: 0 0 10px 1px #000;
}
......@@ -164,22 +164,23 @@
// Chart.js code
// Fetch GeoJSON data
// Fetch GeoJSON data - please install CORS plugin otherwise this will not work
fetch('https://ugl.hft-stuttgart.de/leaflet-stoeckach-heatdemand/building_data.json')
.then(response => response.json())
.then(data => {
// Extract the "Year_of_co" and "BuildingTy" values
var buildingYoc = data.features.map(function(feature) {
// Define array, extract and store the "Year_of_co" and "BuildingTy" values
// Array is a special variable which can store valies. It is a common practice to store array using "const" keyword but donot understant it as a constant value.
// Here const means array buildingYoc cannot be re-declared elsewhere
const buildingYoc = data.features.map(function(feature) {
return feature.properties.Year_of_co;
});
var buildingType = data.features.map(function(feature) {
const buildingType = data.features.map(function(feature) {
return feature.properties.BuildingTy;
});
// Count the occurrences of each year of construction
var yocCounts = {};
// Count the occurrences of each year of construction and store it in array yocCounts
const yocCounts = {};
buildingYoc.forEach(function(Year_of_co) {
if (yocCounts[Year_of_co]) {
yocCounts[Year_of_co]++;
......@@ -188,8 +189,8 @@
}
});
// Count the occurrences of each building type
var bldgtypeCounts = {};
// Count the occurrences of each building type and store it in array bldgtypeCounts
const bldgtypeCounts = {};
buildingType.forEach(function(BuildingTy) {
if (bldgtypeCounts[BuildingTy]) {
bldgtypeCounts[BuildingTy]++;
......@@ -199,11 +200,11 @@
});
// Prepare the chart for year of construction and building type data
var yocLabels = Object.keys(yocCounts);
var yocData = Object.values(yocCounts);
const yocLabels = Object.keys(yocCounts);
const yocData = Object.values(yocCounts);
var bldgTypeLabels = Object.keys(bldgtypeCounts);
var bldgTypeData = Object.values(bldgtypeCounts);
const bldgTypeLabels = Object.keys(bldgtypeCounts);
const bldgTypeData = Object.values(bldgtypeCounts);
// Create the building year of construction distribution chart using Chart.js
var ctx1 = document.getElementById('myChart1').getContext('2d');
......
(function () {
"use strict";
// TODO: Add your ion access token from cesium.com/ion/
// Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
//////////////////////////////////////////////////////////////////////////
// Creating the Viewer
//////////////////////////////////////////////////////////////////////////
// var viewer = new Cesium.Viewer('cesiumContainer', {
// scene3DOnly: true,
// selectionIndicator: false,
// baseLayerPicker: false
// });
//////////////////////////////////////////////////////////////////////////
// Loading Imagery
//////////////////////////////////////////////////////////////////////////
// // Remove default base layer
// viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// // Add Sentinel-2 imagery
// viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3954 }));
//////////////////////////////////////////////////////////////////////////
// Loading Terrain
//////////////////////////////////////////////////////////////////////////
// // Load Cesium World Terrain
// viewer.terrainProvider = Cesium.createWorldTerrain({
// requestWaterMask : true, // required for water effects
// requestVertexNormals : true // required for terrain lighting
// });
// // Enable depth testing so things behind the terrain disappear.
// viewer.scene.globe.depthTestAgainstTerrain = true;
//////////////////////////////////////////////////////////////////////////
// Configuring the Scene
//////////////////////////////////////////////////////////////////////////
// // Enable lighting based on sun/moon positions
// viewer.scene.globe.enableLighting = true;
// // Create an initial camera view
// var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
// var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
// var homeCameraView = {
// destination : initialPosition,
// orientation : {
// heading : initialOrientation.heading,
// pitch : initialOrientation.pitch,
// roll : initialOrientation.roll
// }
// };
// // Set the initial view
// viewer.scene.camera.setView(homeCameraView);
// // Add some camera flight animation options
// homeCameraView.duration = 2.0;
// homeCameraView.maximumHeight = 2000;
// homeCameraView.pitchAdjustHeight = 2000;
// homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// // Override the default home button
// viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
// e.cancel = true;
// viewer.scene.camera.flyTo(homeCameraView);
// });
// // Set up clock and timeline.
// viewer.clock.shouldAnimate = true; // default
// viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
// viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
// viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
// viewer.clock.multiplier = 2; // sets a speedup
// viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
// viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
// viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
//////////////////////////////////////////////////////////////////////////
// Loading and Styling Entity Data
//////////////////////////////////////////////////////////////////////////
// var kmlOptions = {
// camera : viewer.scene.camera,
// canvas : viewer.scene.canvas,
// clampToGround : true
// };
// // Load geocache points of interest from a KML file
// // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
// var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);
// // Add geocache billboard entities to scene and style them
// geocachePromise.then(function(dataSource) {
// // Add the new data as entities to the viewer
// viewer.dataSources.add(dataSource);
// // Get the array of entities
// var geocacheEntities = dataSource.entities.values;
// for (var i = 0; i < geocacheEntities.length; i++) {
// var entity = geocacheEntities[i];
// if (Cesium.defined(entity.billboard)) {
// // Adjust the vertical origin so pins sit on terrain
// entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
// // Disable the labels to reduce clutter
// entity.label = undefined;
// // Add distance display condition
// entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
// // Compute latitude and longitude in degrees
// var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
// var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
// var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
// // Modify description
// var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
// '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
// '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
// '</tbody></table>';
// entity.description = description;
// }
// }
// });
// var geojsonOptions = {
// clampToGround : true
// };
// // Load neighborhood boundaries from a GeoJson file
// // Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
// var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/sampleNeighborhoods.geojson', geojsonOptions);
// // Save an new entity collection of neighborhood data
// var neighborhoods;
// neighborhoodsPromise.then(function(dataSource) {
// // Add the new data as entities to the viewer
// viewer.dataSources.add(dataSource);
// neighborhoods = dataSource.entities;
// // Get the array of entities
// var neighborhoodEntities = dataSource.entities.values;
// for (var i = 0; i < neighborhoodEntities.length; i++) {
// var entity = neighborhoodEntities[i];
// if (Cesium.defined(entity.polygon)) {
// // Use kml neighborhood value as entity name
// entity.name = entity.properties.neighborhood;
// // Set the polygon material to a random, translucent color
// entity.polygon.material = Cesium.Color.fromRandom({
// red : 0.1,
// maximumGreen : 0.5,
// minimumBlue : 0.5,
// alpha : 0.6
// });
// // Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
// entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// // Generate Polygon center
// var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
// var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
// polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
// entity.position = polyCenter;
// // Generate labels
// entity.label = {
// text : entity.name,
// showBackground : true,
// scale : 0.6,
// horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
// verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
// distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
// disableDepthTestDistance : 100.0
// };
// }
// }
// });
// // Load a drone flight path from a CZML file
// var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');
// // Save a new drone model entity
// var drone;
// dronePromise.then(function(dataSource) {
// viewer.dataSources.add(dataSource);
// // Get the entity using the id defined in the CZML data
// drone = dataSource.entities.getById('Aircraft/Aircraft1');
// // Attach a 3D model
// drone.model = {
// uri : './Source/SampleData/Models/CesiumDrone.gltf',
// minimumPixelSize : 128,
// maximumScale : 1000,
// silhouetteColor : Cesium.Color.WHITE,
// silhouetteSize : 2
// };
// // Add computed orientation based on sampled positions
// drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
// // Smooth path interpolation
// drone.position.setInterpolationOptions({
// interpolationAlgorithm : Cesium.HermitePolynomialApproximation,
// interpolationDegree : 2
// });
// drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0);
// });
//////////////////////////////////////////////////////////////////////////
// Load 3D Tileset
//////////////////////////////////////////////////////////////////////////
// // Load the NYC buildings tileset
// var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));
// // Adjust the tileset height so it's not floating above terrain
// var heightOffset = -32;
// city.readyPromise.then(function(tileset) {
// // Position tileset
// var boundingSphere = tileset.boundingSphere;
// var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
// var surfacePosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
// var offsetPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
// var translation = Cesium.Cartesian3.subtract(offsetPosition, surfacePosition, new Cesium.Cartesian3());
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// });
//////////////////////////////////////////////////////////////////////////
// Style 3D Tileset
//////////////////////////////////////////////////////////////////////////
// // Define a white, opaque building style
// var defaultStyle = new Cesium.Cesium3DTileStyle({
// color : "color('white')",
// show : true
// });
// // Set the tileset style to default
// city.style = defaultStyle;
// // Define a white, transparent building style
// var transparentStyle = new Cesium.Cesium3DTileStyle({
// color : "color('white', 0.3)",
// show : true
// });
// // Define a style in which buildings are colored by height
// var heightStyle = new Cesium.Cesium3DTileStyle({
// color : {
// conditions : [
// ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
// ["${height} >= 200", "rgb(102, 71, 151)"],
// ["${height} >= 100", "rgb(170, 162, 204)"],
// ["${height} >= 50", "rgb(224, 226, 238)"],
// ["${height} >= 25", "rgb(252, 230, 200)"],
// ["${height} >= 10", "rgb(248, 176, 87)"],
// ["${height} >= 5", "rgb(198, 106, 11)"],
// ["true", "rgb(127, 59, 8)"]
// ]
// }
// });
// var tileStyle = document.getElementById('tileStyle');
// function set3DTileStyle() {
// var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
// if (selectedStyle === 'none') {
// city.style = defaultStyle;
// } else if (selectedStyle === 'height') {
// city.style = heightStyle;
// } else if (selectedStyle === 'transparent') {
// city.style = transparentStyle;
// }
// }
// tileStyle.addEventListener('change', set3DTileStyle);
//////////////////////////////////////////////////////////////////////////
// Custom mouse interaction for highlighting and selecting
//////////////////////////////////////////////////////////////////////////
// // If the mouse is over a point of interest, change the entity billboard scale and color
// var previousPickedEntity;
// var handler = viewer.screenSpaceEventHandler;
// handler.setInputAction(function (movement) {
// var pickedPrimitive = viewer.scene.pick(movement.endPosition);
// var pickedEntity = Cesium.defined(pickedPrimitive) ? pickedPrimitive.id : undefined;
// // Unhighlight the previously picked entity
// if (Cesium.defined(previousPickedEntity)) {
// previousPickedEntity.billboard.scale = 1.0;
// previousPickedEntity.billboard.color = Cesium.Color.WHITE;
// }
// // Highlight the currently picked entity
// if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
// pickedEntity.billboard.scale = 2.0;
// pickedEntity.billboard.color = Cesium.Color.ORANGERED;
// previousPickedEntity = pickedEntity;
// }
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//////////////////////////////////////////////////////////////////////////
// Setup Camera Modes
//////////////////////////////////////////////////////////////////////////
// var freeModeElement = document.getElementById('freeMode');
// var droneModeElement = document.getElementById('droneMode');
// // Create a follow camera by tracking the drone entity
// function setViewMode() {
// if (droneModeElement.checked) {
// viewer.trackedEntity = drone;
// } else {
// viewer.trackedEntity = undefined;
// viewer.scene.camera.flyTo(homeCameraView);
// }
// }
// freeModeElement.addEventListener('change', setViewMode);
// droneModeElement.addEventListener('change', setViewMode);
// viewer.trackedEntityChanged.addEventListener(function() {
// if (viewer.trackedEntity === drone) {
// freeModeElement.checked = false;
// droneModeElement.checked = true;
// }
// });
//////////////////////////////////////////////////////////////////////////
// Setup Display Options
//////////////////////////////////////////////////////////////////////////
// var shadowsElement = document.getElementById('shadows');
// var neighborhoodsElement = document.getElementById('neighborhoods');
// shadowsElement.addEventListener('change', function (e) {
// viewer.shadows = e.target.checked;
// });
// neighborhoodsElement.addEventListener('change', function (e) {
// neighborhoods.show = e.target.checked;
// });
// // Finally, wait for the initial city to be ready before removing the loading indicator.
// var loadingIndicator = document.getElementById('loadingIndicator');
// loadingIndicator.style.display = 'block';
// city.readyPromise.then(function () {
// loadingIndicator.style.display = 'none';
// });
}());
......@@ -7,15 +7,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Stoeckach Energy Dashboard</title>
<!-- The Cesium library. -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- The Chart.js library. -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- stylesheets -->
<link rel="stylesheet" href="./CSS/index.css" media="screen">
<link rel="stylesheet" type="text/css" href="./CSS/EnergyDashboard.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- defining container to keep cesium viewer and chart -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment