Added webserver font

Added bigger example data
Html changes in formating and in function
Json now gets Read in a function
Matplotlib now uses the 'Agg' backend
Modified gitignore

.gitignore

@@ -1 +1 @@
-/webserver/plots/
+/webserver/static/plots/

webserver/data_big.json

@@ -0,0 +1,100 @@
+{
+  "location": "Building B - Research Wing",
+  "sensors": [
+    {
+      "id": "temp-A12",
+      "type": "temperature",
+      "unit": "°C",
+      "readings": [
+        { "ts": 1747814400, "value": 21.0 },
+        { "ts": 1747818000, "value": 21.4 },
+        { "ts": 1747821600, "value": 22.1 },
+        { "ts": 1747825200, "value": 22.6 },
+        { "ts": 1747828800, "value": 22.8 },
+        { "ts": 1747832400, "value": 23.0 }
+      ]
+    },
+    {
+      "id": "hum_B2",
+      "type": "humidity",
+      "unit": "%",
+      "readings": [
+        { "ts": 1747814400, "value": 50.1 },
+        { "ts": 1747818000, "value": 51.7 },
+        { "ts": 1747821600, "value": 49.3 },
+        { "ts": 1747825200, "value": 48.8 },
+        { "ts": 1747828800, "value": 47.6 },
+        { "ts": 1747832400, "value": 46.9 },
+        { "ts": 1747836000, "value": 45.2 },
+        { "ts": 1747839600, "value": 44.7 },
+        { "ts": 1747843200, "value": 43.5 }
+      ]
+    },
+    {
+      "id": "PRES-009",
+      "type": "pressure",
+      "unit": "hPa",
+      "readings": [
+        { "ts": 1747814400, "value": 1011.0 },
+        { "ts": 1747818000, "value": 1010.8 }
+      ]
+    },
+    {
+      "id": "sensorX04",
+      "type": "CO2",
+      "unit": "ppm",
+      "readings": [
+        { "ts": 1747814400, "value": 415 },
+        { "ts": 1747818000, "value": 420 },
+        { "ts": 1747821600, "value": 432 },
+        { "ts": 1747825200, "value": 440 },
+        { "ts": 1747828800, "value": 437 }
+      ]
+    },
+    {
+      "id": "luxSensor-1",
+      "type": "light",
+      "unit": "lux",
+      "readings": [
+        { "ts": 1747814400, "value": 300 },
+        { "ts": 1747818000, "value": 450 },
+        { "ts": 1747821600, "value": 600 },
+        { "ts": 1747825200, "value": 550 },
+        { "ts": 1747828800, "value": 500 },
+        { "ts": 1747832400, "value": 480 },
+        { "ts": 1747836000, "value": 470 },
+        { "ts": 1747839600, "value": 460 },
+        { "ts": 1747843200, "value": 455 },
+        { "ts": 1747846800, "value": 440 },
+        { "ts": 1747850400, "value": 430 },
+        { "ts": 1747854000, "value": 420 }
+      ]
+    },
+    {
+      "id": "vib_07",
+      "type": "vibration",
+      "unit": "mm/s",
+      "readings": [
+        { "ts": 1747814400, "value": 0.05 },
+        { "ts": 1747818000, "value": 0.06 },
+        { "ts": 1747821600, "value": 0.08 },
+        { "ts": 1747825200, "value": 0.07 },
+        { "ts": 1747828800, "value": 0.09 },
+        { "ts": 1747832400, "value": 0.1 },
+        { "ts": 1747836000, "value": 0.12 }
+      ]
+    },
+    {
+      "id": "motion-Z3",
+      "type": "motion",
+      "unit": "count",
+      "readings": [
+        { "ts": 1747814400, "value": 3 },
+        { "ts": 1747818000, "value": 1 },
+        { "ts": 1747821600, "value": 0 },
+        { "ts": 1747825200, "value": 2 }
+      ]
+    }
+  ]
+}
+

webserver/data_smol.json

