From 28f5153cee19170890d131f7b9fa25bcfafe13f9 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Wed, 27 Mar 2024 20:05:52 +0100 Subject: [PATCH 01/36] Made the box look good --- web/new website/gauge.js | 23 +---- web/new website/index.html | 50 +++++----- web/new website/style.css | 193 ++++++++++++++++++++++--------------- 3 files changed, 145 insertions(+), 121 deletions(-) diff --git a/web/new website/gauge.js b/web/new website/gauge.js index 5319b5c..5a6e9cc 100644 --- a/web/new website/gauge.js +++ b/web/new website/gauge.js @@ -1,22 +1,9 @@ -// JavaScript -function updateGauge(value) { - const gaugeValue = document.getElementById('gaugeValue'); - const gaugeText = document.getElementById('gaugeText'); +function updateGauge(gaugeId, value) { + const needle = document.getElementById(`needle${gaugeId}`); + const gaugeText = document.getElementById(`gaugeText${gaugeId}`); const maxGaugeValue = 100; // Maximum value the gauge can display const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) - gaugeValue.style.transform = `rotate(${rotationDegree}deg)`; + needle.style.transform = `rotate(${rotationDegree}deg)`; gaugeText.textContent = value; // Update the text - - // Change color based on value - if (value <= 40) { - gaugeValue.style.backgroundColor = 'green'; - } else if (value <= 80) { - gaugeValue.style.backgroundColor = 'orange'; - } else { - gaugeValue.style.backgroundColor = 'red'; - } -} - -// Example usage: -updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100), changes color to orange, and updates the text to "50" \ No newline at end of file +} \ No newline at end of file diff --git a/web/new website/index.html b/web/new website/index.html index e323269..e90a2df 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -5,56 +5,56 @@ - bruh + Gauges -

Gauge Group

