adds website for rpi

web/main.js

@@ -0,0 +1,63 @@
+// Make lines in the graph of the live data
+Plotly.plot("liveGraph", [
+  {
+    x: timeArray, // Use timeArray as x values
+    y: newArrayTemp,
+    mode: "lines",
+    line: { color: "#80CAF6" },
+    name: "Temperature",
+  },
+  {
+    x: timeArray, // Use timeArray as x values
+    y: newArrayHumid,
+    mode: "lines",
+    line: { color: "#FFA500" },
+    name: "Humidity",
+  },
+  {
+    x: timeArray, // Use timeArray as x values
+    y: newArrayLight,
+    mode: "lines",
+    line: { color: "#00FF00" },
+    name: "Light / 100",
+  },
+]);
+
+let cnt = 0;
+
+// Update the graph every 1 ms
+let interval = setInterval(function () {
+  var time = new Date();
+
+  var update = {
+    x: [[time]],
+    y: [[newArrayTemp], [newArrayHumid], [newArrayLight]],
+  };
+
+  var olderTime = time.setMinutes(time.getMinutes() - 1);
+  var futureTime = time.setMinutes(time.getMinutes() + 1);
+
+  var minuteView = {
+    xaxis: {
+      type: "date",
+      range: [olderTime, futureTime],
+    },
+  };
+  Plotly.relayout("liveGraph", minuteView);
+
+  apiGraph = document.getElementById("apiGraph");
+  Plotly.newPlot(
+    apiGraph,
+    [
+      {
+        x: dateArray,
+        y: valueArray,
+      },
+    ],
+    {
+      margin: { t: 0 },
+    }
+  );
+
+  if (cnt === 100) clearInterval(interval);
+}, 1);