Server now uses JS to render Graphs instead of Matplotlib.

webserver/server.py

@@ -86,6 +86,29 @@ class Sensor:
     def getReadingsTime(self):
         return self.getReadings(timetype="time")
 
+    def getChartJSData(self, limit=5, reversed=False, timetype="ts"):
+        datalist: list = [[],[]]
+        match timetype:
+            case "ts":
+                for i in range(limit if limit < len(self.ts) else len(self.ts)):
+                    datalist[0].append(self.ts[i])
+                    datalist[1].append(self.values[i])
+            case "time":
+                for i in range(limit if limit < len(self.ts) else len(self.ts)):
+                    datalist[0].append(self.timeonly[i])
+                    datalist[1].append(self.values[i])
+            case "timedate":
+                for i in range(limit if limit < len(self.ts) else len(self.ts)):
+                    datalist[0].append(self.timedate[i])
+                    datalist[1].append(self.values[i])
+            case _:
+                return "ERROR: timetype must be one of 'ts', 'time', 'timedate'"
+        if reversed:
+            datalist[0].reverse()
+            datalist[1].reverse()
+        return datalist
+
+
     def getValueByTimestamp(self, ts: int):
         c = 0
         for i in self.ts:

webserver/templates/index.html

@@ -15,6 +15,9 @@
       href="{{ url_for('static', filename='favicon.ico') }}"
     />
     <title>Sensor Data</title>
+    <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
+    </script>
     <style>
       @font-face {
         font-family: 'CaskaydiaCove Nerd Font';
@@ -36,12 +39,14 @@
           justify-content: space-between; /* Optional: space between items */
       }
       .imgbox {
-          background-color: #4CAF50; /* Background color for the boxes */
+          <!-- background-color: #4CAF50; /* Background color for the boxes */ -->
           display: flex; /* Enable flexbox for inner content */
           justify-content: right; /* Center text horizontally */
+          width: 100%;
+          max-width: 1000px;
       }
       .txtbox {
-          background-color: #C4FA05; /* Background color for the boxes */
+          <!-- background-color: #C4FA05; /* Background color for the boxes */ -->
           justify-content: left; /* Center text horizontally */
       }
       .txtbox h1 {
@@ -72,14 +77,34 @@
           {% endfor %}
         </ul>
       </div>
-      <div class = "imgbox">
+      <canvas id={{ sensor[1].getId() }} class = "imgbox"></canvas> 
-        <img
-          src="{{ url_for('static', filename= sensor[1].renderPlot()) }}"
-          alt="Graph"
-        />
-      </div>
     </div>
-    <sub style="text-align: right; float: right;"> {{ sensor[1].getHash() }} </sub>    
+    <script>
+      var sensordata = {{ sensor[1].getChartJSData(timetype="timedate")|tojson }};
+      console.log(sensordata);
+      new Chart('{{ sensor[1].getId() }}', {
+          type: 'line',
+          data: {
+              labels: sensordata[0],
+              datasets: [{
+                  label: '{{ sensor[1].getId() }}',
+                  data: sensordata[1],
+                  borderColor: 'rgba(245, 40, 145, 1)',
+                  backgroundColor: 'rgba(245, 40, 145, 0.2)',
+                  tension: 0.4,
+                  fill: true
+              }]
+          },
+          options: {
+              responsive: true,
+              scales: {
+                  y: {
+                      beginAtZero: true
+                  }
+              }
+          }
+      });
+    </script>
     {% endfor %}
   </body>
 </html>