From b79c3ce37dc161f2209d152af5facf28d40e88a4 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Fri, 29 Mar 2024 14:50:18 +0100 Subject: [PATCH 01/62] docs new node redesign --- docs/node-documentation/node-design.md | 27 +++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/node-documentation/node-design.md b/docs/node-documentation/node-design.md index 01fba8e..2f2cd56 100644 --- a/docs/node-documentation/node-design.md +++ b/docs/node-documentation/node-design.md @@ -61,4 +61,29 @@ graph LR A[Design Sketch] -->|Usertest| B(Fusion360 design) B -->|Not fitting| C[New fusion360 design] C -->|assembly| D[Finished product] -``` \ No newline at end of file +``` + +## The evolved design of the nodes. +During the last sprint we had a lot of feeback about the node and mostly about tis design. hence why we had decided to remake it in several different ways. + +We had made a prototype for a wooden version, but that never made it past an first sketch, seeing as almost all fedback came back telling About how the plastic design looked better and was less distreacting. +The user-test document is here:( https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59/-/blob/main/docs/brainstorm/Feedback.md?ref_type=heads#design-questions-led-by-bram ) + +After the results came back, we decided to make progress with further designing the cover of the node. +The main body shape was certain, because all of the components needed to fit inside of the node and needed some space. +Aswell as the simple shape to save on printing costs and keep the design simple to look at. + +The only thing that was able to change was the cover. +The cover was originally made of solid plastic and was molded to fit the shape of the board and the sensors/ screen inside. + +From here we decided to brainstorm on an easyer way of covering the circurty. + +That is when it hit us, We could use acrylic as a cover! + +Acrylic can come in many different colors, is easyer to cut out ( takes less time) and gives a bit of an isight into the wiring. + +This this in mind we made a node with this new design and remade one with the old design, this again could be further used for user-tests. + +For the time being we are able to show off both of the designs and are able to read data from both, the only difference being the outer shell. + +The images: \ No newline at end of file From c4fa9fbfa5ad0b12c6e4f101d150e149039984ed Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 14:59:23 +0100 Subject: [PATCH 02/62] removed junk --- web/newWebsite/main.js | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index 25fbf2f..a62e059 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -4,7 +4,7 @@ const sensorData = {}; let liveGraphs = []; let nodeArray = []; let nodeDict = {}; - +let graphArray = []; // letiables let intervalDelay = 5000; let amountOfNodes = 3; @@ -101,29 +101,6 @@ async function nodeAdressHandler(node, dataTypes) { } } -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 - } - function getNodeInfo(node){ return fetch("http://145.92.8.114/getNodeInfo?macAdress=" + node) .then(response => { @@ -142,4 +119,5 @@ function getNodeInfo(node){ }; }) -} \ No newline at end of file +} + From 7f48f0f3b3437a3625360605ca0286f012f18760 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 14:59:30 +0100 Subject: [PATCH 03/62] added graph div --- web/newWebsite/GaugGroup.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/newWebsite/GaugGroup.js b/web/newWebsite/GaugGroup.js index fc214fc..31da446 100644 --- a/web/newWebsite/GaugGroup.js +++ b/web/newWebsite/GaugGroup.js @@ -24,6 +24,7 @@ class GaugeGroup { `).join('')} +
Graphs + @@ -25,9 +26,10 @@ - - +
+ + \ No newline at end of file diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 2519ffb..3402076 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -6,6 +6,7 @@ Gauges + @@ -29,5 +30,6 @@ + \ No newline at end of file From 5bf5a193b9d4f5e1a450698afe8eef5c2844d652 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Fri, 29 Mar 2024 15:18:36 +0100 Subject: [PATCH 05/62] Add getQuestionData route --- server/Flask/main.py | 21 ++++++++++++++++++--- server/Flask/queries.py | 7 +++++-- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index c185937..7232c81 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -22,9 +22,13 @@ def getNodeInfoIndex(): macAdress = request.args.get('macAdress', None) return getNodeInfo(macAdress) +@app.route('/getQuestionData') +def getQuestionDataIndex(): + return getQuestionData() + def updateData(node, name, location): mydb = loginDB() - query = update_query(node, name, location) + query = update_query(node, name, location, False, False) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) mydb.commit() @@ -45,7 +49,7 @@ def loginDB(): def getData(node, dataType, MAC): mydb = loginDB() - query = get_query(node, dataType, MAC) + query = get_query(node, dataType, MAC, False, False) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results @@ -56,7 +60,18 @@ def getData(node, dataType, MAC): def getNodeInfo(macAdress): mydb = loginDB() - query = get_query(False, False, macAdress) + query = get_query(False, False, macAdress, False, False) + cursor = mydb.cursor(dictionary=True) # Enable dictionary output + cursor.execute(query) + result = cursor.fetchall() # Fetch the results + cursor.close() + mydb.close() + + return result + +def getQuestionData(): + mydb = loginDB() + query = get_query(False, False, False, True, False) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results diff --git a/server/Flask/queries.py b/server/Flask/queries.py index e2da308..dda5ff9 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -1,4 +1,4 @@ -def get_query(node, dataType, MAC): +def get_query(node, dataType, MAC, questionID, replies): if node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" elif node: @@ -7,12 +7,15 @@ def get_query(node, dataType, MAC): query = f"SELECT * FROM Measurement WHERE Type = '{dataType}'" elif MAC: query = f"SELECT * FROM Node WHERE MAC = '{MAC}'" + elif questionID: + query = f"SELECT * FROM Question" + elif replies: + query = f"SELECT * FROM Reply WHERE QuestionID = '{questionID}'" else: query = "SELECT * FROM `Measurement`" return query - def update_query(node, name, location): if node and name and location: query = f""" From 0db496fb726ee454f3fe96cc6ce515a94bfaec80 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Fri, 29 Mar 2024 15:39:48 +0100 Subject: [PATCH 06/62] Refactor queries.py to improve query selection logic --- server/Flask/queries.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/Flask/queries.py b/server/Flask/queries.py index dda5ff9..cd85146 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -7,10 +7,10 @@ def get_query(node, dataType, MAC, questionID, replies): query = f"SELECT * FROM Measurement WHERE Type = '{dataType}'" elif MAC: query = f"SELECT * FROM Node WHERE MAC = '{MAC}'" + elif replies and questionID: + query = f"SELECT * FROM Reply WHERE QuestionID = '{questionID}'" elif questionID: query = f"SELECT * FROM Question" - elif replies: - query = f"SELECT * FROM Reply WHERE QuestionID = '{questionID}'" else: query = "SELECT * FROM `Measurement`" return query From 26b35036ec737e740af805963a0a789242b3bb74 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 16:16:08 +0100 Subject: [PATCH 07/62] Added graph --- web/newWebsite/GaugGroup.js | 4 +++- web/newWebsite/index.html | 1 + web/newWebsite/main.js | 8 ++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/GaugGroup.js b/web/newWebsite/GaugGroup.js index 31da446..8b9e427 100644 --- a/web/newWebsite/GaugGroup.js +++ b/web/newWebsite/GaugGroup.js @@ -24,8 +24,10 @@ class GaugeGroup {
`).join('')} -
+
+
`; // Append the new div to the body diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 52122e5..05f02b7 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -27,6 +27,7 @@ + diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index a62e059..a97fd96 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -98,9 +98,17 @@ async function nodeAdressHandler(node, dataTypes) { let gaugeGroup = new GaugeGroup(nodeName, nodeLocation, dataTypes.length, maxGaugeValues, dataTypes); sensorData[node] = gaugeGroup; + gaugeGroup.graph = new liveGraph(nodeName); + sensorData[node] = gaugeGroup; + gaugeGroup.graph.makeGraph(); + sensorData[node] = gaugeGroup; + + } } + + function getNodeInfo(node){ return fetch("http://145.92.8.114/getNodeInfo?macAdress=" + node) .then(response => { From 49dc40a2c29a373a807542fdd667506268868ea3 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Fri, 29 Mar 2024 16:25:54 +0100 Subject: [PATCH 08/62] Add data filtering functionality and input elements for user input --- web/newWebsite/graph-main.js | 97 +++++++++++++++++++++++++- web/newWebsite/styles/graph-styles.css | 27 ++++++- 2 files changed, 121 insertions(+), 3 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 139597f..3eb71ae 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,2 +1,95 @@ - - +// Sample data - you can replace this with your actual dataset +const data = [ + { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 }, + { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 }, + { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 }, + { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 }, + { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 }, + { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 } + ]; + + // Function to filter data based on user input + function filterData(data, startDate, endDate, nodes, selectedFields) { + const filteredData = data.filter(item => { + const timestamp = new Date(item.timestamp); + return timestamp >= startDate && timestamp <= endDate && nodes.includes(item.node); + }).map(item => { + const filteredItem = { node: item.node, timestamp: item.timestamp }; + selectedFields.forEach(field => { + filteredItem[field] = item[field]; + }); + return filteredItem; + }); + return filteredData; + } + + // Create HTML input elements for user input + // Include checkboxes for each data field + const temperatureCheckbox = createCheckBox('temperature', 'Temperature'); + const humidityCheckbox = createCheckBox('humidity', 'Humidity'); + const eco2Checkbox = createCheckBox('eco2', 'eCO2'); + const tvocCheckbox = createCheckBox('tvoc', 'TVOC'); + + // Create a checkbox element with label + function createCheckBox(id, label) { + const checkbox = document.createElement('input'); + checkbox.setAttribute('type', 'checkbox'); + checkbox.setAttribute('id', id); + checkbox.setAttribute('class', 'checkbox'); + + const checkboxLabel = document.createElement('label'); + checkboxLabel.setAttribute('for', id); + checkboxLabel.textContent = label; + + return { checkbox, checkboxLabel }; + } + + const startDateInput = document.createElement('input'); + startDateInput.setAttribute('type', 'datetime-local'); + startDateInput.setAttribute('id', 'start-date'); + startDateInput.setAttribute('class', 'input-field'); + + const endDateInput = document.createElement('input'); + endDateInput.setAttribute('type', 'datetime-local'); + endDateInput.setAttribute('id', 'end-date'); + endDateInput.setAttribute('class', 'input-field'); + + const nodeInput = document.createElement('input'); + nodeInput.setAttribute('type', 'text'); + nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)'); + nodeInput.setAttribute('id', 'node-input'); + nodeInput.setAttribute('class', 'input-field'); + + const filterButton = document.createElement('button'); + filterButton.textContent = 'Filter Data'; + filterButton.setAttribute('class', 'filter-button'); + filterButton.addEventListener('click', () => { + const startDate = new Date(document.getElementById('start-date').value); + const endDate = new Date(document.getElementById('end-date').value); + const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim()); + + const selectedFields = []; + const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox]; + checkboxes.forEach(checkbox => { + if (checkbox.checkbox.checked) { + selectedFields.push(checkbox.checkbox.id); + } + }); + + const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields); + console.log(filteredData); + }); + + // Append input elements to the document body + document.body.appendChild(startDateInput); + document.body.appendChild(endDateInput); + document.body.appendChild(nodeInput); + document.body.appendChild(temperatureCheckbox.checkbox); + document.body.appendChild(temperatureCheckbox.checkboxLabel); + document.body.appendChild(humidityCheckbox.checkbox); + document.body.appendChild(humidityCheckbox.checkboxLabel); + document.body.appendChild(eco2Checkbox.checkbox); + document.body.appendChild(eco2Checkbox.checkboxLabel); + document.body.appendChild(tvocCheckbox.checkbox); + document.body.appendChild(tvocCheckbox.checkboxLabel); + document.body.appendChild(filterButton); \ No newline at end of file diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index 8ad355d..ec79d48 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -165,4 +165,29 @@ body { color: #fff; text-decoration: none; font-size: 18px; -} \ No newline at end of file +} + +.input-field { + margin: 10px; + padding: 5px; + border: 1px solid #ccc; + border-radius: 5px; + } + + .checkbox { + margin-right: 5px; + } + + .filter-button { + margin: 10px; + padding: 5px 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + } + + .filter-button:hover { + background-color: #0056b3; + } \ No newline at end of file From 09e3d7020ef8398af8adfeaadc759d75c5c57ea7 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 19:36:07 +0100 Subject: [PATCH 09/62] moved navbar into body --- web/newWebsite/index.html | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 05f02b7..854fcd6 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -11,22 +11,23 @@ - + + From 0666b21bc57b2799a7d9cad5a19a3c616d952ef3 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 19:36:12 +0100 Subject: [PATCH 10/62] styling --- web/newWebsite/styles/dashboard-styles.css | 25 ++++++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 2985720..190586e 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -6,21 +6,20 @@ } body { - padding-top: 5vw; display: flex; justify-content: center; - align-items: center; - height: 100vh; margin: 0; + margin-top: 8vh; background-color: #f0f0f0; flex-direction: column; background-color: #afafaf; + align-items: center; } .gaugeGroup { width: 98vw; - height: 20vh; + height: auto; display: flex; flex-direction: column; /* Keep as column */ justify-content: flex-start; @@ -32,8 +31,8 @@ body { clear: both; margin-bottom: 10px; position: relative; - float: top; } + .groupTitle { width: 100%; text-align: center; @@ -76,7 +75,9 @@ body { height: 80%; /* Increase the height from 70% to 80% */ position: relative; overflow: visible; - + height: 5vh; + margin-bottom: 1vh; + } .gaugeImage { @@ -89,7 +90,6 @@ body { left: 0; z-index: 1; /* Make the image display below the needle */ bottom: 0; - margin-bottom: 10px; } .gaugeValue, .gaugeText { @@ -179,4 +179,15 @@ body { color: #fff; text-decoration: none; font-size: 18px; +} + +.plotly-container { + + float: bottom; + margin: auto; + padding: 1vw; + align-items: center; + justify-content: center; + display: flex; + width: 20vw; } \ No newline at end of file From 9ac39ff74f77e98c534c59f989b7e5ae58bae484 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 12:38:13 +0100 Subject: [PATCH 11/62] removed junk --- web/newWebsite/liveGraph.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/web/newWebsite/liveGraph.js b/web/newWebsite/liveGraph.js index e2aac1d..6668620 100644 --- a/web/newWebsite/liveGraph.js +++ b/web/newWebsite/liveGraph.js @@ -54,15 +54,16 @@ class liveGraph { } // Function to update the graph with new values got from updateData function - updateGraph() { + updateGraph(temperature, humidity, eCO2, TVOC) { + // Update the graph + this.tempArray.push(temperature); + this.humiArray.push(humidity); + this.eco2Array.push(eCO2 / 10); + this.tvocArray.push(TVOC / 10); + let time = new Date(); this.timeArray.push(new Date()); - let update = { - x: [[this.timeArray]], - y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]] - }; - let olderTime = time.setMinutes(time.getMinutes() - 1); let futureTime = time.setMinutes(time.getMinutes() + 1); let minuteView = { @@ -75,11 +76,4 @@ class liveGraph { if (this.cnt === 10) clearInterval(interval); } // function to get the new data for graph - updateData(temperature, humidity, eCO2, TVOC) { - // Update the graph - this.tempArray.push(temperature); - this.humiArray.push(humidity); - this.eco2Array.push(eCO2 / 10); - this.tvocArray.push(TVOC / 10); - } } \ No newline at end of file From 92b27ab9b7749d9989536ec41534d7c8ce005483 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 12:38:20 +0100 Subject: [PATCH 12/62] graph works now --- web/newWebsite/main.js | 2 +- web/newWebsite/styles/dashboard-styles.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index a97fd96..d55fb12 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -66,6 +66,7 @@ async function handleIncomingData(data) { sensorData[data.node].updateGauge(2, humidity); sensorData[data.node].updateGauge(3, CO2); sensorData[data.node].updateGauge(4, TVOC); + sensorData[data.node].graph.updateGraph(temperature, humidity, CO2, TVOC); } else { console.error('No sensor data for node:', nodeName); } @@ -102,7 +103,6 @@ async function nodeAdressHandler(node, dataTypes) { sensorData[node] = gaugeGroup; gaugeGroup.graph.makeGraph(); sensorData[node] = gaugeGroup; - } } diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 190586e..0758c94 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -190,4 +190,6 @@ body { justify-content: center; display: flex; width: 20vw; + z-index: -0; + height: -; } \ No newline at end of file From 3e7a89bf8b8e98665a5b39ea32d5d5995b9e403c Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 17:22:55 +0100 Subject: [PATCH 13/62] Added togglegraph function --- web/newWebsite/main.js | 15 ++++++++++++++- web/newWebsite/styles/dashboard-styles.css | 7 ++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index d55fb12..c5e1486 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -103,7 +103,6 @@ async function nodeAdressHandler(node, dataTypes) { sensorData[node] = gaugeGroup; gaugeGroup.graph.makeGraph(); sensorData[node] = gaugeGroup; - } } @@ -129,3 +128,17 @@ function getNodeInfo(node){ } +// create a function to enable and disable the graph using .disabled using the id of the graph +function toggleGraph(nodeId) { + let graph = document.querySelector('#liveGraph' + nodeId); + + if (graph) { + if (graph.classList.contains('disabled')) { + graph.classList.remove('disabled'); + } else { + graph.classList.add('disabled'); + } + } else { + console.error('No element found with id: liveGraph' + nodeId); + } +} \ No newline at end of file diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 0758c94..d550f41 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -191,5 +191,10 @@ body { display: flex; width: 20vw; z-index: -0; - height: -; + +} +* +.disabled { + opacity: 0; + height: 0; } \ No newline at end of file From 02b32c33ea7a958f18eec8b344836529f6abeaae Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 17:31:41 +0100 Subject: [PATCH 14/62] made dropdown graph --- web/newWebsite/GaugGroup.js | 3 ++- web/newWebsite/styles/dashboard-styles.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/GaugGroup.js b/web/newWebsite/GaugGroup.js index 8b9e427..cf3c1f4 100644 --- a/web/newWebsite/GaugGroup.js +++ b/web/newWebsite/GaugGroup.js @@ -13,6 +13,7 @@ class GaugeGroup { this.element.innerHTML = `

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

