formatted html

README.md

@@ -19,6 +19,10 @@ Data should be sent and received via MQTT to an ESP32. The Pi acts as a sensor g
 - **Raspberry Pi model**:
 - **Programming languages**: Python
 - **Frameworks/tools/Libraries**: (e.g., Flask, GPIO Zero)
+  - Webserver:
+    - Python Http Server
+    - Json
+  - Sensors:
 
 ## Hardware Requirements
 
@@ -30,6 +34,46 @@ Data should be sent and received via MQTT to an ESP32. The Pi acts as a sensor g
 
 ## Docs
 
+- Json format:
+
+  ```Json
+      {
+      "location": "Building A - Lab 3",
+      "sensors": [
+        {
+          "id": "sensor_001",
+          "type": "temperature",
+          "unit": "°C",
+          "readings": [
+            { "ts": 1747814400, "value": 22.5 },
+            { "ts": 1747818000, "value": 23.0 },
+            { "ts": 1747821600, "value": 23.7 }
+          ]
+        },
+        {
+          "id": "sensor_002",
+          "type": "humidity",
+          "unit": "%",
+          "readings": [
+            { "ts": 1747814400, "value": 45.2 },
+            { "ts": 1747818000, "value": 47.1 },
+            { "ts": 1747821600, "value": 46.8 }
+          ]
+        },
+        {
+          "id": "sensor_003",
+          "type": "pressure",
+          "unit": "hPa",
+          "readings": [
+            { "ts": 1747814400, "value": 1012.4 },
+            { "ts": 1747818000, "value": 1012.8 },
+            { "ts": 1747821600, "value": 1013.0 }
+          ]
+        }
+      ]
+    }
+  ```
+
 - `requirements.txt`
   This file holds the requirements for pip
 - `shell.nix`
@@ -45,20 +89,21 @@ Data should be sent and received via MQTT to an ESP32. The Pi acts as a sensor g
 
 ![A MarkDown Cheatsheet](mdHelp.png "MarkDown Cheatsheet")
 
+### Html Help
+
+![A Html Cheatsheet](htmlHelp.png "Html Cheatsheet")
+
 ## Arbeitsaufträge / Aufgabeneinteilung
 
 ### Zu Vergeben
 
 - Präsentation
-- Programme:
-  - Daten von RPI erfassen und sauber abspeichern
-  - Daten an einem Webserver anzeigen
 
 | Kieler                            | Chiara                                        |
-| ------ | ------ |
+| --------------------------------- | --------------------------------------------- |
-| Git    |        |
+| Git                               | Daten von RPI erfassen und sauber abspeichern |
 | Readme                            |                                               |
-|        |        |
+| Daten an einem Webserver anzeigen |                                               |
 
 ### Acknowledgments
 

webserver/data.json

@@ -4,7 +4,7 @@
     {
       "id": "sensor_001",
       "type": "temperature",
-      "unit": "C",
+      "unit": "°C",
       "readings": [
         { "ts": 1747814400, "value": 22.5 },
         { "ts": 1747818000, "value": 23.0 },

webserver/server.py

@@ -1,4 +1,5 @@
 from http.server import BaseHTTPRequestHandler, HTTPServer
+from datetime import datetime
 import json
 
 # Opening JSON file
@@ -7,36 +8,57 @@ f = open("data.json")
 # returns JSON object as a dictionary
 data = json.load(f)
 sensors = dict()
-sensorid = None
-sensortype = None
-sensorunit = None
-sensorreadings = None
-readings = None
 
 # Iterating through the json list
 for i in data["sensors"]:
-    sensorid = i["id"]
+    sensors[i["id"]] = [i["type"], i["unit"], i["readings"]]
-    sensors[sensorid] = [i["type"], i["unit"], i["readings"]]
-    # if i["type"] == "temperature":
-    #     readings = i["readings"]
-
 
 # Closing file
 f.close()
 
-html = ""
+htmldata = ""
 
 for i in sensors:
     type = sensors[i][0]
     unit = sensors[i][1]
-    readings = f"{sensors[i][2][0]["ts"]}: {sensors[i][2][0]["value"]} {unit}"
+    readings = ""
-    html += f"""
+    sensorrange = len(sensors[i][2]) if len(sensors[i][2]) < 5 else 4
+    for j in range(sensorrange):
+        ts = sensors[i][2][j]["ts"]
+        time = datetime.fromtimestamp(ts).strftime("%d.%m.%Y %H:%M.%S")
+        value = sensors[i][2][j]["value"]
+        readings += f"{time}: {value}{unit}<br>"
+    htmldata += f"""
     <p>Id: {i}</p>
     <p>Type: {type}</p>
-    <p>Readings: {readings}</p>
+    <p>Readings:</p>
+    <div style="margin-left: 40px;">
+        {readings}
+    </div>
     <p>---------------------------------------------</p>
     """
 
+html = f"""
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Sensor Data</title>
+        <style>
+            * {{
+                font-family: 'Times New Roman';
+                font-size: 18px;
+                color: white;
+                background: #1C1C1C;
+            }}
+        </style>
+    </head>
+    <body>
+        {htmldata}
+    </body>
+    </html>
+"""
+
 
 class MyHandler(BaseHTTPRequestHandler):
     def do_GET(self):