-
+
- -
-
0
+
+
+
0
-
-
- -
-
0
+
+
+ +
+
+
0
-
-
- -
-
0
+
+
+ +
+
+
0
-
-
- -
-
0
+
+
+ +
+
+
0
+ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/web/new website/style.css b/web/new website/style.css index ff6f00c..df50097 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -1,88 +1,125 @@ * { - margin: 0; - padding: 0; box-sizing: border-box; } - -.speedometer-scale { - width: 8px; - height: 280px; - background-color: black; -} - -/* CSS */ -.gaugeContainer { - width: 30vw; - height: 300pxx; - border: 3px solid black; - fill: grey; - margin: 50px auto; - position: relative; - overflow: hidden; /* Hide the first half of the gauge */ -} - -.gaugeValue { - width: 10px; - height: 150px; - position: absolute; - bottom: 50%; - left: 50%; - transform-origin: bottom; - transition: transform 0.3s ease, background-color 0.3s ease; -} - -.gaugeText { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - text-align: center; - z-index: 2; /* Bring the value to the front */ -} - -.gaugeImage { - display: block; - margin-left: auto; - margin-right: auto; - width: auto; - z-index: 2; /* Bring the value to the front */ -} - -.gaugeContainer { - width: 80%; /* Adjust this value as necessary */ - height: 80%; /* Adjust this value as necessary */ - border: 3px solid black; - fill: grey; - margin: 10% auto; - position: relative; - overflow: hidden; -} - -.Node { - display: flex; /* Use Flexbox */ - justify-content: space-between; /* Distribute the items evenly along the horizontal line */ - flex-wrap: wrap; /* Allow the items to wrap onto multiple lines if necessary */ -} - -.Sensorvalues { - flex: 1 0 20%; /* Allow the items to grow and shrink as necessary, and set the base width to 20% */ - margin: 10px; /* Add some margin around the items */ - background-color: #333; /* Dark background color */ - color: #fff; /* Light text color */ - padding: 20px; /* Some padding around the gauges */ - border-radius: 10px; /* Round borders */ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; } .gaugeGroup { - background-color: #333; /* Dark background color */ - color: #fff; /* Light text color */ - padding: 20px; /* Some padding around the gauges */ - margin-bottom: 20px; /* Some margin below the group */ + width: 70vw; + height: 20vh; + display: flex; + flex-direction: column; /* Keep as column */ + justify-content: flex-start; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; +} +.groupTitle { + width: 100%; + text-align: center; + font-size: 24px; } -.groupTitle { - text-align: center; /* Center the title */ - margin-bottom: 20px; /* Some margin below the title */ +.Node { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 100%; +} + +.Sensorvalues { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 20%; + height: 100%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 5px; + border-radius: 10px; + text-align: center; + position: relative; + padding-bottom: 50px; /* Increase bottom padding */ + +} + +.gaugeContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; /* Increase the height from 70% to 80% */ + position: relative; + overflow: visible; +} + +.gaugeImage { + width: 100%; + height: auto; + max-height: 100%; + object-fit: contain; + position: absolute; /* Make the image position absolute */ + top: 0; + left: 0; + z-index: 1; /* Make the image display below the needle */ +} + +.gaugeValue, .gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; +} + +.gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; + position: absolute; + bottom: -30px; /* Adjust this value to move the text further down */ + +} + + +.valueContainer { + display: flex; + justify-content: center; + margin-top: 10px; +} + +#valueText { + font-size: 20px; +} + +.needle { + position: absolute; + margin-bottom: 2%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 70%; + background-color: black; + transform-origin: bottom; + z-index: 3; /* Make the needle display above the image */ +} + +.contentContainer { + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + height: 100%; } \ No newline at end of file From f5ebaa676eb24ddd9fad98c4f7fb7eb2e8d659da Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Wed, 27 Mar 2024 20:48:24 +0100 Subject: [PATCH 02/36] GaugeGroup class creation --- web/new website/GaugGroup.js | 41 ++++++++++++++++++++++++++++++++++++ web/new website/gauge.js | 9 -------- 2 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 web/new website/GaugGroup.js delete mode 100644 web/new website/gauge.js diff --git a/web/new website/GaugGroup.js b/web/new website/GaugGroup.js new file mode 100644 index 0000000..47434ef --- /dev/null +++ b/web/new website/GaugGroup.js @@ -0,0 +1,41 @@ +class GaugeGroup { + constructor(nodeId, gaugesCount) { + this.nodeId = nodeId; + this.gaugesCount = gaugesCount; + this.maxGaugeValue = 100; // Maximum value the gauge can display + + // Create a new div element + this.element = document.createElement("div"); + this.element.className = "gaugeGroup"; + + // Set the HTML of the new div + this.element.innerHTML = ` +

Gauge Group for Node ${this.nodeId}

+
+ ${Array(this.gaugesCount).fill().map((_, i) => ` +
+
+ +
+
+
0
+
+
+
+ `).join('')} +
+ `; + + // Append the new div to the body + document.body.appendChild(this.element); + } + + updateGauge(gaugeId, value) { + const needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`); + const gaugeText = document.getElementById(`gaugeText${this.nodeId}_${gaugeId}`); + const rotationDegree = ((value / this.maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) + + needle.style.transform = `rotate(${rotationDegree}deg)`; + gaugeText.textContent = value; // Update the text + } +} \ No newline at end of file diff --git a/web/new website/gauge.js b/web/new website/gauge.js deleted file mode 100644 index 5a6e9cc..0000000 --- a/web/new website/gauge.js +++ /dev/null @@ -1,9 +0,0 @@ -function updateGauge(gaugeId, value) { - const needle = document.getElementById(`needle${gaugeId}`); - const gaugeText = document.getElementById(`gaugeText${gaugeId}`); - const maxGaugeValue = 100; // Maximum value the gauge can display - const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) - - needle.style.transform = `rotate(${rotationDegree}deg)`; - gaugeText.textContent = value; // Update the text -} \ No newline at end of file From e920298df8c267f395c6d05984fa92e79520269c Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Wed, 27 Mar 2024 20:48:33 +0100 Subject: [PATCH 03/36] class file change --- web/new website/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/new website/index.html b/web/new website/index.html index e90a2df..d5029a5 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -55,6 +55,6 @@
- + \ No newline at end of file From d54c0201441dda79a423de8512a294e5144de59f Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Wed, 27 Mar 2024 20:48:40 +0100 Subject: [PATCH 04/36] redid styling --- web/new website/style.css | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/web/new website/style.css b/web/new website/style.css index df50097..7598d8e 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -9,10 +9,13 @@ body { height: 100vh; margin: 0; background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; + } .gaugeGroup { - width: 70vw; + width: 98vw; height: 20vh; display: flex; flex-direction: column; /* Keep as column */ @@ -22,6 +25,8 @@ body { padding: 10px; border-radius: 50px; border: 2px solid #333; + clear: both; + margin-bottom: 10px; } .groupTitle { width: 100%; @@ -44,7 +49,7 @@ body { justify-content: space-around; flex-wrap: wrap; width: 20%; - height: 100%; + height: 110%; background-color: #ddd; color: #333; padding: 10px; @@ -70,12 +75,13 @@ body { .gaugeImage { width: 100%; height: auto; - max-height: 100%; + max-height: 180%; object-fit: contain; position: absolute; /* Make the image position absolute */ top: 0; left: 0; z-index: 1; /* Make the image display below the needle */ + bottom: 0; } .gaugeValue, .gaugeText { @@ -91,7 +97,7 @@ body { font-size: 24px; z-index: 2; position: absolute; - bottom: -30px; /* Adjust this value to move the text further down */ + bottom: -50px; /* Adjust this value to move the text further down */ } @@ -108,10 +114,10 @@ body { .needle { position: absolute; - margin-bottom: 2%; /* Lower the needle to the bottom */ + bottom: -40%; /* Lower the needle to the bottom */ left: 50%; width: 2px; - height: 70%; + height: 110%; background-color: black; transform-origin: bottom; z-index: 3; /* Make the needle display above the image */ @@ -122,4 +128,5 @@ body { flex-direction: row; /* Layout children side by side */ width: 100%; height: 100%; -} \ No newline at end of file +} + From cbf6cf148434294a0ba65b5d39d78518ec924f70 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Wed, 27 Mar 2024 20:52:09 +0100 Subject: [PATCH 05/36] background color --- web/new website/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/new website/style.css b/web/new website/style.css index 7598d8e..a6830f0 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -48,7 +48,7 @@ body { align-items: center; justify-content: space-around; flex-wrap: wrap; - width: 20%; + width: 15%; height: 110%; background-color: #ddd; color: #333; @@ -82,6 +82,7 @@ body { left: 0; z-index: 1; /* Make the image display below the needle */ bottom: 0; + margin-bottom: 10px; } .gaugeValue, .gaugeText { From f3cd6bd01174c14514d7f0b2b1c20e423465a4c9 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Wed, 27 Mar 2024 22:38:02 +0100 Subject: [PATCH 06/36] Added font --- web/new website/index.html | 3 +++ web/new website/style.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/web/new website/index.html b/web/new website/index.html index d5029a5..9ee49e7 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -6,6 +6,9 @@ Gauges + + + diff --git a/web/new website/style.css b/web/new website/style.css index a6830f0..bb5fe4b 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -1,5 +1,8 @@ * { box-sizing: border-box; + font-family: "Roboto", sans-serif; + + } body { From 3ecb87a9e4890d601fb425ef2237d40c459953f9 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 00:59:11 +0100 Subject: [PATCH 07/36] fixed it so you can set types as text under the gauges --- web/new website/GaugGroup.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/web/new website/GaugGroup.js b/web/new website/GaugGroup.js index 47434ef..eb795cf 100644 --- a/web/new website/GaugGroup.js +++ b/web/new website/GaugGroup.js @@ -1,8 +1,9 @@ class GaugeGroup { - constructor(nodeId, gaugesCount) { + constructor(nodeId, gaugesCount, maxGaugeValues, dataTypes) { this.nodeId = nodeId; this.gaugesCount = gaugesCount; - this.maxGaugeValue = 100; // Maximum value the gauge can display + this.maxGaugeValues = maxGaugeValues; // Maximum value the gauge can display + this.dataTypes = dataTypes; // Array of data type names for each gauge // Create a new div element this.element = document.createElement("div"); @@ -31,11 +32,16 @@ class GaugeGroup { } updateGauge(gaugeId, value) { + if (!this.maxGaugeValues || gaugeId - 1 < 0 || gaugeId - 1 >= this.maxGaugeValues.length) { + console.error('Invalid gaugeId or maxGaugeValues:', gaugeId, this.maxGaugeValues); + return; + } const needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`); const gaugeText = document.getElementById(`gaugeText${this.nodeId}_${gaugeId}`); - const rotationDegree = ((value / this.maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) + const maxGaugeValue = this.maxGaugeValues[gaugeId - 1]; // Get the maximum value for this gauge + const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) needle.style.transform = `rotate(${rotationDegree}deg)`; - gaugeText.textContent = value; // Update the text + gaugeText.textContent = `${this.dataTypes[gaugeId - 1]}: ${value}`; // Update the text with data type } } \ No newline at end of file From 9ddcfe88f5d28f1bf925f07b34506e8c4ec8d09e Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 00:59:18 +0100 Subject: [PATCH 08/36] Added navbar --- web/new website/index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/web/new website/index.html b/web/new website/index.html index 9ee49e7..df8b57f 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -11,6 +11,21 @@ + + +

Gauge Group

@@ -58,6 +73,7 @@
+ \ No newline at end of file From 883460cdaa95b6fd3bda0400f37d5570ab680e93 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 00:59:30 +0100 Subject: [PATCH 09/36] better scaling + styling --- web/new website/style.css | 42 ++++++++++++++++++++++++++++++++++----- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/web/new website/style.css b/web/new website/style.css index bb5fe4b..22e25b4 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -30,6 +30,8 @@ body { border: 2px solid #333; clear: both; margin-bottom: 10px; + position: relative; + top: -20vh; } .groupTitle { width: 100%; @@ -56,11 +58,11 @@ body { background-color: #ddd; color: #333; padding: 10px; - margin: 5px; + margin: 10px; border-radius: 10px; text-align: center; position: relative; - padding-bottom: 50px; /* Increase bottom padding */ + padding-bottom: 6vh; /* Increase bottom padding */ } @@ -78,7 +80,7 @@ body { .gaugeImage { width: 100%; height: auto; - max-height: 180%; + max-height: 200%; object-fit: contain; position: absolute; /* Make the image position absolute */ top: 0; @@ -98,10 +100,10 @@ body { .gaugeText { width: 100%; text-align: center; - font-size: 24px; + font-size: 1.4vw; z-index: 2; position: absolute; - bottom: -50px; /* Adjust this value to move the text further down */ + bottom: -3.2vw; /* Adjust this value to move the text further down */ } @@ -134,3 +136,33 @@ body { height: 100%; } +.navbar { + background-color: #333; + height: 60px; + display: flex; + align-items: center; + padding: 0 20px; + position: fixed; /* Fix the navbar at the top of the page */ + top: 0; /* Position it at the very top */ + width: 100%; /* Make it span the full width of the page */ + z-index: 1000; /* Make sure it's above all other elements */ +} + +.navbar-nav { + list-style: none; + display: flex; + align-items: center; + justify-content: center; /* Center the links horizontally */ + height: 100%; + width: 100%; /* Make it span the full width of the navbar */ +} + +.nav-item { + margin-right: 20px; +} + +.nav-link { + color: #fff; + text-decoration: none; + font-size: 18px; +} \ No newline at end of file From 627af72f0f4a5cd1650531586dc3d07fa5ac4ebd Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 00:59:43 +0100 Subject: [PATCH 10/36] Added websocket script and modified it to work with the class --- web/new website/main.js | 115 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 web/new website/main.js diff --git a/web/new website/main.js b/web/new website/main.js new file mode 100644 index 0000000..b877136 --- /dev/null +++ b/web/new website/main.js @@ -0,0 +1,115 @@ +// Description: Main JavaScript file for the web application. +// arrays and stuff +const sensorData = {}; +let liveGraphs = []; +let nodeArray = []; +let nodeDict = {}; + +// letiables +let intervalDelay = 5000; +let amountOfNodes = 3; + +const socket = new WebSocket("ws://145.92.8.114/ws"); +function openConnection() { + // Open connection + socket.addEventListener("open", (event) => { + console.log("Connected to the WebSocket server"); + }); + + // Error handling + socket.addEventListener('error', (event) => { + console.error('WebSocket error:', event); + // Attempt to reconnect + setTimeout(openConnection, 1000); // Retry after 1 second + }); + + // Message handling + socket.addEventListener("message", (event) => { + try { + const jsonData = JSON.parse(event.data); + // Use the parsed JSON data as needed + handleIncomingData(jsonData); + + } catch (error) { + console.error("Error parsing JSON:", error); + } + }); + + // Close handling + socket.addEventListener('close', (event) => { + console.log('Connection closed'); + // Attempt to reconnect + setTimeout(openConnection, 1000); // Retry after 1 second + }); + console.log("Connected to the WebSocket server"); +} + +openConnection(); + +function handleIncomingData(data) { + if (!data.node || !data.Temp || !data.Humi || !data.eCO2 || !data.TVOC) { + console.error('Invalid data received:', data); + return; + } + + nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); + + nodeNumber = nodeDict[data.node]; + temperature = data.Temp; + humidity = data.Humi; + CO2 = data.eCO2; + TVOC = data.TVOC; + + // Update the gauges with the new data + sensorData[data.node].updateGauge(1, temperature); + sensorData[data.node].updateGauge(2, humidity); + sensorData[data.node].updateGauge(3, CO2); + sensorData[data.node].updateGauge(4, TVOC); +} + +function nodeAdressHandler(node, dataTypes) { + if (!nodeArray.includes(node)) { + nodeArray.push(node); + nodeDict[node] = nodeArray.length; + + // Define the maximum values for each data type + let maxGaugeValues = dataTypes.map(dataType => { + switch (dataType) { + case 'Temp': return 50; + case 'Humi': return 100; + case 'eCO2': return 3000; + case 'TVOC': return 2200; + default: return 100; + } + }); + + // Create a new GaugeGroup for the node + let gaugeGroup = new GaugeGroup(node, dataTypes.length, maxGaugeValues, dataTypes); + + // Store the GaugeGroup in the sensorData object for later use + sensorData[node] = gaugeGroup; + } +} + +function createGauge(node, dataType) { + // Create a new gauge here + let gauge = new GaugeGroup(node, dataType); // Assuming Gauge is the name of the class + sensorData[node][dataType] = gauge; // Store the gauge in the sensorData object for later use +} + + +//function for making the html elements for the following html code +function nodeData(data) { + let nodeData = document.createElement("div"); + nodeData.innerHTML = data; + // nodeData.setAttribute("id", "node" + node); + document.body.appendChild(nodeData); + // console.log("Hello World"); +} + + +function updateGauge(nodeNumber, dataType, value) { + // Update the gauge here + let gauge = sensorData[nodeNumber][dataType]; // Get the gauge from the sensorData object + gauge.update(value); // Assuming the Gauge class has an update method + } \ No newline at end of file From 778c47fa68506fde0414404136e4235325655b58 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 01:03:42 +0100 Subject: [PATCH 11/36] Added pages --- docs/.pages | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/.pages b/docs/.pages index 346a632..0e931bc 100644 --- a/docs/.pages +++ b/docs/.pages @@ -28,6 +28,7 @@ nav: - Infrastructure: brainstorm/UML-infrastructure - Taskflow: brainstorm/Taskflow - Design: Sp1SchetsProject/FirstDesign + - Interview facility manager: brainstorm/bebouwBeheer.md - šŸ–Øļø Software: - Dev page: brainstorm/SoftwareDocumentatie/Dev_page \ No newline at end of file From ba96a81d3fc23fa27f88a9fad16649d3ddda0335 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 01:08:09 +0100 Subject: [PATCH 12/36] Rephrasing --- docs/brainstorm/bebouwBeheer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/brainstorm/bebouwBeheer.md b/docs/brainstorm/bebouwBeheer.md index 45891bc..e69a5e4 100644 --- a/docs/brainstorm/bebouwBeheer.md +++ b/docs/brainstorm/bebouwBeheer.md @@ -9,4 +9,4 @@ ## Feedback: -building management had some good feedback points about the page itself, about the idea, and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the building management people are technically active, to put it that way. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make it vandalizing students proof. \ No newline at end of file +Facility management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the facility management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. \ No newline at end of file From e5348f0ffa5adba7c895d8779e8bede814ed226f Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 01:10:44 +0100 Subject: [PATCH 13/36] conclusion --- docs/brainstorm/bebouwBeheer.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/brainstorm/bebouwBeheer.md b/docs/brainstorm/bebouwBeheer.md index e69a5e4..376fcbe 100644 --- a/docs/brainstorm/bebouwBeheer.md +++ b/docs/brainstorm/bebouwBeheer.md @@ -9,4 +9,7 @@ ## Feedback: -Facility management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the facility management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. \ No newline at end of file +Facility management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the facility management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. + +## Conclusion +Facility management thought it was a good and interesting project. They wanna actively help us with the data they are already measuring and they had some good feedback points about the website and the node itself. They also had some good questions about the node itself that we need to look into. For example how are we are going to make sure it doesnt get vandalized. Furthermore they had good feedback on the website and they preffered our figma design over our current design and we needed to make the website dummy proof so everyone can use it even without technical knowledge. \ No newline at end of file From f788580ef4ca2bd97faf5c61c562dfe75b0021bd Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 01:14:49 +0100 Subject: [PATCH 14/36] added answers --- docs/brainstorm/bebouwBeheer.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/brainstorm/bebouwBeheer.md b/docs/brainstorm/bebouwBeheer.md index 376fcbe..329db3e 100644 --- a/docs/brainstorm/bebouwBeheer.md +++ b/docs/brainstorm/bebouwBeheer.md @@ -7,6 +7,12 @@ 3. Do they think they can work with the incomming feedback from the enquete? 4. Design of the node? (plastic or wood) +## Answers +1. The current page is a bit too techincal and a bit unorganized. you couldnt tell that there is a new node added to the page. They also said that we needed to point out that there is another node connected for example start with half the ui of that specific node at the bottom of the screen. +2. They expect a page that is easy to use and dummy proof. +3. They think they can work with the incomming feedback from the enquete. And they thought it was a good idea to measure things that sensors cant measure for example peoples opinions. +4. plastic is better because it is easier to clean and it is more durable. It also looks nicer on the wall, it blends in better. + ## Feedback: Facility management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the facility management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. From e7597d8d1f6ede1b6bed68e5987c99e002e294aa Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 01:16:15 +0100 Subject: [PATCH 15/36] name change --- docs/brainstorm/{bebouwBeheer.md => gebouwBeheer.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename docs/brainstorm/{bebouwBeheer.md => gebouwBeheer.md} (99%) diff --git a/docs/brainstorm/bebouwBeheer.md b/docs/brainstorm/gebouwBeheer.md similarity index 99% rename from docs/brainstorm/bebouwBeheer.md rename to docs/brainstorm/gebouwBeheer.md index 329db3e..9eeb254 100644 --- a/docs/brainstorm/bebouwBeheer.md +++ b/docs/brainstorm/gebouwBeheer.md @@ -18,4 +18,4 @@ Facility management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the facility management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. ## Conclusion -Facility management thought it was a good and interesting project. They wanna actively help us with the data they are already measuring and they had some good feedback points about the website and the node itself. They also had some good questions about the node itself that we need to look into. For example how are we are going to make sure it doesnt get vandalized. Furthermore they had good feedback on the website and they preffered our figma design over our current design and we needed to make the website dummy proof so everyone can use it even without technical knowledge. \ No newline at end of file +Facility management thought it was a good and interesting project. They wanna actively help us with the data they are already measuring and they had some good feedback points about the website and the node itself. They also had some good questions about the node itself that we need to look into. For example how are we are going to make sure it doesnt get vandalized. Furthermore they had good feedback on the website and they preffered our figma design over our current design and we needed to make the website dummy proof so everyone can use it even without technical knowledge. From c6f3c7c0186e839b57759d69018c9422d56ced51 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 13:32:08 +0100 Subject: [PATCH 16/36] fixed screen code + added some documentation on our choices --- .../Screen-code-full/displayText.cpp | 66 ++++++++++++++----- .../Screen-code-full/displayText.h | 2 +- docs/node-documentation/TFT-screen.md | 6 ++ 3 files changed, 55 insertions(+), 19 deletions(-) diff --git a/arduino/Screen code/Screen-code-full/displayText.cpp b/arduino/Screen code/Screen-code-full/displayText.cpp index 6c12cab..88dfd70 100644 --- a/arduino/Screen code/Screen-code-full/displayText.cpp +++ b/arduino/Screen code/Screen-code-full/displayText.cpp @@ -16,7 +16,7 @@ void DisplayText::writeText(char* text, int size, int posX, int posY, int screen // } tft.setCursor(posX, posY); tft.setTextSize(size); - printWordsFull(text); + printWordsFull(text, bottom); delay(screenTime); } @@ -39,38 +39,68 @@ int DisplayText::centerText(char* text) { // } //attempt to write the text out in full (wip) -void DisplayText::printWordsFull(char* text) { - const int screenWidth = 320; // replace with your TFT display width - const int lineHeight = 22; // replace with your text line height - - char* word = strtok(text, " "); +void DisplayText::printWordsFull(char* text, bool bottom) { + const int screenWidth = 480; // replace with your TFT display width + const int lineHeight = 30; // replace with your text line height + //the double copy is needed so it doesnt alter the original text + char* newtext1 = strdup(text); // Create a copy of the string for the first strtok_r + char* newtext2 = strdup(text); // Create a second copy for the second strtok_r + char* saveptr1, *saveptr2; + char* word = strtok_r(newtext1, " ", &saveptr1); char line[100] = ""; int lineCount = 0; + int lineWidth = 0; - while (word != NULL) { - char tempLine[100]; - strcpy(tempLine, line); - strcat(tempLine, word); - strcat(tempLine, " "); - + // Calculate total number of lines + int totalLines = 0; + char* tempWord = strtok_r(newtext2, " ", &saveptr2); + while (tempWord != NULL) { int16_t x1, y1; uint16_t w, h; - tft.getTextBounds(tempLine, 0, 0, &x1, &y1, &w, &h); + tft.getTextBounds(tempWord, 0, 0, &x1, &y1, &w, &h); + if (lineWidth + w > screenWidth && strlen(line) > 0) { + //if the line width is greater than the screen width, then we need to add a new line + totalLines++; + lineWidth = w; + //otherwise we just add the width of the word to the line width + } else { + lineWidth += w; + } + tempWord = strtok_r(NULL, " ", &saveptr2); + } + totalLines++; // Add one for the last line - if (w > screenWidth && strlen(line) > 0) { - tft.setCursor(0, lineHeight * lineCount); + // Reset variables for actual printing + strcpy(line, ""); + lineWidth = 0; + + while (word != NULL) { + int16_t x1, y1; + uint16_t w, h; + tft.getTextBounds(word, 0, 0, &x1, &y1, &w, &h); + + if (lineWidth + w > screenWidth && strlen(line) > 0) { + int y = bottom ? tft.height() - lineHeight * (totalLines - lineCount) : lineHeight * lineCount; + tft.setCursor(0, y); tft.println(line); lineCount++; strcpy(line, word); strcat(line, " "); + lineWidth = w; } else { - strcpy(line, tempLine); + strcat(line, word); + strcat(line, " "); + lineWidth += w; } - word = strtok(NULL, " "); + word = strtok_r(NULL, " ", &saveptr1); } // print the last line - tft.setCursor(0, lineHeight * lineCount); + int y = bottom ? tft.height() - lineHeight * (totalLines - lineCount) : lineHeight * lineCount; + tft.setCursor(0, y); tft.println(line); + + free(newtext1); // Free the memory allocated by strdup + free(newtext2); // Free the memory allocated by strdup } \ No newline at end of file diff --git a/arduino/Screen code/Screen-code-full/displayText.h b/arduino/Screen code/Screen-code-full/displayText.h index a29b070..9888068 100644 --- a/arduino/Screen code/Screen-code-full/displayText.h +++ b/arduino/Screen code/Screen-code-full/displayText.h @@ -9,7 +9,7 @@ class DisplayText { Adafruit_ST7796S_kbv& tft; int centerText(char* text); // int bottomText(char* text); - void printWordsFull(char* text); + void printWordsFull(char* text, bool bottom); public: DisplayText(Adafruit_ST7796S_kbv& tftDisplay); diff --git a/docs/node-documentation/TFT-screen.md b/docs/node-documentation/TFT-screen.md index 1b4c733..02ab967 100644 --- a/docs/node-documentation/TFT-screen.md +++ b/docs/node-documentation/TFT-screen.md @@ -99,6 +99,12 @@ class Adafruit_ST7796S_kbv{ } ``` + +## Why did we choose for this screen? + +We chose the screen too fast without going over all the functions and researching what we actually needed. For example we aren't using the touchscreen function of the screen so we could've gotten a different screen without touchscreen. We've attempted to use a screen for the raspberry pi with some pin headers on it but we couldn't get it to work with the esp32. We wanted to have a bigger screen than the small oled screens we already have because it isn't nice to read from and you need to get up close to see what it displays. With a bigger screen thats less of a issue. After the purchase we did some more research for screens but the bottomline was this was the best one we could get because there aren't screens that are this big without touchscreen. + + ## Sources * https://www.tinytronics.nl/en/displays/tft/4-inch-tft-display-320*480-pixels-with-touchscreen-spi-st7796s Source for Driver * https://github.com/prenticedavid/Adafruit_ST7796S_kbv Download link for the library From 1c13d20b492a168ddb70ee949c53a0f35036fa22 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 13:32:22 +0100 Subject: [PATCH 17/36] added location and nodename --- web/new website/GaugGroup.js | 6 +-- web/new website/main.js | 98 ++++++++++++++++++++---------------- 2 files changed, 59 insertions(+), 45 deletions(-) diff --git a/web/new website/GaugGroup.js b/web/new website/GaugGroup.js index eb795cf..fc214fc 100644 --- a/web/new website/GaugGroup.js +++ b/web/new website/GaugGroup.js @@ -1,17 +1,17 @@ class GaugeGroup { - constructor(nodeId, gaugesCount, maxGaugeValues, dataTypes) { + constructor(nodeId, Location, gaugesCount, maxGaugeValues, dataTypes) { this.nodeId = nodeId; this.gaugesCount = gaugesCount; this.maxGaugeValues = maxGaugeValues; // Maximum value the gauge can display this.dataTypes = dataTypes; // Array of data type names for each gauge - + this.location = Location; // Create a new div element this.element = document.createElement("div"); this.element.className = "gaugeGroup"; // Set the HTML of the new div this.element.innerHTML = ` -

Gauge Group for Node ${this.nodeId}

+

${this.nodeId} - ${this.location}

${Array(this.gaugesCount).fill().map((_, i) => `
diff --git a/web/new website/main.js b/web/new website/main.js index b877136..e3e855c 100644 --- a/web/new website/main.js +++ b/web/new website/main.js @@ -46,49 +46,52 @@ function openConnection() { openConnection(); -function handleIncomingData(data) { - if (!data.node || !data.Temp || !data.Humi || !data.eCO2 || !data.TVOC) { - console.error('Invalid data received:', data); - return; - } - - nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); - - nodeNumber = nodeDict[data.node]; - temperature = data.Temp; - humidity = data.Humi; - CO2 = data.eCO2; - TVOC = data.TVOC; - - // Update the gauges with the new data - sensorData[data.node].updateGauge(1, temperature); - sensorData[data.node].updateGauge(2, humidity); - sensorData[data.node].updateGauge(3, CO2); - sensorData[data.node].updateGauge(4, TVOC); +async function handleIncomingData(data) { + if (!data.node || !data.Temp || !data.Humi || !data.eCO2 || !data.TVOC) { + console.error('Invalid data received:', data); + return; + } + + await nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); + + let nodeName = nodeDict[data.node]; + let temperature = data.Temp; + let humidity = data.Humi; + let CO2 = data.eCO2; + let TVOC = data.TVOC; + + // Update the gauges with the new data + if (sensorData[nodeName]) { + sensorData[nodeName].updateGauge(1, temperature); + sensorData[nodeName].updateGauge(2, humidity); + sensorData[nodeName].updateGauge(3, CO2); + sensorData[nodeName].updateGauge(4, TVOC); + } else { + console.error('No sensor data for node:', nodeName); + } } -function nodeAdressHandler(node, dataTypes) { - if (!nodeArray.includes(node)) { - nodeArray.push(node); - nodeDict[node] = nodeArray.length; - - // Define the maximum values for each data type - let maxGaugeValues = dataTypes.map(dataType => { - switch (dataType) { - case 'Temp': return 50; - case 'Humi': return 100; - case 'eCO2': return 3000; - case 'TVOC': return 2200; - default: return 100; - } - }); - - // Create a new GaugeGroup for the node - let gaugeGroup = new GaugeGroup(node, dataTypes.length, maxGaugeValues, dataTypes); - - // Store the GaugeGroup in the sensorData object for later use - sensorData[node] = gaugeGroup; - } +async function nodeAdressHandler(node, dataTypes) { + let nodeInfo = await getNodeInfo(node); + let nodeName = nodeInfo.name; + let nodeLocation = nodeInfo.location; + if (!nodeArray.includes(nodeName)) { + nodeArray.push(nodeName); + nodeDict[node] = nodeName; + + let maxGaugeValues = dataTypes.map(dataType => { + switch (dataType) { + case 'Temp': return 50; + case 'Humi': return 100; + case 'eCO2': return 3000; + case 'TVOC': return 2200; + default: return 100; + } + }); + + let gaugeGroup = new GaugeGroup(nodeName, nodeLocation, dataTypes.length, maxGaugeValues, dataTypes); + sensorData[nodeName] = gaugeGroup; + } } function createGauge(node, dataType) { @@ -112,4 +115,15 @@ function updateGauge(nodeNumber, dataType, value) { // Update the gauge here let gauge = sensorData[nodeNumber][dataType]; // Get the gauge from the sensorData object gauge.update(value); // Assuming the Gauge class has an update method - } \ No newline at end of file + } + +function getNodeInfo(node){ + return fetch("http://145.92.8.114/flask?MAC=" + node) + .then(response => response.json()) + .then(data => { + return { + name: data[0].Name, + location: data[0].Location // Assuming the server returns a Location property + }; + }); +} \ No newline at end of file From 64f9ab24e0778e87e5df384f381b4ba1ddc068f1 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 13:40:04 +0100 Subject: [PATCH 18/36] Added introduction --- docs/brainstorm/gebouwBeheer.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/brainstorm/gebouwBeheer.md b/docs/brainstorm/gebouwBeheer.md index 9eeb254..4fa08c9 100644 --- a/docs/brainstorm/gebouwBeheer.md +++ b/docs/brainstorm/gebouwBeheer.md @@ -1,5 +1,8 @@ # Talk with building management +## Introduction +We interviewed building management so we can clarify what they expect from the project and what they think of the state the project is in right now and if there need to be some adjustments. We also asked them some questions about the website and the node itself and the website. We primaly wanted clarity on what they thought on the website design because they are the ones that are going to use it the most. + ## Questions for building management 1. Design of page? (current page, new design or own idea) @@ -15,7 +18,7 @@ ## Feedback: -Facility management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the facility management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. +Building management had some good feedback points about the page itself, about the idea and some good pointers for the execution. They would also look into making the data they are already measuring accessible for us so we can compare it to our own sensors. The things they had to say about the website are: they found the first design a bit unorganized and said that they would rather see the second design we had in figma where you can select the node you want to see, maybe also a search function to specify the node that is displayed. What also was said was to try to make it idiot-proof because not all of the building management people are very technical. They had some things to say about the node design, like maybe make the color white to make it better with blending into the white walls of the total area. They also asked the question of does it matter at what height the node is placed. One other thing they said was to write something onto the node to make it clear to the people in the area what it was doing, something like ReaderNodeā„¢. And the last thing they said was if we thought about how to make sure it doesnt get vandalized. ## Conclusion -Facility management thought it was a good and interesting project. They wanna actively help us with the data they are already measuring and they had some good feedback points about the website and the node itself. They also had some good questions about the node itself that we need to look into. For example how are we are going to make sure it doesnt get vandalized. Furthermore they had good feedback on the website and they preffered our figma design over our current design and we needed to make the website dummy proof so everyone can use it even without technical knowledge. +Building management thought it was a good and interesting project. They wanna actively help us with the data they are already measuring and they had some good feedback points about the website and the node itself. They also had some good questions about the node itself that we need to look into. For example how are we are going to make sure it doesnt get vandalized. Furthermore they had good feedback on the website and they preffered our figma design over our current design and we needed to make the website dummy proof so everyone can use it even without technical knowledge. From 899d2bb868a1fe159a5df735d6021818d0f6e535 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 14:15:53 +0100 Subject: [PATCH 19/36] removed original gaugecontainer --- web/new website/index.html | 46 -------------------------------------- 1 file changed, 46 deletions(-) diff --git a/web/new website/index.html b/web/new website/index.html index df8b57f..9d98cef 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -27,52 +27,6 @@ -
-

Gauge Group

- -
-
-
- -
-
-
0
-
-
-
- -
-
- -
-
-
0
-
-
-
- -
-
- -
-
-
0
-
-
-
- -
-
- -
-
-
0
-
-
-
-
-
- From d21bae4b192d28dd913fbd01c3c07fd773df0329 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Thu, 28 Mar 2024 15:07:57 +0100 Subject: [PATCH 20/36] fixed scaling --- web/new website/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/new website/style.css b/web/new website/style.css index 22e25b4..3dab72f 100644 --- a/web/new website/style.css +++ b/web/new website/style.css @@ -6,6 +6,7 @@ } body { + padding-top: 5vw; display: flex; justify-content: center; align-items: center; @@ -31,7 +32,7 @@ body { clear: both; margin-bottom: 10px; position: relative; - top: -20vh; + float: top; } .groupTitle { width: 100%; @@ -75,6 +76,7 @@ body { height: 80%; /* Increase the height from 70% to 80% */ position: relative; overflow: visible; + } .gaugeImage { From c6a6ba72f008fb92eda3c8b02327ec4bd3a3aa45 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Fri, 29 Mar 2024 11:40:07 +0100 Subject: [PATCH 21/36] Add new website files and update navigation links --- web/new website/graphs.html | 33 +++++++++++++++++++++++++++++++++ web/new website/index.html | 2 +- web/new website/main.js | 2 +- web/new website/settings.html | 0 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 web/new website/graphs.html create mode 100644 web/new website/settings.html diff --git a/web/new website/graphs.html b/web/new website/graphs.html new file mode 100644 index 0000000..b46bf81 --- /dev/null +++ b/web/new website/graphs.html @@ -0,0 +1,33 @@ + + + + + + + + Gauges + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/new website/index.html b/web/new website/index.html index 9d98cef..1e1a5ea 100644 --- a/web/new website/index.html +++ b/web/new website/index.html @@ -17,7 +17,7 @@ Dashboard