From e8ab30fbb100e503d6fe329d1657486e707b31b7 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 14 Feb 2024 16:58:00 +0100 Subject: [PATCH] adds website for rpi --- web/index.html | 70 +++++++++++++++++++++++++++ web/main.js | 63 ++++++++++++++++++++++++ web/styles.css | 128 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 261 insertions(+) create mode 100644 web/index.html create mode 100644 web/main.js create mode 100644 web/styles.css diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..8f1e261 --- /dev/null +++ b/web/index.html @@ -0,0 +1,70 @@ + + + + + + + + Climate-Measuring-Box + + + + + + +
+ +
+ + +
+
+
Temperatuur:

Not connected

+
+
+

Not connected

+
+
+
+
Luchtvochtigheid:

Not connected

+
+
+

Not connected

+
+
+
+
Lichtintensiteit:

Not connected

+
+
+

Not connected

+
+
+
+ + +
+
+

Live graph:

+
+
+
+
Time until POST request to API:

Connect to port

+
+
+

API data:

+
+
+
+ + + + + diff --git a/web/main.js b/web/main.js new file mode 100644 index 0000000..dcb0137 --- /dev/null +++ b/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); diff --git a/web/styles.css b/web/styles.css new file mode 100644 index 0000000..ac30244 --- /dev/null +++ b/web/styles.css @@ -0,0 +1,128 @@ +body { + background-color: white; + align-content: center; + text-align: center; + font-family: "inter", sans-serif; + margin: 0; + } + + h1 { + opacity: 0.8; + color: black; + margin: auto; + width: 50%; + } + + h2 { + text-align: center; + color: black; + opacity: 0.8; + } + + p1 { + color: solid white; + } + + .liveGraph{ + width: 90%; + height: 100%; + + } + + .divCnt{ + text-align: begin; + } + + .apiGraph{ + height: 100%; + width: 90%; + } + + .statusElement{ + display:inline-block; + border: solid #1f82d3 2px; + border-radius: 10px; + width: 90%; + } + + .statusText{ + font-size: 20px; + } + + .flex-LiveData { + display: flex; + align-content: begin; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-evenly; + gap: 5px; + padding: 10px; + } + + .flex-LiveData > div { + border: solid #1f82d3 2px; + padding: 15px 0; + font-size: 30px; + border-radius: 10px; + height: fit-content; + width: 30%; + } + + .flex-graph { + display: flex; + align-content: begin; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 5px; + padding: 10px; + + } + + .flex-graph > div { + position: relative; + border: solid #1f82d3 2px; + padding: 15px 0; + font-size: 30px; + border-radius: 10px; + flex-basis: 95%; + } + + @media screen and (max-width: 850px) { + .flex-LiveData>div { + width: 100%; + } + } + + ul { + margin: 0; + padding: 20px 0; + } + + .navbar { + text-align: center; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + a{ + padding: 10px; + color: black; + text-decoration: none; + font-weight: bold; + } + + li{ + display: inline-block; + padding: 10px; + margin: 0 5px; + border-radius: 5px; + transition: 0.3s; + } + .navbar a:hover { + background-color: #196bad; + } + + img { + max-width: 100%; + height: auto; + } + \ No newline at end of file