@@ -1,3 +1,4 @@
+
 {
   "location": "Building A - Lab 3",
   "sensors": [

webserver/server.py

@@ -1,28 +1,39 @@
+# Copyright 2025 Kieler, Chiara
+#
+# Licensed under the AGPLv3.0 (the "License");
+# You may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# https://www.gnu.org/licenses/
+
+
 from datetime import datetime
-import re
+from flask import Flask, render_template
-from flask import Flask, send_from_directory, render_template
 import json
+import matplotlib
+matplotlib.use('Agg')
 import matplotlib.pyplot as plt
 
 # Global Variables:
-jsonpath = "data.json"
+jsonpath = "data_big.json"
-htmldata = ""
+sensors: dict = {}
 
 
-# class Entries:
+def readJson():
-#     def __init__(self, id: str, ts: list, value: list):
+    f = open(jsonpath)
-#         self.id = id
+    jsondata = json.load(f)  # returns JSON object as a dictionary
-#         templist: list = []
+    for i in jsondata["sensors"]:  # Iterating through the json list
-#         for i in range(len(ts)):
+        timestamps: list = []
-#             templist.append([ts[i], value[i]])
+        values: list = []
-#         self.entries: list = templist
+        # print(len(i["readings"]))
-#
+        for j in range(len(i["readings"])):
-#     def printEntries(self):
+            timestamps.append(i["readings"][j]["ts"])
-#         print(self.entries)
+            values.append(i["readings"][j]["value"])
-#
+        # print(i)
-#
+        # print(i["readings"][1])
-# tese = Entries("sensor0", [1, 2, 3, 4], [10, 20, 30, 40])
+        # print("\n")
-# tese.printEntries()
+        sensors[i["id"]] = Sensor(i["id"], i["unit"], i["type"], timestamps, values)
+    f.close()
 
 
 class Sensor:
@@ -97,113 +108,13 @@ class Sensor:
         plt.close()
         return path
 
-    # def formatLine(self, ts: int):
-    #     for i in self.ts:
-    #         if i == ts:
-    #             return f"{self.timedate}> {self.values[]}"
 
+readJson()
 
-# Json
-f = open(jsonpath)
-jsondata = json.load(f)  # returns JSON object as a dictionary
-# sensordict = dict()
-sensors: dict = {}
-for i in jsondata["sensors"]:  # Iterating through the json list
-    timestamps: list = []
-    values: list = []
-    # print(len(i["readings"]))
-    for j in range(len(i["readings"])):
-        timestamps.append(i["readings"][j]["ts"])
-        values.append(i["readings"][j]["value"])
-    # print(i)
-    # print(i["readings"][1])
 # print("\n")
-    # sensordict[i["id"]] = [i["type"], i["unit"], i["readings"]]
+# print(sensors)
-    # print(sensordict[i["id"]])
-    sensors[i["id"]] = Sensor(i["id"], i["unit"], i["type"], timestamps, values)
 
 
-f.close()
-print("\n")
-# print(sensordict)
-print(sensors)
-# print(sensors["sensor_001"].getReadings(limit=2, reversed=True, timetype="time"))
-
-# for i in sensordict:
-#     type = sensordict[i][0]
-#     unit = sensordict[i][1]
-#     readings = ""
-#     datapoints: list = []
-#     sensorrange = len(sensordict[i][2]) if len(sensordict[i][2]) < 5 else 5
-#     for j in range(sensorrange):
-#         datapoints.append([])
-#         ts = sensordict[i][2][j]["ts"]
-#         value = sensordict[i][2][j]["value"]
-#         datapoints[j].append(ts)
-#         datapoints[j].append(value)
-#         datapoints[j].append(unit)
-#     datapoints.sort(reverse=True)
-#
-#     graphdata: list = [[], []]
-#     for j in datapoints:
-#         ts = j[0]
-#         time = datetime.fromtimestamp(ts).strftime("%d.%m.%Y %H:%M.%S")
-#         timeNoDate = datetime.fromtimestamp(ts).strftime("%H:%M.%S")
-#         value = j[1]
-#         unit = j[2]
-#         # print(f"{time} {j}")
-#         readings += f"{time}> {value}{unit}<br>"
-#         graphdata[0].append(timeNoDate)
-#         graphdata[1].append(value)
-#
-#     # create_plot(i, unit, graphdata[0], graphdata[1])
-#
-#     htmldata += f"""
-#     <p>Id: {i}</p>
-#     <p>Type: {type}</p>
-#     <p>Readings:</p>
-#     <div style="margin-left: 40px;">
-#         {readings}
-#         <img src="/plots/{i}.png" alt="Graph">
-#     </div>
-#     <hr>"""
-#
-# html = f"""
-#     <!DOCTYPE html>
-#     <html lang="en">
-#     <head>
-#         <meta charset="UTF-8">
-#         <title>Sensor Data</title>
-#         <style>
-#             * {{
-#                 font-family: 'Caskaydia Cove NF';
-#                 font-size: 18px;
-#                 color: white;
-#                 background: #1C1C1C;
-#             }}
-#         </style>
-#     </head>
-#     <body>
-#         {htmldata}
-#     </body>
-#     </html>
-# """
-
-
-# class MyHandler(BaseHTTPRequestHandler):
-#     def do_GET(self):
-#         self.send_response(200)
-#         # self.send_header("Content-type", "text/html")
-#         self.end_headers()
-#         self.wfile.write(html.encode("utf-8"))
-#
-#
-# if __name__ == "__main__":
-#     server_address = ("", 8000)
-#     httpd = HTTPServer(server_address, MyHandler)
-#     print("Serving on http://localhost:8000")
-#     httpd.serve_forever()
-
 app = Flask(__name__)
 
 
@@ -212,12 +123,5 @@ def index():
     return render_template("index.html", data=sensors)
 
 
-# @app.before_request
-# def before_request():
-#     for sensor in sensors.values():
-#         print(sensor)
-#         sensor.renderPlot()
-
-
 if __name__ == "__main__":
     app.run(debug=True)

webserver/templates/index.html

@@ -1,3 +1,11 @@
+<!-- Copyright 2025 Kieler, Chiara -->
+<!---->
+<!-- Licensed under the AGPLv3.0 (the "License"); -->
+<!-- You may not use this file except in compliance with the License. -->
+<!-- You may obtain a copy of the License at -->
+<!---->
+<!-- https://www.gnu.org/licenses/ -->
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -8,27 +16,58 @@
     />
     <title>Sensor Data</title>
     <style>
+      @font-face {
+        font-family: 'CaskaydiaCove Nerd Font';
+        src: url('/static/CaskaydiaCove-Regular.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+      }
       * {
-        font-family: "Caskaydia Cove NF";
+        font-family: "CaskaydiaCove Nerd Font";
         font-size: 18px;
         color: white;
         background: #1c1c1c;
       }
+      .container {
+          display: flex; /* Enable flexbox */
+          justify-content: space-between; /* Optional: space between items */
+      }
+      .imgbox {
+          background-color: #4CAF50; /* Background color for the boxes */
+          display: flex; /* Enable flexbox for inner content */
+          justify-content: right; /* Center text horizontally */
+      }
+      .txtbox {
+          background-color: #C4FA05; /* Background color for the boxes */
+          justify-content: left; /* Center text horizontally */
+      }
     </style>
   </head>
   <body>
+    <div class = "container">
+      <div class = "txtbox">
         <h1>Sensor Readings</h1>
+      </div>
+    </div>
     <h2>{% for sensor in data.items() %}</h2>
+    <hr>
     <h2>{{ sensor[1].getId() }}[{{ sensor[1].getType() }}]</h2>
+    <h3>{{ sensor[1].renderPlot() }}</h3>
+    <div class = "container">
+      <div class = "txtbox">
         <ul>
           {% for key,value in sensor[1].getReadingsTimeDate().items() %}
           <li>{{ key }}» {{ value }}{{ sensor[1].getUnit() }}</li>
           {% endfor %}
+        </ul>
+      </div>
+      <div class = "imgbox">
         <img
           src="{{ url_for('static', filename='plots/' + sensor[1].getId() + '.png') }}"
           alt="Graph"
         />
-    </ul>
+      </div>
+    </div>
     {% endfor %}
   </body>
 </html>