Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

Browse Source
This commit is contained in:
Sam Hos
2024-04-01 13:17:19 +02:00
parent 47a228123e 6f56b9d628
commit 2808e2e55f
7 changed files with 201 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/brainstorm/Questions Enquete.md
View File

@@ -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). - How clean is the study area? (clean, normal, disgusting).
- What do you think of the temperature in the study area? (hot, perfect, cold). - 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). - 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 ### Feedback questions

18
web/newWebsite/graph-classes.js
View File

@@ -52,10 +52,10 @@ class Graph {
this.humiArray.push(value); this.humiArray.push(value);
break; break;
case "eCO2": case "eCO2":
this.eco2Array.push(value); this.eco2Array.push(value / 10);
break; break;
case "TVOC": case "TVOC":
this.tvocArray.push(value); this.tvocArray.push(value / 10);
break; break;
default: default:
console.error("Invalid type"); console.error("Invalid type");
@@ -64,16 +64,11 @@ class Graph {
updateGraph() { updateGraph() {
let update = { let update = {
x: [[this.timeArray]], x: [this.timeArray],
y: [ y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray],
[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 { class DataProcessor {
constructor(data) { constructor(data) {
this.data = data; this.data = data;
this.graph;
} }
// You can add more filtering methods based on different criteria if needed // You can add more filtering methods based on different criteria if needed
update(data) { update(data) {
this.data = data; this.data = data;
this.graph;
console.log("Data updated"); console.log("Data updated");
console.log(data); console.log(data);
} }

132
web/newWebsite/graph-main.js
View File

@@ -1,6 +1,7 @@
// Sample data - you can replace this with your actual dataset // Sample data - you can replace this with your actual dataset
const data = []; const data = [];
processor = new DataProcessor(); processor = new DataProcessor();
let link;
// Function to create checkbox with label // Function to create checkbox with label
function createCheckBox(id, label) { function createCheckBox(id, label) {
@@ -16,36 +17,34 @@ function createCheckBox(id, label) {
return { checkbox, checkboxLabel }; return { checkbox, checkboxLabel };
} }
// Function to ceate filter container and all the input elements // Create HTML input elements for user input
function createFilterContainer() { const container = document.createElement("div");
// Create HTML input elements for user input container.setAttribute("class", "container");
const container = document.createElement("div");
container.setAttribute("class", "container");
const dataTypesContainer = document.createElement("div"); const dataTypesContainer = document.createElement("div");
dataTypesContainer.setAttribute("class", "data-types"); dataTypesContainer.setAttribute("class", "data-types");
const temperatureCheckbox = createCheckBox("temperature", "Temperature"); const temperatureCheckbox = createCheckBox("temperature", "Temperature");
const humidityCheckbox = createCheckBox("humidity", "Humidity"); const humidityCheckbox = createCheckBox("humidity", "Humidity");
const eco2Checkbox = createCheckBox("eco2", "eCO2"); const eco2Checkbox = createCheckBox("eco2", "eCO2");
const tvocCheckbox = createCheckBox("tvoc", "TVOC"); const tvocCheckbox = createCheckBox("tvoc", "TVOC");
dataTypesContainer.appendChild(temperatureCheckbox.checkbox); dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
dataTypesContainer.appendChild(humidityCheckbox.checkbox); dataTypesContainer.appendChild(humidityCheckbox.checkbox);
dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
dataTypesContainer.appendChild(eco2Checkbox.checkbox); dataTypesContainer.appendChild(eco2Checkbox.checkbox);
dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
dataTypesContainer.appendChild(tvocCheckbox.checkbox); dataTypesContainer.appendChild(tvocCheckbox.checkbox);
dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
container.appendChild(dataTypesContainer); container.appendChild(dataTypesContainer);
const filterButton = document.createElement("button"); const filterButton = document.createElement("button");
filterButton.textContent = "Filter Data"; filterButton.textContent = "Filter Data";
filterButton.setAttribute("class", "filter-button"); filterButton.setAttribute("class", "filter-button");
filterButton.addEventListener("click", () => { filterButton.addEventListener("click", () => {
const startDate = new Date(document.getElementById("start-date").value); const startDate = document.getElementById("start-date").value
const endDate = new Date(document.getElementById("end-date").value); const endDate = document.getElementById("end-date").value
const selectedNodes = document const selectedNodes = document
.getElementById("node-input") .getElementById("node-input")
.value.split(",") .value.split(",")
@@ -64,58 +63,65 @@ function createFilterContainer() {
} }
}); });
const filteredData = filterData( const filteredData = [
data,
startDate, startDate,
endDate, endDate,
selectedNodes, selectedNodes,
selectedFields selectedFields
); ];
console.log(filteredData); console.log(filteredData);
}); console.log(startDate, endDate, selectedNodes);
const dateFilter = document.createElement("div"); generateLink(startDate, endDate, selectedNodes);
dateFilter.setAttribute("class", "date-filter"); fetchData();
});
const startDateInput = document.createElement("input"); const dateFilter = document.createElement("div");
startDateInput.setAttribute("type", "datetime-local"); dateFilter.setAttribute("class", "date-filter");
startDateInput.setAttribute("id", "start-date");
startDateInput.setAttribute("class", "input-field");
const endDateInput = document.createElement("input"); const startDateInput = document.createElement("input");
endDateInput.setAttribute("type", "datetime-local"); startDateInput.setAttribute("type", "datetime-local");
endDateInput.setAttribute("id", "end-date"); startDateInput.setAttribute("id", "start-date");
endDateInput.setAttribute("class", "input-field"); startDateInput.setAttribute("class", "input-field");
dateFilter.appendChild(startDateInput); const endDateInput = document.createElement("input");
dateFilter.appendChild(endDateInput); endDateInput.setAttribute("type", "datetime-local");
container.appendChild(dateFilter); endDateInput.setAttribute("id", "end-date");
endDateInput.setAttribute("class", "input-field");
const nodeFilter = document.createElement("div"); dateFilter.appendChild(startDateInput);
nodeFilter.setAttribute("class", "node-filter"); dateFilter.appendChild(endDateInput);
container.appendChild(dateFilter);
const nodeInput = document.createElement("input"); const nodeFilter = document.createElement("div");
nodeInput.setAttribute("type", "text"); nodeFilter.setAttribute("class", "node-filter");
nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
nodeInput.setAttribute("id", "node-input");
nodeInput.setAttribute("class", "input-field");
nodeFilter.appendChild(nodeInput); const nodeInput = document.createElement("input");
container.appendChild(nodeFilter); nodeInput.setAttribute("type", "text");
nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
nodeInput.setAttribute("id", "node-input");
nodeInput.setAttribute("class", "input-field");
container.appendChild(filterButton); nodeFilter.appendChild(nodeInput);
container.appendChild(nodeFilter);
document.body.appendChild(container); container.appendChild(filterButton);
}
document.body.appendChild(container);
// Function to get the link for the get request // Function to get the link for the get request
function getLink(startDate, endDate, node) { function generateLink(dateStart, dateEnd, node) {
return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + const baseUrl = 'http://145.92.8.114/getMeasurements';
"&dateEnd=" + endDate.toISOString() + const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20');
"&node=" + node; 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 // Get request to fetch data from the server
function fetchData(link) { function fetchData() {
fetch(link) fetch(link)
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
@@ -124,14 +130,10 @@ function fetchData(link) {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
createFilterContainer();
processor.update(data); processor.update(data);
processor.makeGraph(); processor.updateGraph();
processor.updateGraph(dateStart, dateEnd);
}) })
.catch((error) => { .catch((error) => {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
}); });
} }
fetchData();

15
web/newWebsite/questions-dashboard.html
View File

@@ -30,19 +30,24 @@
<body> <body>
<div class="chart-container"> <div class="chart-container">
<h2>Question 1</h2> <h2>Question 1: How clean are the toilets?</h2>
<canvas id="chart1"></canvas> <canvas id="chart1"></canvas>
<h2>Question 2</h2> <h2>Question 2: How clean is the study area?</h2>
<canvas id="chart2"></canvas> <canvas id="chart2"></canvas>
<h2>Question 3</h2> <h2>Question 3: What do you think of the temperature in the study area?</h2>
<canvas id="chart3"></canvas> <canvas id="chart3"></canvas>
<h2>Question 4: How crowded would you say the study area is?</h2>
<canvas id="chart4"></canvas>
<h2>Question 5: Is there enough help available on the 5th floor?</h2>
<canvas id="chart5"></canvas>
<!-- Add more questions and canvas elements as needed --> <!-- Add more questions and canvas elements as needed -->
</div> </div>
<script src="questions-main.js"></script>
<script src="questions-main-class.js"></script> <script src="questions-main-class.js"></script>
<script src="questions-main.js"></script>
</body> </body>
</html> </html>

52
web/newWebsite/questions-main-class.js
View File

@@ -1,27 +1,27 @@
// class QuestionCreationClass { class QuestionCreationClass {
// constructor(data, label) { constructor(data, label) {
// this.data = data; this.data = data;
// this.label = label; this.label = label;
// } }
// get questionData() { get questionData() {
// return { return {
// labels: this.label, labels: this.label,
// datasets: [{ datasets: [{
// label: 'Responses', label: 'Responses',
// data: this.data, data: this.data,
// backgroundColor: [ backgroundColor: [
// 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
// 'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
// 'rgba(255, 206, 86, 0.2)' 'rgba(255, 206, 86, 0.2)'
// ], ],
// borderColor: [ borderColor: [
// 'rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)',
// 'rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 1)',
// 'rgba(255, 206, 86, 1)' 'rgba(255, 206, 86, 1)'
// ], ],
// borderWidth: 1 borderWidth: 1
// }] }]
// }; };
// } }
// } }

128
web/newWebsite/questions-main.js
View File

@@ -1,78 +1,27 @@
class QuestionCreationClass { let dummydata1 = [40, 30, 20];
constructor(data, label) { let questionOptionsDummy1 = ['disgusting','clean', 'fine'];
this.data = data;
this.label = label;
}
get questionData() { let dummydata2 = [25, 35, 40];
return { let questionOptionsDummy2 = ['disgusting', 'clean', 'normal'];
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 = { let dummydata3 = [30, 20, 20];
labels: ['Option A', 'Option B', 'Option C'], let questionOptionsDummy3 = ['cold', 'perfect', 'hot'];
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 dummydata = [30, 20, 20]; let dummydata4 = [30, 20, 20];
let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ];
const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); let dummydata5 = [30, 20, 20];
let questionOptionsDummy5 = ['no','yes', 'decently'];
const question2Data = { const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1)
labels: ['Option A', 'Option B', 'Option C'], const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2)
datasets: [{ const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3);
label: 'Responses', const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4);
data: [25, 35, 40], const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5);
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 = { const chartConfig1 = {
type: 'pie', type: 'pie',
data: question1Data, data: question1Data.questionData,
options: { options: {
responsive: true, responsive: true,
legend: { legend: {
@@ -91,7 +40,7 @@ const chartConfig1 = {
const chartConfig2 = { const chartConfig2 = {
type: 'pie', type: 'pie',
data: question2Data, data: question2Data.questionData,
options: { options: {
responsive: true, responsive: true,
legend: { 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 // Create the charts
const ctx1 = document.getElementById('chart1').getContext('2d'); const ctx1 = document.getElementById('chart1').getContext('2d');
const myChart1 = new Chart(ctx1, chartConfig1); const myChart1 = new Chart(ctx1, chartConfig1);
@@ -137,3 +124,8 @@ const myChart2 = new Chart(ctx2, chartConfig2);
const ctx3 = document.getElementById('chart3').getContext('2d'); const ctx3 = document.getElementById('chart3').getContext('2d');
const myChart3 = new Chart(ctx3, chartConfig3); 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);

12
web/newWebsite/styles/dashboard-styles.css
View File

@@ -182,17 +182,19 @@ body {
} }
.plotly-container { .plotly-container {
width: 100%;
float: bottom; float: bottom;
margin: auto;
padding: 1vw; padding: 1vw;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex; display: flex;
width: 20vw;
} }
*
.js-plotly-plot {
width: 90%;
height: 100%;
}
.disabled { .disabled {
opacity: 0; opacity: 0;
height: 0; height: 0;