Initial commit

public/js/appCesium.js

+"use strict";
+
+Cesium.Ion.defaultAccessToken =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU";
+
+// Flag to determine models that will be loaded
+// Set to `true` or `false`
+const LOAD_DETAILED_BLDG225 = false;
+
+// Global variable
+const viewer = new Cesium.Viewer("cesiumContainer", {
+  //   terrainProvider: Cesium.createWorldTerrain(),
+});
+// viewer.scene.globe.depthTestAgainstTerrain = true;
+
+const loadTiles = function (urlTiles) {
+  const tileset = new Cesium.Cesium3DTileset({
+    url: urlTiles,
+  });
+  viewer.scene.primitives.add(tileset);
+
+  tileset.readyPromise.then(function () {
+    viewer
+      .zoomTo(
+        tileset,
+        new Cesium.HeadingPitchRange(
+          0.0,
+          -0.5,
+          tileset.boundingSphere.radius / 0.5
+        )
+      )
+      .otherwise(function (err) {
+        throw err;
+      });
+  });
+};
+
+// Function for loading 3DTiles only
+const loadNonDetailed = function () {
+  // Paths to data sources
+  const URL_3DTILES = "data_3d/3dtiles/1_full/tileset.json";
+
+  // Tileset without building 225
+  loadTiles(URL_3DTILES);
+};
+
+// Function for loading 3DTiles + glTF models
+const loadDetailed = function () {
+  // Paths to data sources
+  const URL_3DTILES = "data_3d/3dtiles/2_partial/tileset.json";
+  const URL_GLTF = "data_3d/gltf";
+
+  // Tileset without building 225
+  loadTiles(URL_3DTILES);
+
+  // Function for loading glTFs
+  const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
+    Cesium.Cartesian3.fromDegrees(9.083385, 48.881342, 0)
+  );
+
+  const gltfLoad = function (gltfId) {
+    viewer.scene.primitives.add(
+      Cesium.Model.fromGltf({
+        url: `${URL_GLTF}/${gltfId}.gltf`,
+        modelMatrix: modelMatrix,
+        scale: 0.0254,
+        allowPicking: true,
+      })
+    );
+  };
+
+  // Load Building 225
+  gltfLoad("bosch_si225_3");
+
+  // Load sensors in Building 225
+  const gltfArray = [
+    "sensor_013",
+    "sensor_023",
+    "sensor_033",
+    "sensor_053",
+    "sensor_063",
+    "sensor_073",
+    "sensor_083",
+    "sensor_093",
+    "sensor_103",
+    "sensor_113",
+    "sensor_123",
+    "sensor_133",
+    "sensor_143",
+    "sensor_153",
+    "sensor_163",
+    "sensor_173",
+    "sensor_183",
+    "sensor_213",
+    "sensor_223",
+    "sensor_233",
+    "sensor_253",
+    "sensor_263",
+    "sensor_273",
+    "sensor_283",
+    "sensor_293",
+    "sensor_303",
+    "sensor_313",
+    "sensor_323",
+    "sensor_333",
+    "sensor_343",
+    "sensor_353",
+    "sensor_363",
+    "sensor_373",
+    "sensor_383_v2",
+  ];
+
+  gltfArray.forEach((val) => gltfLoad(val));
+};
+
+if (!LOAD_DETAILED_BLDG225) {
+  // Default case: load only 3dTiles
+  loadNonDetailed();
+} else {
+  // Alternative case: load 3dTiles + glTF
+  loadDetailed();
+}

public/js/appChart.js