+ ${Array(this.gaugesCount).fill().map((_, i) => `
@@ -26,7 +27,7 @@ class GaugeGroup { `).join('')}
-
+
`; diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index d550f41..e4e367a 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -190,11 +190,11 @@ body { justify-content: center; display: flex; width: 20vw; - z-index: -0; } * .disabled { opacity: 0; height: 0; + } \ No newline at end of file From 79c3c956fe729207c15c9b8667c25337d6843428 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 20:43:51 +0100 Subject: [PATCH 15/62] Update graph styles and input field margins --- web/newWebsite/graph-main.js | 188 +++++++++++++------------ web/newWebsite/styles/graph-styles.css | 24 +++- 2 files changed, 118 insertions(+), 94 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 3eb71ae..eadfb77 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,95 +1,99 @@ // Sample data - you can replace this with your actual dataset const data = [ - { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 }, - { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 }, - { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 }, - { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 }, - { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 }, - { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 } - ]; - - // Function to filter data based on user input - function filterData(data, startDate, endDate, nodes, selectedFields) { - const filteredData = data.filter(item => { - const timestamp = new Date(item.timestamp); - return timestamp >= startDate && timestamp <= endDate && nodes.includes(item.node); - }).map(item => { - const filteredItem = { node: item.node, timestamp: item.timestamp }; - selectedFields.forEach(field => { - filteredItem[field] = item[field]; - }); - return filteredItem; - }); - return filteredData; - } - - // Create HTML input elements for user input - // Include checkboxes for each data field - const temperatureCheckbox = createCheckBox('temperature', 'Temperature'); - const humidityCheckbox = createCheckBox('humidity', 'Humidity'); - const eco2Checkbox = createCheckBox('eco2', 'eCO2'); - const tvocCheckbox = createCheckBox('tvoc', 'TVOC'); - - // Create a checkbox element with label - function createCheckBox(id, label) { - const checkbox = document.createElement('input'); - checkbox.setAttribute('type', 'checkbox'); - checkbox.setAttribute('id', id); - checkbox.setAttribute('class', 'checkbox'); - - const checkboxLabel = document.createElement('label'); - checkboxLabel.setAttribute('for', id); - checkboxLabel.textContent = label; - - return { checkbox, checkboxLabel }; - } - - const startDateInput = document.createElement('input'); - startDateInput.setAttribute('type', 'datetime-local'); - startDateInput.setAttribute('id', 'start-date'); - startDateInput.setAttribute('class', 'input-field'); - - const endDateInput = document.createElement('input'); - endDateInput.setAttribute('type', 'datetime-local'); - endDateInput.setAttribute('id', 'end-date'); - endDateInput.setAttribute('class', 'input-field'); - - const nodeInput = document.createElement('input'); - nodeInput.setAttribute('type', 'text'); - nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)'); - nodeInput.setAttribute('id', 'node-input'); - nodeInput.setAttribute('class', 'input-field'); - - const filterButton = document.createElement('button'); - filterButton.textContent = 'Filter Data'; - filterButton.setAttribute('class', 'filter-button'); - filterButton.addEventListener('click', () => { - const startDate = new Date(document.getElementById('start-date').value); - const endDate = new Date(document.getElementById('end-date').value); - const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim()); - - const selectedFields = []; - const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox]; - checkboxes.forEach(checkbox => { - if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); - } - }); - - const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields); - console.log(filteredData); + { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 }, + { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 }, + { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 }, + { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 }, + { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 }, + { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 } +]; + +// Function to create checkbox with label +function createCheckBox(id, label) { + const checkbox = document.createElement('input'); + checkbox.setAttribute('type', 'checkbox'); + checkbox.setAttribute('id', id); + checkbox.setAttribute('class', 'checkbox'); + + const checkboxLabel = document.createElement('label'); + checkboxLabel.setAttribute('for', id); + checkboxLabel.textContent = label; + + return { checkbox, checkboxLabel }; +} + +// Create HTML input elements for user input +const container = document.createElement('div'); +container.setAttribute('class', 'container'); + +const dataTypesContainer = document.createElement('div'); +dataTypesContainer.setAttribute('class', 'data-types'); + +const temperatureCheckbox = createCheckBox('temperature', 'Temperature'); +const humidityCheckbox = createCheckBox('humidity', 'Humidity'); +const eco2Checkbox = createCheckBox('eco2', 'eCO2'); +const tvocCheckbox = createCheckBox('tvoc', 'TVOC'); + +dataTypesContainer.appendChild(temperatureCheckbox.checkbox); +dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); +dataTypesContainer.appendChild(humidityCheckbox.checkbox); +dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); +dataTypesContainer.appendChild(eco2Checkbox.checkbox); +dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); +dataTypesContainer.appendChild(tvocCheckbox.checkbox); +dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); + +const filterButton = document.createElement('button'); +filterButton.textContent = 'Filter Data'; +filterButton.setAttribute('class', 'filter-button'); +filterButton.addEventListener('click', () => { + const startDate = new Date(document.getElementById('start-date').value); + const endDate = new Date(document.getElementById('end-date').value); + const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim()); + + const selectedFields = []; + const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox]; + checkboxes.forEach(checkbox => { + if (checkbox.checkbox.checked) { + selectedFields.push(checkbox.checkbox.id); + } }); - - // Append input elements to the document body - document.body.appendChild(startDateInput); - document.body.appendChild(endDateInput); - document.body.appendChild(nodeInput); - document.body.appendChild(temperatureCheckbox.checkbox); - document.body.appendChild(temperatureCheckbox.checkboxLabel); - document.body.appendChild(humidityCheckbox.checkbox); - document.body.appendChild(humidityCheckbox.checkboxLabel); - document.body.appendChild(eco2Checkbox.checkbox); - document.body.appendChild(eco2Checkbox.checkboxLabel); - document.body.appendChild(tvocCheckbox.checkbox); - document.body.appendChild(tvocCheckbox.checkboxLabel); - document.body.appendChild(filterButton); \ No newline at end of file + + const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields); + console.log(filteredData); +}); + +container.appendChild(dataTypesContainer); + +const dateFilter = document.createElement('div'); +dateFilter.setAttribute('class', 'date-filter'); + +const startDateInput = document.createElement('input'); +startDateInput.setAttribute('type', 'datetime-local'); +startDateInput.setAttribute('id', 'start-date'); +startDateInput.setAttribute('class', 'input-field'); + +const endDateInput = document.createElement('input'); +endDateInput.setAttribute('type', 'datetime-local'); +endDateInput.setAttribute('id', 'end-date'); +endDateInput.setAttribute('class', 'input-field'); + +dateFilter.appendChild(startDateInput); +dateFilter.appendChild(endDateInput); +container.appendChild(dateFilter); + +const nodeFilter = document.createElement('div'); +nodeFilter.setAttribute('class', 'node-filter'); + +const nodeInput = document.createElement('input'); +nodeInput.setAttribute('type', 'text'); +nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)'); +nodeInput.setAttribute('id', 'node-input'); +nodeInput.setAttribute('class', 'input-field'); + +nodeFilter.appendChild(nodeInput); +container.appendChild(nodeFilter); + +container.appendChild(filterButton); + +document.body.appendChild(container); \ No newline at end of file diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index ec79d48..eaf79e0 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -167,8 +167,28 @@ body { font-size: 18px; } -.input-field { - margin: 10px; +.container { + display: flex; + justify-content: space-around; + align-items: center; + border: 2px solid #ccc; + border-radius: 10px; + padding: 10px; + margin: 20px; + } + + .data-types { + display: flex; + flex-direction: column; + } + + .date-filter, + .node-filter { + margin-left: 10px; + } + + .input-field { + margin: 5px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; From 726d411321335ce588e443a0d14230d29b3c3791 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 21:25:20 +0100 Subject: [PATCH 16/62] Add dataTypesContainer to container and update styles --- web/newWebsite/graph-main.js | 3 +- web/newWebsite/graphs.html | 3 +- web/newWebsite/styles/graph-styles.css | 60 +++++++++++++------------- 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index eadfb77..024aad6 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -42,6 +42,7 @@ dataTypesContainer.appendChild(eco2Checkbox.checkbox); dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); dataTypesContainer.appendChild(tvocCheckbox.checkbox); dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); +container.appendChild(dataTypesContainer); const filterButton = document.createElement('button'); filterButton.textContent = 'Filter Data'; @@ -63,8 +64,6 @@ filterButton.addEventListener('click', () => { console.log(filteredData); }); -container.appendChild(dataTypesContainer); - const dateFilter = document.createElement('div'); dateFilter.setAttribute('class', 'date-filter'); diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index 0629172..ad48fd4 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -28,7 +28,8 @@
- + +
diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index eaf79e0..ce423d9 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -168,46 +168,46 @@ body { } .container { + box-sizing: border-box; display: flex; - justify-content: space-around; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; align-items: center; - border: 2px solid #ccc; + border: 2px solid #000000; border-radius: 10px; - padding: 10px; - margin: 20px; + padding: 20px; } .data-types { - display: flex; flex-direction: column; + align-self: self-center; + justify-content: space-between; + padding: 20px; + width: 30%; /* Adjust width as needed */ + background-color: #f1f1f1; } - .date-filter, - .node-filter { - margin-left: 10px; + .date-filter{ + align-content: center; + flex-direction: column; + justify-content: space-between; + /* width: 30%; /* Adjust width as needed */ + background-color: #f1f1f1; } - - .input-field { - margin: 5px; - padding: 5px; - border: 1px solid #ccc; - border-radius: 5px; - } - - .checkbox { - margin-right: 5px; - } - - .filter-button { - margin: 10px; - padding: 5px 10px; - background-color: #007bff; - color: #fff; + + .node-filter{ + align-self: center; + justify-content: space-between; + width: 10%; /* Adjust width as needed */ border: none; - border-radius: 5px; - cursor: pointer; + border-radius: 4px; + background-color: #f1f1f1; + } + + .filter-button { + width: 100%; + margin-top: 20px; } - .filter-button:hover { - background-color: #0056b3; - } \ No newline at end of file + /* Additional styling as needed */ \ No newline at end of file From 415a0c456e0e960945cc2de49ec64b76cbce8d68 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 21:46:32 +0100 Subject: [PATCH 17/62] Remove extra closing div tag in graphs.html --- web/newWebsite/graphs.html | 3 +- web/newWebsite/styles/graph-styles.css | 320 +++++++++++++------------ 2 files changed, 163 insertions(+), 160 deletions(-) diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index ad48fd4..0629172 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -28,8 +28,7 @@
- -
+ diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index ce423d9..f60bf63 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -1,213 +1,217 @@ * { - box-sizing: border-box; - font-family: "Roboto", sans-serif; + box-sizing: border-box; + font-family: "Roboto", sans-serif; } body { - padding-top: 5vw; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - background-color: #f0f0f0; - flex-direction: column; - background-color: #afafaf; - + padding-top: 5vw; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; } .gaugeGroup { - width: 98vw; - 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; - clear: both; - margin-bottom: 10px; - position: relative; - float: top; + width: 98vw; + 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; + clear: both; + margin-bottom: 10px; + position: relative; + float: top; } .groupTitle { - width: 100%; - text-align: center; - font-size: 24px; + width: 100%; + text-align: center; + font-size: 24px; } .Node { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 100%; + 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: 15%; - height: 110%; - background-color: #ddd; - color: #333; - padding: 10px; - margin: 10px; - border-radius: 10px; - text-align: center; - position: relative; - padding-bottom: 6vh; /* Increase bottom padding */ - + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 15%; + height: 110%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 10px; + border-radius: 10px; + text-align: center; + position: relative; + padding-bottom: 6vh; /* 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; - + 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: 200%; - 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; - margin-bottom: 10px; + width: 100%; + height: auto; + max-height: 200%; + 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; + margin-bottom: 10px; } -.gaugeValue, .gaugeText { - width: 100%; - text-align: center; - font-size: 24px; - z-index: 2; +.gaugeValue, +.gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; } .gaugeText { - width: 100%; - text-align: center; - font-size: 1.4vw; - z-index: 2; - position: absolute; - bottom: -3.2vw; /* Adjust this value to move the text further down */ - + width: 100%; + text-align: center; + font-size: 1.4vw; + z-index: 2; + position: absolute; + bottom: -3.2vw; /* Adjust this value to move the text further down */ } - .valueContainer { - display: flex; - justify-content: center; - margin-top: 10px; + display: flex; + justify-content: center; + margin-top: 10px; } #valueText { - font-size: 20px; + font-size: 20px; } .needle { - position: absolute; - bottom: -40%; /* Lower the needle to the bottom */ - left: 50%; - width: 2px; - height: 110%; - background-color: black; - transform-origin: bottom; - z-index: 3; /* Make the needle display above the image */ + position: absolute; + bottom: -40%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 110%; + 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%; + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + 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 */ + 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 */ + 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; + margin-right: 20px; } .nav-link { - color: #fff; - text-decoration: none; - font-size: 18px; + color: #fff; + text-decoration: none; + font-size: 18px; } .container { - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - flex-direction: row; - justify-content: center; - align-items: center; - border: 2px solid #000000; - border-radius: 10px; - padding: 20px; - } - - .data-types { - flex-direction: column; - align-self: self-center; - justify-content: space-between; - padding: 20px; - width: 30%; /* Adjust width as needed */ - background-color: #f1f1f1; - } - - .date-filter{ - align-content: center; - flex-direction: column; - justify-content: space-between; - /* width: 30%; /* Adjust width as needed */ - background-color: #f1f1f1; - } + display: flex; + flex-direction: row; + align-items: center; + border: 2px solid #ccc; + border-radius: 10px; + padding: 20px; + width: 100%; + box-sizing: border-box; +} - .node-filter{ - align-self: center; - justify-content: space-between; - width: 10%; /* Adjust width as needed */ - border: none; - border-radius: 4px; - background-color: #f1f1f1; - } +.data-types { + display: flex; + flex-direction: column; /* Display data types in a column */ + align-items: flex-start; /* Align to the start of the container */ + text-align: right; /* Align text to the right */ + width: 20%; /* Set a fixed width for the data types */ +} - .filter-button { - width: 100%; - margin-top: 20px; - } - - /* Additional styling as needed */ \ No newline at end of file +.filter { + display: flex; + flex-direction: column; /* Display filters in a column */ + align-items: center center; /* Align to the center of the container */ + text-align: center center; + margin-left: 20px; /* Add some space between the data types and filters */ +} + +.date-filter { + flex-direction: column; + align-items: center center; + justify-content: center; + align-self: center; + width: 30%; +} + +.node-filter { + align-items: center; + text-align: center; + justify-content: center; + align-self: flex-end; + width: 20%; +} + +.filter-button { + text-align: center; + align-items: center; + justify-content: center; + width: 10%; + margin-top: auto; +} + +/* Additional styling as needed */ \ No newline at end of file From 0a25bbf84f432fc0650ae1496a3ad37e702d79e1 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 22:27:16 +0100 Subject: [PATCH 18/62] Refactor graph styles and filters --- web/newWebsite/styles/graph-styles.css | 187 ++++++------------------- 1 file changed, 40 insertions(+), 147 deletions(-) diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index f60bf63..68c7c86 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -6,130 +6,8 @@ body { padding-top: 5vw; display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - background-color: #f0f0f0; - flex-direction: column; background-color: #afafaf; -} - -.gaugeGroup { - width: 98vw; - 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; - clear: both; - margin-bottom: 10px; - position: relative; - float: top; -} -.groupTitle { - width: 100%; - text-align: center; - font-size: 24px; -} - -.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: 15%; - height: 110%; - background-color: #ddd; - color: #333; - padding: 10px; - margin: 10px; - border-radius: 10px; - text-align: center; - position: relative; - padding-bottom: 6vh; /* 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: 200%; - 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; - margin-bottom: 10px; -} - -.gaugeValue, -.gaugeText { - width: 100%; - text-align: center; - font-size: 24px; - z-index: 2; -} - -.gaugeText { - width: 100%; - text-align: center; - font-size: 1.4vw; - z-index: 2; - position: absolute; - bottom: -3.2vw; /* 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; - bottom: -40%; /* Lower the needle to the bottom */ - left: 50%; - width: 2px; - height: 110%; - 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%; + margin: 0; } .navbar { @@ -169,49 +47,64 @@ body { align-items: center; border: 2px solid #ccc; border-radius: 10px; + margin: 20px; padding: 20px; width: 100%; box-sizing: border-box; } .data-types { + flex: 1; display: flex; - flex-direction: column; /* Display data types in a column */ - align-items: flex-start; /* Align to the start of the container */ - text-align: right; /* Align text to the right */ - width: 20%; /* Set a fixed width for the data types */ + flex-direction: column; + align-items: flex-start; + margin-right: 60px; + margin-bottom: 10px; + font-size: 0.8em; + padding: 8px; + border-radius: 5px; + background-color: #f0f0f0; } -.filter { +.filters { display: flex; - flex-direction: column; /* Display filters in a column */ - align-items: center center; /* Align to the center of the container */ - text-align: center center; - margin-left: 20px; /* Add some space between the data types and filters */ + justify-content: space-between; + align-items: center; + width: 100%; + margin-bottom: 10px; } .date-filter { - flex-direction: column; - align-items: center center; - justify-content: center; - align-self: center; - width: 30%; + flex: 1; + text-align: center; + margin-right: 60px; + font-size: 1.2em; /* Increase font size for a bigger appearance */ + padding: 8px; + border-radius: 5px; /* Add border radius for a rounded look */ + background-color: #f0f0f0; /* Light background color for contrast */ } .node-filter { - align-items: center; + flex: 1; + margin: auto; text-align: center; - justify-content: center; - align-self: flex-end; - width: 20%; + margin-right: 60px; + align-content: center; + font-size: 1.2em; /* Increase font size for a bigger appearance */ + padding: 8px; + border-radius: 5px; /* Add border radius for a rounded look */ + background-color: #f0f0f0; /* Light background color for contrast */ } .filter-button { - text-align: center; - align-items: center; - justify-content: center; - width: 10%; - margin-top: auto; + flex: 1; + width: 20%; + background-color: #007bff; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; } -/* Additional styling as needed */ \ No newline at end of file +/* Additional styling as needed */ From 97c21f9d3179e6c5362f5faf5023211cbed35702 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 22:33:42 +0100 Subject: [PATCH 19/62] Add query for retrieving replies --- server/Flask/queries.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/server/Flask/queries.py b/server/Flask/queries.py index cd85146..d2b4144 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -11,6 +11,8 @@ def get_query(node, dataType, MAC, questionID, replies): query = f"SELECT * FROM Reply WHERE QuestionID = '{questionID}'" elif questionID: query = f"SELECT * FROM Question" + elif replies: + query = f"SELECT * FROM Reply" else: query = "SELECT * FROM `Measurement`" return query From 8416254d6c6a12bb9ce6e1cb80b4c7af483bd94a Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 22:33:45 +0100 Subject: [PATCH 20/62] Refactor code to create filter container and fetch data from server --- web/newWebsite/graph-main.js | 174 ++++++++++++++++++++--------------- 1 file changed, 102 insertions(+), 72 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 024aad6..c1436ed 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,98 +1,128 @@ // Sample data - you can replace this with your actual dataset -const data = [ - { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 }, - { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 }, - { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 }, - { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 }, - { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 }, - { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 } -]; +const data = []; // Function to create checkbox with label function createCheckBox(id, label) { - const checkbox = document.createElement('input'); - checkbox.setAttribute('type', 'checkbox'); - checkbox.setAttribute('id', id); - checkbox.setAttribute('class', 'checkbox'); + const checkbox = document.createElement("input"); + checkbox.setAttribute("type", "checkbox"); + checkbox.setAttribute("id", id); + checkbox.setAttribute("class", "checkbox"); - const checkboxLabel = document.createElement('label'); - checkboxLabel.setAttribute('for', id); + const checkboxLabel = document.createElement("label"); + checkboxLabel.setAttribute("for", id); checkboxLabel.textContent = label; return { checkbox, checkboxLabel }; } -// Create HTML input elements for user input -const container = document.createElement('div'); -container.setAttribute('class', 'container'); +// Function to ceate filter container and all the input elements +function createFilterContainer() { + // Create HTML input elements for user input + const container = document.createElement("div"); + container.setAttribute("class", "container"); -const dataTypesContainer = document.createElement('div'); -dataTypesContainer.setAttribute('class', 'data-types'); + const dataTypesContainer = document.createElement("div"); + dataTypesContainer.setAttribute("class", "data-types"); -const temperatureCheckbox = createCheckBox('temperature', 'Temperature'); -const humidityCheckbox = createCheckBox('humidity', 'Humidity'); -const eco2Checkbox = createCheckBox('eco2', 'eCO2'); -const tvocCheckbox = createCheckBox('tvoc', 'TVOC'); + const temperatureCheckbox = createCheckBox("temperature", "Temperature"); + const humidityCheckbox = createCheckBox("humidity", "Humidity"); + const eco2Checkbox = createCheckBox("eco2", "eCO2"); + const tvocCheckbox = createCheckBox("tvoc", "TVOC"); -dataTypesContainer.appendChild(temperatureCheckbox.checkbox); -dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); -dataTypesContainer.appendChild(humidityCheckbox.checkbox); -dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); -dataTypesContainer.appendChild(eco2Checkbox.checkbox); -dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); -dataTypesContainer.appendChild(tvocCheckbox.checkbox); -dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); -container.appendChild(dataTypesContainer); + dataTypesContainer.appendChild(temperatureCheckbox.checkbox); + dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); + dataTypesContainer.appendChild(humidityCheckbox.checkbox); + dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); + dataTypesContainer.appendChild(eco2Checkbox.checkbox); + dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); + dataTypesContainer.appendChild(tvocCheckbox.checkbox); + dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); + container.appendChild(dataTypesContainer); -const filterButton = document.createElement('button'); -filterButton.textContent = 'Filter Data'; -filterButton.setAttribute('class', 'filter-button'); -filterButton.addEventListener('click', () => { - const startDate = new Date(document.getElementById('start-date').value); - const endDate = new Date(document.getElementById('end-date').value); - const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim()); + const filterButton = document.createElement("button"); + filterButton.textContent = "Filter Data"; + filterButton.setAttribute("class", "filter-button"); + filterButton.addEventListener("click", () => { + const startDate = new Date(document.getElementById("start-date").value); + const endDate = new Date(document.getElementById("end-date").value); + const selectedNodes = document + .getElementById("node-input") + .value.split(",") + .map((node) => node.trim()); - const selectedFields = []; - const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox]; - checkboxes.forEach(checkbox => { - if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); - } + const selectedFields = []; + const checkboxes = [ + temperatureCheckbox, + humidityCheckbox, + eco2Checkbox, + tvocCheckbox, + ]; + checkboxes.forEach((checkbox) => { + if (checkbox.checkbox.checked) { + selectedFields.push(checkbox.checkbox.id); + } + }); + + const filteredData = filterData( + data, + startDate, + endDate, + selectedNodes, + selectedFields + ); + console.log(filteredData); }); - const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields); - console.log(filteredData); -}); + const dateFilter = document.createElement("div"); + dateFilter.setAttribute("class", "date-filter"); -const dateFilter = document.createElement('div'); -dateFilter.setAttribute('class', 'date-filter'); + const startDateInput = document.createElement("input"); + startDateInput.setAttribute("type", "datetime-local"); + startDateInput.setAttribute("id", "start-date"); + startDateInput.setAttribute("class", "input-field"); -const startDateInput = document.createElement('input'); -startDateInput.setAttribute('type', 'datetime-local'); -startDateInput.setAttribute('id', 'start-date'); -startDateInput.setAttribute('class', 'input-field'); + const endDateInput = document.createElement("input"); + endDateInput.setAttribute("type", "datetime-local"); + endDateInput.setAttribute("id", "end-date"); + endDateInput.setAttribute("class", "input-field"); -const endDateInput = document.createElement('input'); -endDateInput.setAttribute('type', 'datetime-local'); -endDateInput.setAttribute('id', 'end-date'); -endDateInput.setAttribute('class', 'input-field'); + dateFilter.appendChild(startDateInput); + dateFilter.appendChild(endDateInput); + container.appendChild(dateFilter); -dateFilter.appendChild(startDateInput); -dateFilter.appendChild(endDateInput); -container.appendChild(dateFilter); + const nodeFilter = document.createElement("div"); + nodeFilter.setAttribute("class", "node-filter"); -const nodeFilter = document.createElement('div'); -nodeFilter.setAttribute('class', 'node-filter'); + const nodeInput = document.createElement("input"); + nodeInput.setAttribute("type", "text"); + nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); + nodeInput.setAttribute("id", "node-input"); + nodeInput.setAttribute("class", "input-field"); -const nodeInput = document.createElement('input'); -nodeInput.setAttribute('type', 'text'); -nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)'); -nodeInput.setAttribute('id', 'node-input'); -nodeInput.setAttribute('class', 'input-field'); + nodeFilter.appendChild(nodeInput); + container.appendChild(nodeFilter); -nodeFilter.appendChild(nodeInput); -container.appendChild(nodeFilter); + container.appendChild(filterButton); -container.appendChild(filterButton); + document.body.appendChild(container); +} -document.body.appendChild(container); \ No newline at end of file +// Get request to fetch data from the server +function fetchData() { + fetch("http://145.92.8.114/getNodeInfo") + .then((response) => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then((data) => { + data.push(...data); + createFilterContainer(); + }) + .catch((error) => { + console.error("Error fetching data:", error); + }); +} + +fetchData(); \ No newline at end of file From 66793a12fc117dd9e5d791c5508a46738184abca Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sat, 30 Mar 2024 22:50:24 +0100 Subject: [PATCH 21/62] kleine pdates questiondata pulling. --- server/Flask/main.py | 6 +++--- server/Flask/queries.py | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 7232c81..6e7c9f4 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -69,12 +69,12 @@ def getNodeInfo(macAdress): return result -def getQuestionData(): +def getQuestionData(questionID, replies): mydb = loginDB() - query = get_query(False, False, False, True, False) + query = get_query(False, False, False, questionID, replies) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) - result = cursor.fetchall() # Fetch the results + result = cursor.fetchall() # Fetch the results cursor.close() mydb.close() diff --git a/server/Flask/queries.py b/server/Flask/queries.py index d2b4144..143b691 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -8,7 +8,7 @@ def get_query(node, dataType, MAC, questionID, replies): elif MAC: query = f"SELECT * FROM Node WHERE MAC = '{MAC}'" elif replies and questionID: - query = f"SELECT * FROM Reply WHERE QuestionID = '{questionID}'" + query = f"SELECT * FROM Reply WHERE replies = '{replies}' AND QuestionID = '{questionID}'" elif questionID: query = f"SELECT * FROM Question" elif replies: From 034dd2b660ddd36b2f8905837f6d269f7538ba99 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 22:57:40 +0100 Subject: [PATCH 22/62] Add Questions Dashboard page --- web/newWebsite/graphs.html | 2 + web/newWebsite/index.html | 2 + web/newWebsite/questions-dashboard.html | 34 +++++++++++++++ web/newWebsite/questions-main.js | 0 web/newWebsite/settings.html | 2 + .../styles/questions-dashboard-styles.css | 42 +++++++++++++++++++ 6 files changed, 82 insertions(+) create mode 100644 web/newWebsite/questions-dashboard.html create mode 100644 web/newWebsite/questions-main.js create mode 100644 web/newWebsite/styles/questions-dashboard-styles.css diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index 0629172..e6c7ab4 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -23,6 +23,8 @@
  • Settings
    • +
  • + Questions diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index dfe847a..97dcb44 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -26,6 +26,8 @@
  • Settings
    • +
  • + Questions diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html new file mode 100644 index 0000000..9cd18e8 --- /dev/null +++ b/web/newWebsite/questions-dashboard.html @@ -0,0 +1,34 @@ + + + + + + + + Graphs + + + + + + + + + + + + \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js new file mode 100644 index 0000000..e69de29 diff --git a/web/newWebsite/settings.html b/web/newWebsite/settings.html index 6c33bd2..383842a 100644 --- a/web/newWebsite/settings.html +++ b/web/newWebsite/settings.html @@ -22,6 +22,8 @@
  • Settings
    • +
  • + Questions diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css new file mode 100644 index 0000000..966d901 --- /dev/null +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -0,0 +1,42 @@ +* { + box-sizing: border-box; + font-family: "Roboto", sans-serif; + } + + body { + padding-top: 5vw; + display: flex; + background-color: #afafaf; + margin: 0; + } + + .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 a381fa1ee10509e535b2192751baf063bece1106 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 22:57:43 +0100 Subject: [PATCH 23/62] Update fetch URL in graph-main.js --- web/newWebsite/graph-main.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index c1436ed..9aba63a 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -109,15 +109,14 @@ function createFilterContainer() { // Get request to fetch data from the server function fetchData() { - fetch("http://145.92.8.114/getNodeInfo") + fetch("http://145.92.8.114/getMeasurements") .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); } return response.json(); }) - .then((data) => { - data.push(...data); + .then((measurements) => { createFilterContainer(); }) .catch((error) => { From 074406aec57a4ead2b28d93d78cdfea8b46adcf1 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 14:11:33 +0200 Subject: [PATCH 24/62] kleine update, pagina voor questions beginning template --- web/newWebsite/questions-dashboard.html | 5 +++- web/newWebsite/questions-main.js | 28 +++++++++++++++++++ .../styles/questions-dashboard-styles.css | 14 ++++++++-- 3 files changed, 43 insertions(+), 4 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 9cd18e8..53d6b9c 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -4,7 +4,7 @@ - + Graphs @@ -30,5 +30,8 @@ +
    +
    + \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index e69de29..5ed0c35 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -0,0 +1,28 @@ +// Sample data +const dataItems = [ + { id: 1, name: "Item 1", description: "Description for Item 1" }, + { id: 2, name: "Item 2", description: "Description for Item 2" }, + { id: 3, name: "Item 3", description: "Description for Item 3" } +]; + +// Function to display data items on the webpage +function displayDataItems() { + const container = document.getElementById("data-container"); + + // Clear previous content + container.innerHTML = ""; + + // Loop through data items and create HTML elements + dataItems.forEach(item => { + const itemElement = document.createElement("div"); + itemElement.classList.add("data-item"); + itemElement.innerHTML = ` +

    ${item.name}

    +

    ${item.description}

    + `; + container.appendChild(itemElement); + }); +} + +// Call the function to display data items when the page loads +window.onload = displayDataItems; diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 966d901..29fd8ce 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -11,10 +11,10 @@ } .navbar { - background-color: #333; + background-color: #3d898c; height: 60px; display: flex; - align-items: center; + 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 */ @@ -39,4 +39,12 @@ color: #fff; text-decoration: none; font-size: 18px; - } \ No newline at end of file + } + + #data-container { + width: 80%; + margin: 0 auto; + padding: 20px; + background-color: #f5f5f5; + border: 1px solid #ccc; +} \ No newline at end of file From 64ba63e9ad82e39b9527f6adbaaa345e0cbc2bcf Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 15:58:34 +0200 Subject: [PATCH 25/62] piegraphs added --- web/newWebsite/questions-dashboard.html | 60 +++++- web/newWebsite/questions-main.js | 176 +++++++++++++++--- .../styles/questions-dashboard-styles.css | 10 +- 3 files changed, 218 insertions(+), 28 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 53d6b9c..f2df4fc 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -1,4 +1,4 @@ - + + + + + + + + + + + Graphs + + + + + + + + + +
    +

    Question 1

    + + +

    Question 2

    + + + +
    + + + + diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 5ed0c35..c4baf7f 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,28 +1,156 @@ -// Sample data -const dataItems = [ - { id: 1, name: "Item 1", description: "Description for Item 1" }, - { id: 2, name: "Item 2", description: "Description for Item 2" }, - { id: 3, name: "Item 3", description: "Description for Item 3" } -]; -// Function to display data items on the webpage -function displayDataItems() { - const container = document.getElementById("data-container"); +// // Sample data +// const dataItems = [ +// { id: 1, name: "Question 1", description: "Description for Item 1" }, +// { id: 2, name: "Question 2", description: "Description for Item 2" }, +// ]; - // Clear previous content - container.innerHTML = ""; +// // Function to display data items on the webpage +// function displayDataItems() { +// const container = document.getElementById("data-container"); - // Loop through data items and create HTML elements - dataItems.forEach(item => { - const itemElement = document.createElement("div"); - itemElement.classList.add("data-item"); - itemElement.innerHTML = ` -

    ${item.name}

    -

    ${item.description}

    - `; - container.appendChild(itemElement); - }); -} +// // Clear previous content +// container.innerHTML = ""; -// Call the function to display data items when the page loads -window.onload = displayDataItems; +// // Loop through data items and create HTML elements +// dataItems.forEach(item => { +// const itemElement = document.createElement("div"); +// itemElement.classList.add("data-item"); +// itemElement.innerHTML = ` +//

    ${item.name}

    +//

    ${item.description}

    +// `; +// container.appendChild(itemElement); +// }); +// } + +// // Call the function to display data items when the page loads +// window.onload = displayDataItems; + +// // Sample data for the questionnaire results +// const questionnaireData = { +// labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'], +// datasets: [{ +// label: 'Responses', +// data: [20, 35, 15, 10, 20], // Sample response counts for each option +// backgroundColor: [ +// 'rgba(255, 99, 132, 0.2)', +// 'rgba(54, 162, 235, 0.2)', +// 'rgba(255, 206, 86, 0.2)', +// 'rgba(75, 192, 192, 0.2)', +// 'rgba(153, 102, 255, 0.2)' +// ], +// borderColor: [ +// 'rgba(255, 99, 132, 1)', +// 'rgba(54, 162, 235, 1)', +// 'rgba(255, 206, 86, 1)', +// 'rgba(75, 192, 192, 1)', +// 'rgba(153, 102, 255, 1)' +// ], +// borderWidth: 1 +// }] +// }; + +// // Chart configuration +// const chartConfig = { +// type: 'bar', +// data: questionnaireData, +// options: { +// scales: { +// yAxes: [{ +// ticks: { +// beginAtZero: true +// } +// }] +// } +// } +// }; + +// // Create the chart +// const ctx = document.getElementById('chart').getContext('2d'); +// const myChart = new Chart(ctx, chartConfig); + +// Sample data for the questionnaire results +const question1Data = { + labels: ['Option A', 'Option B', 'Option C'], + datasets: [{ + label: 'Responses', + data: [40, 30, 20], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] +}; + +const question2Data = { + labels: ['Option A', 'Option B', 'Option C'], + datasets: [{ + label: 'Responses', + data: [25, 35, 40], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] +}; + +// Chart configurations for each question +const chartConfig1 = { + type: 'pie', + data: question1Data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 1 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +const chartConfig2 = { + type: 'pie', + data: question2Data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 2 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +// Create the charts +const ctx1 = document.getElementById('chart1').getContext('2d'); +const myChart1 = new Chart(ctx1, chartConfig1); + +const ctx2 = document.getElementById('chart2').getContext('2d'); +const myChart2 = new Chart(ctx2, chartConfig2); diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 29fd8ce..eba538a 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -6,7 +6,7 @@ body { padding-top: 5vw; display: flex; - background-color: #afafaf; + background-color: #dbd7d7; margin: 0; } @@ -47,4 +47,12 @@ padding: 20px; background-color: #f5f5f5; border: 1px solid #ccc; +} + +.chart-container { + width: 80%; + margin: 20px auto; +} +canvas { + margin-bottom: 20px; } \ No newline at end of file From cf0a6c6565ee65595b03ad713b00913bcb6a2556 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 20:22:50 +0200 Subject: [PATCH 26/62] trying to work with classes, but script works for time being. --- web/newWebsite/questions-dashboard.html | 4 + web/newWebsite/questions-main-class.js | 27 +++++++ web/newWebsite/questions-main.js | 100 +++++++----------------- 3 files changed, 58 insertions(+), 73 deletions(-) create mode 100644 web/newWebsite/questions-main-class.js diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index f2df4fc..fa2a045 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -83,9 +83,13 @@

    Question 2

    + + + diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js new file mode 100644 index 0000000..356d3e0 --- /dev/null +++ b/web/newWebsite/questions-main-class.js @@ -0,0 +1,27 @@ +class QuestionCreationClass { + constructor(data, label) { + this.data = data; + this.label = label; + } + + get questionData() { + return { + labels: this.label, + datasets: [{ + label: 'Responses', + data: this.data, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] + }; + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index c4baf7f..0b19d5b 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,76 +1,3 @@ - -// // Sample data -// const dataItems = [ -// { id: 1, name: "Question 1", description: "Description for Item 1" }, -// { id: 2, name: "Question 2", description: "Description for Item 2" }, -// ]; - -// // Function to display data items on the webpage -// function displayDataItems() { -// const container = document.getElementById("data-container"); - -// // Clear previous content -// container.innerHTML = ""; - -// // Loop through data items and create HTML elements -// dataItems.forEach(item => { -// const itemElement = document.createElement("div"); -// itemElement.classList.add("data-item"); -// itemElement.innerHTML = ` -//

    ${item.name}

    -//

    ${item.description}

    -// `; -// container.appendChild(itemElement); -// }); -// } - -// // Call the function to display data items when the page loads -// window.onload = displayDataItems; - -// // Sample data for the questionnaire results -// const questionnaireData = { -// labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'], -// datasets: [{ -// label: 'Responses', -// data: [20, 35, 15, 10, 20], // Sample response counts for each option -// backgroundColor: [ -// 'rgba(255, 99, 132, 0.2)', -// 'rgba(54, 162, 235, 0.2)', -// 'rgba(255, 206, 86, 0.2)', -// 'rgba(75, 192, 192, 0.2)', -// 'rgba(153, 102, 255, 0.2)' -// ], -// borderColor: [ -// 'rgba(255, 99, 132, 1)', -// 'rgba(54, 162, 235, 1)', -// 'rgba(255, 206, 86, 1)', -// 'rgba(75, 192, 192, 1)', -// 'rgba(153, 102, 255, 1)' -// ], -// borderWidth: 1 -// }] -// }; - -// // Chart configuration -// const chartConfig = { -// type: 'bar', -// data: questionnaireData, -// options: { -// scales: { -// yAxes: [{ -// ticks: { -// beginAtZero: true -// } -// }] -// } -// } -// }; - -// // Create the chart -// const ctx = document.getElementById('chart').getContext('2d'); -// const myChart = new Chart(ctx, chartConfig); - -// Sample data for the questionnaire results const question1Data = { labels: ['Option A', 'Option B', 'Option C'], datasets: [{ @@ -90,6 +17,11 @@ const question1Data = { }] }; +// let dummydata = [40, 30, 20]; +// let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; + +// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); + const question2Data = { labels: ['Option A', 'Option B', 'Option C'], datasets: [{ @@ -147,6 +79,24 @@ const chartConfig2 = { } } }; +// const chartConfig3 = { +// type: 'pie', +// data: question3Data.questionData(), +// options: { +// responsive: true, +// legend: { +// position: 'top', +// }, +// title: { +// display: true, +// text: 'Question 3 Responses' +// }, +// animation: { +// animateScale: true, +// animateRotate: true +// } +// } +// }; // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); @@ -154,3 +104,7 @@ const myChart1 = new Chart(ctx1, chartConfig1); const ctx2 = document.getElementById('chart2').getContext('2d'); const myChart2 = new Chart(ctx2, chartConfig2); + +// const ctx3 = document.getElementById('chart3').getContext('2d'); +// const myChart3 = new Chart(ctx3, chartConfig3); + From 3435bdaaabec4091880201d57cf6de9a10317bdd Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 20:27:33 +0200 Subject: [PATCH 27/62] extra dummy question added. --- web/newWebsite/questions-dashboard.html | 4 +-- web/newWebsite/questions-main.js | 40 +++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index fa2a045..f3cb2f2 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -83,8 +83,8 @@

    Question 2

    - +

    Question 3

    + diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 0b19d5b..581545d 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -41,6 +41,25 @@ const question2Data = { }] }; +const question3Data = { + labels: ['Option A', 'Option B', 'Option C'], + datasets: [{ + label: 'Responses', + data: [30, 30, 30], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] +}; + // Chart configurations for each question const chartConfig1 = { type: 'pie', @@ -79,6 +98,25 @@ const chartConfig2 = { } } }; + +const chartConfig3 = { + type: 'pie', + data: question3Data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 3 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; // const chartConfig3 = { // type: 'pie', // data: question3Data.questionData(), @@ -105,6 +143,8 @@ const myChart1 = new Chart(ctx1, chartConfig1); const ctx2 = document.getElementById('chart2').getContext('2d'); const myChart2 = new Chart(ctx2, chartConfig2); +const ctx3 = document.getElementById('chart3').getContext('2d'); +const myChart3 = new Chart(ctx3, chartConfig3); // const ctx3 = document.getElementById('chart3').getContext('2d'); // const myChart3 = new Chart(ctx3, chartConfig3); From f2050a54a443296f58f7c94b1c4d266b89f2066f Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 20:48:50 +0200 Subject: [PATCH 28/62] class working kindof, kan nog niet gelezen worden vanaf andere js file. --- web/newWebsite/questions-dashboard.html | 51 +---------------- web/newWebsite/questions-main-class.js | 52 ++++++++--------- web/newWebsite/questions-main.js | 75 +++++++++++-------------- 3 files changed, 60 insertions(+), 118 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index f3cb2f2..6e267a1 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -1,50 +1,3 @@ - - - @@ -90,6 +43,6 @@ - + - + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js index 356d3e0..a1e301b 100644 --- a/web/newWebsite/questions-main-class.js +++ b/web/newWebsite/questions-main-class.js @@ -1,27 +1,27 @@ -class QuestionCreationClass { - constructor(data, label) { - this.data = data; - this.label = label; - } +// class QuestionCreationClass { +// constructor(data, label) { +// this.data = data; +// this.label = label; +// } - get questionData() { - return { - labels: this.label, - datasets: [{ - label: 'Responses', - data: this.data, - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] - }; - } -} \ No newline at end of file +// get questionData() { +// return { +// labels: this.label, +// datasets: [{ +// label: 'Responses', +// data: this.data, +// backgroundColor: [ +// 'rgba(255, 99, 132, 0.2)', +// 'rgba(54, 162, 235, 0.2)', +// 'rgba(255, 206, 86, 0.2)' +// ], +// borderColor: [ +// 'rgba(255, 99, 132, 1)', +// 'rgba(54, 162, 235, 1)', +// 'rgba(255, 206, 86, 1)' +// ], +// borderWidth: 1 +// }] +// }; +// } +// } \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 581545d..747707a 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,3 +1,31 @@ +class QuestionCreationClass { + constructor(data, label) { + this.data = data; + this.label = label; + } + + get questionData() { + return { + labels: this.label, + datasets: [{ + label: 'Responses', + data: this.data, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] + }; + } +} + const question1Data = { labels: ['Option A', 'Option B', 'Option C'], datasets: [{ @@ -17,10 +45,10 @@ const question1Data = { }] }; -// let dummydata = [40, 30, 20]; -// let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; +let dummydata = [30, 20, 20]; +let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; -// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); +const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); const question2Data = { labels: ['Option A', 'Option B', 'Option C'], @@ -41,25 +69,6 @@ const question2Data = { }] }; -const question3Data = { - labels: ['Option A', 'Option B', 'Option C'], - datasets: [{ - label: 'Responses', - data: [30, 30, 30], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] -}; - // Chart configurations for each question const chartConfig1 = { type: 'pie', @@ -101,7 +110,7 @@ const chartConfig2 = { const chartConfig3 = { type: 'pie', - data: question3Data, + data: question3Data.questionData, options: { responsive: true, legend: { @@ -117,24 +126,6 @@ const chartConfig3 = { } } }; -// const chartConfig3 = { -// type: 'pie', -// data: question3Data.questionData(), -// options: { -// responsive: true, -// legend: { -// position: 'top', -// }, -// title: { -// display: true, -// text: 'Question 3 Responses' -// }, -// animation: { -// animateScale: true, -// animateRotate: true -// } -// } -// }; // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); @@ -145,6 +136,4 @@ const myChart2 = new Chart(ctx2, chartConfig2); const ctx3 = document.getElementById('chart3').getContext('2d'); const myChart3 = new Chart(ctx3, chartConfig3); -// const ctx3 = document.getElementById('chart3').getContext('2d'); -// const myChart3 = new Chart(ctx3, chartConfig3); From 28cc13484f9a3e7b95d62a232af1813605c3288e Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sun, 31 Mar 2024 21:08:35 +0200 Subject: [PATCH 29/62] Remove graph1 div and add flex-direction to body --- web/newWebsite/graphs.html | 2 -- web/newWebsite/styles/graph-styles.css | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index e6c7ab4..d4b62cc 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -29,8 +29,6 @@ -
    - diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index 68c7c86..70e4a11 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -6,6 +6,7 @@ body { padding-top: 5vw; display: flex; + flex-direction: column; background-color: #afafaf; margin: 0; } From e94f12e13c7c3ba3db82f7127dca5671d9626db4 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sun, 31 Mar 2024 21:08:40 +0200 Subject: [PATCH 30/62] Refactor graph classes and add data processor --- web/newWebsite/graph-classes.js | 181 ++++++++++++++++++-------------- web/newWebsite/graph-main.js | 17 ++- 2 files changed, 117 insertions(+), 81 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 200b0f0..63257c3 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -1,79 +1,106 @@ -class Graph{ - constructor(id) { - this.id = "graph" + id; - this.timeArray = []; - } - - // Function to create a graph - makeGraph(line, lineColor, name) { - let lineArray; - switch (line) { - case "temp": - lineArray = this.tempArray; - break; - case "humi": - lineArray = this.humiArray; - break; - case "eco2": - lineArray = this.eco2Array; - break; - case "tvoc": - lineArray = this.tvocArray; - break; - default: - console.error("Invalid line"); - } - this.timeArray.push(new Date()); - Plotly.plot(this.id, [ - { - x: this.timeArray, - y: lineArray, - mode: "lines", - line: { color: lineColor }, - name: name, - }, - ]); - } -} - -class LiveGraph extends Graph{ - // Constructor to initialize the graph - constructor(id){ - super(id); - this.tempArray = []; - this.humiArray = []; - this.eco2Array = []; - this.tvocArray = []; - this.cnt = 0; - } - // Function to update the graph with new values got from updateData function - updateGraph() { - let time = new Date(); - this.timeArray.push(new Date()); - - let update = { - x: [[this.timeArray]], - y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]] - }; - - let olderTime = time.setMinutes(time.getMinutes() - 1); - let futureTime = time.setMinutes(time.getMinutes() + 1); - let minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout(this.id, minuteView); - if (this.cnt === 10) clearInterval(interval); - } - // function to get the new data for graph - updateData(temperature, humidity, eCO2, TVOC) { - // Update the graph - this.tempArray.push(temperature); - this.humiArray.push(humidity); - this.eco2Array.push(eCO2 / 10); - this.tvocArray.push(TVOC / 10); - } +class Graph { + constructor(id) { + this.id = "graph" + id; + this.timeArray = []; } + // Function to create a graph + makeGraph(line, lineColor, name) { + let lineArray; + switch (line) { + case "temp": + lineArray = this.tempArray; + break; + case "humi": + lineArray = this.humiArray; + break; + case "eco2": + lineArray = this.eco2Array; + break; + case "tvoc": + lineArray = this.tvocArray; + break; + default: + console.error("Invalid line"); + } + this.timeArray.push(new Date()); + Plotly.plot(this.id, [ + { + x: this.timeArray, + y: lineArray, + mode: "lines", + line: { color: lineColor }, + name: name, + }, + ]); + } +} + +class LiveGraph extends Graph { + // Constructor to initialize the graph + constructor(id) { + super(id); + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; + this.cnt = 0; + } + // Function to update the graph with new values got from updateData function + updateGraph() { + let time = new Date(); + this.timeArray.push(new Date()); + + let update = { + x: [[this.timeArray]], + y: [ + [this.tempArray], + [this.humiArray], + [this.eco2Array], + [this.tvocArray], + ], + }; + + let olderTime = time.setMinutes(time.getMinutes() - 1); + let futureTime = time.setMinutes(time.getMinutes() + 1); + let minuteView = { + xaxis: { + type: "date", + range: [olderTime, futureTime], + }, + }; + Plotly.relayout(this.id, minuteView); + if (this.cnt === 10) clearInterval(interval); + } + // function to get the new data for graph + updateData(temperature, humidity, eCO2, TVOC) { + // Update the graph + this.tempArray.push(temperature); + this.humiArray.push(humidity); + this.eco2Array.push(eCO2 / 10); + this.tvocArray.push(TVOC / 10); + } +} + +class DataProcessor { + constructor(data) { + this.data = data; + } + // You can add more filtering methods based on different criteria if needed + update(data) { + this.data = data; + console.log("Data updated"); + console.log(data); + } + + graph() { + let div = document.createElement("div"); + div.setAttribute("id", "graph1"); + document.body.appendChild(div); + let graph = new Graph(1); + graph.makeGraph("temp", "red", "Temperature"); + graph.makeGraph("humi", "blue", "Humidity"); + graph.makeGraph("eco2", "green", "eCO2"); + graph.makeGraph("tvoc", "purple", "TVOC"); + } +} diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 9aba63a..37b3cd0 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,6 +1,6 @@ // Sample data - you can replace this with your actual dataset const data = []; - +processor = new DataProcessor(); // Function to create checkbox with label function createCheckBox(id, label) { const checkbox = document.createElement("input"); @@ -109,19 +109,28 @@ function createFilterContainer() { // Get request to fetch data from the server function fetchData() { - fetch("http://145.92.8.114/getMeasurements") + fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-27%2011:47:11") .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); } return response.json(); }) - .then((measurements) => { + .then((data) => { createFilterContainer(); + processor.update(data); + processor.graph(); + }) .catch((error) => { console.error("Error fetching data:", error); }); } -fetchData(); \ No newline at end of file +fetchData(); + +// Function to create the graph +function createGraph() { + const graph = new Graph("graph"); + graph.updateGraph(); +} \ No newline at end of file From 912ffc052b926c1f3c01f9ad4a8279cf99548f8a Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sun, 31 Mar 2024 21:08:48 +0200 Subject: [PATCH 31/62] Add date range filter to getData function --- server/Flask/main.py | 10 ++++++---- server/Flask/queries.py | 6 +++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 6e7c9f4..349cf99 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -3,12 +3,14 @@ import mysql.connector from queries import * app = Flask(__name__) -@app.route('/') +@app.route('/getMeasurements') def index(): node = request.args.get('node', default = None) dataType = request.args.get('dataType', default = None) MAC = request.args.get('MAC', default = None) - return getData(node, dataType, MAC) + dateStart = request.args.get('dateStart', default = None) + dateEnd = request.args.get('dateEnd', default = None) + return getData(node, dataType, MAC, dateStart, dateEnd) @app.route('/updateData') def updateDataIndex(): @@ -47,9 +49,9 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC): +def getData(node, dataType, MAC, dateStart, dateEnd): mydb = loginDB() - query = get_query(node, dataType, MAC, False, False) + query = get_query(node, dataType, MAC, False, False, dateStart, dateEnd) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 143b691..65abfeb 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -1,4 +1,4 @@ -def get_query(node, dataType, MAC, questionID, replies): +def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): if node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" elif node: @@ -13,6 +13,10 @@ def get_query(node, dataType, MAC, questionID, replies): query = f"SELECT * FROM Question" elif replies: query = f"SELECT * FROM Reply" + elif dateStart and dateEnd: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' else: query = "SELECT * FROM `Measurement`" return query From ae082b53a41e3ef5ec569b3d590d661fbaeeea36 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sun, 31 Mar 2024 21:19:37 +0200 Subject: [PATCH 32/62] Add temperature, humidity, eCO2, and TVOC data to graph and update graph view --- web/newWebsite/graph-classes.js | 60 ++++++++++++++++++++++++++++++++- web/newWebsite/graph-main.js | 1 - 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 63257c3..4bacf78 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -2,6 +2,10 @@ class Graph { constructor(id) { this.id = "graph" + id; this.timeArray = []; + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; } // Function to create a graph @@ -34,6 +38,49 @@ class Graph { }, ]); } + + updateData(type, value) { + switch (type) { + case "Temp": + this.tempArray.push(value); + break; + case "Humi": + this.humiArray.push(value); + break; + case "eCO2": + this.eco2Array.push(value); + break; + case "TVOC": + this.tvocArray.push(value); + break; + default: + console.error("Invalid type"); + } + } + + updateGraph() { + let time = new Date(); + this.timeArray.push(time); + let update = { + x: [[this.timeArray]], + y: [ + [this.tempArray], + [this.humiArray], + [this.eco2Array], + [this.tvocArray], + ], + }; + + let olderTime = time.setMinutes(time.getMinutes() - 1); + let futureTime = time.setMinutes(time.getMinutes() + 1); + let minuteView = { + xaxis: { + type: "date", + range: [olderTime, futureTime], + }, + }; + Plotly.relayout(this.id, minuteView); + } } class LiveGraph extends Graph { @@ -101,6 +148,17 @@ class DataProcessor { graph.makeGraph("temp", "red", "Temperature"); graph.makeGraph("humi", "blue", "Humidity"); graph.makeGraph("eco2", "green", "eCO2"); - graph.makeGraph("tvoc", "purple", "TVOC"); + graph.makeGraph("tvoc", "#F5G644", "TVOC"); + + graph.updateData(this.data[0].Type, this.data[0].Value); + console.log(this.data[0].Type, this.data[0].Value); + graph.updateData(this.data[1].Type, this.data[1].Value); + console.log(this.data[1].Type, this.data[1].Value); + graph.updateData(this.data[2].Type, this.data[2].Value); + console.log(this.data[2].Type, this.data[2].Value); + graph.updateData(this.data[3].Type, this.data[3].Value); + console.log(this.data[3].Type, this.data[3].Value); + + graph.updateGraph(); } } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 37b3cd0..c271e48 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -120,7 +120,6 @@ function fetchData() { createFilterContainer(); processor.update(data); processor.graph(); - }) .catch((error) => { console.error("Error fetching data:", error); From 76532c538b88a3c086409835ec542d0da9a99c39 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sun, 31 Mar 2024 21:24:52 +0200 Subject: [PATCH 33/62] Refactor graph creation and update methods --- web/newWebsite/graph-classes.js | 25 ++++++++++++++----------- web/newWebsite/graph-main.js | 11 +++-------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 4bacf78..8c90a2e 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -136,29 +136,32 @@ class DataProcessor { // You can add more filtering methods based on different criteria if needed update(data) { this.data = data; + this.graph; console.log("Data updated"); console.log(data); } - graph() { + makeGraph() { let div = document.createElement("div"); div.setAttribute("id", "graph1"); document.body.appendChild(div); - let graph = new Graph(1); - graph.makeGraph("temp", "red", "Temperature"); - graph.makeGraph("humi", "blue", "Humidity"); - graph.makeGraph("eco2", "green", "eCO2"); - graph.makeGraph("tvoc", "#F5G644", "TVOC"); + this.graph = new Graph(1); + this.graph.makeGraph("temp", "red", "Temperature"); + this.graph.makeGraph("humi", "blue", "Humidity"); + this.graph.makeGraph("eco2", "green", "eCO2"); + this.graph.makeGraph("tvoc", "#F5G644", "TVOC"); + } - graph.updateData(this.data[0].Type, this.data[0].Value); + updateGraph() { + this.graph.updateData(this.data[0].Type, this.data[0].Value); console.log(this.data[0].Type, this.data[0].Value); - graph.updateData(this.data[1].Type, this.data[1].Value); + this.graph.updateData(this.data[1].Type, this.data[1].Value); console.log(this.data[1].Type, this.data[1].Value); - graph.updateData(this.data[2].Type, this.data[2].Value); + this.graph.updateData(this.data[2].Type, this.data[2].Value); console.log(this.data[2].Type, this.data[2].Value); - graph.updateData(this.data[3].Type, this.data[3].Value); + this.graph.updateData(this.data[3].Type, this.data[3].Value); console.log(this.data[3].Type, this.data[3].Value); - graph.updateGraph(); + this.graph.updateGraph(); } } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index c271e48..8f2de1d 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -119,17 +119,12 @@ function fetchData() { .then((data) => { createFilterContainer(); processor.update(data); - processor.graph(); + processor.makeGraph(); + processor.updateGraph(); }) .catch((error) => { console.error("Error fetching data:", error); }); } -fetchData(); - -// Function to create the graph -function createGraph() { - const graph = new Graph("graph"); - graph.updateGraph(); -} \ No newline at end of file +fetchData(); \ No newline at end of file From 5e2daa445a6159e8e2c76fabf554709ce2ef01fb Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:33:18 +0200 Subject: [PATCH 34/62] can succesfully make a graph from database data --- web/newWebsite/graph-classes.js | 38 +++++++++++---------------------- web/newWebsite/graph-main.js | 7 ++++-- 2 files changed, 17 insertions(+), 28 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 8c90a2e..d5bce51 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -10,6 +10,9 @@ class Graph { // Function to create a graph makeGraph(line, lineColor, name) { + let div = document.createElement("div"); + div.setAttribute("id", this.id); + document.body.appendChild(div); let lineArray; switch (line) { case "temp": @@ -27,7 +30,6 @@ class Graph { default: console.error("Invalid line"); } - this.timeArray.push(new Date()); Plotly.plot(this.id, [ { x: this.timeArray, @@ -39,7 +41,9 @@ class Graph { ]); } - updateData(type, value) { + updateData(type, value, timestamp) { + this.timeArray.push(timestamp); + switch (type) { case "Temp": this.tempArray.push(value); @@ -59,8 +63,6 @@ class Graph { } updateGraph() { - let time = new Date(); - this.timeArray.push(time); let update = { x: [[this.timeArray]], y: [ @@ -71,15 +73,7 @@ class Graph { ], }; - let olderTime = time.setMinutes(time.getMinutes() - 1); - let futureTime = time.setMinutes(time.getMinutes() + 1); - let minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout(this.id, minuteView); + Plotly.relayout(this.id, update); } } @@ -142,9 +136,6 @@ class DataProcessor { } makeGraph() { - let div = document.createElement("div"); - div.setAttribute("id", "graph1"); - document.body.appendChild(div); this.graph = new Graph(1); this.graph.makeGraph("temp", "red", "Temperature"); this.graph.makeGraph("humi", "blue", "Humidity"); @@ -153,15 +144,10 @@ class DataProcessor { } updateGraph() { - this.graph.updateData(this.data[0].Type, this.data[0].Value); - console.log(this.data[0].Type, this.data[0].Value); - this.graph.updateData(this.data[1].Type, this.data[1].Value); - console.log(this.data[1].Type, this.data[1].Value); - this.graph.updateData(this.data[2].Type, this.data[2].Value); - console.log(this.data[2].Type, this.data[2].Value); - this.graph.updateData(this.data[3].Type, this.data[3].Value); - console.log(this.data[3].Type, this.data[3].Value); - - this.graph.updateGraph(); + for (let i = 0; i < this.data.length; i++) { + this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); + console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); + this.graph.updateGraph(); + } } } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 8f2de1d..7f52e14 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,6 +1,9 @@ // Sample data - you can replace this with your actual dataset const data = []; processor = new DataProcessor(); +dateStart='2024-03-27%2011:47:11' +dateEnd="2024-03-27%2011:47:11" + // Function to create checkbox with label function createCheckBox(id, label) { const checkbox = document.createElement("input"); @@ -109,7 +112,7 @@ function createFilterContainer() { // Get request to fetch data from the server function fetchData() { - fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-27%2011:47:11") + fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11") .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); @@ -120,7 +123,7 @@ function fetchData() { createFilterContainer(); processor.update(data); processor.makeGraph(); - processor.updateGraph(); + processor.updateGraph(dateStart, dateEnd); }) .catch((error) => { console.error("Error fetching data:", error); From 69ef7013bb55666810b21c9219c0d31e144aeefe Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:50:47 +0200 Subject: [PATCH 35/62] Refactor get_query function to handle additional conditions --- server/Flask/queries.py | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 65abfeb..2257b79 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -1,5 +1,13 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): - if node and dataType: + if dateStart and dateEnd and node: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node};''' + elif dateStart and dateEnd: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' + elif node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" elif node: query = f"SELECT * FROM Measurement WHERE NodeID = {node}" @@ -13,7 +21,7 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): query = f"SELECT * FROM Question" elif replies: query = f"SELECT * FROM Reply" - elif dateStart and dateEnd: + elif dateStart and dateEnd and node: query = f'''SELECT * FROM Measurement WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' From 0d86c6bcbd0ec87cda165b71844f880aeb293b1e Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:50:52 +0200 Subject: [PATCH 36/62] Add node parameter to fetch request --- web/newWebsite/graph-main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 7f52e14..5b6db31 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -112,7 +112,7 @@ function createFilterContainer() { // Get request to fetch data from the server function fetchData() { - fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11") + fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11&node=113") .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); From a4a73b84cc0ffd08e4f0548f13b785da78ebf4a3 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:58:39 +0200 Subject: [PATCH 37/62] Refactor fetchData function and add getLink function --- web/newWebsite/graph-main.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 5b6db31..8058f94 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,8 +1,6 @@ // Sample data - you can replace this with your actual dataset const data = []; processor = new DataProcessor(); -dateStart='2024-03-27%2011:47:11' -dateEnd="2024-03-27%2011:47:11" // Function to create checkbox with label function createCheckBox(id, label) { @@ -110,9 +108,15 @@ function createFilterContainer() { document.body.appendChild(container); } +// Function to get the link for the get request +function getLink(startDate, endDate, node) { + return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + + "&dateEnd=" + endDate.toISOString() + + "&node=" + node; +} // Get request to fetch data from the server -function fetchData() { - fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11&node=113") +function fetchData(link) { + fetch(link) .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); From ec756cd3876fa1339a56db2bad793d65509e4133 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 12:35:52 +0200 Subject: [PATCH 38/62] Update plotly container styles --- web/newWebsite/styles/dashboard-styles.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index e4e367a..f00eca5 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -182,17 +182,19 @@ body { } .plotly-container { - + width: 100%; float: bottom; - margin: auto; padding: 1vw; align-items: center; justify-content: center; display: flex; - width: 20vw; - } -* + +.js-plotly-plot { + width: 90%; + height: 100%; +} + .disabled { opacity: 0; height: 0; From 81b81683c9f91cd5a2d0b3be91450022882f888f Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 12:46:08 +0200 Subject: [PATCH 39/62] questions awnsers page updated with variables and dummydata, class now on sepperate file. --- docs/brainstorm/Questions Enquete.md | 2 +- web/newWebsite/questions-dashboard.html | 15 ++- web/newWebsite/questions-main-class.js | 52 +++++----- web/newWebsite/questions-main.js | 128 +++++++++++------------- 4 files changed, 97 insertions(+), 100 deletions(-) diff --git a/docs/brainstorm/Questions Enquete.md b/docs/brainstorm/Questions Enquete.md index 5fc8bc8..e32bd27 100644 --- a/docs/brainstorm/Questions Enquete.md +++ b/docs/brainstorm/Questions Enquete.md @@ -9,7 +9,7 @@ Questions shouldn't be able to measure using sensors. 3 possible answers. - How clean is the study area? (clean, normal, disgusting). - What do you think of the temperature in the study area? (hot, perfect, cold). - How crowded would you say the study area is?(not at all, its fine, really crowded). -- Is there enough help available? (no, decently, yes). +- Is there enough help available on the 5th floor? (no, decently, yes). ### Feedback questions diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 6e267a1..46dad55 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -30,19 +30,24 @@
    -

    Question 1

    +

    Question 1: How clean are the toilets?

    -

    Question 2

    +

    Question 2: How clean is the study area?

    -

    Question 3

    +

    Question 3: What do you think of the temperature in the study area?

    +

    Question 4: How crowded would you say the study area is?

    + + +

    Question 5: Is there enough help available on the 5th floor?

    + +
    - - + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js index a1e301b..356d3e0 100644 --- a/web/newWebsite/questions-main-class.js +++ b/web/newWebsite/questions-main-class.js @@ -1,27 +1,27 @@ -// class QuestionCreationClass { -// constructor(data, label) { -// this.data = data; -// this.label = label; -// } +class QuestionCreationClass { + constructor(data, label) { + this.data = data; + this.label = label; + } -// get questionData() { -// return { -// labels: this.label, -// datasets: [{ -// label: 'Responses', -// data: this.data, -// backgroundColor: [ -// 'rgba(255, 99, 132, 0.2)', -// 'rgba(54, 162, 235, 0.2)', -// 'rgba(255, 206, 86, 0.2)' -// ], -// borderColor: [ -// 'rgba(255, 99, 132, 1)', -// 'rgba(54, 162, 235, 1)', -// 'rgba(255, 206, 86, 1)' -// ], -// borderWidth: 1 -// }] -// }; -// } -// } \ No newline at end of file + get questionData() { + return { + labels: this.label, + datasets: [{ + label: 'Responses', + data: this.data, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] + }; + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 747707a..145523f 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,78 +1,27 @@ -class QuestionCreationClass { - constructor(data, label) { - this.data = data; - this.label = label; - } +let dummydata1 = [40, 30, 20]; +let questionOptionsDummy1 = ['disgusting','clean', 'fine' ]; - get questionData() { - return { - labels: this.label, - datasets: [{ - label: 'Responses', - data: this.data, - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] - }; - } -} +let dummydata2 = [25, 35, 40]; +let questionOptionsDummy2 = ['Option A', 'Option B', 'Option C']; -const question1Data = { - labels: ['Option A', 'Option B', 'Option C'], - datasets: [{ - label: 'Responses', - data: [40, 30, 20], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] -}; +let dummydata3 = [30, 20, 20]; +let questionOptionsDummy3 = ['Option A', 'Option B', 'Option C']; -let dummydata = [30, 20, 20]; -let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; +let dummydata4 = [30, 20, 20]; +let questionOptionsDummy4 = ['Option A', 'Option B', 'Option C']; -const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); +let dummydata5 = [30, 20, 20]; +let questionOptionsDummy5 = ['Option A', 'Option B', 'Option C']; -const question2Data = { - labels: ['Option A', 'Option B', 'Option C'], - datasets: [{ - label: 'Responses', - data: [25, 35, 40], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], - borderWidth: 1 - }] -}; +const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1) +const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2) +const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3); +const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4); +const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5); -// Chart configurations for each question const chartConfig1 = { type: 'pie', - data: question1Data, + data: question1Data.questionData, options: { responsive: true, legend: { @@ -91,7 +40,7 @@ const chartConfig1 = { const chartConfig2 = { type: 'pie', - data: question2Data, + data: question2Data.questionData, options: { responsive: true, legend: { @@ -127,6 +76,44 @@ const chartConfig3 = { } }; +const chartConfig4 = { + type: 'pie', + data: question4Data.questionData, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 4 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +const chartConfig5 = { + type: 'pie', + data: question5Data.questionData, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 5 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); const myChart1 = new Chart(ctx1, chartConfig1); @@ -137,3 +124,8 @@ const myChart2 = new Chart(ctx2, chartConfig2); const ctx3 = document.getElementById('chart3').getContext('2d'); const myChart3 = new Chart(ctx3, chartConfig3); +const ctx4 = document.getElementById('chart4').getContext('2d'); +const myChart4 = new Chart(ctx4, chartConfig4); + +const ctx5 = document.getElementById('chart5').getContext('2d'); +const myChart5 = new Chart(ctx5, chartConfig5); From 9ba6a237f33db715840444e9dfa82834aa1bc636 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 12:53:41 +0200 Subject: [PATCH 40/62] questionawnsers updated. --- web/newWebsite/questions-main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 145523f..8bdaafc 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,17 +1,17 @@ let dummydata1 = [40, 30, 20]; -let questionOptionsDummy1 = ['disgusting','clean', 'fine' ]; +let questionOptionsDummy1 = ['disgusting','clean', 'fine']; let dummydata2 = [25, 35, 40]; -let questionOptionsDummy2 = ['Option A', 'Option B', 'Option C']; +let questionOptionsDummy2 = ['disgusting', 'clean', 'normal']; let dummydata3 = [30, 20, 20]; -let questionOptionsDummy3 = ['Option A', 'Option B', 'Option C']; +let questionOptionsDummy3 = ['cold', 'perfect', 'hot']; let dummydata4 = [30, 20, 20]; -let questionOptionsDummy4 = ['Option A', 'Option B', 'Option C']; +let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; -let questionOptionsDummy5 = ['Option A', 'Option B', 'Option C']; +let questionOptionsDummy5 = ['no','yes', 'decently']; const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1) const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2) From 887e84c16c76b9a303450c29fb7d7407adbc247c Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:06:07 +0200 Subject: [PATCH 41/62] Update graph class and data processor --- web/newWebsite/graph-classes.js | 20 ++-- web/newWebsite/graph-main.js | 176 ++++++++++++++++---------------- 2 files changed, 97 insertions(+), 99 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index d5bce51..3e6e359 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -52,10 +52,10 @@ class Graph { this.humiArray.push(value); break; case "eCO2": - this.eco2Array.push(value); + this.eco2Array.push(value / 10); break; case "TVOC": - this.tvocArray.push(value); + this.tvocArray.push(value / 10); break; default: console.error("Invalid type"); @@ -64,16 +64,11 @@ class Graph { updateGraph() { let update = { - x: [[this.timeArray]], - y: [ - [this.tempArray], - [this.humiArray], - [this.eco2Array], - [this.tvocArray], - ], + x: [this.timeArray], + y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray], }; - - Plotly.relayout(this.id, update); + + Plotly.update(this.id, update); } } @@ -126,11 +121,12 @@ class LiveGraph extends Graph { class DataProcessor { constructor(data) { this.data = data; + this.graph; } // You can add more filtering methods based on different criteria if needed update(data) { this.data = data; - this.graph; + console.log("Data updated"); console.log(data); } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 8058f94..e07f628 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,6 +1,7 @@ // Sample data - you can replace this with your actual dataset const data = []; processor = new DataProcessor(); +let link; // Function to create checkbox with label function createCheckBox(id, label) { @@ -16,106 +17,111 @@ function createCheckBox(id, label) { return { checkbox, checkboxLabel }; } -// Function to ceate filter container and all the input elements -function createFilterContainer() { - // Create HTML input elements for user input - const container = document.createElement("div"); - container.setAttribute("class", "container"); +// Create HTML input elements for user input +const container = document.createElement("div"); +container.setAttribute("class", "container"); - const dataTypesContainer = document.createElement("div"); - dataTypesContainer.setAttribute("class", "data-types"); +const dataTypesContainer = document.createElement("div"); +dataTypesContainer.setAttribute("class", "data-types"); - const temperatureCheckbox = createCheckBox("temperature", "Temperature"); - const humidityCheckbox = createCheckBox("humidity", "Humidity"); - const eco2Checkbox = createCheckBox("eco2", "eCO2"); - const tvocCheckbox = createCheckBox("tvoc", "TVOC"); +const temperatureCheckbox = createCheckBox("temperature", "Temperature"); +const humidityCheckbox = createCheckBox("humidity", "Humidity"); +const eco2Checkbox = createCheckBox("eco2", "eCO2"); +const tvocCheckbox = createCheckBox("tvoc", "TVOC"); - dataTypesContainer.appendChild(temperatureCheckbox.checkbox); - dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); - dataTypesContainer.appendChild(humidityCheckbox.checkbox); - dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); - dataTypesContainer.appendChild(eco2Checkbox.checkbox); - dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); - dataTypesContainer.appendChild(tvocCheckbox.checkbox); - dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); - container.appendChild(dataTypesContainer); +dataTypesContainer.appendChild(temperatureCheckbox.checkbox); +dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); +dataTypesContainer.appendChild(humidityCheckbox.checkbox); +dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); +dataTypesContainer.appendChild(eco2Checkbox.checkbox); +dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); +dataTypesContainer.appendChild(tvocCheckbox.checkbox); +dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); +container.appendChild(dataTypesContainer); - const filterButton = document.createElement("button"); - filterButton.textContent = "Filter Data"; - filterButton.setAttribute("class", "filter-button"); - filterButton.addEventListener("click", () => { - const startDate = new Date(document.getElementById("start-date").value); - const endDate = new Date(document.getElementById("end-date").value); - const selectedNodes = document - .getElementById("node-input") - .value.split(",") - .map((node) => node.trim()); +const filterButton = document.createElement("button"); +filterButton.textContent = "Filter Data"; +filterButton.setAttribute("class", "filter-button"); +filterButton.addEventListener("click", () => { + const startDate = document.getElementById("start-date").value + const endDate = document.getElementById("end-date").value + const selectedNodes = document + .getElementById("node-input") + .value.split(",") + .map((node) => node.trim()); - const selectedFields = []; - const checkboxes = [ - temperatureCheckbox, - humidityCheckbox, - eco2Checkbox, - tvocCheckbox, - ]; - checkboxes.forEach((checkbox) => { - if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); - } - }); - - const filteredData = filterData( - data, - startDate, - endDate, - selectedNodes, - selectedFields - ); - console.log(filteredData); + const selectedFields = []; + const checkboxes = [ + temperatureCheckbox, + humidityCheckbox, + eco2Checkbox, + tvocCheckbox, + ]; + checkboxes.forEach((checkbox) => { + if (checkbox.checkbox.checked) { + selectedFields.push(checkbox.checkbox.id); + } }); - const dateFilter = document.createElement("div"); - dateFilter.setAttribute("class", "date-filter"); + const filteredData = [ + startDate, + endDate, + selectedNodes, + selectedFields + ]; + console.log(filteredData); + console.log(startDate, endDate, selectedNodes); - const startDateInput = document.createElement("input"); - startDateInput.setAttribute("type", "datetime-local"); - startDateInput.setAttribute("id", "start-date"); - startDateInput.setAttribute("class", "input-field"); + generateLink(startDate, endDate, selectedNodes); + fetchData(); +}); - const endDateInput = document.createElement("input"); - endDateInput.setAttribute("type", "datetime-local"); - endDateInput.setAttribute("id", "end-date"); - endDateInput.setAttribute("class", "input-field"); +const dateFilter = document.createElement("div"); +dateFilter.setAttribute("class", "date-filter"); - dateFilter.appendChild(startDateInput); - dateFilter.appendChild(endDateInput); - container.appendChild(dateFilter); +const startDateInput = document.createElement("input"); +startDateInput.setAttribute("type", "datetime-local"); +startDateInput.setAttribute("id", "start-date"); +startDateInput.setAttribute("class", "input-field"); - const nodeFilter = document.createElement("div"); - nodeFilter.setAttribute("class", "node-filter"); +const endDateInput = document.createElement("input"); +endDateInput.setAttribute("type", "datetime-local"); +endDateInput.setAttribute("id", "end-date"); +endDateInput.setAttribute("class", "input-field"); - const nodeInput = document.createElement("input"); - nodeInput.setAttribute("type", "text"); - nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); - nodeInput.setAttribute("id", "node-input"); - nodeInput.setAttribute("class", "input-field"); +dateFilter.appendChild(startDateInput); +dateFilter.appendChild(endDateInput); +container.appendChild(dateFilter); - nodeFilter.appendChild(nodeInput); - container.appendChild(nodeFilter); +const nodeFilter = document.createElement("div"); +nodeFilter.setAttribute("class", "node-filter"); - container.appendChild(filterButton); +const nodeInput = document.createElement("input"); +nodeInput.setAttribute("type", "text"); +nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); +nodeInput.setAttribute("id", "node-input"); +nodeInput.setAttribute("class", "input-field"); - document.body.appendChild(container); -} +nodeFilter.appendChild(nodeInput); +container.appendChild(nodeFilter); + +container.appendChild(filterButton); + +document.body.appendChild(container); // Function to get the link for the get request -function getLink(startDate, endDate, node) { - return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + - "&dateEnd=" + endDate.toISOString() + - "&node=" + node; +function generateLink(dateStart, dateEnd, node) { + const baseUrl = 'http://145.92.8.114/getMeasurements'; + const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); + const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20'); + + link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}`; + + console.log(link); } +processor.makeGraph(); // Get request to fetch data from the server -function fetchData(link) { +function fetchData() { fetch(link) .then((response) => { if (!response.ok) { @@ -124,14 +130,10 @@ function fetchData(link) { return response.json(); }) .then((data) => { - createFilterContainer(); processor.update(data); - processor.makeGraph(); - processor.updateGraph(dateStart, dateEnd); + processor.updateGraph(); }) .catch((error) => { console.error("Error fetching data:", error); }); -} - -fetchData(); \ No newline at end of file +} \ No newline at end of file From 47a228123e2f0c51458be8745638838c578a9917 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Mon, 1 Apr 2024 13:17:15 +0200 Subject: [PATCH 42/62] moved files around --- .../Screen code/Screen-code-full/Screen-code.ino | 0 .../Adafruit_ST7796S_kbv-master.zip | Bin .../displayText.cpp | 0 .../displayText.h | 0 .../example.ino} | 0 .../headerFile.h | 0 6 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 arduino/Screen code/Screen-code-full/Screen-code.ino rename arduino/Screen code/{ => screen-code-class}/Adafruit_ST7796S_kbv-master.zip (100%) rename arduino/Screen code/{Screen-code-full => screen-code-class}/displayText.cpp (100%) rename arduino/Screen code/{Screen-code-full => screen-code-class}/displayText.h (100%) rename arduino/Screen code/{Screen-code-full/Screen-code-full.ino => screen-code-class/example.ino} (100%) rename arduino/Screen code/{Screen-code-full => screen-code-class}/headerFile.h (100%) diff --git a/arduino/Screen code/Screen-code-full/Screen-code.ino b/arduino/Screen code/Screen-code-full/Screen-code.ino new file mode 100644 index 0000000..e69de29 diff --git a/arduino/Screen code/Adafruit_ST7796S_kbv-master.zip b/arduino/Screen code/screen-code-class/Adafruit_ST7796S_kbv-master.zip similarity index 100% rename from arduino/Screen code/Adafruit_ST7796S_kbv-master.zip rename to arduino/Screen code/screen-code-class/Adafruit_ST7796S_kbv-master.zip diff --git a/arduino/Screen code/Screen-code-full/displayText.cpp b/arduino/Screen code/screen-code-class/displayText.cpp similarity index 100% rename from arduino/Screen code/Screen-code-full/displayText.cpp rename to arduino/Screen code/screen-code-class/displayText.cpp diff --git a/arduino/Screen code/Screen-code-full/displayText.h b/arduino/Screen code/screen-code-class/displayText.h similarity index 100% rename from arduino/Screen code/Screen-code-full/displayText.h rename to arduino/Screen code/screen-code-class/displayText.h diff --git a/arduino/Screen code/Screen-code-full/Screen-code-full.ino b/arduino/Screen code/screen-code-class/example.ino similarity index 100% rename from arduino/Screen code/Screen-code-full/Screen-code-full.ino rename to arduino/Screen code/screen-code-class/example.ino diff --git a/arduino/Screen code/Screen-code-full/headerFile.h b/arduino/Screen code/screen-code-class/headerFile.h similarity index 100% rename from arduino/Screen code/Screen-code-full/headerFile.h rename to arduino/Screen code/screen-code-class/headerFile.h From 9954d66af659cc4d76ae3ff5881ba36eddf5ad83 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:18:56 +0200 Subject: [PATCH 43/62] Refactor question creation and chart configuration --- web/newWebsite/questions-main.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 8bdaafc..010d6bf 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -13,15 +13,22 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; let questionOptionsDummy5 = ['no','yes', 'decently']; -const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1) -const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2) -const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3); -const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4); -const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5); + +let questionArray = []; +let questionOptionsDummy = []; +let dummydata = []; + +for (let i = 0; i < 5; i++) { + dummydata.push(dummydata1, dummydata2, dummydata3, dummydata4, dummydata5); + questionOptionsDummy.push(questionOptionsDummy1, questionOptionsDummy2, questionOptionsDummy3, questionOptionsDummy4, questionOptionsDummy5); + + questionArray.push(new QuestionCreationClass(dummydata[i], questionOptionsDummy[i])); +} + const chartConfig1 = { type: 'pie', - data: question1Data.questionData, + data: questionArray[0].questionData, options: { responsive: true, legend: { @@ -40,7 +47,7 @@ const chartConfig1 = { const chartConfig2 = { type: 'pie', - data: question2Data.questionData, + data: questionArray[1].questionData, options: { responsive: true, legend: { @@ -59,7 +66,7 @@ const chartConfig2 = { const chartConfig3 = { type: 'pie', - data: question3Data.questionData, + data: questionArray[2].questionData, options: { responsive: true, legend: { @@ -78,7 +85,7 @@ const chartConfig3 = { const chartConfig4 = { type: 'pie', - data: question4Data.questionData, + data: questionArray[3].questionData, options: { responsive: true, legend: { @@ -97,7 +104,7 @@ const chartConfig4 = { const chartConfig5 = { type: 'pie', - data: question5Data.questionData, + data: questionArray[4].questionData, options: { responsive: true, legend: { From 8ff9a4e9e409939c58cf0e7beee34b6b1e9c45a6 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:19:00 +0200 Subject: [PATCH 44/62] Fix updateGraph() method in DataProcessor class --- web/newWebsite/graph-classes.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 3e6e359..1889e51 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -67,7 +67,7 @@ class Graph { x: [this.timeArray], y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray], }; - + Plotly.update(this.id, update); } } @@ -140,10 +140,12 @@ class DataProcessor { } updateGraph() { - for (let i = 0; i < this.data.length; i++) { - this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); - console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); - this.graph.updateGraph(); + for (let i = 0; i < this.data.length; i + 3) { + for (let i = 0; i < 4; i++) { + this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); + console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); + this.graph.updateGraph(); + } } } } From 38722052f3075eea920c5fe3f586d76ac2daf2de Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 13:19:25 +0200 Subject: [PATCH 45/62] resizing the pie graphs. --- web/newWebsite/styles/questions-dashboard-styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index eba538a..48fdf87 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -50,8 +50,8 @@ } .chart-container { - width: 80%; - margin: 20px auto; + width: 400px; + margin: 50px auto; } canvas { margin-bottom: 20px; From c539bb2edf06ff4ae8f8986aad19a32e64eeb289 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:50:49 +0200 Subject: [PATCH 46/62] Fix graph update bug and optimize data processing --- web/newWebsite/graph-classes.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 1889e51..b3e222a 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -42,8 +42,7 @@ class Graph { } updateData(type, value, timestamp) { - this.timeArray.push(timestamp); - + // this.timeArray.push(timestamp); switch (type) { case "Temp": this.tempArray.push(value); @@ -67,7 +66,7 @@ class Graph { x: [this.timeArray], y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray], }; - + console.log(update); Plotly.update(this.id, update); } } @@ -140,12 +139,13 @@ class DataProcessor { } updateGraph() { - for (let i = 0; i < this.data.length; i + 3) { - for (let i = 0; i < 4; i++) { - this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); - console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); - this.graph.updateGraph(); + for (let i = 0; i < this.data.length; i++) { + if (i % 4 == 0){ + this.graph.timeArray.push(this.data[i].TimeStamp); } + this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); + console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp); } - } + this.graph.updateGraph(); + } } From 96d10b32fdeaeca9bfcdac527fe785621567c7d7 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 13:56:49 +0200 Subject: [PATCH 47/62] chart class, shortcuts, for loop update. --- web/newWebsite/questions-chart-class.js | 27 +++++ ...n-class.js => questions-creation-class.js} | 0 web/newWebsite/questions-dashboard.html | 3 +- web/newWebsite/questions-main.js | 109 ++---------------- 4 files changed, 40 insertions(+), 99 deletions(-) create mode 100644 web/newWebsite/questions-chart-class.js rename web/newWebsite/{questions-main-class.js => questions-creation-class.js} (100%) diff --git a/web/newWebsite/questions-chart-class.js b/web/newWebsite/questions-chart-class.js new file mode 100644 index 0000000..42467d9 --- /dev/null +++ b/web/newWebsite/questions-chart-class.js @@ -0,0 +1,27 @@ +class ChartConfigClass{ + constructor(data, text){ + this.data = data + this.text = text + } + + get chartConfig() { + return{ + type: 'pie', + data: this.data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: this.text + }, + animation: { + animateScale: true, + animateRotate: true + } + } + } + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-creation-class.js similarity index 100% rename from web/newWebsite/questions-main-class.js rename to web/newWebsite/questions-creation-class.js diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 46dad55..3594c6b 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -47,7 +47,8 @@ - + + \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 010d6bf..c9f996e 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -13,6 +13,8 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; let questionOptionsDummy5 = ['no','yes', 'decently']; +let chartConfigArray = []; +let textArray = []; let questionArray = []; let questionOptionsDummy = []; @@ -26,113 +28,24 @@ for (let i = 0; i < 5; i++) { } -const chartConfig1 = { - type: 'pie', - data: questionArray[0].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 1 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; +for (let i = 0; i < 5; i++){ + textArray.push('Question 1 Responses', 'Question 2 Responses', 'Question 3 Responses', 'Question 4 Responses', 'Question 5 Responses'); -const chartConfig2 = { - type: 'pie', - data: questionArray[1].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 2 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; - -const chartConfig3 = { - type: 'pie', - data: questionArray[2].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 3 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; - -const chartConfig4 = { - type: 'pie', - data: questionArray[3].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 4 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; - -const chartConfig5 = { - type: 'pie', - data: questionArray[4].questionData, - options: { - responsive: true, - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Question 5 Responses' - }, - animation: { - animateScale: true, - animateRotate: true - } - } -}; + chartConfigArray.push(new ChartConfigClass(questionArray[i].questionData, textArray[i])); +} // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); -const myChart1 = new Chart(ctx1, chartConfig1); +const myChart1 = new Chart(ctx1, chartConfigArray[0].chartConfig); const ctx2 = document.getElementById('chart2').getContext('2d'); -const myChart2 = new Chart(ctx2, chartConfig2); +const myChart2 = new Chart(ctx2, chartConfigArray[1].chartConfig); const ctx3 = document.getElementById('chart3').getContext('2d'); -const myChart3 = new Chart(ctx3, chartConfig3); +const myChart3 = new Chart(ctx3, chartConfigArray[2].chartConfig); const ctx4 = document.getElementById('chart4').getContext('2d'); -const myChart4 = new Chart(ctx4, chartConfig4); +const myChart4 = new Chart(ctx4, chartConfigArray[3].chartConfig); const ctx5 = document.getElementById('chart5').getContext('2d'); -const myChart5 = new Chart(ctx5, chartConfig5); +const myChart5 = new Chart(ctx5, chartConfigArray[4].chartConfig); From fdd4b647ec81cb59e8cf4729e2666492e206d24a Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:57:38 +0200 Subject: [PATCH 48/62] Update graph styles in CSS file --- web/newWebsite/styles/graph-styles.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index 70e4a11..370617f 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -50,7 +50,7 @@ body { border-radius: 10px; margin: 20px; padding: 20px; - width: 100%; + width: 90; box-sizing: border-box; } @@ -98,8 +98,7 @@ body { } .filter-button { - flex: 1; - width: 20%; + width: 10%; background-color: #007bff; color: white; padding: 10px; @@ -108,4 +107,10 @@ body { cursor: pointer; } +.js-plotly-plot { + align-self: center; + width: 95%; + height: 100%; + margin: 10px; +} /* Additional styling as needed */ From b0b1ed84c76c2a42b34cc41ee501d3b42502e029 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Mon, 1 Apr 2024 14:01:16 +0200 Subject: [PATCH 49/62] code comments added. --- web/newWebsite/questions-main.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index c9f996e..06bf47e 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,3 +1,4 @@ +//For now create dummy data to show on the website. let dummydata1 = [40, 30, 20]; let questionOptionsDummy1 = ['disgusting','clean', 'fine']; @@ -13,6 +14,7 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ]; let dummydata5 = [30, 20, 20]; let questionOptionsDummy5 = ['no','yes', 'decently']; +//make arrays to store data. let chartConfigArray = []; let textArray = []; @@ -20,6 +22,7 @@ let questionArray = []; let questionOptionsDummy = []; let dummydata = []; +//Go along the array's to fetch data, and push this in a class. for (let i = 0; i < 5; i++) { dummydata.push(dummydata1, dummydata2, dummydata3, dummydata4, dummydata5); questionOptionsDummy.push(questionOptionsDummy1, questionOptionsDummy2, questionOptionsDummy3, questionOptionsDummy4, questionOptionsDummy5); @@ -27,7 +30,7 @@ for (let i = 0; i < 5; i++) { questionArray.push(new QuestionCreationClass(dummydata[i], questionOptionsDummy[i])); } - +//Go allong another array to also give the class that creates the charts the data collected by the previous array. for (let i = 0; i < 5; i++){ textArray.push('Question 1 Responses', 'Question 2 Responses', 'Question 3 Responses', 'Question 4 Responses', 'Question 5 Responses'); From 650032fced8ba3f58a714856e28a6bf9e3660d5e Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 14:35:30 +0200 Subject: [PATCH 50/62] Refactor questions-dashboard.html and questions-dashboard-styles.css --- web/newWebsite/questions-dashboard.html | 15 +++++++++----- .../styles/questions-dashboard-styles.css | 20 +++++++++++++++---- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 3594c6b..5ce5f66 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -30,21 +30,26 @@
    +

    Question 1: How clean are the toilets?

    - +
    +

    Question 2: How clean is the study area?

    - +
    +

    Question 3: What do you think of the temperature in the study area?

    - +
    +

    Question 4: How crowded would you say the study area is?

    - +
    +

    Question 5: Is there enough help available on the 5th floor?

    - +
    diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 48fdf87..b336bc0 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -4,6 +4,7 @@ } body { + flex-direction: row; padding-top: 5vw; display: flex; background-color: #dbd7d7; @@ -42,16 +43,27 @@ } #data-container { - width: 80%; - margin: 0 auto; padding: 20px; background-color: #f5f5f5; border: 1px solid #ccc; } .chart-container { - width: 400px; - margin: 50px auto; + justify-content: center; + align-self: start; + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} + +.chart { + width: 30%; + margin: 20px; + padding: 20px; + background-color: #dbd7d7; + border: 3px solid #000; + border-radius: 30px; } canvas { margin-bottom: 20px; From 4ab7709c8203e2085ebb6bdbcef14845cfbc8f54 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 14:41:02 +0200 Subject: [PATCH 51/62] Refactor getData function and fix query bug --- server/Flask/main.py | 4 ++-- server/Flask/queries.py | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 349cf99..029b1e0 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -49,9 +49,9 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC, dateStart, dateEnd): +def getData(node, dataType, MAC, dateStart, dateEnd, type): mydb = loginDB() - query = get_query(node, dataType, MAC, False, False, dateStart, dateEnd) + query = get_query(node, dataType, MAC, dateStart, dateEnd, type) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 2257b79..8c6d004 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -1,12 +1,12 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): - if dateStart and dateEnd and node: + if dateStart and dateEnd and node and dataType: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node} AND Type IN {dataType} OR;''' + elif dateStart and dateEnd and node: query = f'''SELECT * FROM Measurement WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node};''' - elif dateStart and dateEnd: - query = f'''SELECT * - FROM Measurement - WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' elif node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" elif node: From c789aec3730b6ce2d0b62b133a79b3c38b1b0c03 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 14:41:30 +0200 Subject: [PATCH 52/62] Add dataTypes parameter to generateLink function --- web/newWebsite/graph-main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index e07f628..457fbce 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -110,12 +110,12 @@ container.appendChild(filterButton); document.body.appendChild(container); // Function to get the link for the get request -function generateLink(dateStart, dateEnd, node) { +function generateLink(dateStart, dateEnd, node, dataTypes) { const baseUrl = 'http://145.92.8.114/getMeasurements'; const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20'); - link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}`; + link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataTypes=${dataTypes}`; console.log(link); } From a53ecb1c96c4aa4844ffb8677ba09e0f42fa7234 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:09:17 +0200 Subject: [PATCH 53/62] yippee het werkt --- web/newWebsite/graph-classes.js | 6 ++++++ web/newWebsite/graph-main.js | 24 +++++++++++++++--------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index b3e222a..9700ab0 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -139,6 +139,12 @@ class DataProcessor { } updateGraph() { + this.graph.timeArray = []; + this.graph.tempArray = []; + this.graph.humiArray = []; + this.graph.eco2Array = []; + this.graph.tvocArray = []; + for (let i = 0; i < this.data.length; i++) { if (i % 4 == 0){ this.graph.timeArray.push(this.data[i].TimeStamp); diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 457fbce..3d10f42 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -24,10 +24,10 @@ container.setAttribute("class", "container"); const dataTypesContainer = document.createElement("div"); dataTypesContainer.setAttribute("class", "data-types"); -const temperatureCheckbox = createCheckBox("temperature", "Temperature"); -const humidityCheckbox = createCheckBox("humidity", "Humidity"); -const eco2Checkbox = createCheckBox("eco2", "eCO2"); -const tvocCheckbox = createCheckBox("tvoc", "TVOC"); +const temperatureCheckbox = createCheckBox("Temp", "Temperature"); +const humidityCheckbox = createCheckBox("Humi", "Humidity"); +const eco2Checkbox = createCheckBox("eCO2", "eCO2"); +const tvocCheckbox = createCheckBox("TVOC", "TVOC"); dataTypesContainer.appendChild(temperatureCheckbox.checkbox); dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); @@ -55,24 +55,30 @@ filterButton.addEventListener("click", () => { temperatureCheckbox, humidityCheckbox, eco2Checkbox, - tvocCheckbox, + tvocCheckbox ]; + checkboxes.forEach((checkbox) => { if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); + selectedFields.push(String(checkbox.checkbox.id)); } }); + let selectedFieldsString = selectedFields.map(String); + + let formattedString = '(' + selectedFieldsString.map(item => `'${item}'`).join(', ') + ')'; + const filteredData = [ startDate, endDate, selectedNodes, - selectedFields + formattedString ]; + console.log(filteredData); console.log(startDate, endDate, selectedNodes); - generateLink(startDate, endDate, selectedNodes); + generateLink(startDate, endDate, selectedNodes, formattedString); fetchData(); }); @@ -115,7 +121,7 @@ function generateLink(dateStart, dateEnd, node, dataTypes) { const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20'); - link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataTypes=${dataTypes}`; + link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}&dataType=${dataTypes}`; console.log(link); } From 5aa494773e064b94f5a1e8875586a353be034491 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:09:20 +0200 Subject: [PATCH 54/62] Refactor getData function and fix SQL query in queries.py --- server/Flask/main.py | 6 ++++-- server/Flask/queries.py | 11 ++++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 029b1e0..87168c9 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -1,6 +1,7 @@ from flask import Flask, request, jsonify import mysql.connector from queries import * +import ast app = Flask(__name__) @app.route('/getMeasurements') @@ -49,9 +50,10 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC, dateStart, dateEnd, type): +def getData(node, dataType, MAC, dateStart, dateEnd): + dataTypeTuple = ast.literal_eval(dataType) mydb = loginDB() - query = get_query(node, dataType, MAC, dateStart, dateEnd, type) + query = get_query(node, dataTypeTuple, MAC, dateStart, dateEnd) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 8c6d004..0211c8d 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -2,11 +2,15 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): if dateStart and dateEnd and node and dataType: query = f'''SELECT * FROM Measurement - WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node} AND Type IN {dataType} OR;''' + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node} AND Type IN ('{dataType}');''' elif dateStart and dateEnd and node: query = f'''SELECT * FROM Measurement WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node};''' + elif dateStart and dateEnd: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' elif node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" elif node: @@ -21,10 +25,7 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): query = f"SELECT * FROM Question" elif replies: query = f"SELECT * FROM Reply" - elif dateStart and dateEnd and node: - query = f'''SELECT * - FROM Measurement - WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' + else: query = "SELECT * FROM `Measurement`" return query From 267bb7db9cc019d9ed06b932ea4769bd2ead75b9 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:13:38 +0200 Subject: [PATCH 55/62] Refactor getData and getNodeInfo functions --- server/Flask/main.py | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/server/Flask/main.py b/server/Flask/main.py index 87168c9..9fb35a1 100644 --- a/server/Flask/main.py +++ b/server/Flask/main.py @@ -1,7 +1,6 @@ from flask import Flask, request, jsonify import mysql.connector from queries import * -import ast app = Flask(__name__) @app.route('/getMeasurements') @@ -50,10 +49,9 @@ def loginDB(): ) return mydb -def getData(node, dataType, MAC, dateStart, dateEnd): - dataTypeTuple = ast.literal_eval(dataType) +def getData(node, dataTypes, MAC, dateStart, dateEnd): mydb = loginDB() - query = get_query(node, dataTypeTuple, MAC, dateStart, dateEnd) + query = get_query(node, dataTypes, MAC, False, False, dateStart, dateEnd) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results @@ -64,7 +62,7 @@ def getData(node, dataType, MAC, dateStart, dateEnd): def getNodeInfo(macAdress): mydb = loginDB() - query = get_query(False, False, macAdress, False, False) + query = get_query(False, False, macAdress, False, False, False, False) cursor = mydb.cursor(dictionary=True) # Enable dictionary output cursor.execute(query) result = cursor.fetchall() # Fetch the results From 61d67fc1e295493ee525474fdbaa872ab735bb15 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 16:20:36 +0200 Subject: [PATCH 56/62] Update node input placeholder and adjust styles --- web/newWebsite/graph-main.js | 2 +- web/newWebsite/styles/settings-styles.css | 202 ++++++++++++++++++++++ 2 files changed, 203 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 3d10f42..cd9760a 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -104,7 +104,7 @@ nodeFilter.setAttribute("class", "node-filter"); const nodeInput = document.createElement("input"); nodeInput.setAttribute("type", "text"); -nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)"); +nodeInput.setAttribute("placeholder", "Enter Node Name (* for all)"); nodeInput.setAttribute("id", "node-input"); nodeInput.setAttribute("class", "input-field"); diff --git a/web/newWebsite/styles/settings-styles.css b/web/newWebsite/styles/settings-styles.css index e69de29..f00eca5 100644 --- a/web/newWebsite/styles/settings-styles.css +++ b/web/newWebsite/styles/settings-styles.css @@ -0,0 +1,202 @@ +* { + box-sizing: border-box; + font-family: "Roboto", sans-serif; + + +} + +body { + display: flex; + justify-content: center; + margin: 0; + margin-top: 8vh; + background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; + align-items: center; + +} + +.gaugeGroup { + width: 98vw; + height: auto; + 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; + clear: both; + margin-bottom: 10px; + position: relative; +} + +.groupTitle { + width: 100%; + text-align: center; + font-size: 24px; +} + +.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: 15%; + height: 110%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 10px; + border-radius: 10px; + text-align: center; + position: relative; + padding-top: 3vh; /* 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; + height: 5vh; + margin-bottom: 1vh; + +} + +.gaugeImage { + width: 100%; + height: auto; + max-height: 120%; + 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 { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; +} + +.gaugeText { + width: 100%; + text-align: center; + font-size: 1.4vw; + z-index: 2; + position: absolute; + top: -1.4vw; /* Adjust this value to move the text further down */ + +} + +.arrowimg { + width: 3vh; + height: auto; + max-height: 100%; + object-fit: contain; + position: absolute; + top: 0.5vw; + right: 1.2vw; + z-index: 2; +} + +.valueContainer { + display: flex; + justify-content: center; + margin-top: 10px; +} + +#valueText { + font-size: 20px; +} + +.needle { + position: absolute; + bottom: -10%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 100%; + background-color: black; + transform-origin: bottom; + z-index: 3; /* Make the needle display above the image */ + transition: transform 0.1s ease-out; + +} + +.contentContainer { + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + 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; +} + +.plotly-container { + width: 100%; + float: bottom; + padding: 1vw; + align-items: center; + justify-content: center; + display: flex; +} + +.js-plotly-plot { + width: 90%; + height: 100%; +} + +.disabled { + opacity: 0; + height: 0; + +} \ No newline at end of file From 7b8f98cb3c94b7fa9237fa6d34fff5a96049cd8e Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Mon, 1 Apr 2024 16:49:44 +0200 Subject: [PATCH 57/62] Fully functioning screen code --- .../Screen-code-final/.theia/launch.json | 7 ++ .../Screen-code-final/Screen-code-final.ino | 115 ++++++++++++++++++ .../Screen-code-final/displayText.cpp | 106 ++++++++++++++++ .../Screen-code-final/displayText.h | 19 +++ .../Screen-code-final/headerFile.h | 22 ++++ .../Screen-code-full/Screen-code.ino | 0 6 files changed, 269 insertions(+) create mode 100644 arduino/Screen code/Screen-code-final/.theia/launch.json create mode 100644 arduino/Screen code/Screen-code-final/Screen-code-final.ino create mode 100644 arduino/Screen code/Screen-code-final/displayText.cpp create mode 100644 arduino/Screen code/Screen-code-final/displayText.h create mode 100644 arduino/Screen code/Screen-code-final/headerFile.h delete mode 100644 arduino/Screen code/Screen-code-full/Screen-code.ino diff --git a/arduino/Screen code/Screen-code-final/.theia/launch.json b/arduino/Screen code/Screen-code-final/.theia/launch.json new file mode 100644 index 0000000..8b8a0d4 --- /dev/null +++ b/arduino/Screen code/Screen-code-final/.theia/launch.json @@ -0,0 +1,7 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + "version": "0.2.0", + "configurations": [ + ] +} diff --git a/arduino/Screen code/Screen-code-final/Screen-code-final.ino b/arduino/Screen code/Screen-code-final/Screen-code-final.ino new file mode 100644 index 0000000..0f965ba --- /dev/null +++ b/arduino/Screen code/Screen-code-final/Screen-code-final.ino @@ -0,0 +1,115 @@ +#include "headerFile.h" + +int i = 0; +int questionID = 1; +char* Question[] = { + "How clean are the toilets?", + "How clean is the study area?", + "What do you think of the temperature in the study area?", + "How crowded would you say the study area is?", + "Is there enough help available?" +}; + +char* Answer[] = { + "clean, normal, disgusting", + "clean, normal, disgusting", + "hot, perfect, cold", + "not at all, its fine, really crowded", + "no, decently, yes" +}; + + Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, MOSI, SCK, TFT_RST, MISO); + DisplayText displayText(tft); + +void setup() { + //buttonpins + pinMode(16, INPUT_PULLDOWN); + pinMode(17, INPUT_PULLDOWN); + pinMode(18, INPUT_PULLDOWN); + Serial.begin(9600); + + tft.begin(); // Initialize the display + tft.setRotation(3); // Set the rotation to horizontal + tft.fillScreen(ST7796S_BLACK); + displayText.writeText("Loading...", 3, 0, 200, 0, true, true); + websocketSetup(); +} + + +void loop() { + webSocket.loop(); + screenButtonHandler(); +} + +void websocketSetup(){ + WiFiMulti.addAP("iotroam", "vbK9gbDBIB"); + WiFiMulti.addAP("ObsidianAmstelveen", "drijversstraatmaastricht"); + + while(WiFiMulti.run() != WL_CONNECTED) { + delay(100); + } + + // server address, port and URL + webSocket.begin("145.92.8.114", 80, "/ws"); + // try ever 500 again if connection has failed + webSocket.setReconnectInterval(500); +} + +void screenButtonHandler(){ + + int redButton = digitalRead(16); + int whiteButton = digitalRead(17); + int greenButton = digitalRead(18); + + if (initialized) { + initialized = false; + tft.fillScreen(ST7796S_BLACK); + displayText.writeText(Question[i], 3, 0, 0, 0, true, false); + displayText.writeText(Answer[i], 3, 0, 200, 0, true, true); + } + + if (redButton == HIGH){ + sendData(questionID, "0"); + } + if (whiteButton == HIGH){ + sendData(questionID, "1"); + } + if (greenButton == HIGH){ + sendData(questionID, "2"); + } + + + + if (redButton || whiteButton || greenButton) { + i++; + questionID++; + if (questionID == 6){ + questionID = 1; + } + if (i == 5) { + i = 0; + } + tft.fillScreen(ST7796S_BLACK); + displayText.writeText(Question[i], 3, 0, 0, 0, true, false); + displayText.writeText(Answer[i], 3, 0, 200, 0, true, true); + } + +} + +void sendData(int question, String answer){ + webSocket.sendTXT("{\"node\": \"" + String(WiFi.macAddress()) + "\", \"Response\":\"" + String(answer) + "\",\"QuestionID\":\"" + String(question) + "\"}"); +} + +void hexdump(const void *mem, uint32_t len, uint8_t cols = 16) { + const uint8_t* src = (const uint8_t*) mem; + USE_SERIAL.printf("\n[HEXDUMP] Address: 0x%08X len: 0x%X (%d)", (ptrdiff_t)src, len, len); + for(uint32_t i = 0; i < len; i++) { + if(i % cols == 0) { + USE_SERIAL.printf("\n[0x%08X] 0x%08X: ", (ptrdiff_t)src, i); + } + USE_SERIAL.printf("%02X ", *src); + src++; + } + USE_SERIAL.printf("\n"); +} + diff --git a/arduino/Screen code/Screen-code-final/displayText.cpp b/arduino/Screen code/Screen-code-final/displayText.cpp new file mode 100644 index 0000000..88dfd70 --- /dev/null +++ b/arduino/Screen code/Screen-code-final/displayText.cpp @@ -0,0 +1,106 @@ +#include "displayText.h" +#include "Arduino.h" + +//constructor +DisplayText::DisplayText(Adafruit_ST7796S_kbv& tftDisplay) : tft(tftDisplay) { + tft.setCursor(0,0); + tft.fillScreen(ST7796S_BLACK); +} +//display text public function +void DisplayText::writeText(char* text, int size, int posX, int posY, int screenTime, bool center, bool bottom) { + if (center) { + posX = centerText(text); + } + // if (bottom) { + // posY = bottomText(text); + // } + tft.setCursor(posX, posY); + tft.setTextSize(size); + printWordsFull(text, bottom); + delay(screenTime); +} + +//to center the text when enabled in the public function +int DisplayText::centerText(char* text) { + int16_t x1, y1; + uint16_t w, h; + tft.getTextBounds(text, 0, 0, &x1, &y1, &w, &h); + int x = (tft.width() - w) / 2; + return x; +} + +// //to display the text at the bottom when enabled in the public function +// int DisplayText::bottomText(char* text) { +// int16_t x1, y1; +// uint16_t w, h; +// tft.getTextBounds(text, 0, 0, &x1, &y1, &w, &h); +// int y = (tft.height() - h); +// return y; +// } + +//attempt to write the text out in full (wip) +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; + + // 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(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 + + // 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 { + strcat(line, word); + strcat(line, " "); + lineWidth += w; + } + + word = strtok_r(NULL, " ", &saveptr1); + } + + // print the last line + 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-final/displayText.h b/arduino/Screen code/Screen-code-final/displayText.h new file mode 100644 index 0000000..9888068 --- /dev/null +++ b/arduino/Screen code/Screen-code-final/displayText.h @@ -0,0 +1,19 @@ +#ifndef DISPLAYTEXT_H +#define DISPLAYTEXT_H + +#include "Adafruit_GFX.h" +#include "Adafruit_ST7796S_kbv.h" + +class DisplayText { + private: + Adafruit_ST7796S_kbv& tft; + int centerText(char* text); + // int bottomText(char* text); + void printWordsFull(char* text, bool bottom); + + public: + DisplayText(Adafruit_ST7796S_kbv& tftDisplay); + void writeText(char* text, int size, int posX, int posY, int screenTime, bool center, bool bottom); +}; + +#endif \ No newline at end of file diff --git a/arduino/Screen code/Screen-code-final/headerFile.h b/arduino/Screen code/Screen-code-final/headerFile.h new file mode 100644 index 0000000..4f1152e --- /dev/null +++ b/arduino/Screen code/Screen-code-final/headerFile.h @@ -0,0 +1,22 @@ +//screen stuff +#include +#include "Adafruit_GFX.h" +#include "Adafruit_ST7796S_kbv.h" +#include "displayText.h" + +#define TFT_CS 14 +#define TFT_DC 13 +#define TFT_RST 12 +#define MOSI 11 +#define SCK 10 +#define MISO 9 + +//websocket stuff +#include +#include +#include +#define USE_SERIAL Serial + +WiFiMulti WiFiMulti; +WebSocketsClient webSocket; +bool initialized = true; \ No newline at end of file diff --git a/arduino/Screen code/Screen-code-full/Screen-code.ino b/arduino/Screen code/Screen-code-full/Screen-code.ino deleted file mode 100644 index e69de29..0000000 From a1ceb2d2c1b29044d6dbe52690d92ebf67b35982 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Tue, 2 Apr 2024 11:22:44 +0200 Subject: [PATCH 58/62] copying classes python to document --- server/data.py | 73 ++++------------------------------ server/databaseGeneralClass.py | 26 ++++++++++++ server/enqueteNodeClass.py | 35 ++++++++++++++++ server/sensorNodeClass.py | 41 +++++++++++++++++++ 4 files changed, 110 insertions(+), 65 deletions(-) create mode 100644 server/databaseGeneralClass.py create mode 100644 server/enqueteNodeClass.py create mode 100644 server/sensorNodeClass.py diff --git a/server/data.py b/server/data.py index 3157c8a..d5865f9 100644 --- a/server/data.py +++ b/server/data.py @@ -1,64 +1,19 @@ import asyncio import websockets -import mysql.connector import json +from class_SensorNode import SensorNode +from class_enqueteNode import EnqueteNode +from classes_data import dbLogin sensorNodeArray = [] enqueteNodeArray = [] -async def processSensorNodeData(data, nodeID): - try: - mydb = dbLogin() - cursor = mydb.cursor() - - query = "INSERT INTO `Measurement` (NodeID, Type, Value) VALUES (%s, %s, %s)" - processedData = json.loads(data) - - processedTemp = (processedData['Temp']) - processedHumi = (processedData['Humi']) - processedeCO2 = (processedData['eCO2']) - processedTVOC = (processedData['TVOC']) - processedMAC = (processedData['node']) - - pushingDataArray = [(nodeID, "Temp", processedTemp), (nodeID, "Humi", processedHumi), (nodeID, "eCO2", processedeCO2), (nodeID, "TVOC", processedTVOC)] - for i in pushingDataArray: - print(query ,i) - cursor.execute(query, i) - mydb.commit() - - except mysql.connector.Error as err: - print("MySQL Error:", err) - finally: - cursor.close() - mydb.close() - -async def processEnqueteNodeData(data, nodeID): - try: - mydb = dbLogin() - cursor = mydb.cursor() - - query = "INSERT INTO `Reply` (Result, Node_NodeID, Question_QuestionID) VALUES (%s, %s, %s)" - processedData = json.loads(data) - - processedQuestionID = (processedData['QuestionID']) - processedResponse = (processedData['Response']) - - pushingDataArray = [(processedResponse, nodeID, processedQuestionID)] - - for i in pushingDataArray: - cursor.execute(query, i) - mydb.commit() - except mysql.connector.Error as err: - print("MySQL Error:", err) - finally: - cursor.close() - mydb.close() - async def receive_data(): uri = "ws://145.92.8.114/ws" try: async with websockets.connect(uri) as websocket: while True: + print("true") data = await websocket.recv() print(f"Received data: {data}") @@ -73,14 +28,13 @@ async def receive_data(): await getNodeInfo('sensor') await getNodeInfo('enquete') - print(sensorNodeArray) if macAdress in sensorNodeArray: nodeID = await getNodeID(macAdress) - await processSensorNodeData(data, nodeID) + await SensorNode.processSensorNodeData(data, nodeID) elif macAdress in enqueteNodeArray: nodeID = await getNodeID(macAdress) - await processEnqueteNodeData(data, nodeID) + await EnqueteNode.processEnqueteNodeData(data, nodeID) else: await newNode(macAdress, type) except websockets.ConnectionClosedError as e: @@ -89,17 +43,8 @@ async def receive_data(): async def main(): await receive_data() -def dbLogin(): - mydb = mysql.connector.connect( - host="localhost", - user="root", - password="Dingleberries69!", - database="NodeData" - ) - - return mydb - async def getNodeInfo(type): + print("getNodeINfo") global sensorNodeArray global enqueteNodeArray @@ -114,14 +59,12 @@ async def getNodeInfo(type): for tuples in nodeInfo: for item in tuples: nodeInfoArray.append(item) - print(nodeInfoArray) cursor.close() mydb.close() if type == 'sensor': sensorNodeArray = nodeInfoArray - print(sensorNodeArray) return sensorNodeArray elif type == 'enquete': @@ -143,7 +86,7 @@ async def getNodeID(macAdress): return nodeID async def newNode(mac, type): - id = (mac, type,) + id = (mac, type) mydb = dbLogin() cursor = mydb.cursor() diff --git a/server/databaseGeneralClass.py b/server/databaseGeneralClass.py new file mode 100644 index 0000000..e3c6407 --- /dev/null +++ b/server/databaseGeneralClass.py @@ -0,0 +1,26 @@ +import mysql.connector + +def dbLogin(): + mydb = mysql.connector.connect( + host="localhost", + user="root", + password="Dingleberries69!", + database="NodeData" + ) + return mydb + +class Node(): + def __init__(self, macAdress): + self.macAdress = macAdress + self.id = None + + def getNodeId(self): + id = (self.macAdress,) + mydb = dbLogin() + cursor = mydb.cursor() + cursor.execute("""SELECT nodeID FROM Node WHERE MAC = %s""", id) + data = cursor.fetchall() + + for tuples in data: + for item in tuples: + self.id = item \ No newline at end of file diff --git a/server/enqueteNodeClass.py b/server/enqueteNodeClass.py new file mode 100644 index 0000000..f1243bf --- /dev/null +++ b/server/enqueteNodeClass.py @@ -0,0 +1,35 @@ +import mysql.connector +import json + +from classes_data import Node +from classes_data import dbLogin + +class EnqueteNode(Node): + query = "INSERT INTO `Reply` (Result, Node_NodeID, Question_QuestionID) VALUES (%s, %s, %s)" + + def __init__(self, macAdress, response, questionID): + super().__init__(macAdress) + self.response = response + self.questionID = questionID + + async def processEnqueteNodeData(data, nodeID): + try: + mydb = dbLogin() + cursor = mydb.cursor() + + processedData = json.loads(data) + + EnqueteNode.questionID = (processedData['QuestionID']) + EnqueteNode.response = (processedData['Response']) + + pushingDataArray = [(EnqueteNode.questionID, nodeID, EnqueteNode.response)] + + for i in pushingDataArray: + print(EnqueteNode.query, i) + cursor.execute(EnqueteNode.query, i) + mydb.commit() + except mysql.connector.Error as err: + print("MySQL Error:", err) + finally: + cursor.close() + mydb.close() \ No newline at end of file diff --git a/server/sensorNodeClass.py b/server/sensorNodeClass.py new file mode 100644 index 0000000..c3cb90d --- /dev/null +++ b/server/sensorNodeClass.py @@ -0,0 +1,41 @@ +import mysql.connector +import json + +from classes_data import Node +from classes_data import dbLogin + +class SensorNode(Node): + query = "INSERT INTO `Measurement` (NodeID, Type, Value) VALUES (%s, %s, %s)" + + def __init__(self, macAdress, temp, humi, eCO2, TVOC): + super().__init__(macAdress) + self.temperature = temp + self.humidity = humi + self.eCO2 = eCO2 + self.TVOC = TVOC + + async def processSensorNodeData(data, nodeID): + try: + mydb = dbLogin() + cursor = mydb.cursor() + + processedData = json.loads(data) + + SensorNode.temperature = (processedData['Temp']) + SensorNode.humidity = (processedData['Humi']) + SensorNode.eCO2 = (processedData['eCO2']) + SensorNode.TVOC = (processedData['TVOC']) + + + + pushingDataArray = [(nodeID, "Temp", SensorNode.temperature), (nodeID, "Humi", SensorNode.humidity), (nodeID, "eCO2", SensorNode.eCO2), (nodeID, "TVOC", SensorNode.TVOC)] + for i in pushingDataArray: + cursor.execute(SensorNode.query, i) + mydb.commit() + + + except mysql.connector.Error as err: + print("MySQL Error:", err) + finally: + cursor.close() + mydb.close() \ No newline at end of file From cac09770351150f568953a6e297c5dc9bd3d495b Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Tue, 2 Apr 2024 11:43:29 +0200 Subject: [PATCH 59/62] Add query to select all nodes when MAC is "*" and update background color in dashboard styles --- server/Flask/queries.py | 2 ++ web/newWebsite/styles/dashboard-styles.css | 7 ++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 0211c8d..c423711 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -13,6 +13,8 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' elif node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" + elif MAC == "*": + query = "SELECT * FROM Node" elif node: query = f"SELECT * FROM Measurement WHERE NodeID = {node}" elif dataType: diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index f00eca5..50eeefe 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -12,22 +12,23 @@ body { margin-top: 8vh; background-color: #f0f0f0; flex-direction: column; - background-color: #afafaf; + background-color: #fff; align-items: center; } .gaugeGroup { + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); width: 98vw; height: auto; display: flex; flex-direction: column; /* Keep as column */ justify-content: flex-start; - background-color: #333; + background-color: #d3d3d3; color: #fff; padding: 10px; border-radius: 50px; - border: 2px solid #333; + /* border: 2px solid #333; */ clear: both; margin-bottom: 10px; position: relative; From 30d8543ff432aa1855dccbd58620575821356a62 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Tue, 2 Apr 2024 11:45:13 +0200 Subject: [PATCH 60/62] Update dashboard styles --- web/newWebsite/styles/dashboard-styles.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 50eeefe..f00eca5 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -12,23 +12,22 @@ body { margin-top: 8vh; background-color: #f0f0f0; flex-direction: column; - background-color: #fff; + background-color: #afafaf; align-items: center; } .gaugeGroup { - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); width: 98vw; height: auto; display: flex; flex-direction: column; /* Keep as column */ justify-content: flex-start; - background-color: #d3d3d3; + background-color: #333; color: #fff; padding: 10px; border-radius: 50px; - /* border: 2px solid #333; */ + border: 2px solid #333; clear: both; margin-bottom: 10px; position: relative; From 6fb54d0b071274619e5aaf6daff0b64f6e1af98b Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Tue, 2 Apr 2024 11:49:29 +0200 Subject: [PATCH 61/62] websocket, database, file made. --- server/{ => web-data-connection}/data.py | 0 server/{ => web-data-connection}/databaseGeneralClass.py | 0 server/{ => web-data-connection}/enqueteNodeClass.py | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename server/{ => web-data-connection}/data.py (100%) rename server/{ => web-data-connection}/databaseGeneralClass.py (100%) rename server/{ => web-data-connection}/enqueteNodeClass.py (100%) diff --git a/server/data.py b/server/web-data-connection/data.py similarity index 100% rename from server/data.py rename to server/web-data-connection/data.py diff --git a/server/databaseGeneralClass.py b/server/web-data-connection/databaseGeneralClass.py similarity index 100% rename from server/databaseGeneralClass.py rename to server/web-data-connection/databaseGeneralClass.py diff --git a/server/enqueteNodeClass.py b/server/web-data-connection/enqueteNodeClass.py similarity index 100% rename from server/enqueteNodeClass.py rename to server/web-data-connection/enqueteNodeClass.py From f044891ed87c06dbecb4034b3f0e5e981032fb47 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Tue, 2 Apr 2024 11:49:51 +0200 Subject: [PATCH 62/62] little update, no changes --- server/{ => web-data-connection}/sensorNodeClass.py | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename server/{ => web-data-connection}/sensorNodeClass.py (100%) diff --git a/server/sensorNodeClass.py b/server/web-data-connection/sensorNodeClass.py similarity index 100% rename from server/sensorNodeClass.py rename to server/web-data-connection/sensorNodeClass.py