Temperatuur:
Not connected
@@ -50,20 +50,116 @@
-
-
+
+
+
-
Time until POST request to API:
Connect to port
+
Temperatuur:
Not connected
+
+
-
API data:
-
+
Luchtvochtigheid:
Not connected
+
+
+
+
+
Lichtintensiteit:
Not connected
+
+
+
+
+
+
+
+
+
+
+
Temperatuur:
Not connected
+
+
+
+
+
Luchtvochtigheid:
Not connected
+
+
+
+
+
Lichtintensiteit:
Not connected
+
+
+
+
+
+
+
+
+
+
+
Temperatuur:
Not connected
+
+
+
+
+
Luchtvochtigheid:
Not connected
+
+
+
+
+
Lichtintensiteit:
Not connected
+
+
+
+
+
+
+
+
+
+
diff --git a/web/main.js b/web/main.js
index dcb0137..d0875fe 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,26 +1,29 @@
+let data;
+let measurements;
+let date;
+let value;
+let newArrayTemp = [];
+let newArrayHumid = [];
+let newArrayLight = [];
+let timeArray = []; // Array to store time values`
+let dateArray = [1,2,3];
+let valueArray = [1,2,3,4,5];
+let newValueArray = [4,5,6];
+let myValue = 1;
+
+//const timeArray = [1,2,3,4];
+//const dateArray = [5,6,7,8];
+//const valueArray = [1,1,1,3];
+
// Make lines in the graph of the live data
Plotly.plot("liveGraph", [
{
x: timeArray, // Use timeArray as x values
- y: newArrayTemp,
+ y: valueArray,
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;
@@ -28,10 +31,13 @@ let cnt = 0;
// Update the graph every 1 ms
let interval = setInterval(function () {
var time = new Date();
+ timeArray.push(new Date());
+ valueArray.push(Math.random() * 10);
+
var update = {
x: [[time]],
- y: [[newArrayTemp], [newArrayHumid], [newArrayLight]],
+ y: [[newValueArray]],
};
var olderTime = time.setMinutes(time.getMinutes() - 1);
@@ -45,19 +51,5 @@ let interval = setInterval(function () {
};
Plotly.relayout("liveGraph", minuteView);
- apiGraph = document.getElementById("apiGraph");
- Plotly.newPlot(
- apiGraph,
- [
- {
- x: dateArray,
- y: valueArray,
- },
- ],
- {
- margin: { t: 0 },
- }
- );
-
if (cnt === 100) clearInterval(interval);
-}, 1);
+}, 1);
\ No newline at end of file
diff --git a/web/styles.css b/web/styles.css
index ac30244..9739ee8 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1,128 +1,147 @@
body {
- background-color: white;
- align-content: center;
- text-align: center;
- font-family: "inter", sans-serif;
- margin: 0;
+ background-color: white;
+ align-content: center;
+ text-align: center;
+ font-family: "inter", sans-serif;
+ margin: 0;
+}
+
+h1 {
+ opacity: 0.8;
+ color: green;
+ 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-NodeData {
+ display: flex;
+ margin-left: 10%;
+ margin-right: 10;
+ height: 40%;
+ flex-direction: column;
+ border: 1px solid red;
+ margin-bottom: 40px;
+}
+
+.nodeData {
+ display: flex;
+justify-content: center;
+ flex-direction: row;
+ border: 2px solid red;
+}
+
+.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%;
}
-
- 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
+}
+
+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;
+}
+