+// DEBUG: for testing without a browser
+// const axios = require("axios").default;
+
+// Request parameters
+const BASE_URL =
+  "http://193.196.138.56/frost-icity-tp31/v1.1/Datastreams(48)/Observations";
+const PARAM_RESULT_FORMAT = "dataArray";
+const PARAM_ORDER_BY = "phenomenonTime asc";
+const PARAM_FILTER =
+  "resultTime ge 2018-01-01T00:00:00.000Z and resultTime le 2018-02-01T00:00:00.000Z";
+const PARAM_SELECT = "result,phenomenonTime";
+
+/**
+ * Helper function for converting the observation time from a string to Unix epoch
+ * @param {*} obsArray
+ */
+const formatObservationTime = function (obsArray) {
+  const dataSTAFormatted = [];
+  obsArray.forEach((result) => {
+    const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp
+    const valueObs = result[1];
+    dataSTAFormatted.push([timestampObs, valueObs]);
+  });
+  return dataSTAFormatted;
+};
+
+/**
+ * Function draws chart using Highcharts library
+ * @param {*} dataArr
+ */
+const drawLineChartHC = function (dataArr) {
+  // Create the chart
+  Highcharts.stockChart("chart-highcharts", {
+    rangeSelector: {
+      selected: 1,
+    },
+
+    title: {
+      text: "AAPL Stock Price",
+    },
+
+    series: [
+      {
+        name: "AAPL",
+        data: dataArr,
+        tooltip: {
+          valueDecimals: 2,
+        },
+        // turboThreshold: 10000, // Disable this option; otherwise throws error if our array has a length > 1000
+      },
+    ],
+  });
+};
+
+/**
+ * Function draws chart using Apexcharts library
+ * @param {*} dataArr
+ */
+const drawLineChartAC = function (dataArr) {
+  // Chart constants
+  const CHART_HTML_ELEMENT = document.querySelector("#chart-apex-line");
+  const CHART_NAME = "Temperature";
+  const TITLE_TEXT = "Inlet flow (Vorlauf)";
+  const Y_AXIS_TITLE = "Temperature";
+
+  const options = {
+    series: [
+      {
+        name: CHART_NAME,
+        data: dataArr,
+      },
+    ],
+    chart: {
+      type: "area",
+      stacked: false,
+      height: 350,
+      zoom: {
+        type: "x",
+        enabled: true,
+        autoScaleYaxis: true,
+      },
+      toolbar: {
+        autoSelected: "zoom",
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    markers: {
+      size: 0,
+    },
+    title: {
+      text: TITLE_TEXT,
+      align: "left",
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        shadeIntensity: 1,
+        inverseColors: false,
+        opacityFrom: 0.5,
+        opacityTo: 0,
+        stops: [0, 90, 100],
+      },
+    },
+    yaxis: {
+      labels: {
+        formatter: function (val) {
+          return val.toFixed(2);
+        },
+      },
+      title: {
+        text: Y_AXIS_TITLE,
+      },
+    },
+    xaxis: {
+      type: "datetime",
+    },
+    tooltip: {
+      shared: false,
+      y: {
+        formatter: function (val) {
+          return val.toFixed(2);
+        },
+      },
+    },
+  };
+
+  const chart = new ApexCharts(CHART_HTML_ELEMENT, options);
+
+  chart.render();
+};
+
+/**
+ * Function follows "@iot.nextLink" links
+ * Appends new results to existing results
+ * @param {*} responsePromise
+ */
+const followNextLink = function (responsePromise) {
+  return responsePromise
+    .then(function (lastSuccess) {
+      if (lastSuccess.data["@iot.nextLink"]) {
+        return followNextLink(
+          axios.get(lastSuccess.data["@iot.nextLink"])
+        ).then(function (nextLinkSuccess) {
+          nextLinkSuccess.data.value = lastSuccess.data.value.concat(
+            nextLinkSuccess.data.value
+          );
+          return nextLinkSuccess;
+        });
+      } else {
+        return lastSuccess;
+      }
+    })
+    .catch(function (err) {
+      console.log(err);
+    });
+};
+
+// Get "ALL" the Observations that satisfy our query
+followNextLink(
+  axios.get(BASE_URL, {
+    params: {
+      "$resultFormat": PARAM_RESULT_FORMAT,
+      "$orderBy": PARAM_ORDER_BY,
+      "$filter": PARAM_FILTER,
+      "$select": PARAM_SELECT,
+    },
+  })
+)
+  .then((success) => {
+    const successValue = success.data.value;
+
+    // Array that will hold the combined observations
+    const combinedObservations = [];
+
+    successValue.forEach((dataObj) => {
+      // Each page of results will have a dataArray that holds the observations
+      const dataArrays = dataObj.dataArray;
+
+      combinedObservations.push(...dataArrays);
+    });
+    // DEBUG: Check total number of observations
+    console.log(combinedObservations.length);
+
+    return combinedObservations;
+  })
+  .catch((err) => {
+    console.log(err);
+  })
+  .then((observationArr) => {
+    const formattedObservations = formatObservationTime(observationArr);
+    console.log(formattedObservations);
+    drawLineChartAC(observationArr);
+  });