From 640d9de6818903b262de773801170f809525d686 Mon Sep 17 00:00:00 2001
From: Rushi _ MUFC <rushikesh.padsala@hft-stuttgart.de>
Date: Thu, 1 Jun 2023 12:54:48 +0200
Subject: [PATCH] Updated Stoekack energy dashboard example
---
.../CSS/EnergyDashboard.css | 140 -------
public/StoeckachEnergyDashboard/CSS/index.css | 168 +++++++--
public/StoeckachEnergyDashboard/Source/App.js | 27 +-
.../Source/AppSkeleton.js | 342 ------------------
public/StoeckachEnergyDashboard/index.html | 6 +-
5 files changed, 145 insertions(+), 538 deletions(-)
delete mode 100644 public/StoeckachEnergyDashboard/CSS/EnergyDashboard.css
delete mode 100644 public/StoeckachEnergyDashboard/Source/AppSkeleton.js
diff --git a/public/StoeckachEnergyDashboard/CSS/EnergyDashboard.css b/public/StoeckachEnergyDashboard/CSS/EnergyDashboard.css
deleted file mode 100644
index 394e13b..0000000
--- a/public/StoeckachEnergyDashboard/CSS/EnergyDashboard.css
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
-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;
-}
diff --git a/public/StoeckachEnergyDashboard/CSS/index.css b/public/StoeckachEnergyDashboard/CSS/index.css
index 9b640f8..aacea85 100644
--- a/public/StoeckachEnergyDashboard/CSS/index.css
+++ b/public/StoeckachEnergyDashboard/CSS/index.css
@@ -1,42 +1,51 @@
-.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;
+}
+
diff --git a/public/StoeckachEnergyDashboard/Source/App.js b/public/StoeckachEnergyDashboard/Source/App.js
index 823b342..d8ac7d0 100644
--- a/public/StoeckachEnergyDashboard/Source/App.js
+++ b/public/StoeckachEnergyDashboard/Source/App.js
@@ -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');
diff --git a/public/StoeckachEnergyDashboard/Source/AppSkeleton.js b/public/StoeckachEnergyDashboard/Source/AppSkeleton.js
deleted file mode 100644
index 1d01f2d..0000000
--- a/public/StoeckachEnergyDashboard/Source/AppSkeleton.js
+++ /dev/null
@@ -1,342 +0,0 @@
-(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';
- // });
-
-}());
diff --git a/public/StoeckachEnergyDashboard/index.html b/public/StoeckachEnergyDashboard/index.html
index 040b354..dc273e0 100644
--- a/public/StoeckachEnergyDashboard/index.html
+++ b/public/StoeckachEnergyDashboard/index.html
@@ -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 -->
--
GitLab