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 diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index d5bce51..1889e51 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); } @@ -144,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(); + } } } } 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 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: { 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;